/* ============================================================
   CLICMURAL — Piel "Líneas final" · BASE COMPARTIDA (v26.44, sep-26)
   La cargan los TRES paneles (maestro.html, panel.html, negocio.html)
   ANTES de su piel propia (maestro-skin.css / panel-skin.css /
   negocio-skin.css). Sobreescribe vivowall.css SIN tocar lógica ni markup.
   v26.49: también la cargan cabina.html y dj.html, antes de operador-skin.css.
   v26.50: y guia.html y descarga.html, antes de publico-skin.css.
   Sistema: fondo #141418 · superficie #1A1A23 · bordes neutros ·
   morado = acción (UN botón sólido por pantalla) · cian = detalle ·
   ámbar = atención · verde = OK/WhatsApp · coral = destructivo.
   Ver ClicMural-Sistema-Diseno.html en la raíz del proyecto.
   Historia: nació como maestro-skin.css (6.18, v26.42→v26.43.1); en la
   6.19 se separó lo común aquí para que los tres paneles compartan tokens,
   botones, superficies, chips, iconos y la barra lateral.
   ============================================================ */
:root {
  --vw-bg: #141418; --vw-bg-2: #1A1A23; --vw-card: #1A1A23; --vw-card-2: #20202B;
  --vw-border: rgba(255,255,255,.08); --vw-border-2: rgba(255,255,255,.14);
  --vw-text: #F2F2F5; --vw-muted: #8E8E9C; --vw-dim: #5E5E70;
  --vw-violet: #7C3AED; --vw-violet-t: #A78BFA; --vw-cyan: #22D3EE; --vw-amber: #F5C451;
  --vw-coral: #FF4D6D; --vw-ok: #34D399;
  --vw-radius: 10px;
  --vw-font: 'DM Sans', 'Outfit', system-ui, -apple-system, sans-serif;
  --vw-font-display: 'Outfit', system-ui, sans-serif;

  /* 6.23 (v26.52) — LISTAS DESPLEGABLES LEGIBLES.
     Reporte de Dany 15-sep-26: al abrir un <select> (p. ej. los segundos por
     foto en Murales demo) las opciones salían BLANCAS SOBRE BLANCO y solo se
     leía la que estaba bajo el mouse. La lista desplegada es un popup del
     navegador: NO hereda el fondo de la tarjeta, así que con
     `background: transparent` en el select caía al blanco del sistema
     mientras el texto seguía claro. Esta línea le dice al navegador que
     dibuje en oscuro todos los controles nativos —listas, casillas, barras
     de scroll y selectores de fecha— en los tres paneles de una sola vez. */
  color-scheme: dark;
}
/* Refuerzo por si algún navegador ignora color-scheme en el popup.
   Valores literales a propósito: las variables CSS no siempre llegan a las
   <option> del menú nativo. */
select option, select optgroup { background-color: #1A1A23; color: #F2F2F5; }

html, body { background: var(--vw-bg); font-family: var(--vw-font); }
body { background-image: none; }
h1, h2, h3, .vw-title, .vw-logo, .kpi b, .m-head h2, .m-section > h2 { font-family: var(--vw-font-display); }

/* ---------- Logo: Clic | Mural ● con la marca "mural" ---------- */
.vw-logo { font-weight: 700; font-size: 24px; letter-spacing: -.02em; gap: 0; }
.vw-logo::before {
  content: ""; width: 24px; height: 24px; margin-right: 8px; flex: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2F2F5' stroke-width='1.6'><rect x='3.5' y='3.5' width='7' height='7' rx='1.5'/><rect x='13.5' y='3.5' width='7' height='7' rx='1.5'/><rect x='3.5' y='13.5' width='7' height='7' rx='1.5'/><rect x='13.5' y='13.5' width='7' height='7' rx='1.5' fill='%2322D3EE' stroke='none'/></svg>") center/contain no-repeat;
}
.vw-logo .wall { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--vw-text); display: inline-flex; align-items: center; }
.vw-logo .wall::before { content: ""; display: inline-block; width: 2px; height: 20px; background: var(--vw-violet); margin: 0 7px; }
.vw-logo .dot { width: 6px; height: 6px; box-shadow: none; animation: none; align-self: flex-end; margin: 0 0 5px 4px; }
.vw-header { border-bottom: 1px solid var(--vw-border); padding: 6px 0 12px; margin-bottom: 18px; gap: 8px; }
.vw-badge { border-radius: 999px; }
.vw-version-hdr { font-size: 11px; color: var(--vw-dim); letter-spacing: .04em; margin-left: 4px; white-space: nowrap; }

