/* =============================================================================
   CG AGENCY — HOJA DE ESTILOS

   La estructura es la misma que ya conoce: menú a la izquierda apoyado sobre el
   fondo, área de trabajo flotando como una tarjeta redondeada. Lo que cambia es
   la piel: tinta y grafito sobre papel frío, con un violeta eléctrico de acento.
   Es la paleta de una agencia de performance, no la de una marca de bodas.

   Los colores de estado (rojo, ámbar, verde) NO son decoración: son el semáforo
   de resultados. Por eso el acento nunca es verde ni rojo — si lo fuera, uno no
   podría distinguir un botón de una alarma.
   ============================================================================= */

:root {
  --bg:          #F1F2F6;
  --bg-2:        #EAECF2;
  --surface:     #FFFFFF;
  --surface-2:   #F6F7FA;
  --surface-3:   #EDEFF5;
  --sunk:        #E2E5EE;
  --text:        #11131A;
  --text-2:      #565D70;
  --text-3:      #8A91A4;
  --line:        #E6E9F0;
  --line-2:      #D3D8E4;
  --accent:      #4F46E5;
  --accent-2:    #3B32C4;
  --accent-soft: #EEEDFE;
  --on-accent:   #FFFFFF;

  --alerta:  #CF3F3F;
  --atencion:#BE7F14;
  --ok:      #2A9560;
  --info:    #3376BE;
  --morado:  #7B4FD1;

  /* Semáforo de resultados. Mismos valores que arriba, con nombre propio:
     cuando se lee el CSS queda claro que ahí el color es información. */
  --sem-verde:    #2A9560;
  --sem-amarillo: #BE7F14;
  --sem-rojo:     #CF3F3F;
  --sem-gris:     #A2A9B8;

  /* Space Grotesk para los números y los títulos: es geométrica y tiene
     carácter sin ser rara. Si no carga, las de respaldo sostienen el aire. */
  --display: 'Space Grotesk', 'Inter', 'Segoe UI Variable Display', 'Segoe UI', system-ui, sans-serif;
  --ui: 'Inter', 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --mono: 'JetBrains Mono', 'Cascadia Mono', 'Consolas', ui-monospace, monospace;

  --r-xs: 6px;
  --r: 10px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  --sombra:      0 2px 8px rgba(17,19,26,.07), 0 18px 44px rgba(17,19,26,.10);
  --sombra-card: 0 1px 2px rgba(17,19,26,.05), 0 4px 14px rgba(17,19,26,.05);
  --sombra-sm:   0 1px 3px rgba(17,19,26,.07);

  color-scheme: light;
}

/* El tema oscuro no es el claro invertido: es obsidiana de verdad, porque es
   el que se usa de noche revisando campañas y el que menos cansa. El acento
   sube de luminosidad para seguir siendo legible sobre negro. */
:root[data-theme="dark"] {
  --bg:          #0A0B0F;
  --bg-2:        #0F1116;
  --surface:     #161920;
  --surface-2:   #1D2129;
  --surface-3:   #262B35;
  --sunk:        #07080B;
  --text:        #F1F3F8;
  --text-2:      #A6AEC0;
  --text-3:      #757D8E;
  --line:        #232733;
  --line-2:      #333949;
  --accent:      #7C77FF;
  --accent-2:    #9A96FF;
  --accent-soft: #1C1D33;
  --on-accent:   #0A0B0F;

  --alerta:  #EE8484;
  --atencion:#DFAF5C;
  --ok:      #5FC593;
  --info:    #7EB0DF;
  --morado:  #A98BEC;

  --sem-verde:    #5FC593;
  --sem-amarillo: #DFAF5C;
  --sem-rojo:     #EE8484;
  --sem-gris:     #6B7284;

  --sombra:      0 2px 6px rgba(0,0,0,.42), 0 14px 38px rgba(0,0,0,.46);
  --sombra-card: 0 1px 2px rgba(0,0,0,.3), 0 6px 18px rgba(0,0,0,.24);
  --sombra-sm:   0 1px 3px rgba(0,0,0,.32);

  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--bg); color: var(--text);
  font-family: var(--ui); font-size: 14.5px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
a { color: var(--accent); }
h1, h2, h3 { font-weight: 500; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 6px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--text-3); }

.oculto { display: none !important; }
.num { font-variant-numeric: tabular-nums; }

/* =============================================================================
   LA MARCA
   El logotipo se dibuja con CSS, no con un archivo: así se adapta solo a los
   dos temas y siempre sale nítido. Si algún día hay un logo hecho por un
   diseñador, se reemplaza .marca por un <img> y ya.
   ============================================================================= */

.marca { display: flex; align-items: center; gap: 11px; }
.marca-sello {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px;
  background: var(--text); color: var(--bg);
  display: grid; place-items: center; position: relative;
  font-family: var(--display); font-weight: 700; font-size: 15px;
  letter-spacing: -.02em;
}
.marca-sello::after {
  content: ''; position: absolute; bottom: 7px; left: 50%;
  transform: translateX(-50%);
  width: 13px; height: 2.5px; border-radius: 2px; background: var(--accent);
}
.marca-sello span { transform: translateY(-3px); }
.marca-texto { min-width: 0; }
.marca-nombre {
  font-family: var(--display); font-size: 17px; font-weight: 600;
  letter-spacing: .01em; line-height: 1.1;
}
.marca-tag {
  font-size: 9px; text-transform: uppercase; letter-spacing: .19em;
  color: var(--text-3); margin-top: 4px;
}
.marca-lg .marca-sello { width: 52px; height: 52px; border-radius: 15px; font-size: 20px; }
.marca-lg .marca-sello::after { width: 18px; height: 3px; bottom: 10px; }
.marca-lg .marca-nombre { font-size: 24px; }

/* =============================================================================
   INGRESO
   ============================================================================= */

.login {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center; padding: 20px;
  background:
    radial-gradient(900px 460px at 12% 8%, rgba(79,70,229,.13), transparent 62%),
    radial-gradient(700px 420px at 88% 92%, rgba(51,118,190,.10), transparent 60%),
    linear-gradient(140deg, #F7F8FC 0%, var(--bg) 55%, #DFE3ED 100%);
}
:root[data-theme="dark"] .login {
  background:
    radial-gradient(900px 480px at 12% 8%, rgba(124,119,255,.14), transparent 62%),
    radial-gradient(700px 420px at 88% 92%, rgba(126,176,223,.07), transparent 60%),
    linear-gradient(140deg, var(--bg-2) 0%, var(--bg) 50%, #06070A 100%);
}

.login-caja {
  width: min(410px, 100%);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-xl); padding: 40px 36px 32px;
  box-shadow: var(--sombra);
  animation: sube .3s cubic-bezier(.2,.8,.3,1);
}
.login-marca { margin-bottom: 30px; }
.login .campo { margin-bottom: 16px; }
.login-error {
  color: var(--alerta); font-size: 13px; margin: -4px 0 14px; min-height: 18px;
}
.login-pie {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--text-3); line-height: 1.6;
}

/* =============================================================================
   ESTRUCTURA
   ============================================================================= */

.app { display: none; height: 100vh; grid-template-columns: 262px 1fr; }
.app.activa { display: grid; }

/* ---------- barra lateral ---------- */

.lateral {
  background: transparent;
  display: flex; flex-direction: column; min-height: 0;
}
.lateral-marca { padding: 22px 20px 16px; }

