/* ============================================================
   SISTEMA DE DISEÑO IGLU — archivo compartido por las 5 apps
   ------------------------------------------------------------
   Este archivo se carga DESPUÉS de los estilos propios de cada app,
   así que sus valores mandan. La idea es no reescribir las apps:
   solo se redefinen las variables que ya usan, apuntándolas todas
   a la MISMA paleta. Resultado: se ven como un solo producto.

   Cada app inventó sus propios nombres para lo mismo
   (--line / --border, --ink / --text, --bad / --red), por eso acá
   se listan todos los alias y se les da el mismo color.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

:root{
  /* ---------- TIPOGRAFÍA ---------- */
  --iglu-fuente: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --iglu-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- PALETA CLARA (la de siempre) ---------- */
  --iglu-fondo:      #eef0f8;
  --iglu-fondo2:     #f7f8fc;
  --iglu-panel:      #ffffff;
  --iglu-panel2:     #fbfbfe;
  --iglu-texto:      #1d2231;
  --iglu-suave:      #8890a6;
  --iglu-tenue:      #aab0c2;
  --iglu-linea:      #e9ebf4;
  --iglu-linea2:     #eef0f7;

  /* ---------- COLORES DE MARCA ---------- */
  --iglu-marca:      #7c3aed;   /* morado IGLU */
  --iglu-marca-osc:  #6d28d9;
  --iglu-marca-sua:  #f1ecfe;
  --iglu-violeta:    #8b5cf6;
  --iglu-cyan:       #22c9e0;
  --iglu-rosa:       #ec4899;
  --iglu-wc:         #6b559d;   /* morado White Card (solo Equipo de Ventas) */

  /* ---------- SEMÁFORO (uno solo para todo) ---------- */
  --iglu-ok:         #16a34a;
  --iglu-ok-bg:      rgba(22,163,74,.10);
  --iglu-alerta:     #d97706;
  --iglu-alerta-bg:  rgba(217,119,6,.12);
  --iglu-error:      #e11d48;
  --iglu-error-bg:   rgba(225,29,72,.10);
  --iglu-info:       #3b82f6;
  --iglu-info-bg:    rgba(59,130,246,.10);
  --iglu-critico:    #e0642a;   /* naranja: vencido. Distinto del ámbar de aviso */

  /* ---------- APOYOS ---------- */
  --iglu-campo:        #fbfbfe;                /* fondo de los campos de escritura */
  --iglu-sobre-marca:  #ffffff;                /* texto encima de un botón de marca */
  --iglu-violeta-bg:   rgba(139,92,246,.12);
  --iglu-degradado:    linear-gradient(105deg, var(--iglu-marca), var(--iglu-violeta) 55%, var(--iglu-cyan));
  --iglu-sombra-1:     0 8px 22px -12px rgba(30,35,90,.28);
  --iglu-sombra-2:     0 18px 45px -18px rgba(30,35,90,.34);
  --iglu-sombra-marca: 0 6px 18px rgba(124,58,237,.28);

  /* ---------- FORMAS ---------- */
  --iglu-radio:      14px;
  --iglu-radio-sm:   10px;

  /* ---------- PUNTOS DE CORTE (una sola escala) ----------
     Antes cada app se rompía en un ancho distinto: el shell en 7
     medidas, Equipo de Ventas en 8, Sistema de Ventas en 2. */
  --iglu-movil:      560px;
  --iglu-tablet:     820px;
  --iglu-escritorio: 1200px;
}

/* ============================================================
   ALIAS → cada app conserva sus nombres, todos apuntan a lo mismo
   ============================================================ */
