/* =============================================================================
   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;
}
/* La fecha que le toca a esa etapa. Es lo que convierte el tablero en un
   calendario: de un vistazo se sabe qué toca hoy sin abrir nada. */
.col-fecha {
  font-size: 11px; color: var(--text-2); margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.col-fecha.hoy { color: var(--accent); font-weight: 600; }
.col-fecha.pasada { color: var(--text-3); }
.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; }

/* La fila de alta rápida: escribir el gasto ahí mismo, sin abrir una ficha.
   Para lo que uno hace veinte veces al mes, un modal es un peaje. */
table.tabla tr.fila-alta { background: var(--surface-2); }
table.tabla tr.fila-alta:hover { background: var(--surface-2); }
table.tabla tr.fila-alta td { padding: 9px 10px; }
table.tabla tr.fila-alta input,
table.tabla tr.fila-alta select {
  width: 100%; padding: 7px 9px; border: 1px solid var(--line-2);
  border-radius: var(--r-xs); background: var(--surface); outline: none;
  font-size: 13px; font-family: inherit; color: inherit;
}
table.tabla tr.fila-alta input:focus,
table.tabla tr.fila-alta select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}

/* =============================================================================
   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;
}

/* =============================================================================
   ESTRATEGIAS — EL LIENZO

   Los nodos son divs posicionados en coordenadas del lienzo y los trazos van en
   un SVG por debajo. Los dos viven dentro de .lienzo-capa, que es la que lleva
   el transform del zoom y el desplazamiento: así todo se mueve junto y con una
   sola operación.

   Los colores de las cajas NO salen de las variables del tema: se escriben
   desde el JavaScript con la paleta de config.js, porque un diagrama que se le
   enseña al cliente tiene que verse igual en claro, en oscuro y en el PDF.
   ============================================================================= */

.lienzo-envoltura { position: relative; height: 100%; display: flex; flex-direction: column; }

.lienzo {
  position: relative; flex: 1; min-height: 0; overflow: hidden;
  background-color: var(--surface-2);
  /* La cuadrícula de puntos da referencia para alinear sin tener que dibujar
     guías. Es el fondo de todos los lienzos de este tipo por una razón. */
  background-image: radial-gradient(circle, var(--line-2) 1px, transparent 1px);
  background-size: 22px 22px;
  cursor: grab; touch-action: none;
}
.lienzo.agarrando { cursor: grabbing; }
.lienzo[data-htta="caja"],
.lienzo[data-htta="redondeada"],
.lienzo[data-htta="elipse"],
.lienzo[data-htta="rombo"],
.lienzo[data-htta="texto"] { cursor: crosshair; }
.lienzo[data-htta="conectar"] { cursor: cell; }

.lienzo-capa { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.lienzo-svg { position: absolute; top: 0; left: 0; overflow: visible; }
.lienzo-nodos { position: absolute; top: 0; left: 0; }

.lienzo-nodo {
  position: absolute; border: 1.5px solid; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  padding: 8px 11px; cursor: grab; user-select: none;
  box-shadow: 0 1px 2px rgba(17,19,26,.06);
  transition: box-shadow .12s;
}
.lienzo-nodo:hover { box-shadow: 0 2px 8px rgba(17,19,26,.14); }
.lienzo-nodo.suelto { box-shadow: none; padding: 4px 6px; }
.lienzo-nodo.sel { outline: 2px solid var(--accent); outline-offset: 2px; }
/* La caja de la que arranca una conexión a medio hacer. */
.lienzo-nodo.origen { outline: 2px dashed var(--accent); outline-offset: 3px; }

.lienzo-nodo-texto {
  width: 100%; text-align: center; line-height: 1.3; overflow-wrap: anywhere;
  outline: none; white-space: pre-wrap;
}
.lienzo-nodo-texto.editando {
  cursor: text; user-select: text;
  background: rgba(255,255,255,.75); border-radius: 3px;
}
.lienzo-nodo-texto:empty::before {
  content: 'Escriba…'; opacity: .35;
}

/* El tirador de la esquina para cambiar el tamaño. */
.lienzo-tirador {
  position: absolute; right: -5px; bottom: -5px; width: 11px; height: 11px;
  background: var(--accent); border: 2px solid var(--surface); border-radius: 3px;
  cursor: nwse-resize;
}

/* ---------- barra de herramientas ---------- */

.lienzo-barra {
  display: flex; align-items: center; gap: 3px; flex-wrap: wrap;
  padding: 9px 26px; background: var(--surface); border-bottom: 1px solid var(--line);
}
.lienzo-htta {
  width: 34px; height: 34px; border: 1px solid transparent; background: none;
  border-radius: var(--r); cursor: pointer; font-size: 15px; color: var(--text-2);
  display: grid; place-items: center;
  transition: background .14s, color .14s, border-color .14s;
}
.lienzo-htta:hover { background: var(--surface-2); color: var(--text); }
.lienzo-htta.activa {
  background: var(--accent); color: var(--on-accent); border-color: transparent;
}
.lienzo-zoom {
  width: auto; padding: 0 10px; font-size: 12px; font-variant-numeric: tabular-nums;
}
.lienzo-sep { width: 1px; height: 22px; background: var(--line-2); margin: 0 7px; }

/* ---------- panel de la selección ---------- */

.lienzo-panel {
  position: absolute; top: 62px; right: 16px; width: 208px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sombra);
  padding: 15px 16px; display: none; z-index: 5;
}
.lienzo-panel.visible { display: block; }
.lp-titulo {
  font-family: var(--display); font-size: 13px; font-weight: 600; margin-bottom: 13px;
}
.lp-etiqueta {
  font-size: 10px; text-transform: uppercase; letter-spacing: .13em;
  color: var(--text-3); margin: 14px 0 7px;
}
.lp-etiqueta:first-of-type { margin-top: 0; }