.nav { padding: 6px 12px; flex: 1; overflow-y: auto; }
.nav-grupo {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .16em;
  color: var(--text-3); padding: 16px 12px 7px; opacity: .85;
}
.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: var(--r); cursor: pointer;
  color: var(--text-2); border: 0; background: none; width: 100%; text-align: left;
  transition: background .14s, color .14s;
  margin-bottom: 2px; font-size: 13.5px; white-space: nowrap;
}
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item.activo {
  background: var(--accent); color: var(--on-accent);
  box-shadow: var(--sombra-card); font-weight: 500;
}
.nav-item.activo .nav-icono { opacity: 1; }
.nav-icono { width: 18px; text-align: center; opacity: .7; font-size: 14px; flex: 0 0 18px; }
.nav-conteo {
  margin-left: auto; font-size: 11px; color: var(--text-3);
  background: var(--surface-2); padding: 2px 8px; border-radius: var(--r-pill);
  font-variant-numeric: tabular-nums;
}
.nav-item.activo .nav-conteo { background: rgba(255,255,255,.22); color: var(--on-accent); }
.nav-conteo.rojo { background: var(--alerta); color: #fff; }
.nav-conteo.ambar { background: var(--atencion); color: #fff; }

/* ---------- pie de la barra ---------- */

.lateral-pie { padding: 12px 14px 16px; }
.estado-nube {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--text-3); margin-bottom: 12px;
}
.estado-punto { font-size: 13px; line-height: 1; }
.estado-nube.sincronizado { color: var(--ok); }
.estado-nube.conectando  { color: var(--atencion); }
.estado-nube.error       { color: var(--alerta); }

.usuario {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border-radius: var(--r); padding: 9px 11px;
  box-shadow: var(--sombra-card);
}
.avatar {
  width: 32px; height: 32px; border-radius: 9px; flex: 0 0 32px;
  background: var(--accent); color: var(--on-accent);
  display: grid; place-items: center; font-size: 11.5px; font-weight: 600;
  letter-spacing: .03em; font-family: var(--display);
}
.usuario-nombre { font-size: 13px; line-height: 1.25; font-weight: 500; }
.usuario-rol { font-size: 11px; color: var(--text-3); }
.lateral-acciones { display: flex; gap: 7px; margin-top: 10px; }
.lateral-acciones .btn { flex: 1; padding: 7px 8px; font-size: 12px; }

/* ---------- área principal ---------- */

.principal {
  display: flex; flex-direction: column; min-width: 0; min-height: 0;
  background: var(--bg-2);
  margin: 12px 12px 12px 0;
  border-radius: var(--r-xl);
  box-shadow: var(--sombra-card);
  overflow: hidden;
}

.topbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 20px 26px 18px; background: var(--surface);
}
.topbar h1 {
  font-family: var(--display); font-size: 22px; font-weight: 600;
  margin: 0; letter-spacing: -.01em;
}
.topbar-sub { font-size: 12.5px; color: var(--text-3); margin-top: 4px; }
.topbar-sep { flex: 1; }

.buscador {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 7px 14px;
  min-width: 190px; flex: 1 1 190px; max-width: 320px;
  transition: border-color .14s, box-shadow .14s;
}
.buscador:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
.buscador input { border: 0; background: none; outline: none; width: 100%; font-size: 13.5px; }
.buscador span { color: var(--text-3); }
.buscador-ancho { flex: 1 1 250px; max-width: 360px; }
.buscador-limpiar {
  background: none; border: 0; color: var(--text-3); cursor: pointer;
  font-size: 17px; line-height: 1; padding: 0 1px;
}
.buscador-limpiar:hover { color: var(--text); }

.contenido { flex: 1; overflow: auto; min-height: 0; padding: 4px 26px 40px; }
.contenido.sin-padding { padding: 0; }

/* =============================================================================
   BOTONES Y PIEZAS SUELTAS
   ============================================================================= */

.btn {
  display: inline-flex; align-items: center; gap: 7px; justify-content: center;
  background: var(--accent); color: var(--on-accent); border: 1px solid transparent;
  padding: 9px 17px; border-radius: var(--r-pill); cursor: pointer; font-size: 13.5px;
  font-weight: 500; letter-spacing: .01em; text-decoration: none;
  transition: filter .14s, background .14s, box-shadow .14s;
  box-shadow: var(--sombra-sm); white-space: nowrap;
}
.btn:hover { filter: brightness(1.09); box-shadow: var(--sombra-card); }
.btn:disabled { opacity: .5; cursor: not-allowed; filter: none; }
.btn-fantasma {
  background: var(--surface); color: var(--text-2);
  border-color: var(--line-2); box-shadow: none;
}
.btn-fantasma:hover { background: var(--surface-2); color: var(--text); filter: none; }
.btn-peligro { background: var(--alerta); color: #fff; }
.btn-sm { padding: 6px 13px; font-size: 12.5px; }
.btn-bloque { width: 100%; }

.pastilla {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; padding: 3px 9px; border-radius: var(--r-pill);
  background: var(--surface-3); color: var(--text-2); white-space: nowrap;
}
.pastilla.acento { background: var(--accent-soft); color: var(--accent); }
.pastilla.ok    { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); }
.pastilla.aviso { background: color-mix(in srgb, var(--atencion) 18%, transparent); color: var(--atencion); }
.pastilla.mal   { background: color-mix(in srgb, var(--alerta) 15%, transparent); color: var(--alerta); }
.pastilla.info  { background: color-mix(in srgb, var(--info) 15%, transparent); color: var(--info); }

/* Los estados de etapa: mismo lenguaje en el tablero, la ficha y el dashboard. */
.et-gris   { background: var(--surface-3); color: var(--text-2); }
.et-azul   { background: color-mix(in srgb, var(--info) 16%, transparent); color: var(--info); }
.et-morado { background: color-mix(in srgb, var(--morado) 17%, transparent); color: var(--morado); }
.et-ambar  { background: color-mix(in srgb, var(--atencion) 19%, transparent); color: var(--atencion); }
.et-verde  { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.et-rojo   { background: color-mix(in srgb, var(--alerta) 16%, transparent); color: var(--alerta); }

/* El punto del semáforo. Chiquito y redondo, siempre en el mismo sitio. */
.sem {
  width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; display: inline-block;
}
.sem-verde    { background: var(--sem-verde); }
.sem-amarillo { background: var(--sem-amarillo); }
.sem-rojo     { background: var(--sem-rojo); }
.sem-gris     { background: var(--sem-gris); }
.sem-lg { width: 12px; height: 12px; flex-basis: 12px; }

.est-verde    { color: var(--sem-verde); }
.est-amarillo { color: var(--sem-amarillo); }
.est-rojo     { color: var(--sem-rojo); }
.est-gris     { color: var(--text-3); }
.est-azul     { color: var(--info); }

.campo { display: block; }
/* Hijo directo a propósito: dentro de un campo puede haber otras etiquetas
   (las casillas de opción, una tarea) y no deben salir en versalitas grises. */
.campo > label {
  display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-3); margin-bottom: 6px;
}
.campo input, .campo select, .campo textarea {
  width: 100%; padding: 9px 12px; border: 1px solid var(--line-2);
  border-radius: var(--r); background: var(--surface); outline: none;
  transition: border-color .14s, box-shadow .14s;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}
.campo textarea { resize: vertical; min-height: 76px; line-height: 1.55; }
.campo-ayuda { font-size: 11.5px; color: var(--text-3); margin-top: 5px; }

.campo-con-boton { display: flex; gap: 8px; align-items: stretch; }
.campo-con-boton input { flex: 1; min-width: 0; }
/* Es un <a> de verdad, no un botón: window.open lo bloquean el iframe y el
   antipopup, y el botón parecía roto. Un enlace siempre abre. */