:root{
  /* fondos y superficies */
  --bg:var(--iglu-fondo);         --bg2:var(--iglu-fondo2);
  --panel:var(--iglu-panel);      --surface:var(--iglu-panel);
  --card:var(--iglu-panel);       --card2:var(--iglu-panel2);
  --surface2:var(--iglu-panel2);  --surface-2:var(--iglu-fondo2);
  /* texto */
  --ink:var(--iglu-texto);        --text:var(--iglu-texto);
  --muted:var(--iglu-suave);      --muted2:var(--iglu-tenue);
  --dim:var(--iglu-tenue);
  /* líneas */
  --line:var(--iglu-linea);       --line2:var(--iglu-linea2);
  --border:var(--iglu-linea);     --border2:var(--iglu-linea2);
  --border-2:var(--iglu-linea2);
  /* marca */
  --brand:var(--iglu-marca);      --brand-ink:var(--iglu-marca-osc);
  --brand-soft:var(--iglu-marca-sua);
  --acc:var(--iglu-marca);        --primary:var(--iglu-marca);
  --primary-soft:var(--iglu-marca-sua); --primary-2:var(--iglu-violeta);
  --violet:var(--iglu-violeta);   --violet-bg:rgba(139,92,246,.12);
  --cyan:var(--iglu-cyan);        --pink:var(--iglu-rosa);
  --wc:var(--iglu-wc);
  /* semáforo — un solo verde, un solo rojo, un solo ámbar */
  --ok:var(--iglu-ok);            --green:var(--iglu-ok);
  --green-bg:var(--iglu-ok-bg);   --lime:var(--iglu-ok);
  --bad:var(--iglu-error);        --red:var(--iglu-error);
  --red-bg:var(--iglu-error-bg);  --rose:var(--iglu-error);
  --warn:var(--iglu-alerta);      --amber:var(--iglu-alerta);
  --amber-bg:var(--iglu-alerta-bg); --orange:var(--iglu-alerta);
  --blue:var(--iglu-info);        --blue-bg:var(--iglu-info-bg);
  /* nombres propios de Finanzas */
  --txt:var(--iglu-texto);        --mut:var(--iglu-suave);
  --panel2:var(--iglu-panel2);    --inp:var(--iglu-campo);
  --acc2:var(--iglu-violeta);     --vio:var(--iglu-violeta);
  --crit:var(--iglu-critico);     --btnTxt:var(--iglu-sobre-marca);
  --bgGrad:var(--iglu-fondo);
  --sh1:var(--iglu-sombra-1);     --sh2:var(--iglu-sombra-2);
  --shBtn:var(--iglu-sombra-marca);
  /* nombres propios de Equipo de Ventas y del Sistema de Ventas */
  --violet-bg:var(--iglu-violeta-bg);
  --shadow:var(--iglu-sombra-2);  --shadow-sm:var(--iglu-sombra-1);
  /* degradados de marca: uno solo para todas */
  --grad:var(--iglu-degradado);       --gradBrand:var(--iglu-degradado);
  --grad-btn:var(--iglu-degradado);
  /* los siete colores sueltos del Cotizador */
  --g1:var(--iglu-marca);   --g2:var(--iglu-violeta); --g3:var(--iglu-marca-osc);
  --g4:var(--iglu-marca);   --g5:var(--iglu-cyan);    --g6:var(--iglu-cyan);
  --g7:var(--iglu-violeta); --ice:var(--iglu-cyan);
}

/* ============================================================
   MODO OSCURO — mismos alias, otros valores.
   Se activa poniendo la clase 'dark'. Se acepta tanto en <html>
   como en <body> porque la app madre marca los dos: así el color de
   fondo de la página (que cuelga de <html>) también cambia y no
   queda una franja blanca al hacer scroll de más en el celular.
   ============================================================ */
/* --- 1) los valores oscuros de la paleta --- */
html.dark, body.dark{
  --iglu-fondo:  #0f1117;  --iglu-fondo2: #161923;
  --iglu-panel:  #1a1e29;  --iglu-panel2: #212633;
  --iglu-texto:  #e8eaf2;  --iglu-suave:  #9aa2b8;  --iglu-tenue: #6f7891;
  --iglu-linea:  #2a3040;  --iglu-linea2: #333a4d;
  --iglu-marca:  #a78bfa;  --iglu-marca-osc:#8b5cf6; --iglu-marca-sua:#2a2145;
  --iglu-wc:     #a892d8;
  --iglu-ok:     #34d399;  --iglu-ok-bg:    rgba(52,211,153,.14);
  --iglu-alerta: #fbbf24;  --iglu-alerta-bg:rgba(251,191,36,.14);
  --iglu-error:  #fb7185;  --iglu-error-bg: rgba(251,113,133,.14);
  --iglu-info:   #60a5fa;  --iglu-info-bg:  rgba(96,165,250,.14);
  --iglu-critico:#ff9e4a;
  --iglu-campo:        #141824;
  --iglu-sobre-marca:  #16121f;   /* el morado claro pide texto oscuro encima */
  --iglu-violeta-bg:   rgba(167,139,250,.16);
  --iglu-sombra-1:     0 8px 22px -12px rgba(0,0,0,.55);
  --iglu-sombra-2:     0 18px 45px -18px rgba(0,0,0,.65);
  --iglu-sombra-marca: 0 6px 20px rgba(167,139,250,.22);
}