.lp-colores { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.lp-color {
  aspect-ratio: 1; border: 1.5px solid; border-radius: var(--r-xs); cursor: pointer;
  transition: transform .1s, box-shadow .12s;
}
.lp-color:hover { transform: scale(1.12); }
.lp-color.activo { box-shadow: 0 0 0 2px var(--accent); }

.lp-formas { display: flex; gap: 5px; flex-wrap: wrap; }
.lp-forma {
  width: 32px; height: 30px; border: 1px solid var(--line-2); background: var(--surface);
  border-radius: var(--r-xs); cursor: pointer; color: var(--text-2); font-size: 13px;
  display: grid; place-items: center;
  transition: background .14s, color .14s, border-color .14s;
}
.lp-forma:hover { border-color: var(--text-3); color: var(--text); }
.lp-forma.activo { background: var(--accent); color: var(--on-accent); border-color: transparent; }

.lp-acciones { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; }
.lp-pista {
  font-size: 11px; color: var(--text-3); line-height: 1.5;
  margin-top: 13px; padding-top: 11px; border-top: 1px solid var(--line);
}

/* ---------- la hoja de impresión del lienzo ----------
   El lienzo no se puede imprimir tal cual: vive dentro de una capa con
   transform y overflow oculto, y el navegador respeta las dos cosas al
   imprimir. Por eso se cambia por esta hoja, que lleva el mismo diagrama
   dibujado en SVG plano. */

.hoja-estrategia {
  background: var(--surface); border-radius: var(--r-lg);
  box-shadow: var(--sombra-card); padding: 40px 44px;
  max-width: 1040px; margin: 16px auto 0;
}
.hoja-estrategia-dibujo {
  margin-top: 26px; overflow-x: auto; text-align: center;
}
.hoja-estrategia-dibujo svg { max-width: 100%; height: auto; }

/* El mismo diagrama dentro del informe mensual. */
.informe-estrategia {
  margin: 16px 0 8px; overflow-x: auto; text-align: center;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 14px; background: #FFFFFF; break-inside: avoid;
}
.informe-estrategia svg { max-width: 100%; height: auto; }

.lienzo-ayuda {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 6px 15px;
  font-size: 11.5px; color: var(--text-3); box-shadow: var(--sombra-card);
  pointer-events: none; white-space: nowrap; max-width: 92%;
  overflow: hidden; text-overflow: ellipsis; z-index: 4;
}

/* =============================================================================
   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; }

  /* En el celular el panel de la caja seleccionada no puede quedar flotando a
     un lado: se comería media pantalla justo encima de lo que uno está
     mirando. Baja al pie, como una gaveta. */
  .lienzo-panel {
    top: auto; bottom: 0; left: 0; right: 0; width: auto;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    border-bottom: 0; max-height: 46vh; overflow-y: auto;
    padding-bottom: calc(15px + env(safe-area-inset-bottom));
  }
  .lp-colores { grid-template-columns: repeat(9, 1fr); }
  .lp-acciones { flex-direction: row; }
  /* La pista de abajo estorbaría al panel y en pantalla táctil sirve poco. */
  .lienzo-ayuda { display: none; }
  .lienzo-barra { padding: 8px 16px; }

  .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, .hoja-estrategia {
    box-shadow: none; padding: 0; max-width: none; margin: 0;
    background: #fff; color: #000;
  }
  /* Al imprimir no hay scroll: lo que no cabe se recorta. Se deja que el SVG
     se encoja para entrar entero en la hoja. */
  .hoja-estrategia-dibujo, .informe-estrategia { overflow: visible; }
  .informe-estrategia { border-color: #ddd; }
  .informe h3 { break-after: avoid; }
  .informe-metricas { break-inside: avoid; }
}

/* =============================================================================
   LA PÁGINA PÚBLICA DE VENTAS

   La abre el cliente desde un enlace, sin cuenta. No lleva menú ni barra
   lateral: es una hoja sola con una tabla. Reusa los mismos tokens de color y
   las mismas piezas (.tabla, .btn, .campo) para que se vea de la casa, pero la
   estructura es otra a propósito — no queremos que parezca que entró al
   sistema, porque no entró.
   ============================================================================= */

.pagina-publica { background: var(--bg); min-height: 100vh; }

.publica-envoltura {
  max-width: 1180px; margin: 0 auto;
  padding: 26px 20px calc(40px + env(safe-area-inset-bottom));
}
.publica-cargando { padding: 80px 20px; text-align: center; color: var(--text-3); }

.publica-cab {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin-bottom: 20px;
}
.publica-cliente { margin-left: auto; text-align: right; }
.publica-nombre { font-family: var(--display); font-size: 17px; font-weight: 600; }
.publica-sub { font-size: 12px; color: var(--text-3); margin-top: 3px; }

.publica-caja {
  background: var(--surface); border-radius: var(--r-xl);
  box-shadow: var(--sombra-card); padding: 26px 26px 20px;
}

.publica-intro { margin-bottom: 20px; }
.publica-intro h1 {
  font-family: var(--display); font-size: 22px; font-weight: 600;
  margin: 0 0 8px; letter-spacing: -.01em;
}
.publica-intro p {
  margin: 0; color: var(--text-2); font-size: 14px; line-height: 1.65;
  max-width: 62ch;
}

.publica-barra {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 0 16px; border-bottom: 1px solid var(--line); margin-bottom: 4px;
}
.publica-total {
  display: flex; align-items: baseline; gap: 9px;
  font-size: 13px; color: var(--text-3);
}
.publica-total b {
  font-family: var(--display); font-size: 18px; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.publica-estado { font-size: 12px; color: var(--text-3); }
.publica-estado.sucio { color: var(--atencion); font-weight: 600; }

/* La tabla es el centro de la pantalla: se le da todo el alto que se pueda. */
.publica-tabla { max-height: 62vh; overflow: auto; }
.publica-tabla thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface); box-shadow: 0 1px 0 var(--line);
}
.publica-num {
  color: var(--text-3); font-size: 11.5px; text-align: center;
  font-variant-numeric: tabular-nums;
}