.btn-icono {
  flex: 0 0 auto; display: inline-flex; align-items: center; white-space: nowrap;
  background: var(--surface-2); color: var(--text-2); text-decoration: none;
  border: 1px solid var(--line-2); border-radius: var(--r);
  padding: 0 15px; cursor: pointer; font-size: 12.5px; font-weight: 500;
  transition: background .14s, color .14s, border-color .14s, opacity .14s;
}
.btn-icono:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.btn-icono.apagado { opacity: .4; cursor: default; pointer-events: none; }

.pasos { margin: 0; padding-left: 20px; color: var(--text-2); font-size: 13.5px; line-height: 1.75; }
.pasos li { margin-bottom: 3px; }

.rejilla { display: grid; gap: 14px; }
/* Los hijos de una rejilla arrancan con min-width:auto, que en la práctica es
   el ancho de su contenido. Una tabla ancha adentro empujaba la columna entera
   y en el celular la pantalla completa se deslizaba de lado. Con min-width:0 la
   tabla se desliza sola, dentro de su propia caja, que es lo que uno espera. */
.rejilla > *, .cifras > * { min-width: 0; }
.rejilla-2 { grid-template-columns: 1fr 1fr; }
.rejilla-3 { grid-template-columns: repeat(3, 1fr); }
.rejilla-4 { grid-template-columns: repeat(4, 1fr); }
.rejilla-ancha { grid-template-columns: 1.35fr 1fr; }
.col-entera { grid-column: 1 / -1; }

.vacio { text-align: center; padding: 52px 20px; color: var(--text-3); }
.vacio-icono { font-size: 32px; opacity: .3; margin-bottom: 12px; }
.vacio h3 { margin: 0 0 6px; font-size: 16px; color: var(--text-2); font-weight: 500; }
.vacio p { margin: 0; font-size: 13px; }

/* =============================================================================
   PANELES Y CIFRAS
   ============================================================================= */

.panel {
  background: var(--surface); border-radius: var(--r-lg);
  box-shadow: var(--sombra-card); padding: 19px 21px; margin-top: 14px;
}
.panel:first-child { margin-top: 0; }
.panel-cab { display: flex; align-items: baseline; gap: 10px; margin-bottom: 15px; }
.panel-cab h2 {
  font-family: var(--display); font-size: 14.5px; font-weight: 600;
  margin: 0; letter-spacing: .01em;
}
.panel-cab .panel-nota { font-size: 12px; color: var(--text-3); margin-left: auto; }
.panel-cab .btn { margin-left: auto; }
.panel.peligro { border: 1px solid color-mix(in srgb, var(--alerta) 35%, transparent); }
.panel.peligro .panel-cab h2 { color: var(--alerta); }
.panel-sin-relleno { padding: 19px 0 6px; }
.panel-sin-relleno .panel-cab { padding: 0 21px; }

.cifras { display: grid; gap: 13px; grid-template-columns: repeat(4, 1fr); margin-top: 14px; }
.cifras-5 { grid-template-columns: repeat(5, 1fr); }
.cifras-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1280px) { .cifras-5 { grid-template-columns: repeat(3, 1fr); } }