/* --- 2) los MISMOS alias, repetidos con más peso ---------------------
   Sin esto, Finanzas seguía viéndose morada: ella declara su propia
   paleta oscura dentro de `body.dark`, que pesa más que el `:root` de
   arriba y por eso ganaba. `body.dark.dark` (la clase escrita dos veces)
   y `html.dark body` pesan más que cualquier `body.dark` de una app,
   así que ahora manda la paleta compartida.
   Esta lista es copia exacta de la de arriba: si cambias una, cambia la otra. */
html.dark body, body.dark.dark{
  /* fondos y superficies */
  --bg:var(--iglu-fondo);         --bg2:var(--iglu-fondo2);
  --panel:var(--iglu-panel);      --surface:var(--iglu-panel);
  --card:var(--iglu-panel);       --card2:var(--iglu-panel2);
  --surface2:var(--iglu-panel2);  --surface-2:var(--iglu-fondo2);
  /* texto */
  --ink:var(--iglu-texto);        --text:var(--iglu-texto);
  --muted:var(--iglu-suave);      --muted2:var(--iglu-tenue);
  --dim:var(--iglu-tenue);
  /* líneas */
  --line:var(--iglu-linea);       --line2:var(--iglu-linea2);
  --border:var(--iglu-linea);     --border2:var(--iglu-linea2);
  --border-2:var(--iglu-linea2);
  /* marca */
  --brand:var(--iglu-marca);      --brand-ink:var(--iglu-marca-osc);
  --brand-soft:var(--iglu-marca-sua);
  --acc:var(--iglu-marca);        --primary:var(--iglu-marca);
  --primary-soft:var(--iglu-marca-sua); --primary-2:var(--iglu-violeta);
  --violet:var(--iglu-violeta);   --violet-bg:rgba(139,92,246,.12);
  --cyan:var(--iglu-cyan);        --pink:var(--iglu-rosa);
  --wc:var(--iglu-wc);
  /* semáforo — un solo verde, un solo rojo, un solo ámbar */
  --ok:var(--iglu-ok);            --green:var(--iglu-ok);
  --green-bg:var(--iglu-ok-bg);   --lime:var(--iglu-ok);
  --bad:var(--iglu-error);        --red:var(--iglu-error);
  --red-bg:var(--iglu-error-bg);  --rose:var(--iglu-error);
  --warn:var(--iglu-alerta);      --amber:var(--iglu-alerta);
  --amber-bg:var(--iglu-alerta-bg); --orange:var(--iglu-alerta);
  --blue:var(--iglu-info);        --blue-bg:var(--iglu-info-bg);
  /* nombres propios de Finanzas */
  --txt:var(--iglu-texto);        --mut:var(--iglu-suave);
  --panel2:var(--iglu-panel2);    --inp:var(--iglu-campo);
  --acc2:var(--iglu-violeta);     --vio:var(--iglu-violeta);
  --crit:var(--iglu-critico);     --btnTxt:var(--iglu-sobre-marca);
  --bgGrad:var(--iglu-fondo);
  --sh1:var(--iglu-sombra-1);     --sh2:var(--iglu-sombra-2);
  --shBtn:var(--iglu-sombra-marca);
  /* nombres propios de Equipo de Ventas y del Sistema de Ventas */
  --violet-bg:var(--iglu-violeta-bg);
  --shadow:var(--iglu-sombra-2);  --shadow-sm:var(--iglu-sombra-1);
  /* degradados de marca: uno solo para todas */
  --grad:var(--iglu-degradado);       --gradBrand:var(--iglu-degradado);
  --grad-btn:var(--iglu-degradado);
  /* los siete colores sueltos del Cotizador */
  --g1:var(--iglu-marca);   --g2:var(--iglu-violeta); --g3:var(--iglu-marca-osc);
  --g4:var(--iglu-marca);   --g5:var(--iglu-cyan);    --g6:var(--iglu-cyan);
  --g7:var(--iglu-violeta); --ice:var(--iglu-cyan);
}


/* Un logo al que el estilo le fija solo el alto debe calcular su ancho
   solo. Si además lleva un ancho escrito en la etiqueta, sale estirado. */