tr.fila-venta td { padding: 5px 6px; }
tr.fila-venta input, tr.fila-venta select {
  width: 100%; padding: 8px 9px; border: 1px solid transparent;
  border-radius: var(--r-xs); background: var(--surface-2); outline: none;
  font-size: 13.5px; font-family: inherit; color: inherit;
  transition: border-color .14s, background .14s;
}
tr.fila-venta input:hover, tr.fila-venta select:hover { border-color: var(--line-2); }
tr.fila-venta input:focus, tr.fila-venta select:focus {
  border-color: var(--accent); background: var(--surface);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}

.publica-pie {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding-top: 16px; margin-top: 4px; border-top: 1px solid var(--line);
}
.publica-pie-pagina {
  text-align: center; font-size: 11.5px; color: var(--text-3);
  margin-top: 24px;
}

@media (max-width: 980px) {
  .publica-envoltura { padding: 18px 14px 40px; }
  .publica-caja { padding: 20px 16px 16px; border-radius: var(--r-lg); }
  .publica-cliente { margin-left: 0; text-align: left; width: 100%; }
  .publica-intro h1 { font-size: 19px; }
  /* Safari amplía la página si un campo mide menos de 16px. */
  tr.fila-venta input, tr.fila-venta select { font-size: 16px; }
  .publica-tabla { max-height: none; }
}