/* ---------- Botones: píldora, un solo sólido por pantalla ---------- */
.vw-btn { font-weight: 600; font-size: 15px; padding: 11px 22px; }
.vw-btn-primary { background: var(--vw-violet); box-shadow: none; }
.vw-btn-primary:hover { background: #6D2FD6; }
.vw-btn-hot { background: var(--vw-coral); box-shadow: none; }
.vw-btn-ghost { border: 1px solid var(--vw-border-2); color: var(--vw-text); background: transparent; }
.vw-btn-ghost:hover { background: var(--vw-card-2); }
.vw-btn-sm { font-size: 13px; padding: 6px 14px; }
.wa-btn { color: var(--vw-ok) !important; border-color: transparent !important; background: rgba(52,211,153,.10) !important; }

/* ---------- Superficies ---------- */
.vw-card { background: var(--vw-card); border: 1px solid var(--vw-border); border-radius: var(--vw-radius); }
.vw-input, .vw-select, .vw-textarea { background: var(--vw-bg); border: 1px solid var(--vw-border-2); border-radius: var(--vw-radius); font-size: 15px; padding: 11px 14px; }
.vw-input:focus, .vw-select:focus, .vw-textarea:focus { border-color: var(--vw-violet-t); }

/* ---------- Chips: píldora con relleno tenue, sin borde ---------- */
.chip { border: 0 !important; padding: 4px 11px; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; }
.chip-prox, .chip-pasado, .chip-plan { text-transform: none; letter-spacing: .02em; }
.chip-hoy { background: var(--vw-amber); color: #0A0A14; }
.chip-prox { background: rgba(245,196,81,.14); color: var(--vw-amber); }
.chip-pasado { background: rgba(255,255,255,.07); color: var(--vw-muted); }
.chip-priv { background: rgba(34,211,238,.12); color: var(--vw-cyan); }
.chip-pack { background: rgba(255,255,255,.07); color: var(--vw-muted); }
.chip-nofiltro { background: rgba(255,77,109,.12); color: var(--vw-coral); }
.chip-demo { background: rgba(34,211,238,.12); color: var(--vw-cyan); }
.chip-trial { background: rgba(255,77,109,.12); color: var(--vw-coral); }
.chip-inact { background: rgba(255,77,109,.12); color: var(--vw-coral); }
.chip-venc { background: rgba(245,196,81,.14); color: var(--vw-amber); }
.chip-plan { background: rgba(255,255,255,.07); color: var(--vw-muted); }

/* ============================================================
   BARRA LATERAL (solo escritorio; en celular sigue la barra horizontal)
   Aplica a cualquier panel con #panel > nav.m-nav + .m-page (Maestro y Cliente).
   ============================================================ */
@media (min-width: 721px) {
  #panel[style*="block"] { display: grid !important; grid-template-columns: 252px minmax(0, 1fr); column-gap: 36px; align-items: start; }
  .m-nav {
    grid-column: 1; grid-row: 1; position: sticky; top: 14px; margin: 0; padding: 4px 0 8px 0;
    background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
    border-bottom: 0; border-right: 1px solid var(--vw-border-2);
    max-height: calc(100vh - 28px); overflow-y: auto; scrollbar-width: none;
  }
  .m-nav::-webkit-scrollbar { display: none; }
  .m-page { grid-column: 2; }
  .m-nav-row { flex-direction: column; align-items: stretch; gap: 0; padding-right: 16px; }
  .m-nav-group { flex-direction: column; align-items: stretch; gap: 2px; }
  .m-nav-sep { display: none; }
  .m-nav-label { display: block; font-size: 11px; letter-spacing: .12em; opacity: 1; padding: 0 12px 6px; margin: 18px 0 0; }
  .m-nav-group:first-child .m-nav-label { margin-top: 6px; }
  .nv {
    background: transparent; border: 0; border-radius: 8px; color: var(--vw-muted);
    font-size: 14px; font-weight: 500; padding: 9px 12px; gap: 12px; justify-content: flex-start;
    white-space: normal; text-align: left;
  }
  .nv:hover { color: var(--vw-text); background: rgba(255,255,255,.04); transform: none; }
  .nv .ic { font-size: 0; line-height: 0; width: 18px; height: 18px; flex: none; }
  .nv .ic svg { width: 18px; height: 18px; }
  .nv .ct { margin-left: auto; background: transparent; color: var(--vw-muted); font-weight: 600; font-size: 12px; padding: 0; }
  .nv.on { background: rgba(124,58,237,.12); color: var(--vw-violet-t); box-shadow: none; }
  .nv.on .ct { background: transparent; color: var(--vw-violet-t); }
  .nv.nv-alert { color: var(--vw-coral); }
  /* botón ‹ para contraer */
  .m-col {
    width: 26px; height: 26px; margin: 0 16px 4px auto; border: 1px solid var(--vw-border);
    background: transparent; color: var(--vw-muted); cursor: pointer; border-radius: 6px;
    font-size: 16px; line-height: 1; display: grid; place-items: center;
  }
  .m-col:hover { color: var(--vw-text); border-color: var(--vw-border-2); }
  #panel.col { grid-template-columns: 72px minmax(0, 1fr); }
  #panel.col .m-nav-row { padding-right: 10px; }
  #panel.col .m-nav-label, #panel.col .nv .ct { display: none; }
  #panel.col .nv { font-size: 0; justify-content: center; padding: 10px 0; gap: 0; }
  #panel.col .nv .ic { font-size: 0; }
  #panel.col .m-col { margin: 0 auto 8px; }
  #panel.col .m-nav-group { padding-top: 8px; border-top: 1px solid var(--vw-border); }
  #panel.col .m-nav-group:first-child { border-top: 0; padding-top: 0; }
}

/* ---------- Iconos ClicMural (sprite inyectado por cm-skin.js) ---------- */
.cm-ic { width: 18px; height: 18px; fill: none; stroke: #F2F2F5; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; display: inline-block; vertical-align: -4px; }
.cm-ic-lg { width: 28px; height: 28px; stroke-width: 1.5; }

/* v26.43 — emojis del contenido traducidos a iconos (cm-skin.js los
   inserta como <svg class="cm-ic cm-em">); toman el color del texto. */
.cm-em { stroke: currentColor; width: 16px; height: 16px; vertical-align: -3px; margin-right: 1px; }
h2 .cm-em { width: 22px; height: 22px; vertical-align: -4px; margin-right: 4px; stroke: var(--vw-text); }
h2 .cm-em + * { margin-left: 0; }
.chip .cm-em { width: 13px; height: 13px; vertical-align: -2.5px; stroke-width: 2; }
.vw-btn .cm-em { width: 15px; height: 15px; vertical-align: -3px; }
.vw-btn-primary .cm-em, .vw-btn-hot .cm-em { stroke: #fff; --ac: rgba(255,255,255,.75) !important; }
.vw-label .cm-em { width: 14px; height: 14px; }
.lnk .cm-em, .meta .cm-em, .vw-muted .cm-em { width: 14px; height: 14px; vertical-align: -2.5px; stroke: var(--vw-muted); }
.vw-toast .cm-em { width: 15px; height: 15px; }
.chip-hoy .cm-em { --ac: #0A0A14 !important; }
.m-col .cm-em { width: 14px; height: 14px; vertical-align: -2px; margin: 0; }

/* ============================================================
   CELULAR (v26.43.1) — nada puede desbordar a lo ancho: la cabecera se
   parte en renglones, los campos (incluido el datetime de iOS) se quedan
   dentro de su tarjeta y las tarjetas cortan el texto largo.
   ============================================================ */
@media (max-width: 720px) {
  html, body { overflow-x: hidden; max-width: 100vw; }
  .vw-container { overflow-x: clip; }
  .vw-header { flex-wrap: wrap; row-gap: 8px; column-gap: 6px; justify-content: flex-start; }
  .vw-header .vw-logo { order: 0; font-size: 22px; }
  .vw-version-hdr { display: none; }
  .vw-header .vw-btn-sm { padding: 5px 10px; font-size: 12px; }
  .vw-header .vw-badge { font-size: 10.5px; padding: 4px 9px; }
  .m-col { display: none; }
  .m-nav-row > .m-nav-group:first-child { margin-left: 0; }
  .vw-input, .vw-select, .vw-textarea, input[type="datetime-local"], input[type="date"] {
    max-width: 100%; min-width: 0; width: 100%; box-sizing: border-box; -webkit-appearance: none; appearance: none;
  }
  .vw-card { max-width: 100%; min-width: 0; overflow-wrap: anywhere; }
}