img[src$="iglu-logo.png"]{ width:auto; max-width:100%; object-fit:contain; }

/* ============================================================
   DESHACER / REHACER — en el encabezado de cada módulo
   ------------------------------------------------------------
   Antes flotaban abajo a la izquierda, tapando contenido y con
   los colores escritos a mano (en oscuro quedaban blancos).
   Ahora viven en la barra de arriba de la pantalla a la que
   pertenecen. En celular se dejan solo las flechas.
   ============================================================ */
.iglu-ud{ display:inline-flex; gap:6px; align-items:center; }
.iglu-ud button{
  font:inherit; font-size:12.5px; font-weight:600; line-height:1;
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 12px; min-height:38px;
  border:1px solid var(--iglu-linea); border-radius:10px;
  background:var(--iglu-panel); color:var(--iglu-texto);
  cursor:pointer; transition:background .15s, border-color .15s;
}
.iglu-ud button:hover{ background:var(--iglu-panel2); border-color:var(--iglu-marca); }
.iglu-ud button:disabled{ opacity:.4; cursor:default; }
@media (max-width:820px){
  .iglu-ud button{ padding:8px 10px; min-width:42px; min-height:42px; justify-content:center; }
  .iglu-ud button .t{ display:none; }   /* en celular, solo la flecha */
}

/* ============================================================
   MENÚS LATERALES DE LOS MÓDULOS — recogibles
   ------------------------------------------------------------
   Solo en pantalla grande. En celular estos menús ya se
   convierten en una barra de abajo, así que no hay nada que
   recoger y estas reglas no aplican.
   ============================================================ */
.iglu-recoger{
  /* Va con !important porque los módulos tienen reglas de más peso para
     "cualquier botón dentro del menú" (por ejemplo `#side button{width:100%}`),
     y sin esto el botón salía como un recuadro largo y vacío. */
  font:inherit !important; font-size:15px !important; line-height:1 !important;
  width:30px !important; height:30px !important; min-height:30px !important;
  padding:0 !important; margin:0 0 6px auto !important;
  flex:none !important; align-self:flex-end !important;
  display:grid !important; place-items:center !important;
  border:1px solid var(--iglu-linea) !important; border-radius:9px !important;
  background:var(--iglu-panel) !important; color:var(--iglu-suave) !important;
  cursor:pointer; transform:none !important; transition:background .15s, color .15s;
}
.iglu-recoger:hover{ background:var(--iglu-panel2); color:var(--iglu-texto); }
/* en celular estos menús ya son una barra de abajo: el botón no aplica */
@media (max-width:820px){ .solo-escritorio{ display:none !important; } }

@media (min-width:821px){
  [data-menu-lateral]{ transition:width .22s cubic-bezier(.4,0,.2,1), padding .22s; }
  #main{ transition:margin-left .22s cubic-bezier(.4,0,.2,1); }

  /* "mini": se encoge y quedan solo los iconos (Finanzas, Sistema de Ventas) */
  /* !important por lo mismo que el botón: los módulos fijan el ancho con
     su identificador (`#side{width:232px}`), que pesa más que cualquier
     regla compartida. Sin esto el menú no se encogía. */
  body.menu-recogido [data-menu-lateral="mini"]{
    width:68px !important; padding-left:8px !important; padding-right:8px !important;
  }
  body.menu-recogido [data-menu-lateral="mini"] .txt,
  body.menu-recogido [data-menu-lateral="mini"] .tag,
  body.menu-recogido [data-menu-lateral="mini"] .foot{ display:none; }
  body.menu-recogido [data-menu-lateral="mini"] button:not(.iglu-recoger){
    justify-content:center; font-size:17px;
  }
  body.menu-recogido #main{ margin-left:68px !important; }

  /* "oculto": el panel se retira del todo (Equipo de Ventas).
     Antes usaba un margen negativo: el contenido se metía por debajo
     pero el panel seguía viéndose. */
  body.menu-recogido [data-menu-lateral="oculto"]{
    width:0 !important; padding-left:0 !important; padding-right:0 !important;
    margin-right:0 !important; border-width:0 !important; overflow:visible;
  }
  body.menu-recogido [data-menu-lateral="oculto"] > *:not(.iglu-recoger){ display:none; }
  body.menu-recogido [data-menu-lateral="oculto"] .iglu-recoger{
    position:fixed; left:10px; top:74px; z-index:30;
  }
}