.cifra {
  background: var(--surface); border-radius: var(--r-lg);
  box-shadow: var(--sombra-card); padding: 17px 19px;
  border-left: 3px solid var(--accent);
}
.cifra-etiqueta {
  font-size: 10px; text-transform: uppercase; letter-spacing: .14em;
  color: var(--text-3); margin-bottom: 9px;
}
.cifra-valor {
  font-family: var(--display); font-size: 26px; font-weight: 600;
  line-height: 1.05; font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.cifra-pie {
  font-size: 11.5px; color: var(--text-3); margin-top: 7px;
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
.cifra.verde  { border-left-color: var(--ok); }
.cifra.ambar  { border-left-color: var(--atencion); }
.cifra.roja   { border-left-color: var(--alerta); }
.cifra.azul   { border-left-color: var(--info); }
.cifra.morada { border-left-color: var(--morado); }

.delta { font-weight: 600; font-size: 11px; }
.delta.bien { color: var(--ok); }
.delta.mal  { color: var(--alerta); }

/* Fila de dato: etiqueta a la izquierda, valor a la derecha. */
.dato-fila {
  display: flex; align-items: baseline; gap: 10px;
  padding: 7px 0; border-bottom: 1px dashed var(--line);
  font-size: 13px;
}
.dato-fila:last-child { border-bottom: 0; }
.dato-et { color: var(--text-3); flex: 1; min-width: 0; }
.dato-val { font-variant-numeric: tabular-nums; font-weight: 500; text-align: right; }

/* Barra simple, la usan el embudo y las comparaciones. */
.barra {
  display: block; flex: 1; height: 7px; background: var(--surface-3);
  border-radius: var(--r-pill); overflow: hidden; min-width: 30px;
}
.barra-relleno {
  display: block; height: 100%; background: var(--accent);
  border-radius: var(--r-pill); transition: width .3s;
}
.barra-relleno.verde { background: var(--ok); }
.barra-relleno.ambar { background: var(--atencion); }
.barra-relleno.roja  { background: var(--alerta); }
.barra-relleno.info  { background: var(--info); }

/* ---------- embudo del pipeline ---------- */

.embudo { display: flex; flex-direction: column; gap: 5px; }
.embudo-fila {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  padding: 6px 8px; border-radius: var(--r); transition: background .14s;
  border: 0; background: none; width: 100%; text-align: left; color: inherit;
}
.embudo-fila:hover { background: var(--surface-2); }
.embudo-num {
  font-family: var(--display); font-size: 10.5px; color: var(--text-3);
  border: 1px solid var(--line-2); border-radius: 50%;
  width: 20px; height: 20px; display: grid; place-items: center; flex: 0 0 20px;
}
.embudo-nombre { font-size: 12.5px; flex: 0 0 168px; }
.embudo-conteo {
  font-size: 13px; font-variant-numeric: tabular-nums; color: var(--text-2);
  flex: 0 0 24px; text-align: right; font-weight: 600;
}

/* ---------- gráfico de columnas ---------- */

.grafico {
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: 6px; align-items: end; padding-top: 6px;
}
.g-col { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; }
.g-valor {
  font-size: 10px; color: var(--text-3); font-variant-numeric: tabular-nums;
  white-space: nowrap; height: 13px;
}
.g-barra {
  width: 100%; max-width: 44px; background: var(--surface-3);
  border-radius: 5px 5px 2px 2px; transition: height .3s;
}
.g-col.activo .g-barra { background: var(--accent); }
.g-barra.verde { background: color-mix(in srgb, var(--ok) 70%, transparent); }
.g-barra.info  { background: color-mix(in srgb, var(--info) 62%, transparent); }
.g-barra.ambar { background: color-mix(in srgb, var(--atencion) 65%, transparent); }
.g-et {
  font-size: 10px; color: var(--text-3); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}

/* ---------- lista de clientes del dashboard ---------- */

.cartera { display: flex; flex-direction: column; gap: 2px; }
.cartera-fila {
  display: flex; align-items: center; gap: 11px; padding: 9px 8px;
  border-radius: var(--r); cursor: pointer; border: 0; background: none;
  width: 100%; text-align: left; color: inherit; transition: background .14s;
}
.cartera-fila:hover { background: var(--surface-2); }
.cartera-nombre { font-size: 13.5px; font-weight: 500; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cartera-etapa {
  font-size: 11px; color: var(--text-3); flex: 0 0 auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 130px;
}
.cartera-roas {
  font-family: var(--display); font-size: 13.5px; font-weight: 600;
  font-variant-numeric: tabular-nums; flex: 0 0 52px; text-align: right;
}
.cartera-sub { font-size: 11px; color: var(--text-3); margin-top: 2px; }

/* ---------- agenda corta ---------- */

.agenda { display: flex; flex-direction: column; gap: 1px; }
.agenda-fila {
  display: flex; align-items: center; gap: 12px; padding: 9px 8px;
  border-radius: var(--r); cursor: pointer; border: 0; background: none;
  width: 100%; text-align: left; color: inherit; transition: background .14s;
}
.agenda-fila:hover { background: var(--surface-2); }
.agenda-fecha {
  flex: 0 0 48px; text-align: center; background: var(--accent-soft);
  border-radius: var(--r-xs); padding: 5px 4px; color: var(--accent);
}
.agenda-dia { display: block; font-family: var(--display); font-size: 16px; line-height: 1; font-weight: 600; }
.agenda-mes { display: block; font-size: 9px; text-transform: uppercase; letter-spacing: .1em; margin-top: 3px; }
.agenda-cuerpo { flex: 1; min-width: 0; }
.agenda-nombre {
  display: block; font-size: 13px; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.agenda-detalle {
  display: block; font-size: 11.5px; color: var(--text-3); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.agenda-cuenta { font-size: 11px; color: var(--text-3); flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.agenda-cuenta.urgente { color: var(--alerta); font-weight: 600; }

/* ---------- alertas del dashboard ---------- */

.alertas { display: flex; flex-direction: column; gap: 7px; }
.alerta-fila {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px;
  border-radius: var(--r); border: 0; width: 100%; text-align: left;
  background: var(--surface-2); cursor: pointer; color: inherit;
  border-left: 3px solid var(--text-3); font-size: 13px;
  transition: background .14s, transform .1s;
}
.alerta-fila:hover { background: var(--surface-3); transform: translateX(2px); }
.alerta-fila.mal   { border-left-color: var(--alerta); }
.alerta-fila.aviso { border-left-color: var(--atencion); }
.alerta-fila.info  { border-left-color: var(--info); }
.alerta-cuerpo { flex: 1; min-width: 0; }
.alerta-nota { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }

/* ---------- seguimiento de hoy ---------- */

.hoy-lista { display: flex; flex-direction: column; gap: 6px; }
.hoy-fila {
  display: flex; align-items: center; gap: 11px; padding: 9px 11px;
  background: var(--surface-2); border-radius: var(--r); font-size: 13px;
}
.hoy-nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hoy-acciones { display: flex; gap: 6px; flex: 0 0 auto; }
.chip-hecho {
  border: 1px solid var(--line-2); background: var(--surface); color: var(--text-3);
  border-radius: var(--r-pill); padding: 4px 12px; font-size: 11.5px; cursor: pointer;
  transition: background .14s, color .14s, border-color .14s;
}
.chip-hecho:hover { border-color: var(--ok); color: var(--ok); }
.chip-hecho.activo {
  background: color-mix(in srgb, var(--ok) 16%, transparent);
  border-color: transparent; color: var(--ok); font-weight: 600;
}

/* =============================================================================
   TABLERO KANBAN
   ============================================================================= */

.tablero-envoltura { height: 100%; display: flex; flex-direction: column; min-height: 0; }

.filtros {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 26px 14px; background: var(--surface);
}
.filtros-etiqueta {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--text-3);
}
.filtro-caja {
  display: flex; align-items: center; gap: 6px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 5px 13px;
}
.filtro-caja select, .filtro-caja input {
  background: none; border: 0; outline: none; color: var(--text);
  font-size: 13px; padding: 2px 0; cursor: pointer;
}
.filtro-caja input[type="date"] { width: 128px; }
.filtro-caja input[type="month"] { width: 140px; }

.tablero {
  display: flex; gap: 13px; padding: 16px 26px 26px;
  overflow-x: auto; overflow-y: hidden; flex: 1; min-height: 0;
  scroll-snap-type: x proximity;
}

.col {
  flex: 0 0 278px; display: flex; flex-direction: column; min-height: 0;
  background: var(--surface); border: 1px solid transparent;
  border-radius: var(--r-lg); scroll-snap-align: start;
  box-shadow: var(--sombra-card);
  transition: border-color .14s, background .14s;
}
.col.arrastre { border-color: var(--accent); background: var(--accent-soft); }
/* La columna que corresponde al día del mes en el que estamos. Es una guía,
   no un juicio: dice "por acá deberían ir yendo". */
.col.esperada .col-nombre { color: var(--accent); }
.col.esperada { box-shadow: var(--sombra-card), inset 0 2px 0 var(--accent); }

.col-cab { padding: 13px 14px 11px; }
.col-titulo { display: flex; align-items: center; gap: 8px; }
.col-num {
  font-family: var(--display); font-size: 10.5px; color: var(--text-3);
  border: 1px solid var(--line-2); border-radius: 50%;
  width: 19px; height: 19px; display: grid; place-items: center; flex: 0 0 19px;
}
.col-nombre { font-size: 12.5px; font-weight: 600; letter-spacing: .01em; line-height: 1.25; }
.col-conteo {
  margin-left: auto; font-size: 12px; color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.col-grupo {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .13em;
  color: var(--text-3); margin-top: 6px; opacity: .8;
}
.col-cuerpo {
  padding: 4px 9px 12px; overflow-y: auto; flex: 1; min-height: 60px;
  display: flex; flex-direction: column; gap: 8px;
}
.col-vacia { font-size: 12px; color: var(--text-3); text-align: center; padding: 16px 6px; opacity: .65; }

/* ---------- tarjeta del ciclo ---------- */

.tarjeta {
  background: var(--surface-2); border: 1px solid transparent;
  border-left: 3px solid var(--line-2);
  border-radius: var(--r); padding: 11px 12px; cursor: grab;
  transition: border-color .14s, transform .1s, box-shadow .14s;
}
.tarjeta:hover {
  border-color: var(--line-2); box-shadow: var(--sombra-card); transform: translateY(-1px);
}
.tarjeta:active { cursor: grabbing; }
.tarjeta.arrastrando { opacity: .45; transform: rotate(1.5deg); }
.tarjeta.sem-v { border-left-color: var(--sem-verde); }
.tarjeta.sem-a { border-left-color: var(--sem-amarillo); }
.tarjeta.sem-r { border-left-color: var(--sem-rojo); }
.tarjeta.sem-g { border-left-color: var(--line-2); }
.tarjeta.atrasada { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--alerta) 40%, transparent); }

.t-cab { display: flex; align-items: flex-start; gap: 8px; }
.t-nombre { font-size: 13px; font-weight: 600; line-height: 1.3; flex: 1; min-width: 0; }
.t-codigo {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .02em;
  color: var(--text-3); flex: 0 0 auto; padding-top: 2px;
}
.t-linea { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.t-dato { font-size: 11.5px; color: var(--text-3); display: flex; align-items: center; gap: 4px; }
.t-avance { margin-top: 9px; display: flex; align-items: center; gap: 8px; }
.t-avance-texto { font-size: 10.5px; color: var(--text-3); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.t-pie {
  margin-top: 9px; padding-top: 8px; border-top: 1px dashed var(--line);
  display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--text-2);
  white-space: nowrap;
}
.t-marca { font-size: 11px; color: var(--text-3); }
.t-marca.mal { color: var(--alerta); font-weight: 600; }
.t-cuenta { margin-left: auto; font-variant-numeric: tabular-nums; }

/* =============================================================================
   FICHAS (modales)
   ============================================================================= */

/* Flex y no grid, a propósito. Con `display:grid` la columna implícita se
   dimensiona por el contenido, así que una ficha con muchas pestañas y trece
   pastillas de etapa se estiraba hasta su max-width — 1140px — aunque la
   pantalla midiera 375. El modal quedaba cortado por el borde derecho y la
   mitad de los controles eran inalcanzables en el celular. Como caja flexible,
   el ancho se resuelve contra el contenedor y el max-width solo lo limita. */
.modal-fondo {
  position: fixed; inset: 0; z-index: 200; background: rgba(10,11,15,.55);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  animation: aparece .16s ease-out; backdrop-filter: blur(3px);
}
.modal-fondo.sale { animation: desaparece .18s ease-in forwards; }
@keyframes aparece { from { opacity: 0 } to { opacity: 1 } }
@keyframes desaparece { to { opacity: 0 } }
@keyframes sube {
  from { opacity: 0; transform: translateY(14px) scale(.985) }
  to { opacity: 1; transform: none }
}

/* El min-width:0 es lo que impide que una tabla ancha adentro empuje la ficha
   entera más allá de la pantalla: sin él, el contenido manda sobre el ancho. */
.modal {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-xl); box-shadow: var(--sombra);
  width: 100%; min-width: 0; max-height: calc(100vh - 48px);
  display: flex; flex-direction: column;
  animation: sube .2s cubic-bezier(.2,.8,.3,1);
}
.modal-sm { max-width: 430px; }
.modal-md { max-width: 660px; }
.modal-lg { max-width: 980px; }
.modal-xl { max-width: 1140px; }

.modal-cab {
  padding: 21px 26px 15px; border-bottom: 1px solid var(--line);
  display: flex; align-items: flex-start; gap: 14px;
}
.modal-cab h2 {
  font-family: var(--display); font-size: 19px; font-weight: 600;
  margin: 0; letter-spacing: -.01em;
}
.modal-cab-sub {
  font-size: 12.5px; color: var(--text-3); margin-top: 5px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.modal-cerrar {
  margin-left: auto; background: none; border: 0; cursor: pointer;
  color: var(--text-3); font-size: 22px; line-height: 1; padding: 0 4px;
  border-radius: var(--r-xs); flex: 0 0 auto;
}
.modal-cerrar:hover { color: var(--text); background: var(--surface-2); }
.modal-cuerpo { padding: 20px 26px; overflow-y: auto; flex: 1; }
.modal-pie {
  padding: 15px 26px 19px; border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.modal-pie .sep { flex: 1; }

/* Las pestañas no se desplazan: se acomodan en varias filas si hace falta.
   Antes tenían overflow-x y en una ventana angosta las últimas quedaban
   escondidas detrás del borde — uno no sabía que existían. Un menú que hay
   que descubrir deslizando no es un menú. */
.pestanas {
  display: flex; flex-wrap: wrap; gap: 4px 2px;
  padding: 0 26px; border-bottom: 1px solid var(--line);
}
.pestana {
  padding: 11px 14px; border: 0; background: none; cursor: pointer;
  font-size: 13px; color: var(--text-3); white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .14s, border-color .14s;
}
.pestana:hover { color: var(--text); }
.pestana.activa { color: var(--accent); border-bottom-color: var(--accent); font-weight: 500; }

.seccion { margin-bottom: 24px; }
.seccion:last-child { margin-bottom: 0; }
.seccion-titulo {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .14em;
  color: var(--text-3); margin-bottom: 12px; padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px;
}
.seccion-titulo .btn { margin-left: auto; }

/* ---------- checklist de etapa ---------- */

.tareas { display: flex; flex-direction: column; gap: 2px; }
/* La tipografía se declara entera aquí a propósito: estas etiquetas a veces
   viven dentro de un .campo y sin esto heredarían las versalitas grises. */
.tarea {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px;
  border-radius: var(--r); cursor: pointer; transition: background .14s;
  font-size: 13.5px; text-transform: none; letter-spacing: normal;
  color: var(--text); margin-bottom: 0;
}
.tarea:hover { background: var(--surface-2); }
.tarea input[type="checkbox"] {
  margin: 0; accent-color: var(--accent); width: 16px; height: 16px;
  cursor: pointer; flex: 0 0 16px;
}
.tarea-marca { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; cursor: pointer; }
.tarea-texto { flex: 1; line-height: 1.45; }
.tarea.hecha .tarea-texto { color: var(--text-3); text-decoration: line-through; }

/* El botón de "no aplica": saca la tarea del cálculo del avance sin ensuciarla
   con un check que no corresponde. */
.tarea-na {
  flex: 0 0 auto; background: none; border: 1px solid var(--line-2);
  color: var(--text-3); font-size: 10.5px; padding: 3px 10px;
  border-radius: var(--r-pill); cursor: pointer; white-space: nowrap;
  transition: background .14s, color .14s, border-color .14s;
}
.tarea-na:hover { border-color: var(--text-3); color: var(--text-2); }
.tarea-na.activa { background: var(--surface-3); color: var(--text-2); font-weight: 500; }
.tarea.no-aplica { opacity: .5; }
.tarea.no-aplica .tarea-texto { text-decoration: none; font-style: italic; }
.tarea.no-aplica .tarea-marca { cursor: default; }

.opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.opcion {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border: 1px solid var(--line-2); border-radius: var(--r-pill);
  cursor: pointer; font-size: 13px; background: var(--surface);
  transition: border-color .14s, background .14s, color .14s;
  text-transform: none; letter-spacing: normal; color: var(--text); margin-bottom: 0;
}
.opcion:hover { border-color: var(--text-3); }
.opcion input { accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer; margin: 0; }
.opcion.marcada {
  background: var(--accent-soft); border-color: var(--accent);
  color: var(--accent); font-weight: 500;
}

/* ---------- navegador de etapas dentro de la ficha ---------- */

.etapas-nav {
  display: flex; gap: 5px; overflow-x: auto; padding-bottom: 10px;
  margin-bottom: 16px; border-bottom: 1px solid var(--line);
}
.etapa-chip {
  border: 1px solid var(--line-2); background: var(--surface);
  border-radius: var(--r-pill); padding: 6px 12px; cursor: pointer;
  font-size: 12px; white-space: nowrap; color: var(--text-2);
  display: inline-flex; align-items: center; gap: 6px;
  transition: border-color .14s, background .14s, color .14s;
}
.etapa-chip:hover { border-color: var(--text-3); color: var(--text); }
.etapa-chip.activa {
  background: var(--accent); border-color: transparent;
  color: var(--on-accent); font-weight: 500;
}
.etapa-chip.completa:not(.activa) { border-color: color-mix(in srgb, var(--ok) 50%, transparent); }
.etapa-chip-punto { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); flex: 0 0 6px; }
.etapa-chip.activa .etapa-chip-punto { background: currentColor; }

/* Selector del sub-estado de la etapa. */
.estados-fila { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.estado-btn {
  border: 1px solid var(--line-2); background: var(--surface); color: var(--text-2);
  border-radius: var(--r-pill); padding: 6px 13px; cursor: pointer; font-size: 12.5px;
  transition: border-color .14s, background .14s, color .14s;
}
.estado-btn:hover { border-color: var(--text-3); color: var(--text); }
.estado-btn.activo { border-color: transparent; font-weight: 600; }

/* ---------- listas dentro de la ficha ---------- */

.lista-mini { display: flex; flex-direction: column; gap: 6px; }
.item-mini {
  display: flex; align-items: center; gap: 11px; padding: 9px 12px;
  background: var(--surface-2); border-radius: var(--r); font-size: 13px;
}
.item-mini-cuerpo { flex: 1; min-width: 0; }
.item-mini-nota { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.item-mini-monto { font-variant-numeric: tabular-nums; font-weight: 500; }
.item-quitar {
  background: none; border: 0; color: var(--text-3); cursor: pointer;
  font-size: 16px; padding: 0 3px; border-radius: var(--r-xs); flex: 0 0 auto;
}
.item-quitar:hover { color: var(--alerta); }

.resumen-dinero {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  background: var(--surface-2); border-radius: var(--r-lg); padding: 15px 18px;
  margin-bottom: 18px;
}
.rd-item { text-align: center; min-width: 0; }
.rd-etiqueta {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--text-3); margin-bottom: 6px;
}
.rd-valor {
  font-family: var(--display); font-size: 19px; font-weight: 600;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.rd-valor.ok  { color: var(--ok); }
.rd-valor.mal { color: var(--alerta); }
.rd-nota { font-size: 10.5px; color: var(--text-3); margin-top: 4px; }

/* ---------- cuadrícula del seguimiento diario ---------- */

.ritmo { margin-bottom: 18px; }
.ritmo-cab {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px;
  font-size: 12.5px; color: var(--text-2);
}
.ritmo-cab b { font-family: var(--display); font-variant-numeric: tabular-nums; }
.ritmo-dias { display: flex; flex-wrap: wrap; gap: 5px; }
.ritmo-dia {
  width: 34px; height: 40px; border-radius: var(--r-xs);
  border: 1px solid var(--line-2); background: var(--surface);
  cursor: pointer; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px;
  font-size: 11px; color: var(--text-2); transition: background .14s, border-color .14s;
  padding: 0; font-variant-numeric: tabular-nums;
}
.ritmo-dia:hover { border-color: var(--accent); }
.ritmo-dia small { font-size: 8.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; }
.ritmo-dia.hecho {
  background: color-mix(in srgb, var(--ok) 17%, transparent);
  border-color: transparent; color: var(--ok); font-weight: 600;
}
.ritmo-dia.hecho small { color: var(--ok); opacity: .8; }
.ritmo-dia.futuro { opacity: .35; cursor: default; }
.ritmo-dia.hoy { box-shadow: 0 0 0 2px var(--accent); }
.ritmo-dia.perdido:not(.hecho) { border-style: dashed; border-color: color-mix(in srgb, var(--alerta) 45%, transparent); }

.semanas { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 14px; }
.semana-caja {
  border: 1px solid var(--line-2); border-radius: var(--r);
  padding: 10px 11px; background: var(--surface); cursor: pointer;
  transition: border-color .14s, background .14s; text-align: left;
}
.semana-caja:hover { border-color: var(--accent); }
.semana-caja.hecha {
  background: color-mix(in srgb, var(--ok) 12%, transparent);
  border-color: color-mix(in srgb, var(--ok) 40%, transparent);
}
.semana-et { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-3); }
.semana-est { font-size: 12px; margin-top: 5px; font-weight: 500; }
.semana-caja.hecha .semana-est { color: var(--ok); }

/* ---------- fases de campaña ---------- */

.fases { display: flex; flex-direction: column; gap: 10px; }
.fase-caja {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 14px 16px; background: var(--surface-2);
}
.fase-caja.activa { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: var(--surface); }
.fase-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.fase-nombre { font-family: var(--display); font-size: 14px; font-weight: 600; flex: 1; }
.fase-rejilla { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }

/* ---------- bitácora ---------- */

.bitacora { display: flex; flex-direction: column; }
.evento {
  display: flex; gap: 12px; padding: 8px 0; font-size: 12.5px;
  border-bottom: 1px solid var(--line);
}
.evento:last-child { border-bottom: 0; }
.evento-cuando { flex: 0 0 118px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.evento-texto { flex: 1; color: var(--text-2); }

/* =============================================================================
   TABLAS
   ============================================================================= */

.tabla-envoltura { overflow-x: auto; border-radius: var(--r-lg); }
table.tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tabla th {
  text-align: left; padding: 10px 12px; font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .11em; color: var(--text-3);
  border-bottom: 1px solid var(--line); font-weight: 600; white-space: nowrap;
}
table.tabla td {
  padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: middle;
}
table.tabla tr:last-child td { border-bottom: 0; }
table.tabla tbody tr { transition: background .14s; }
table.tabla tbody tr.clic { cursor: pointer; }
table.tabla tbody tr.clic:hover { background: var(--surface-2); }
table.tabla .num { text-align: right; font-variant-numeric: tabular-nums; }
table.tabla .nada { color: var(--text-3); }
table.tabla td.ir { text-align: right; color: var(--line-2); font-size: 17px; width: 26px; }
table.tabla tr:hover td.ir { color: var(--accent); }
table.tabla tfoot td {
  font-weight: 600; border-top: 2px solid var(--line); border-bottom: 0;
  font-variant-numeric: tabular-nums; background: var(--surface-2);
}
table.tabla .celda-cliente { display: flex; align-items: center; gap: 9px; min-width: 0; }
table.tabla .celda-sub { font-size: 11px; color: var(--text-3); margin-top: 2px; }

/* =============================================================================
   CALENDARIO
   ============================================================================= */

.cal-nav { display: flex; gap: 6px; }
.cal-leyenda {
  display: flex; gap: 16px; flex-wrap: wrap;
  padding: 14px 2px 2px; font-size: 12px; color: var(--text-3);
}
.cal-leyenda-item { display: flex; align-items: center; gap: 7px; }
.cal-punto { width: 9px; height: 9px; border-radius: 3px; display: block; flex: 0 0 9px; }

/* En el computador no hace nada; en el celular es la que deja que la rejilla
   se deslice de lado sin arrastrar consigo el resto de la pantalla. */
/* El padding es para que la sombra de la rejilla no quede cortada: un
   contenedor con overflow-x:auto también recorta arriba y abajo. */
.calendario-envoltura { overflow-x: auto; padding-bottom: 5px; }

.calendario {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden; margin-top: 12px;
  box-shadow: var(--sombra-card);
}
.cal-cabecera {
  background: var(--surface); padding: 10px; text-align: center;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--text-3); font-weight: 600;
}
.cal-dia {
  background: var(--surface); min-height: 116px; padding: 8px;
  display: flex; flex-direction: column; gap: 5px;
}
.cal-dia.fuera { background: var(--surface-2); }
.cal-dia.hoy { background: var(--accent-soft); }
.cal-numero {
  font-family: var(--display); font-size: 12.5px; color: var(--text-3);
  font-variant-numeric: tabular-nums; flex: 0 0 auto;
}
.cal-dia.hoy .cal-numero {
  color: var(--on-accent); background: var(--accent);
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 600; font-size: 11.5px;
}
.cal-eventos { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.cal-evento {
  display: block; width: 100%; text-align: left; border: 0; cursor: pointer;
  background: var(--surface-2); border-left: 3px solid var(--text-3);
  border-radius: var(--r-xs); padding: 4px 7px; font: inherit;
  transition: transform .1s, box-shadow .14s;
}
.cal-evento:hover { box-shadow: var(--sombra-card); transform: translateY(-1px); }
.cal-evento.hecha { opacity: .48; }
.cal-hora { display: block; font-size: 9.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.cal-nombre {
  display: block; font-size: 11.5px; font-weight: 600; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-etapa {
  display: block; font-size: 10px; color: var(--text-3); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-dia[data-ir-dia] { cursor: pointer; }
.cal-dia[data-ir-dia]:hover { background: var(--surface-2); }
.cal-dia.hoy[data-ir-dia]:hover { background: var(--accent-soft); }
.cal-mas {
  font-size: 10.5px; color: var(--text-3); background: none; border: 0;
  cursor: pointer; padding: 1px 4px; text-align: left;
}
.cal-mas:hover { color: var(--accent); }

/* Colores por tipo de actividad. El color va en el borde y en un fondo muy
   suave: el texto siempre se lee sobre la superficie normal, en los dos temas. */
.act-reunion       { --franja: var(--accent); }
.act-grabacion     { --franja: var(--morado); }
.act-entrega       { --franja: var(--info); }
.act-informe       { --franja: var(--atencion); }
.act-socializacion { --franja: var(--ok); }
.act-semanal       { --franja: var(--info); }
.act-cobro         { --franja: var(--alerta); }
.act-capacitacion  { --franja: var(--morado); }
.act-interna       { --franja: var(--text-3); }

.cal-evento[class*="act-"], .cal-bloque[class*="act-"] {
  border-left-color: var(--franja);
  background: color-mix(in srgb, var(--franja) 12%, var(--surface));
}
.cal-punto[class*="act-"] { background: var(--franja); }

/* ---------- rejilla de horas: semana y día ---------- */

.cal-tiempo {
  margin-top: 12px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sombra-card);
}
.cal-tiempo-cab { display: grid; border-bottom: 1px solid var(--line); background: var(--surface); }
.cal-esquina { border-right: 1px solid var(--line); }
.cal-cab-dia {
  padding: 10px 8px; text-align: center; cursor: pointer;
  border-left: 1px solid var(--line); transition: background .14s;
}
.cal-cab-dia:hover { background: var(--surface-2); }
.cal-cab-nombre {
  display: block; font-size: 10px; text-transform: uppercase;
  letter-spacing: .12em; color: var(--text-3); font-weight: 600;
}
.cal-cab-num {
  display: block; font-family: var(--display); font-size: 18px;
  margin-top: 3px; font-variant-numeric: tabular-nums;
}
.cal-cab-dia.hoy .cal-cab-num {
  background: var(--accent); color: var(--on-accent);
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; margin: 3px auto 0; font-size: 14px;
}

.cal-sinhora { display: grid; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.cal-sinhora-et {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-3); padding: 8px 6px; text-align: right;
  border-right: 1px solid var(--line);
}
.cal-sinhora-col {
  padding: 6px; border-left: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
}

.cal-tiempo-cuerpo { display: grid; max-height: 62vh; overflow-y: auto; }
.cal-horas { border-right: 1px solid var(--line); }
.cal-hora-et {
  font-size: 10.5px; color: var(--text-3); text-align: right;
  padding: 2px 8px 0 0; font-variant-numeric: tabular-nums;
}
.cal-pista { position: relative; border-left: 1px solid var(--line); min-width: 0; }
.cal-pista.hoy { background: color-mix(in srgb, var(--accent) 4%, transparent); }
.cal-linea { border-bottom: 1px solid var(--line); }

.cal-bloque {
  position: absolute; left: 3px; right: 3px; overflow: hidden;
  border: 1px solid var(--line); border-left: 3px solid var(--text-3);
  border-radius: var(--r-xs); padding: 4px 7px; cursor: pointer;
  text-align: left; font: inherit; color: var(--text);
  transition: box-shadow .14s, transform .1s;
}
.cal-bloque:hover { box-shadow: var(--sombra-card); transform: translateY(-1px); z-index: 2; }
.cal-bloque.hecha { opacity: .55; }
.cal-bloque-hora { display: block; font-size: 10px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.cal-bloque-nombre {
  display: block; font-size: 12px; font-weight: 600; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-bloque-detalle {
  display: block; font-size: 10.5px; color: var(--text-3); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.segmentado {
  display: inline-flex; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 3px;
}
.seg-btn {
  border: 0; background: none; cursor: pointer; font: inherit; font-size: 12.5px;
  padding: 5px 14px; border-radius: var(--r-pill); color: var(--text-2);
  transition: background .14s, color .14s;
}
.seg-btn:hover { color: var(--text); }
.seg-btn.activo {
  background: var(--accent); color: var(--on-accent); font-weight: 500;
  box-shadow: var(--sombra-sm);
}

/* =============================================================================
   INFORME
   El informe se ve en pantalla como se va a imprimir: papel blanco, márgenes
   generosos, tipografía grande. Es lo que el cliente va a leer.
   ============================================================================= */

.informe {
  background: var(--surface); border-radius: var(--r-lg);
  box-shadow: var(--sombra-card); padding: 42px 46px;
  max-width: 860px; margin: 16px auto 0;
}
.informe-cab { border-bottom: 2px solid var(--text); padding-bottom: 20px; margin-bottom: 28px; }
.informe-cab-fila { display: flex; align-items: flex-start; gap: 18px; }
.informe-titulo {
  font-family: var(--display); font-size: 28px; font-weight: 600;
  margin: 18px 0 4px; letter-spacing: -.02em; line-height: 1.15;
}
.informe-sub { font-size: 13px; color: var(--text-3); }
.informe h3 {
  font-family: var(--display); font-size: 15px; font-weight: 600;
  margin: 30px 0 10px; letter-spacing: .01em;
  padding-bottom: 7px; border-bottom: 1px solid var(--line);
}
.informe p { margin: 0 0 12px; color: var(--text-2); line-height: 1.72; font-size: 14px; }
.informe p:last-child { margin-bottom: 0; }
.informe-vacio { color: var(--text-3); font-style: italic; }

.informe-metricas {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden; margin: 22px 0 8px;
}
.im-caja { background: var(--surface); padding: 16px 15px; }
.im-et {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .13em;
  color: var(--text-3); margin-bottom: 7px;
}
.im-val {
  font-family: var(--display); font-size: 22px; font-weight: 600;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1.1;
}
.im-pie { font-size: 11px; color: var(--text-3); margin-top: 5px; }

.informe-pie {
  margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--line);
  font-size: 11.5px; color: var(--text-3); display: flex; gap: 14px; flex-wrap: wrap;
}

/* ---------- anuncios ganadores ----------
   En el editor van en fila, para poder ordenarlos y borrarlos rápido. En la
   hoja impresa van en dos columnas, que es donde la captura se ve grande y el
   cliente reconoce el anuncio de un vistazo. */

.anuncios { display: flex; flex-direction: column; gap: 9px; }
.anuncio-caja {
  display: flex; align-items: center; gap: 13px;
  background: var(--surface-2); border-radius: var(--r); padding: 10px 12px;
}
.anuncio-img {
  width: 54px; height: 54px; flex: 0 0 54px; border-radius: var(--r-xs);
  object-fit: cover; background: var(--surface-3); display: block;
}
.anuncio-sinimg {
  display: grid; place-items: center; font-size: 9px; color: var(--text-3);
  text-align: center; line-height: 1.2; padding: 4px;
}
.anuncio-cuerpo { flex: 1; min-width: 0; }
.anuncio-nombre { font-size: 13.5px; font-weight: 600; }
.anuncio-datos {
  display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px;
  font-size: 11.5px; color: var(--text-2); font-variant-numeric: tabular-nums;
}
.anuncio-nota {
  font-size: 11.5px; color: var(--text-3); margin-top: 4px; display: block;
}
.anuncio-acciones { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }

.informe-anuncios {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 14px;
}
.ia-caja {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; background: var(--surface); break-inside: avoid;
}
.ia-img { width: 100%; display: block; aspect-ratio: 4 / 3; object-fit: cover; background: var(--surface-3); }
.ia-cuerpo { padding: 13px 15px 15px; }
.ia-nombre { font-family: var(--display); font-size: 14px; font-weight: 600; }
.ia-datos {
  display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px;
  font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums;
}

/* =============================================================================
   AVISOS
   ============================================================================= */

#avisos {
  position: fixed; bottom: 20px; right: 20px; z-index: 300;
  display: flex; flex-direction: column; gap: 9px; align-items: flex-end;
  pointer-events: none;
}
.aviso {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r); padding: 12px 16px; box-shadow: var(--sombra);
  font-size: 13.5px; max-width: 360px; pointer-events: auto;
  animation: entraAviso .22s cubic-bezier(.2,.8,.3,1);
}
.aviso.ok  { border-left-color: var(--ok); }
.aviso.mal { border-left-color: var(--alerta); }
.aviso.sale { animation: saleAviso .2s ease-in forwards; }
@keyframes entraAviso { from { opacity: 0; transform: translateX(20px) } to { opacity: 1; transform: none } }
@keyframes saleAviso { to { opacity: 0; transform: translateX(20px) } }

/* =============================================================================
   MÓVIL
   ============================================================================= */

.movil-cab { display: none; }
.velo { display: none; }

@media (max-width: 980px) {
  .app.activa { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }

  /* El padding de arriba respeta la muesca del iPhone cuando el sistema está
     instalado en la pantalla de inicio y ocupa toda la altura. */
  .movil-cab {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 15px; background: var(--surface);
    padding-top: calc(10px + env(safe-area-inset-top));
    padding-left: calc(15px + env(safe-area-inset-left));
    padding-right: calc(15px + env(safe-area-inset-right));
    border-bottom: 1px solid var(--line); position: relative; z-index: 30;
  }
  .movil-btn {
    background: none; border: 0; font-size: 19px; cursor: pointer;
    color: var(--text-2); padding: 4px 6px; border-radius: var(--r-xs);
  }
  .movil-cab .marca { flex: 1; min-width: 0; }
  .movil-cab .marca-sello { width: 32px; height: 32px; border-radius: 9px; font-size: 13px; }
  .movil-cab .marca-sello::after { width: 11px; bottom: 6px; }
  .movil-cab .marca-nombre { font-size: 15px; }
  .movil-cab .marca-tag { display: none; }

  .lateral {
    position: fixed; inset: 0 auto 0 0; width: 270px; z-index: 50;
    background: var(--bg); transform: translateX(-100%);
    transition: transform .22s cubic-bezier(.2,.8,.3,1);
    box-shadow: var(--sombra);
  }
  .lateral.abierta { transform: none; }
  .velo {
    display: block; position: fixed; inset: 0; z-index: 40;
    background: rgba(10,11,15,.5); opacity: 0; pointer-events: none;
    transition: opacity .22s;
  }
  .velo.visible { opacity: 1; pointer-events: auto; }

  .principal { margin: 0; border-radius: 0; box-shadow: none; }
  .topbar { padding: 14px 16px 12px; }
  .topbar h1 { font-size: 18px; }
  .contenido { padding: 4px 16px 34px; }
  .filtros { padding: 11px 16px 12px; }

  .cifras, .cifras-5, .cifras-3 { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cifra { padding: 14px 15px; }
  .cifra-valor { font-size: 21px; }

  .rejilla-2, .rejilla-3, .rejilla-4, .rejilla-ancha { grid-template-columns: 1fr; }
  .resumen-dinero { grid-template-columns: 1fr 1fr; }
  .fase-rejilla { grid-template-columns: 1fr 1fr; }
  .informe-metricas { grid-template-columns: 1fr 1fr; }
  .semanas { grid-template-columns: repeat(3, 1fr); }
  .embudo-nombre { flex: 0 0 118px; font-size: 12px; }

  /* Tablero: una columna a la vez, deslizando. */
  .tablero { padding: 13px 16px 20px; gap: 11px; scroll-snap-type: x mandatory; }
  .col { flex: 0 0 84vw; }

  /* El calendario no se puede apretar más sin volverse ilegible: se deja que
     se deslice de lado dentro de su propia área. */
  .calendario { min-width: 660px; }
  .cal-dia { min-height: 90px; padding: 6px; }
  .cal-cabecera { padding: 9px 6px; }
  .buscador-ancho { max-width: none; }

  .cal-tiempo { overflow-x: auto; }
  .cal-tiempo-cab, .cal-tiempo-cuerpo, .cal-sinhora { min-width: 620px; }
  .cal-tiempo-cuerpo { max-height: 58vh; }
  .vista-dia .cal-tiempo-cab,
  .vista-dia .cal-tiempo-cuerpo,
  .vista-dia .cal-sinhora { min-width: 0; }

  .segmentado { order: -1; }
  .cal-leyenda { gap: 11px; font-size: 11px; }

  .informe { padding: 26px 22px; border-radius: var(--r-lg); }
  .informe-anuncios { grid-template-columns: 1fr; }
  .anuncio-caja { flex-wrap: wrap; }
  .anuncio-acciones { margin-left: auto; }
  .informe-titulo { font-size: 22px; }

  /* Safari amplía la página cuando un campo tiene menos de 16px. Con esto el
     formulario deja de saltar al tocarlo. */
  input, select, textarea { font-size: 16px; }
  .campo input, .campo select, .campo textarea { font-size: 16px; }
  .buscador input, .filtro-caja select, .filtro-caja input { font-size: 16px; }

  .contenido {
    padding-left: calc(16px + env(safe-area-inset-left));
    padding-right: calc(16px + env(safe-area-inset-right));
    padding-bottom: calc(34px + env(safe-area-inset-bottom));
  }
  .modal-pie { padding-bottom: calc(19px + env(safe-area-inset-bottom)); }
  .lateral-pie { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }

  /* Objetivos de toque más generosos con el dedo. */
  .nav-item { padding: 12px; }
  .btn { padding: 11px 17px; }
  .pestana { padding: 13px 14px; }
  .ritmo-dia { width: 40px; height: 44px; }

  /* En el celular la ficha sube desde abajo y ocupa el ancho completo. */
  .modal-fondo { padding: 0; align-items: flex-end; }
  .modal { max-height: 94vh; border-radius: var(--r-xl) var(--r-xl) 0 0; border-bottom: 0; }
  .modal-cab, .modal-cuerpo, .modal-pie, .pestanas { padding-left: 17px; padding-right: 17px; }

  #avisos { left: 15px; right: 15px; bottom: 15px; align-items: stretch; }
  .aviso { max-width: none; }
}

@media (max-width: 560px) {
  .cifras, .cifras-5, .cifras-3 { grid-template-columns: 1fr; }
  .resumen-dinero, .fase-rejilla, .informe-metricas { grid-template-columns: 1fr 1fr; }
  .semanas { grid-template-columns: repeat(2, 1fr); }
}

/* =============================================================================
   IMPRESIÓN
   Pensada para el informe: todo lo que es sistema desaparece y queda la hoja.
   ============================================================================= */

@media print {
  .lateral, .topbar, .filtros, .movil-cab, #avisos, .velo, .no-imprimir {
    display: none !important;
  }
  .app.activa { display: block; height: auto; }
  .principal { margin: 0; box-shadow: none; border-radius: 0; background: #fff; }
  .contenido { padding: 0; overflow: visible; }
  .informe {
    box-shadow: none; padding: 0; max-width: none; margin: 0;
    background: #fff; color: #000;
  }
  .informe h3 { break-after: avoid; }
  .informe-metricas { break-inside: avoid; }
}