/* ============================================================
   EQUIPO DE VENTAS · vista de calendario de la semana
   ============================================================ */
.vista-sw{ display:inline-flex; gap:2px; margin-left:auto; background:var(--iglu-fondo2);
  border:1px solid var(--iglu-linea); border-radius:10px; padding:2px; }
.vista-sw button{ font:inherit; font-size:12px; font-weight:700; padding:6px 11px; min-height:34px;
  border:0; border-radius:8px; background:transparent; color:var(--iglu-suave); cursor:pointer; }
.vista-sw button.on{ background:var(--iglu-panel); color:var(--iglu-marca); box-shadow:var(--iglu-sombra-1); }

.cal-wrap{ display:flex; gap:6px; margin-top:10px; overflow-x:auto; padding-bottom:6px; }
.cal-horas{ position:relative; flex:none; width:46px; }
.cal-hora{ position:absolute; right:6px; transform:translateY(-50%);
  font-size:10.5px; font-weight:700; color:var(--iglu-tenue); }
.cal-cols{ display:flex; gap:6px; flex:1; min-width:0; }
.cal-col{ flex:1 0 118px; min-width:0; }
.cal-cab{ font-size:11px; font-weight:800; text-align:center; padding:5px 2px; border-radius:8px 8px 0 0;
  background:var(--iglu-fondo2); color:var(--iglu-suave); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.cal-col.hoy .cal-cab{ background:var(--iglu-marca-sua); color:var(--iglu-marca-osc); }
.cal-cuerpo{ position:relative; background:var(--iglu-panel);
  border:1px solid var(--iglu-linea); border-top:0; border-radius:0 0 8px 8px; overflow:hidden; }
.cal-col.hoy .cal-cuerpo{ border-color:var(--iglu-marca); }
.cal-linea{ position:absolute; left:0; right:0; height:1px; background:var(--iglu-linea2); }
.cal-ev{ position:absolute; border-radius:7px; padding:4px 6px; overflow:hidden; cursor:pointer;
  border-left:3px solid var(--iglu-marca); background:var(--iglu-marca-sua);
  font-size:10.5px; line-height:1.25; transition:filter .15s; }
.cal-ev:hover{ filter:brightness(.96); }
.cal-ev b{ display:block; font-size:10px; font-weight:800; }
.cal-ev span{ display:block; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cal-ev.pend { border-left-color:var(--iglu-alerta); background:var(--iglu-alerta-bg); }
.cal-ev.ok   { border-left-color:var(--iglu-info);   background:var(--iglu-info-bg); }
.cal-ev.hecha{ border-left-color:var(--iglu-ok);     background:var(--iglu-ok-bg); }
.cal-ev.fallo{ border-left-color:var(--iglu-error);  background:var(--iglu-error-bg); }
.cal-leyenda{ display:flex; gap:14px; flex-wrap:wrap; margin-top:10px;
  font-size:11px; color:var(--iglu-suave); }
.cal-leyenda i.p{ display:inline-block; width:9px; height:9px; border-radius:3px; margin-right:5px; }
.cal-leyenda i.pend{ background:var(--iglu-alerta); }
.cal-leyenda i.ok{ background:var(--iglu-info); }
.cal-leyenda i.hecha{ background:var(--iglu-ok); }
.cal-leyenda i.fallo{ background:var(--iglu-error); }
@media (max-width:820px){
  .vista-sw{ margin-left:0; width:100%; }
  .vista-sw button{ flex:1; }
  .cal-col{ flex:0 0 108px; }
}

/* ============================================================
   DENTRO DE LA MADRE vs. EN PESTAÑA APARTE
   ------------------------------------------------------------
   Lo marcado con 'solo-suelta' desaparece cuando el módulo está
   embebido en la app madre, porque allá ya se muestra arriba o en
   la barra lateral: el logo, el título de la pantalla y el nombre
   del perfil. Antes se veían dos veces y parecían dos apps pegadas.
   ============================================================ */
body.embebido .solo-suelta{ display:none !important; }

/* ============================================================
   RETOQUES DE MODO OSCURO
   ------------------------------------------------------------
   Sitios donde el color estaba escrito a mano (un blanco fijo,
   por ejemplo) y por eso no obedecía al cambio de tema. Se
   corrigen acá para no tocar el estilo propio de cada pantalla.
   ============================================================ */

/* --- App madre: pantalla de entrada y marcos --- */
body.dark .door.primary{
  background:linear-gradient(180deg,#241d3d,#1c1730);
  border-color:#3a2f5e;
}
body.dark .door.primary .ic{ background:var(--iglu-panel2); }
body.dark .door.discreet .ic{ background:var(--iglu-linea); }
body.dark .modframe{ background:var(--iglu-fondo); }
body.dark .okbox code{ background:var(--iglu-panel2); }
body.dark input:focus,
body.dark select:focus{ background:var(--iglu-panel2); }

body.dark .ro-dot,
body.dark .app-card .robadge{ background:var(--iglu-alerta-bg); border-color:transparent; }
body.dark .logout:hover{ background:var(--iglu-error-bg); border-color:transparent; }
body.dark .iconbtn.danger:hover{ border-color:var(--iglu-error); }
body.dark .chk label:has(input:checked){ border-color:var(--iglu-marca); }
body.dark .okbox{ background:var(--iglu-ok-bg); border-color:transparent; }
body.dark .okbox code{ border-color:transparent; }

/* --- Equipo de Ventas: distintivo de empresa --- */
body.dark .chip.wc{ background:rgba(168,146,216,.16); }

/* ============================================================
   EQUIPO DE VENTAS · paneles que se veían negros en modo día
   ------------------------------------------------------------
   Los avisos de Seguimientos, el panel de hoy y el de la semana
   llevaban degradados oscuros escritos a mano, de cuando esta
   pantalla era oscura. En modo claro salían como manchas negras.
   Ahora usan un tinte suave del color que ya tiene cada uno.
   ============================================================ */
.soon-card{
  background:linear-gradient(135deg, var(--iglu-alerta-bg), var(--iglu-panel)) !important;
  color:var(--iglu-texto);
}
.soon-card.alert{
  background:linear-gradient(135deg, var(--iglu-error-bg), var(--iglu-panel)) !important;
}
.today-panel{
  background:linear-gradient(135deg, var(--iglu-violeta-bg), var(--iglu-panel)) !important;
  border-color:var(--iglu-marca) !important;
  color:var(--iglu-texto);
}
.week-banner{
  background:linear-gradient(135deg, var(--iglu-info-bg), var(--iglu-panel)) !important;
  border-color:var(--iglu-info) !important;
  color:var(--iglu-texto);
}

/* --- Cotizador: perilla del interruptor --- */
body.dark .sl:before{ background:var(--iglu-panel2); }

/* --- Sistema de Ventas (incluye el panel que ve el cliente) ---
   Estas son las etiquetas de color: verde "listo", ámbar "pendiente",
   rojo "falta". Estaban con el color claro escrito a mano, así que en
   oscuro quedaban como manchas blancas. */
body.dark #auth{
  background:linear-gradient(160deg,#161226,#1d1524 60%,#141726);
}
body.dark .pill-green,
body.dark .branch-tag.ok,
body.dark .val-ok{ background:var(--iglu-ok-bg); }
body.dark .pill-amber,
body.dark .demo-banner{ background:var(--iglu-alerta-bg); border-color:transparent; }
body.dark .val,
body.dark .autherr,
body.dark .stepc-side button.del:hover{ background:var(--iglu-error-bg); border-color:transparent; }
body.dark .val:hover{ background:rgba(251,113,133,.22); }
body.dark .msgdoc-code{ background:var(--iglu-info-bg); }
body.dark .popt span{ background:var(--iglu-violeta-bg); }
body.dark .pstep,
body.dark .diagram{ border-color:var(--iglu-linea); }
body.dark .ft{ border-top-color:var(--iglu-linea); }

/* --- Planes (presentación) --- */
body.dark .wallcard,
body.dark .ltile{ background:var(--iglu-panel); }

/* ============================================================
   TIPOGRAFÍA Y COMODIDAD TÁCTIL
   ============================================================ */
body, button, input, select, textarea, table{
  font-family: var(--iglu-fuente);
}
/* El scroll vertical no se lo roban las tablas anchas, y no rebota
   fuera del contenedor. Antes no había ninguna regla de gestos: por
   eso el trackpad y el deslizar en celular se sentían erráticos. */
body{ touch-action: auto; -webkit-text-size-adjust:100%; } /* auto = deja deslizar las tablas anchas en horizontal con el dedo; el rebote lo frena overscroll-behavior:contain de abajo */
table, .tabla, [class*="scroll"], [style*="overflow-x"]{
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
/* ============================================================
   CELULAR — reglas que valen para las seis pantallas
   ============================================================ */
@media (max-width:820px){
  /* Áreas de toque cómodas */
  button, .btn, a.btn, [role="button"]{ min-height:44px; }

  /* El iPhone amplía la página sola cuando tocas un campo con letra
     menor a 16px, y luego el usuario queda con la vista corrida. Se
     fuerza porque varias pantallas la bajaban a 12–13px en sus
     propias reglas, que pesan más que una regla general. */
  input:not([type=checkbox]):not([type=radio]):not([type=range]),
  select, textarea{ font-size:16px !important; min-height:42px; }

  /* Ninguna ventana emergente puede ser más ancha que la pantalla.
     Había tres con ancho fijo (540, 560 y 660px) que se salían. */
  .modal, #modal, .starter, .authbox, .login-box, .iglu-caja, #toast{
    width:auto !important; max-width:calc(100vw - 24px) !important;
  }

  /* Nada puede empujar la página a lo ancho */
  html, body{ overflow-x:hidden; }

  /* ============================================================
     MENÚS DE ABAJO EN CELULAR — iguales en los tres módulos
     ------------------------------------------------------------
     Antes las palabras chocaban entre sí y los iconos eran
     diminutos. Ahora: icono grande, palabra pequeña, cada opción
     con su espacio, y si no caben todas la barra se desliza a lo
     ancho con el dedo en vez de amontonarse.
     ============================================================ */
  #side[data-menu-lateral], #bottomnav{
    display:flex; gap:2px; align-items:stretch;
    overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none; -ms-overflow-style:none;
  }
  #side[data-menu-lateral]::-webkit-scrollbar,
  #bottomnav::-webkit-scrollbar{ display:none; }

  #side[data-menu-lateral] > button,
  #bottomnav > button{
    flex:1 0 auto; min-width:58px; max-width:92px;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:3px; padding:7px 8px; scroll-snap-align:center;
    min-height:56px; text-align:center;
  }

  /* icono más grande y con aire */
  #side[data-menu-lateral] > button{ font-size:21px; line-height:1.05; }
  #bottomnav > button .ic{ font-size:21px; line-height:1.05; display:block; }

  /* palabra más pequeña, en una línea, y si no cabe se recorta
     con puntos suspensivos en vez de montarse sobre la vecina */
  #side[data-menu-lateral] > button .txt,
  #bottomnav > button > span:not(.ic){
    font-size:8.5px; font-weight:700; letter-spacing:-.1px; line-height:1.15;
    max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    display:block;
  }

  /* el botón de recoger no tiene sentido cuando el menú ya es
     una barra de abajo */
  #side[data-menu-lateral] .iglu-recoger,
  aside[data-menu-lateral] .iglu-recoger{ display:none !important; }

  /* Sistema de Ventas no tenía NINGUNA regla para celular: su menú
     ocupaba 252 px de una pantalla de 390. Ahora se recoge y se
     despliega con el mismo botón que el resto. */
  #nav[data-menu-lateral]{
    position:fixed; top:0; bottom:0; left:0; z-index:80;
    width:min(78vw,270px);
    transform:translateX(0); transition:transform .22s cubic-bezier(.4,0,.2,1);
    box-shadow:var(--iglu-sombra-2);
  }
  body.menu-recogido #nav[data-menu-lateral]{ transform:translateX(-100%); }
  #nav[data-menu-lateral] .iglu-recoger{
    position:fixed; left:calc(min(78vw,270px) + 8px); top:10px; z-index:81;
  }
  body.menu-recogido #nav[data-menu-lateral] .iglu-recoger{ left:8px; }

  /* Los encabezados llevan varios botones. En celular tienen que poder
     bajar a la línea siguiente en vez de salirse por el costado. */
  header, .topbar, #top{ flex-wrap:wrap !important; row-gap:8px; }

  /* El encabezado de Equipo de Ventas es pegajoso: si crece al envolver,
     que no se coma media pantalla. */
  header{ max-height:38vh; overflow:auto; }
}
/* Foco visible para quien navega con teclado */
:focus-visible{
  outline:2px solid var(--iglu-marca);
  outline-offset:2px;
  border-radius:4px;
}