@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300..700&display=swap');

/* ==========================================================================
   FASE 16 — Rediseño "Apple-first": mezcla de Apple (vidrio esmerilado,
   orbes de luz flotantes, tipografía del sistema SF, superficies suaves),
   Skool (calidez, pills, avatares de color), y la limpieza minimalista de
   ChatGPT/Claude. El dorado PRO Club se mantiene como acento de marca.
   ========================================================================== */

:root {
  --navy-950: #101013;
  --navy-900: #17171B;
  --navy-800: #202025;
  --navy-700: #2A2A31;
  --navy-600: #3B3B42;
  /* Fase 28: paleta dorada real de Skool, verificada en vivo contra
     skool.com/theproclub (getComputedStyle del botón "POST" y del
     acento de medalla #1) — reemplaza el morado que antes vivía acá. */
  /* ---------------------------------------------------------------------------
     EL DORADO SE FUE DE LA INTERFAZ (pedido de Alfredo, con capturas delante):
     "el dorado quítalo; si lo quieres poner hazlo solo en las publicaciones de
     Ventas On Fire, y solo lo quiero en el borde".

     En vez de perseguir las ~40 reglas que lo usaban una por una, se cambia aquí
     el valor de las variables: todo lo que era dorado (menú activo, botones,
     barras de KPI, progreso, anillos de foco, portadas, etiquetas) pasa de golpe
     a la familia gris-azulada, y no queda ningún sitio olvidado.

     Los nombres de las variables se conservan a propósito: renombrarlas obligaría
     a tocar cientos de líneas y a que la otra conversación resolviera conflictos
     en archivos que no son suyos. El dorado de verdad vuelve en UN solo sitio,
     como borde de las publicaciones del muro: --oro-borde, más abajo.
     --------------------------------------------------------------------------- */
  --gold-500: #7C8AA0;
  --gold-400: #9FAABB;
  --gold-300: #CFD7E2;
  --gold-700: #4A5566;

  /* El unico dorado que queda en la aplicacion: el borde de las publicaciones de
     Ventas On Fire. */
  --oro-borde: #E0AC2A;
  --women-500: #c2418f;
  --women-300: #f0aed4;
  --men-500: #2f79c9;
  --men-300: #a9cdf2;
  --teal-500: #0ea5a4;
  --orange-500: #e8823c;

  /* ---- Superficie estilo Apple: base gris perla, vidrio translúcido ---- */
  --bg: #F8F8F7;
  --bg-app: #F8F8F7;
  --sidebar-bg: #ffffff;
  --sidebar-bg-2: #ffffff;
  --surface: #ffffff;
  --surface-solid: #ffffff;
  --surface-soft: rgba(120,120,140,0.08);
  --border: #e2e1de;
  --border-soft: #ececea;
  --glass-border: #e6e5e2;
  --ink: #1A1A1E;
  --ink-soft: #73737B;
  --gray-600: #5b6577;
  --gray-400: #9a9ca8;
  --green: #1e8e5a;
  --red: #d5493e;
  --radius: 14px;
  --radius-sm: 10px;
  --radius-pill: 999px;
  --blur-glass: none;
  --shadow-card: 0 1px 2px rgba(20,20,25,0.04);
  --shadow-card-hover: 0 2px 8px rgba(20,20,25,0.08);
  --shadow-pop: 0 16px 48px rgba(20,20,30,0.18);

  /* ---- Fase 62: las piezas que faltaban para poder tener tema oscuro ----
     Estos colores YA existían en la hoja, pero escritos a mano en 183 sitios
     distintos. Un color escrito a mano no se puede cambiar de tema: da igual lo
     que diga el suiche, ese trozo se queda blanco. Así que aquí tienen nombre,
     y abajo, en el bloque oscuro, se les cambia el valor de una sola vez.

     --ink-inv es el par de --ink: el color que va ENCIMA de --ink. En claro
     --ink es casi negro y --ink-inv blanco; en oscuro se voltean los dos, y por
     eso los botones negros se vuelven blancos con letra negra en vez de
     quedarse negros sobre negro. --ink-hover es el negro puro del botón al
     pasar el ratón (en oscuro, blanco puro). */
  --ink-inv: #ffffff;
  --ink-hover: #000000;
  /* Superficies de segundo y tercer nivel: el gris casi blanco de las tarjetas
     hundidas y el de las cabeceras de tabla. */
  --surface-2: #FAFAF8;
  --surface-3: #f3f3f1;
  /* El baño dorado: el fondo crema del menú activo, las sugerencias y los chips
     seleccionados, con su borde. --gold-ink es el dorado SOLO PARA LETRA, que
     en oscuro tiene que aclararse (el --gold-700 no puede, porque además de
     letra se usa como final del degradado de los botones dorados). */
  --gold-wash: #EDF1F6;
  /* Alfredo: "el dorado cuando me paro sobre una seccion no me gusta, que sea un gris
     suave tirando a azul mega suave; el dorado solo en el borde, como un sombreado".
     Este es ESE gris azulado, y vive en un solo sitio para que todos los resaltados de
     la aplicacion cambien juntos si algun dia se ajusta. El dorado se queda donde el
     lo queria: en bordes y sombras, no rellenando bloques. */
  --hover-suave: rgba(88, 118, 155, 0.075);
  --hover-suave-fuerte: rgba(88, 118, 155, 0.12);
  --gold-wash-border: #D7DFEA;
  --gold-ink: #4A5566;
  /* Estos cinco ya se usaban con var(--x, color-de-respaldo) pero nunca se
     habían definido, así que siempre ganaba el respaldo y jamás cambiaban. */
  --gray-300: #cfcecb;
  --gray-50: #FAFAF8;
  --gold: #7C8AA0;
  --gold-50: #F4F7FB;
  --gold-100: #EDF1F6;
  /* El vidrio esmerilado: los paneles semitransparentes (la caja del login, las
     ventanas modales, el aviso de "ve a darle amor", los chips de filtro, los
     botones de contorno y las casillas de las tablas editables). Estaban escritos
     a mano como rgba(255,255,255,0.6 … 0.9) — blanco puro con transparencia, que
     de noche es exactamente igual de blanco. Aquí quedan en dos niveles: --glass
     es el normal y --glass-strong el más opaco (el que se usa al pasar el ratón y
     en las casillas donde se escribe, que necesitan tapar mejor lo de atrás). */
  --glass: rgba(255,255,255,0.72);
  --glass-strong: rgba(255,255,255,0.88);
  /* Filas de tabla resaltadas (licencia vencida, por vencer, datos incompletos). */
  --row-warn: #eef3fa;
  --row-warn-2: #dfe8f4;
  --row-bad: #fdf1ef;
  --row-bad-2: #fbe4e2;
  --row-soon: #fffaf0;
  --row-soon-2: #fdf1d6;
}

/* ==========================================================================
   FASE 62 — EL TEMA OSCURO
   El suiche está en el menú lateral (abajo, en tu nombre) y tiene tres
   posiciones: Claro, Oscuro y Auto. Auto es "lo que diga tu aparato": si tu
   celular se pone en modo noche, la plataforma se pone en modo noche sola.

   Todo el tema oscuro es ESTE BLOQUE Y NADA MÁS: no hay una segunda hoja de
   estilos ni reglas duplicadas por pantalla. Solo se cambia el valor de los
   nombres de color de arriba, y las 2.100 líneas que vienen debajo se enteran
   solas. El dorado de la marca NO se toca: The PRO Club se ve igual de dorado
   de día que de noche.

   'color-scheme: dark' es la línea que le avisa al navegador — sin ella los
   menús desplegables, las barras de scroll y los calendarios nativos siguen
   saliendo blancos y cantan muchísimo sobre el fondo negro.
   ========================================================================== */
[data-tema="oscuro"] {
  color-scheme: dark;
  --bg: #0E0E11;
  --bg-app: #0E0E11;
  --sidebar-bg: #17171B;
  --sidebar-bg-2: #17171B;
  --surface: #17171B;
  --surface-solid: #17171B;
  --surface-soft: rgba(255,255,255,0.06);
  --surface-2: #1C1C21;
  --surface-3: #23232A;
  --border: #2E2E36;
  --border-soft: #26262D;
  --glass-border: #2E2E36;
  --ink: #F2F2F4;
  --ink-inv: #101013;
  --ink-hover: #ffffff;
  --ink-soft: #9B9BA5;
  --gray-600: #A6ADBB;
  --gray-400: #7A7C88;
  --gray-300: #3A3A42;
  --gray-50: #1C1C21;
  --gold-wash: rgba(159,170,187,0.14);
  --gold-wash-border: rgba(159,170,187,0.32);
  --gold-ink: #C3CCDA;
  --gold-50: rgba(159,170,187,0.10);
  --gold-100: rgba(159,170,187,0.16);
  --glass: rgba(35,35,42,0.80);
  --glass-strong: rgba(28,28,33,0.94);
  --row-warn: rgba(124,158,200,0.12);
  --row-warn-2: rgba(124,158,200,0.22);
  --row-bad: rgba(213,73,62,0.12);
  --row-bad-2: rgba(213,73,62,0.24);
  --row-soon: rgba(124,158,200,0.10);
  --row-soon-2: rgba(124,158,200,0.20);
  --green: #34c07d;
  --red: #ef6a5c;
  --shadow-card: 0 1px 2px rgba(0,0,0,0.45);
  --shadow-card-hover: 0 2px 10px rgba(0,0,0,0.6);
  --shadow-pop: 0 16px 48px rgba(0,0,0,0.65);
}

/* AUTO — exactamente los mismos valores, pero solo cuando el sistema del
   aparato está en modo noche. Es la misma lista a propósito: en CSS puro no se
   puede reutilizar un bloque dentro de un @media, y meter aquí una indirección
   más solo haría más difícil de leer lo único que de verdad importa, que es la
   lista de colores. La prueba t402 comprueba que las dos listas nombren
   exactamente los mismos colores, así que no pueden separarse sin que salte. */
@media (prefers-color-scheme: dark) {
  [data-tema="auto"] {
    color-scheme: dark;
    --bg: #0E0E11;
    --bg-app: #0E0E11;
    --sidebar-bg: #17171B;
    --sidebar-bg-2: #17171B;
    --surface: #17171B;
    --surface-solid: #17171B;
    --surface-soft: rgba(255,255,255,0.06);
    --surface-2: #1C1C21;
    --surface-3: #23232A;
    --border: #2E2E36;
    --border-soft: #26262D;
    --glass-border: #2E2E36;
    --ink: #F2F2F4;
    --ink-inv: #101013;
    --ink-hover: #ffffff;
    --ink-soft: #9B9BA5;
    --gray-600: #A6ADBB;
    --gray-400: #7A7C88;
    --gray-300: #3A3A42;
    --gray-50: #1C1C21;
    --gold-wash: rgba(159,170,187,0.14);
    --gold-wash-border: rgba(159,170,187,0.32);
    --gold-ink: #C3CCDA;
    --gold-50: rgba(159,170,187,0.10);
    --gold-100: rgba(159,170,187,0.16);
    --glass: rgba(35,35,42,0.80);
    --glass-strong: rgba(28,28,33,0.94);
    --row-warn: rgba(124,158,200,0.12);
    --row-warn-2: rgba(124,158,200,0.22);
    --row-bad: rgba(213,73,62,0.12);
    --row-bad-2: rgba(213,73,62,0.24);
    --row-soon: rgba(124,158,200,0.10);
    --row-soon-2: rgba(124,158,200,0.20);
    --green: #34c07d;
    --red: #ef6a5c;
    --shadow-card: 0 1px 2px rgba(0,0,0,0.45);
    --shadow-card-hover: 0 2px 10px rgba(0,0,0,0.6);
    --shadow-pop: 0 16px 48px rgba(0,0,0,0.65);
  }
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg-app);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  font-size: 15.5px;
  line-height: 1.5;
}


h1, h2, h3, .display {
  font-family: 'Inter', -apple-system, sans-serif;
  font-weight: 600;
  color: var(--ink);
  margin-top: 0;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

a { color: inherit; }

/* ==========================================================================
   Fase 26: refinamiento visual — más "Apple" (movimiento, color, botón atrás)
   ========================================================================== */

/* ---------- Transición de entrada suave para cada sección/página ---------- */
@keyframes pageEnter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.container { animation: pageEnter 0.42s cubic-bezier(0.22, 1, 0.36, 1); }

/* ---------- Botón "Volver" — presente al entrar a cada sección. Fase 26 (ronda 3,
   a pedido de Alfredo): antes era un link de texto suelto — ahora es un botón de
   verdad, con su propio fondo/borde tipo píldora, para que sea obvio que se puede
   hacer clic y no se confunda con una etiqueta. ---------- */
.back-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.8rem; font-weight: 600; color: var(--ink-soft);
  text-decoration: none; margin-bottom: 14px; padding: 7px 14px 7px 11px;
  background: var(--surface-solid); border: 1px solid var(--border);
  border-radius: var(--radius-pill); box-shadow: 0 1px 2px rgba(20,20,25,0.04);
  transition: color 0.15s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.15s ease,
    background 0.15s ease, transform 0.15s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.15s ease;
}
.back-btn .ic-svg { transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1); }
.back-btn:hover {
  color: var(--gold-ink); border-color: var(--gold-400); background: var(--gold-wash);
  transform: translateY(-1px); box-shadow: 0 3px 10px rgba(20,20,25,0.08);
}
.back-btn:hover .ic-svg { transform: translateX(-3px); }
.back-btn:active { transform: translateY(0); }

/* ==========================================================================
   APP SHELL — sidebar de vidrio esmerilado (estilo macOS) + contenido
   ========================================================================== */
.app-shell {
  display: flex;
  min-height: 100vh;
  align-items: stretch;
  position: relative;
  z-index: 1;
}

.sidebar {
  width: 264px;
  flex-shrink: 0;
  background: linear-gradient(180deg, var(--sidebar-bg), var(--sidebar-bg-2));
  -webkit-backdrop-filter: var(--blur-glass);
  backdrop-filter: var(--blur-glass);
  border-right: 1px solid var(--border-soft);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  padding: 22px 16px;
  position: sticky;
  top: 0;
  height: 100vh;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 6px 10px 22px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.sidebar-brand .mark {
  width: 38px; height: 38px; border-radius: 13px;
  background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem;
  box-shadow: 0 4px 14px rgba(124,138,160,0.30), inset 0 1px 0 rgba(255,255,255,0.45);
}
.sidebar-brand .txt span { color: var(--gold-ink); }

.sidebar-section-label {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 500;
  color: rgba(30,30,50,0.35); padding: 16px 12px 6px;
}

.sidebar-nav { display: flex; flex-direction: column; gap: 3px; }
.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px; border-radius: 14px;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.9rem; font-weight: 500;
  transition: background 0.18s cubic-bezier(0.22, 1, 0.36, 1), color 0.15s, transform 0.15s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-item .ic { font-size: 1.08rem; width: 20px; text-align: center; flex-shrink: 0; }
.nav-item:hover { background: var(--surface-2); color: var(--ink); transform: translateX(2px); }
.nav-item.active {
  background: var(--gold-wash);
  color: var(--ink);
  font-weight: 600;
  /* Alfredo: "al que sale gris metele el dorado, pero solo en el borde, como hiciste en
     Ventas On Fire". Mismo tratamiento: contorno dorado y una sombra dorada muy suave
     que le da profundidad. El relleno se queda en el gris azulado de siempre. */
  border: 1px solid var(--oro-borde);
  box-shadow: 0 1px 3px rgba(224,172,42,0.20), 0 4px 12px rgba(224,172,42,0.10);
}

.sidebar-spacer { flex: 1; }

.sidebar-divider { height: 1px; background: rgba(60,60,80,0.1); margin: 12px 4px; }

.sidebar-cta {
  margin-top: 6px;
  background: var(--ink);
  color: #fff; text-decoration: none;
  padding: 12px 14px; border-radius: var(--radius-pill);
  font-size: 0.87rem; font-weight: 500; text-align: center;
  display: block;
  box-shadow: 0 1px 2px rgba(20,20,25,0.15);
  transition: transform 0.12s, box-shadow 0.15s;
}
.sidebar-cta:hover { background: var(--ink-hover); transform: translateY(-1px); }

.sidebar-footer {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 8px 4px;
}
.sidebar-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #46618f, #22334d);
  border: 2px solid rgba(124,138,160,0.42);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 500; color: #fff;
}
.sidebar-user-name { font-size: 0.85rem; font-weight: 500; color: var(--ink); line-height: 1.25; }
.sidebar-user-role { font-size: 0.72rem; color: var(--ink-soft); }
.sidebar-logout {
  margin-left: auto; color: var(--ink-soft); text-decoration: none; font-size: 0.8rem; font-weight: 500;
}
.sidebar-logout:hover { color: var(--gold-ink); }

.main {
  flex: 1;
  min-width: 0;
  min-height: 100vh;
  background: transparent;
}

.container { max-width: 1180px; margin: 0 auto; padding: 36px 32px 80px; }

/* ---------- Page header ---------- */
.page-header {
  display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap;
  gap: 14px; margin-bottom: 28px;
}
.page-header h1 { font-size: 1.85rem; margin-bottom: 4px; }
.page-header .sub { color: var(--ink-soft); font-size: 0.95rem; font-weight: 500; }
.page-header .live-pill {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface);
  -webkit-backdrop-filter: var(--blur-glass); backdrop-filter: var(--blur-glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-pill); padding: 8px 16px; font-size: 0.8rem; font-weight: 500; color: var(--ink-soft);
  box-shadow: var(--shadow-card);
}
/* La hora de la última actualización, dentro de la pastilla "En vivo". Va en tono
   suave y separada por una barrita para que se lea como un dato secundario y no
   compita con el "En vivo". */
.live-pill .live-time { opacity: 0.62; font-variant-numeric: tabular-nums; }
.live-pill .live-time:not(:empty)::before { content: "·"; margin: 0 6px; opacity: 0.7; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,0.18); animation: dotPulse 2s infinite; }
@keyframes dotPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

/* ---------- Cards — recuadros de vidrio semi-transparente estilo Apple ---------- */
.card {
  background: var(--surface);
  -webkit-backdrop-filter: var(--blur-glass);
  backdrop-filter: var(--blur-glass);
  border-radius: var(--radius);
  padding: 26px 28px;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--glass-border);
  margin-bottom: 22px;
  transition: box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1), transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease;
}
.card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); border-color: rgba(124,138,160,0.22); }

.grid-2 { display: grid; grid-template-columns: 1.3fr 1fr; gap: 22px; }
.grid-2.grid-2-wide-right { grid-template-columns: 0.85fr 1.3fr; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 860px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

/* ---------- Hero (banner, ya no se usa en Top Producers pero queda disponible) ---------- */
.hero {
  background: radial-gradient(140% 180% at 100% 0%, var(--navy-700) 0%, var(--navy-950) 70%);
  color: #fff;
  border-radius: 26px;
  padding: 32px 34px;
  margin-bottom: 22px;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 85% -10%, rgba(124,138,160,0.26), transparent 55%);
  pointer-events: none;
}
.hero-top { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 18px; position: relative; }
.hero-label { text-transform: uppercase; letter-spacing: 1.4px; font-size: 0.72rem; color: var(--gold-300); font-weight: 500; }
.hero-amount { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 3rem; margin: 6px 0 2px; letter-spacing: -1px; }
.hero-sub { color: rgba(255,255,255,0.65); font-size: 0.88rem; }
.hero-goal { text-align: right; }
.hero-goal .num { font-family: 'Inter', sans-serif; font-size: 1.5rem; font-weight: 500; color: var(--gold-300); }

.progress-outer {
  background: rgba(120,120,140,0.16);
  border-radius: var(--radius-pill); height: 14px; overflow: hidden; margin-top: 16px; position: relative;
}
.progress-inner {
  background: linear-gradient(90deg, var(--gold-500), var(--gold-300));
  height: 100%; border-radius: var(--radius-pill); transition: width 0.6s ease;
  box-shadow: 0 0 12px rgba(124,138,160,0.38);
}
.progress-outer.light { background: var(--surface-soft); }
.progress-inner.navy { background: linear-gradient(90deg, var(--gold-500), var(--navy-700)); box-shadow:none; }

/* ---------- Leader alert ---------- */
.leader-alert {
  border-radius: var(--radius);
  padding: 17px 22px;
  margin-bottom: 22px;
  display: flex; align-items: center; gap: 14px;
  font-weight: 500;
}
.leader-alert.new {
  background: linear-gradient(90deg, rgba(24,24,30,0.96), rgba(32,32,40,0.96));
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  color: var(--gold-300);
  border: 1px solid var(--gold-500);
  animation: pulseGlow 1.8s ease-in-out infinite;
}
.leader-alert.same {
  background: var(--surface);
  -webkit-backdrop-filter: var(--blur-glass); backdrop-filter: var(--blur-glass);
  color: var(--ink); border: 1px solid var(--glass-border);
}
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 rgba(124,138,160,0); }
  50% { box-shadow: 0 0 22px rgba(124,138,160,0.34); }
}
.leader-alert .icon { font-size: 1.5rem; }

/* ---------- Gender competition bar ---------- */
.gender-race { margin-bottom: 22px; }
.gender-race-heads { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 0.92rem; font-weight: 500; }
.gender-race-heads .women { color: var(--women-500); }
.gender-race-heads .men { color: var(--men-500); }
.gender-bar { display: flex; height: 32px; border-radius: var(--radius-pill); overflow: hidden; background: var(--surface-soft); box-shadow: inset 0 0 0 1px var(--border-soft); }
.gender-bar .women-fill { background: linear-gradient(90deg, var(--women-500), var(--women-300)); display:flex; align-items:center; justify-content:flex-end; color:white; font-size:0.8rem; font-weight:800; padding-right:12px; transition: width 0.6s ease; white-space:nowrap; }
.gender-bar .men-fill { background: linear-gradient(90deg, var(--men-300), var(--men-500)); display:flex; align-items:center; color:white; font-size:0.8rem; font-weight:800; padding-left:12px; transition: width 0.6s ease; white-space:nowrap; }

/* ---------- Ranking table ---------- */
table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
th, td { text-align: left; padding: 13px 11px; border-bottom: 1px solid var(--border-soft); }
th { color: var(--ink-soft); font-weight: 500; font-size: 0.71rem; text-transform: uppercase; letter-spacing: 0.6px; }
tbody tr { transition: background 0.15s cubic-bezier(0.22, 1, 0.36, 1); }
tbody tr:hover { background: var(--hover-suave); }
/* Los tres primeros del ranking van SIN tinte ni filo de color (Alfredo, tras verlo:
   "quita el color de los 3 primeros"). La medallita 1/2/3 ya dice quien es quien. */
tr.leader-row td { font-weight: 500; }
.medal { font-size: 1.15rem; margin-right: 4px; }
/* Fase 26: antes solo el #1 tenía color en la tabla — el resto del ranking se veía
   plano. El #2 y #3 ahora llevan su propio tinte (plata/bronce) para que el podio
   completo se sienta consistente entre las tarjetas de arriba y la tabla de abajo. */
tr.rank-row-2 td, tr.rank-row-3 td { background: transparent; }

/* ---------- Avatares circulares (identidad al estilo Skool) ---------- */
.avatar-circle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  font-size: 0.68rem; font-weight: 500; color: #fff; letter-spacing: -0.02em;
  vertical-align: middle;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 1px 3px rgba(20,20,40,0.14);
}
.avatar-c0 { background: linear-gradient(135deg, var(--gold-400), var(--gold-700)); }
.avatar-c1 { background: linear-gradient(135deg, #46618f, #22334d); }
.avatar-c2 { background: linear-gradient(135deg, var(--women-300), var(--women-500)); }
.avatar-c3 { background: linear-gradient(135deg, var(--men-300), var(--men-500)); }
.avatar-c4 { background: linear-gradient(135deg, #5eead4, var(--teal-500)); color: #06342f; }
.avatar-c5 { background: linear-gradient(135deg, #fbc596, var(--orange-500)); color: #401f04; }
.name-cell { display: flex; align-items: center; gap: 10px; }
/* Fase 26: cuando el agente tiene foto de perfil, se muestra en vez de las iniciales
   (misma forma circular, mismo tamaño — solo cambia el relleno). */
.avatar-photo { object-fit: cover; background: var(--surface-soft); }

/* ---------- Podium / Top 3 cards (Fase 26, ronda 3 — a pedido de Alfredo: la
   versión anterior quedó demasiado grande/inflada; se compactó inspirado en cómo
   Skool aprovecha el espacio en su leaderboard — tarjeta angosta y densa, no una
   caja enorme con aire de sobra). ---------- */
.podium-card {
  text-align: center; padding: 18px 14px 16px; position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.podium-card:hover { transform: translateY(-4px); }
.podium-card.rank-gold:hover { box-shadow: 0 14px 30px rgba(201,162,39,0.28); }
.podium-card.rank-silver:hover { box-shadow: 0 14px 30px rgba(154,156,168,0.26); }
.podium-card.rank-bronze:hover { box-shadow: 0 14px 30px rgba(181,124,66,0.26); }
.podium-card .rank-tag { font-size: 1.4rem; color: var(--gray-400); } /* solo se usa si ese puesto del podio no tiene agente todavía */
.podium-crown { color: #8E98A8; margin-bottom: 3px; filter: drop-shadow(0 2px 3px rgba(124,138,160,0.30)); }
.podium-crown svg { width: 17px; height: 17px; }
.podium-avatar-wrap { position: relative; margin-bottom: 9px; }
/* Fase 26 (a pedido de Alfredo — "el número 1 se ve mejor más grande, pero los 3
   deberían ser del mismo tamaño"): antes el #1 era visiblemente más grande que el
   #2/#3; como ese tamaño gustó más, ahora las 3 tarjetas del podio comparten el
   mismo tamaño (el que antes solo tenía el oro) — la diferencia de puesto queda
   marcada por el color/gradiente e insignia, no por el tamaño. */
.podium-card .avatar-circle {
  width: 64px; height: 64px; font-size: 1.2rem; margin: 0; border: 2.5px solid var(--surface);
  box-shadow: 0 5px 14px rgba(20,20,40,0.15), inset 0 1px 0 rgba(255,255,255,0.4);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.podium-card:hover .avatar-circle { transform: scale(1.05); }
.podium-rank-badge {
  position: absolute; bottom: -2px; right: -2px; border: 2px solid var(--surface);
  width: 19px; height: 19px; font-size: 0.62rem;
}
.podium-card .name { font-weight: 600; font-size: 0.98rem; margin: 0 0 1px; letter-spacing: -0.01em; }
.podium-card .amount { color: var(--gold-ink); font-weight: 700; font-size: 1.22rem; letter-spacing: -0.02em; }
.podium-card .podium-sub {
  font-size: 0.6rem; color: var(--gray-600); text-transform: uppercase; font-weight: 700;
  letter-spacing: 0.04em; margin-top: 3px;
}
/* Fase 26: color por puesto en el podio — antes las 3 tarjetas eran blancas planas
   salvo el borde del #1; ahora cada una lleva su propio degradado sutil (oro/plata/
   bronce) para que el ranking se vea con más vida de un vistazo. */
.podium-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; }
.podium-card.rank-gold::before { background: linear-gradient(90deg, #EACD6A, #B8860B); }
.podium-card.rank-gold { background: linear-gradient(180deg, rgba(201,162,39,0.12), var(--surface) 65%); }
.podium-card.rank-silver::before { background: linear-gradient(90deg, #dcdce2, #9a9ca8); }
.podium-card.rank-silver { background: linear-gradient(180deg, rgba(154,156,168,0.14), var(--surface) 65%); }
.podium-card.rank-bronze::before { background: linear-gradient(90deg, #DDA97A, #B57C42); }
.podium-card.rank-bronze { background: linear-gradient(180deg, rgba(181,124,66,0.14), var(--surface) 65%); }
.podium-list { list-style: none; padding: 0; margin: 0; }
.podium-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 8px; border-bottom: 1px dashed var(--border); font-size: 0.92rem;
  border-radius: 10px; transition: background 0.15s cubic-bezier(0.22, 1, 0.36, 1), transform 0.15s cubic-bezier(0.22, 1, 0.36, 1);
}
.podium-list li:hover { background: var(--hover-suave); transform: translateX(2px); border-bottom-color: transparent; }
.podium-list li:last-child { border-bottom: none; }
.podium-list .who { display: flex; align-items: center; gap: 9px; }
.podium-list .amt { font-weight: 500; color: var(--ink); }

/* ---------- Buttons — pills estilo Apple/ChatGPT: negro sólido, dorado brillante, vidrio ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--ink); color: var(--ink-inv); border: none;
  padding: 12px 22px; border-radius: var(--radius-pill); font-size: 0.92rem; font-weight: 500;
  cursor: pointer; text-decoration: none; transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), background 0.15s, box-shadow 0.2s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 1px 2px rgba(20,20,25,0.12), inset 0 1px 0 rgba(255,255,255,0.12);
}
.btn:hover { background: var(--ink-hover); transform: translateY(-1px) scale(1.015); box-shadow: 0 6px 16px rgba(20,20,25,0.2), inset 0 1px 0 rgba(255,255,255,0.12); }
.btn:active { transform: translateY(0) scale(0.98); }
/* El boton principal deja de ser amarillo y pasa a negro neutro, como el de Skool. */
.btn-gold { background: #1F2430; color: #fff; border: 1px solid #1F2430; box-shadow: none; font-weight: 600; }
.btn-gold:hover { background: #333A4A; border-color: #333A4A; }
.btn-outline {
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  color: var(--ink); border: 1px solid var(--border); box-shadow: none;
}
.btn-outline:hover { background: var(--glass-strong); transform: translateY(-1px); }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }

/* ---------- Forms — inputs estilo Apple: rellenos suaves, foco con halo dorado ---------- */
form.stack label { display: block; font-size: 0.82rem; color: var(--ink-soft); font-weight: 500; margin: 12px 0 6px; }
form.stack input, form.stack select {
  width: 100%; padding: 12px 15px; border-radius: var(--radius-sm); border: 1.5px solid transparent;
  background: var(--surface-soft); font-size: 0.95rem;
  font-family: inherit; transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
form.stack input:focus, form.stack select:focus {
  outline: none; border-color: var(--gold-500); background: var(--surface-solid);
  box-shadow: 0 0 0 4px rgba(124,138,160,0.18);
}
form.stack textarea {
  width: 100%; padding: 12px 15px; border-radius: var(--radius-sm); border: 1.5px solid transparent;
  background: var(--surface-soft); font-size: 0.92rem;
  font-family: inherit; resize: vertical; margin-top: 6px; transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
form.stack textarea:focus {
  outline: none; border-color: var(--gold-500); background: var(--surface-solid);
  box-shadow: 0 0 0 4px rgba(124,138,160,0.18);
}
.form-section-label {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.7px; font-weight: 500;
  color: var(--gold-ink); margin: 22px 0 8px; padding-top: 14px; border-top: 1px solid var(--border-soft);
}
.form-section-label:first-child { border-top: none; padding-top: 0; margin-top: 4px; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.form-grid-2 label { margin-top: 12px; }
@media (max-width: 600px) { .form-grid-2 { grid-template-columns: 1fr; } }

/* ---------- Badges — chips redondos, coloridos y amigables ---------- */
.badge { display: inline-block; padding: 4px 13px; border-radius: var(--radius-pill); font-size: 0.73rem; font-weight: 500; letter-spacing: 0.2px; }
/* Fase 62: los badges son pastilla pastel CLARA con letra OSCURA, y así se quedan
   de día y de noche — son etiquetas de estado, no piezas del fondo, y se leen
   igual de bien en los dos temas. Por eso el color de la letra va escrito a mano
   y no con un nombre de color: si usara --green, --red o --ink, de noche se
   aclararía y quedaría un verde pálido sobre un verde pálido, ilegible. */
.badge-pendiente { background: #fdf1d6; color: #916800; }
.badge-emitida, .badge-aprobada { background: #e3f3e5; color: #16613d; }
.badge-cancelada { background: #ececec; color: #5b5b5b; }
.badge-pospuesta { background: #ece7ff; color: #4b32b8; }
.badge-resometida { background: #ded4ff; color: #3d24a8; }
.badge-declinada { background: #fbe4e2; color: #9c2b22; }
.badge-manual { background: #eef1f7; color: #2A2A31; }
.badge-ghl { background: #f0e6ff; color: #6a1fb1; }
.badge-migracion { background: #F1EFE9; color: #6B6A5E; }
.badge-needs-completion { background: #3f6ea8; color: #fff; margin-left: 6px; }
.badge-needs-completion:hover { background: #33598a; }
.badge-F { background: #fce8f3; color: var(--women-500); }
.badge-M { background: #e6f0fb; color: var(--men-500); }
.badge-select {
  border: none; border-radius: var(--radius-pill); padding: 5px 12px; font-size: 0.73rem; font-weight: 500;
  letter-spacing: 0.2px; cursor: pointer; appearance: none; -webkit-appearance: none;
}
.badge-select.badge-pendiente { background: #fdf1d6; color: #916800; }
.badge-select.badge-aprobada, .badge-select.badge-emitida { background: #e3f3e5; color: var(--green); }
.badge-select.badge-declinada { background: #fbe4e2; color: var(--red); }
.badge-select.badge-cancelada { background: #ececec; color: var(--gray-600); }

/* ---------- Skool card (tarjeta de venta para compartir) ---------- */
.skool-card {
  background: var(--surface-solid); border: 1.5px dashed var(--gold-500); border-radius: var(--radius-sm);
  padding: 16px; white-space: pre-wrap; font-family: ui-monospace, monospace; font-size: 0.88rem; margin-top: 10px;
}

.stat { text-align: center; }
.stat .num { font-family:'Inter',sans-serif; font-size: 2rem; font-weight: 500; color: var(--ink); }
.stat .label { color: var(--ink-soft); font-size: 0.85rem; }

.error-box { background: #fbe4e2; color: var(--red); padding: 11px 15px; border-radius: var(--radius-sm); margin-bottom: 14px; font-size: 0.9rem; font-weight: 500; }

/* ---------- Login — fondo claro con orbes, tarjeta de vidrio centrada ---------- */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--bg-app);
  padding: 20px;
  position: relative;
  overflow: hidden;
}
.login-box {
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur-glass); backdrop-filter: var(--blur-glass);
  padding: 42px 38px; border-radius: 30px; width: 100%; max-width: 380px;
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-pop);
  position: relative; z-index: 1;
}
.login-box .mark {
  width: 48px; height: 48px; border-radius: 15px; margin: 0 auto 16px;
  background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
  display: flex; align-items: center; justify-content: center; font-size: 1.35rem;
  box-shadow: 0 6px 18px rgba(124,138,160,0.30), inset 0 1px 0 rgba(255,255,255,0.45);
}
.login-box h1 { text-align: center; font-size: 1.25rem; margin-bottom: 4px; }
.login-box .lead { text-align: center; color: var(--ink-soft); font-size: 0.87rem; margin-bottom: 22px; font-weight: 500; }
.hint { font-size: 0.8rem; color: var(--ink-soft); margin-top: 18px; line-height: 1.65; background: var(--surface-soft); padding: 13px 15px; border-radius: var(--radius-sm); }

footer.note { text-align: center; color: var(--gray-400); font-size: 0.8rem; margin-top: 34px; font-weight: 500; }

.section-title { display:flex; align-items:baseline; gap:10px; margin: 40px 0 16px; }
.section-title h2 { margin:0; }
.section-title .tag { font-size:0.73rem; color:var(--gray-400); text-transform:uppercase; letter-spacing:1px; font-weight:800; }

.chart-card canvas { max-height: 260px; }

/* ---------- KPI row ---------- */
.kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 22px; }
@media (max-width: 900px) { .kpis { grid-template-columns: 1fr 1fr; } }
.kpi {
  background: var(--surface-solid);
  border-radius: var(--radius-sm); padding: 17px 19px; position: relative; overflow: hidden;
  box-shadow: 0 1px 2px rgba(25,25,35,0.04), 0 8px 22px rgba(25,25,35,0.06);
  border: 1px solid var(--border-soft);
}
.kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--gold-500); }
.kpi.goal::before { background: var(--navy-800); }
.kpi.gap::before { background: var(--red); }
.kpi.prog::before { background: var(--green); }
.kpi .lab { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--ink-soft); font-weight: 500; }
.kpi .val { font-family: 'Inter', sans-serif; font-size: 1.55rem; font-weight: 500; margin-top: 6px; letter-spacing: -0.5px; color: var(--ink); }
.kpi .note { font-size: 0.73rem; color: var(--ink-soft); margin-top: 3px; font-weight: 500; }

/* ---------- Tabla matriz del año (12 meses + YTD) ---------- */
.matrix-wrap { overflow-x: auto; border-radius: var(--radius-sm); }
table.matrix { font-size: 0.79rem; }
table.matrix th, table.matrix td { padding: 9px 8px; white-space: nowrap; }
table.matrix th:nth-child(1), table.matrix th:nth-child(2), table.matrix th:nth-child(3),
table.matrix td:nth-child(1), table.matrix td:nth-child(2), table.matrix td:nth-child(3) { text-align: left; }
table.matrix thead th { background: var(--surface-3); color: var(--ink-soft); }
table.matrix td.muted0 { color: var(--gray-400); }
table.matrix td.hi, table.matrix th.hi { background: rgba(124,138,160,0.10); }
table.matrix thead th.hi { background: var(--gold-500); color: #fff; }
table.matrix .ytdcell { font-weight: 500; color: var(--gold-ink); }

/* ---------- Tablas largas: scroll interno con encabezado pegado ---------- */
.table-scroll { max-height: 480px; overflow: auto; border-radius: var(--radius-sm); border: 1px solid var(--border-soft); }
.table-scroll table { margin: 0; width: auto; min-width: 100%; }
.table-scroll thead th { position: sticky; top: 0; background: rgba(250,250,252,0.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); z-index: 1; box-shadow: 0 1px 0 var(--border); white-space: nowrap; }
.table-scroll td { white-space: nowrap; }
.table-scroll td, .table-scroll th { padding: 12px 13px; }

/* ---------- Toggle "Por agente / Por agencia" y "Año / Mes" — segmented control estilo iOS ---------- */
.view-toggle {
  display: inline-flex; background: rgba(120,120,140,0.14); border-radius: var(--radius-pill); padding: 4px; gap: 2px;
}
.view-toggle .toggle-btn {
  border: none; background: transparent; padding: 9px 17px; border-radius: var(--radius-pill);
  font-size: 0.84rem; font-weight: 500; color: var(--ink-soft); cursor: pointer; transition: all 0.15s;
}
.view-toggle .toggle-btn.active { background: var(--surface-solid); color: var(--ink); box-shadow: 0 1px 4px rgba(20,20,40,0.16); }
.view-toggle .toggle-btn:hover:not(.active) { color: var(--ink); }

.month-picker { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.month-picker select { padding: 9px 15px; border-radius: var(--radius-pill); border: 1.5px solid var(--gold-500); background: var(--glass); font-weight: 500; font-size: 0.88rem; color: var(--ink); cursor: pointer; }
/* Fase 26 (fix): antes se ocultaba con display:none, lo que le quitaba su espacio por
   completo a la fila de botones. Al mostrarlo de nuevo (Año → Mes) la fila de golpe
   necesitaba más ancho y, si ya no cabía junto al título, todo el bloque de botones
   saltaba a una segunda línea — el header entero "bajaba" ~1cm y el selector de vista
   cambiaba de lugar. La solución: el selector de mes SIEMPRE ocupa su espacio (mismo
   ancho reservado en todo momento); en modo Año solo se vuelve invisible con
   visibility, nunca deja de ocupar sitio — así el ancho total de la fila no cambia
   nunca y nada se reacomoda al alternar. */
.month-picker-hidden { visibility: hidden; pointer-events: none; }
.source-note { background: rgba(246,245,240,0.85); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 11px 15px; font-size: 0.8rem; color: #7A5A06; margin-top: 18px; font-weight: 500; }

/* ---------- Filtros tipo chips ---------- */
.filter-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.filter-chip {
  background: var(--glass); border: 1px solid var(--border); border-radius: var(--radius-pill);
  padding: 9px 16px; font-size: 0.84rem; font-weight: 500; color: var(--ink-soft); cursor: pointer;
}
.filter-chip.active { background: var(--ink); color: var(--ink-inv); border-color: var(--ink); }

/* ---------- Modal (popup de "Agregar nueva venta") — panel de vidrio ---------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(30,12,48,0.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  display: none; align-items: flex-start; justify-content: center; z-index: 100; padding: 40px 20px;
  overflow-y: auto;
}
.modal-overlay.open { display: flex; }
.modal-panel {
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--blur-glass); backdrop-filter: var(--blur-glass);
  border: 1px solid var(--glass-border);
  border-radius: 28px; width: 100%; max-width: 780px;
  box-shadow: var(--shadow-pop); padding: 30px 32px 28px; margin-bottom: 40px;
}
.modal-panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 6px; }
.modal-panel-header h3 { margin: 0; }
.modal-close {
  background: rgba(120,120,140,0.14); border: none; width: 34px; height: 34px; border-radius: 50%;
  font-size: 1rem; cursor: pointer; color: var(--ink-soft); flex-shrink: 0;
  transition: background 0.12s, color 0.12s;
}
.modal-close:hover { background: rgba(120,120,140,0.24); color: var(--ink); }

/* ---------- Hoja de ventas completa (spreadsheet) ---------- */
.sheet-wrap { overflow: auto; max-height: 72vh; border-radius: var(--radius-sm); border: 1px solid var(--border-soft); }
table.sheet { font-size: 0.83rem; }
table.sheet th, table.sheet td { padding: 10px 11px; white-space: nowrap; }
/* El encabezado tiene que pintarse POR ENCIMA de las columnas fijas del cuerpo. Las dos
   cosas se quedan pegadas y las dos llevaban z-index 2; con el empate gana la que va
   despues en el documento, o sea el cuerpo — y por eso los nombres de los clientes se
   veian montados sobre los titulos. Al encabezado se le sube el numero y se acaba. */
/* OJO: el reparto fijo SOLO se aplica si la tabla tiene un ancho definido. Antes tenia
   width max-content (de una fase vieja) y el navegador ignoraba el reparto fijo por
   completo — por eso el hueco entre cliente y prima seguia vivo aunque la regla
   "estuviera". width 100%% lo activa de verdad. */
table.sheet { table-layout: fixed; width: 100%; min-width: 2358px; }
.sheet td:not(.td-mes) { overflow: hidden; }
table.sheet thead th { position: sticky; top: 0; background: var(--surface-3); color: var(--ink-soft); z-index: 6; }
table.sheet tbody td.td-mes { position: sticky; left: 0; z-index: 1; }
table.sheet thead tr:not(.sheet-grupos) th.th-mes { position: sticky; left: 0; z-index: 8; }
/* Las celdas de la fila de titulos SOLO se pegan hacia arriba, nunca hacia la
   izquierda: si PREVENTA se pega a la izquierda, tapa a POSTVENTA al desplazarse. */
table.sheet thead tr.sheet-grupos th { left: auto; }
table.sheet tbody tr:hover td:first-child { background: var(--surface-3); }
/* Ventas que llegaron de GHL y todavía les falta completarse — se resaltan hasta que el agente las envíe. */
table.sheet tbody tr.row-needs-completion td { background: var(--row-warn); }
table.sheet tbody tr.row-needs-completion td:first-child { background: var(--row-warn-2); box-shadow: 1px 0 0 var(--border); }
table.sheet tbody tr.row-needs-completion:hover td { background: var(--row-warn-2); }
.sheet-notes-form { display: flex; align-items: flex-start; gap: 6px; }
.sheet-notes-form textarea {
  width: 200px; min-height: 40px; padding: 7px 9px; border-radius: 10px; border: 1.5px solid var(--border);
  font-size: 0.79rem; font-family: inherit; resize: vertical; white-space: normal;
  background: var(--glass-strong);
}
.sheet-notes-form button {
  border: none; background: var(--ink); color: var(--ink-inv); border-radius: 10px; padding: 7px 10px; font-size: 0.77rem;
  cursor: pointer; flex-shrink: 0;
}
.sheet-status-select {
  border: none; border-radius: var(--radius-pill); padding: 5px 10px; font-size: 0.73rem; font-weight: 500; cursor: pointer;
}

/* ---------- Fase 8: tabla de licencias por estado + códigos de aseguradora ---------- */
table.sheet tbody tr.license-row-expired td:first-child { background: var(--row-bad-2); box-shadow: 1px 0 0 var(--border); }
table.sheet tbody tr.license-row-expired td { background: var(--row-bad); }
table.sheet tbody tr.license-row-soon td:first-child { background: var(--row-soon-2); box-shadow: 1px 0 0 var(--border); }
table.sheet tbody tr.license-row-soon td { background: var(--row-soon); }
.license-row-form table td { border: none; padding: 4px 6px; }
.license-row-form input[type="text"], .license-row-form input[type="date"] {
  width: 100%; padding: 7px 9px; border-radius: 8px; border: 1.5px solid var(--border);
  font-size: 0.79rem; font-family: inherit; background: var(--glass-strong);
}
.license-row-form input[type="checkbox"] { width: 17px; height: 17px; cursor: pointer; }
.card table.sheet td input[type="text"] {
  width: 100%; padding: 8px 10px; border-radius: 8px; border: 1.5px solid var(--border);
  font-size: 0.83rem; font-family: inherit; background: var(--glass-strong);
}

/* ---------- Árbol de red multinivel (agencias/sub-agencias) ---------- */
.tree-node { margin-top: 6px; }
.tree-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border-radius: var(--radius-sm); border: 1px solid var(--border-soft);
  background: var(--surface-solid); margin-top: 4px;
}
.tree-name { font-weight: 500; font-size: 0.9rem; }
.tree-level {
  font-size: 0.68rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--ink-soft); background: var(--glass); border: 1px solid var(--border);
  border-radius: var(--radius-pill); padding: 2px 9px;
}
.tree-amt { margin-left: auto; font-weight: 500; color: var(--gold-ink); font-size: 0.9rem; }
.tree-count { font-size: 0.7rem; color: var(--ink-soft); font-weight: 500; white-space: nowrap; }

/* ---------- Nivel/generación dentro de "Mi red" (portal del líder) ---------- */
.level-badge {
  font-size: 0.66rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--ink-soft); background: rgba(120,120,140,0.1); border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill); padding: 2px 8px; margin-left: 6px;
}

/* ---------- Responsive: colapsa la sidebar a barra superior en pantallas chicas ---------- */
@media (max-width: 900px) {
  .app-shell { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: relative; flex-direction: row; align-items: center; padding: 12px 16px; gap: 14px; }
  .sidebar-brand { padding: 0; }
  .sidebar-section-label { display: none; }
  .sidebar-nav { flex-direction: row; flex-wrap: wrap; }
  .sidebar-spacer { display: none; }
  .sidebar-divider { display: none; }
  .sidebar-cta { margin: 0; }
  .sidebar-footer { margin-left: auto; }
  .container { padding: 24px 18px 60px; }
}

/* ---------- Fase 5: popup "ve a darle amor" (venta nueva / cumpleaños) ---------- */
.love-popup-root {
  position: fixed; right: 20px; bottom: 20px; z-index: 9999;
  display: none;
  max-width: 340px;
}
.love-popup-card {
  position: relative;
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur-glass); backdrop-filter: var(--blur-glass);
  border: 1px solid rgba(124,138,160,0.38);
  border-radius: var(--radius); padding: 18px 20px;
  box-shadow: var(--shadow-pop);
  animation: love-popup-in 0.25s ease-out;
}
.love-popup-close {
  position: absolute; top: 8px; right: 10px;
  background: none; border: none; cursor: pointer;
  font-size: 1.15rem; line-height: 1; color: var(--ink-soft);
  padding: 4px 6px; border-radius: 50%;
  transition: background 0.12s, color 0.12s;
}
.love-popup-close:hover { background: rgba(120,120,140,0.14); color: var(--ink); }
@keyframes love-popup-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.love-popup-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.love-popup-avatar { width: 40px; height: 40px; font-size: 0.95rem; flex-shrink: 0; }
/* El título necesita su propio color (bug corregido en Fase 7) — no heredar del sidebar. */
.love-popup-title { font-weight: 500; font-size: 1rem; margin-bottom: 4px; color: var(--ink); }
.love-popup-msg { font-size: 0.88rem; color: var(--ink-soft); line-height: 1.4; }
.love-popup-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.love-popup-actions .btn { padding: 9px 16px; font-size: 0.82rem; }
.love-popup-actions button.btn { border: none; cursor: pointer; }

/* Fase 7: pila de avatares superpuestos para el aviso agrupado de varias ventas */
.love-popup-avatar-stack { display: flex; flex-shrink: 0; }
.love-popup-avatar-stacked {
  width: 40px; height: 40px; font-size: 0.95rem;
  border: 2px solid var(--surface); margin-left: -14px;
}
.love-popup-avatar-stacked:first-child { margin-left: 0; }


/* ---------- Fase 17: iconos abstractos de línea (reemplazo de emojis) ---------- */
.ic-svg { vertical-align: -0.15em; flex-shrink: 0; }
h1 .ic-svg, h3 .ic-svg, h2 .ic-svg { vertical-align: -0.12em; margin-right: 7px; color: var(--ink-soft); }
.h-ic { color: var(--ink-soft); }
.nav-item .ic { display: inline-flex; align-items: center; justify-content: center; }
.btn .ic-svg { margin-right: 2px; }
.sidebar-brand .mark .ic-svg, .login-box .mark .ic-svg { color: #fff; }
.warn-ic { color: #3f6ea8; vertical-align: -0.15em; }

/* Badges de ranking 1/2/3 (reemplazan a las medallas emoji) */
.rank-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 21px; height: 21px; border-radius: 50%;
  font-size: 0.7rem; font-weight: 500; vertical-align: middle;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 1px 3px rgba(20,20,40,0.15);
}
.rank-1 { background: linear-gradient(135deg, #EACD6A, #C9A227); color: #4a3b07; }
.rank-2 { background: linear-gradient(135deg, #dcdce2, #9a9ca8); color: #2a2a30; }
.rank-3 { background: linear-gradient(135deg, #DDA97A, #B57C42); color: #4a2d0d; }

/* ==========================================================================
   Fase 19: Classroom, Calendario y Muro (migración de Skool) — estilo Apple
   ========================================================================== */

/* ---------- Classroom: grid de cursos ---------- */
.course-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 1000px) { .course-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .course-grid { grid-template-columns: 1fr; } }

.course-card {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: var(--surface);
  -webkit-backdrop-filter: var(--blur-glass); backdrop-filter: var(--blur-glass);
  border: 1px solid var(--glass-border); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-card);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.course-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-1px); }
.course-card:hover .course-cover span { text-decoration: underline; text-underline-offset: 3px; }

.course-cover {
  height: 128px; display: flex; align-items: center; justify-content: center;
  padding: 16px 20px; text-align: center;
  color: #fff; font-weight: 500; font-size: 1.02rem; letter-spacing: -0.01em; line-height: 1.25;
}
.cover-0 { background: linear-gradient(135deg, #2A2A31, #17171B); }
.cover-1 { background: linear-gradient(135deg, var(--gold-400), var(--gold-700)); }
.cover-2 { background: linear-gradient(135deg, #26262c, #101013); }
.cover-3 { background: linear-gradient(135deg, #8d8878, #5f5b50); }
.cover-4 { background: linear-gradient(135deg, #34486b, #1d2a42); }
.cover-5 { background: linear-gradient(135deg, var(--gold-500), #3B3B42 60%, #0F0F1A); }

.course-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.course-body h3 { margin: 0; font-size: 0.98rem; }
.course-body p { margin: 0; color: var(--ink-soft); font-size: 0.83rem; line-height: 1.45; flex: 1; }
.course-progress { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.course-progress-label { font-size: 0.75rem; font-weight: 500; color: var(--ink-soft); min-width: 34px; text-align: right; }

/* ---------- Visor de curso: sidebar de lecciones + contenido ---------- */
.course-layout { display: grid; grid-template-columns: 300px 1fr; gap: 22px; align-items: start; }
@media (max-width: 900px) { .course-layout { grid-template-columns: 1fr; } }
.course-nav { padding: 18px 14px; position: sticky; top: 20px; }
.course-nav-section {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.7px; font-weight: 500;
  color: var(--ink-soft); padding: 12px 10px 4px;
}
.course-nav-item {
  display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 12px;
  text-decoration: none; color: var(--ink-soft); font-size: 0.86rem; font-weight: 500;
  transition: background 0.12s, color 0.12s;
}
.course-nav-item:hover { background: var(--surface-2); color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.course-nav-item.active { background: var(--gold-wash); color: var(--ink); font-weight: 600; box-shadow: inset 0 0 0 1px var(--gold-wash-border), 0 1px 3px rgba(124,138,160,0.14); }
.lesson-check {
  width: 17px; height: 17px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid var(--border); display: inline-flex; align-items: center; justify-content: center;
  color: #fff; background: transparent;
}
.lesson-check.done { background: var(--green); border-color: var(--green); }

/* Fase 26: video de YouTube e imagen destacada dentro de una lección */
.lesson-video-wrap {
  position: relative; width: 100%; padding-top: 56.25%; margin-top: 14px;
  border-radius: 14px; overflow: hidden; background: #0F0F1A;
  box-shadow: 0 4px 16px rgba(20,20,25,0.1);
}
.lesson-video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Fase 26: "fachada" tipo YouTube — se ve la miniatura real del video con un botón
   de play encima, y el iframe (pesado) solo se carga cuando el usuario le da clic,
   igual que hace YouTube/Skool con sus previews. */
.yt-facade { cursor: pointer; }
.yt-facade-thumb {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), filter 0.3s ease;
}
.yt-facade:hover .yt-facade-thumb { transform: scale(1.02); filter: brightness(0.85); }
.yt-facade-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 62px; height: 62px; border-radius: 50%;
  background: rgba(20,20,25,0.55); color: #fff;
  display: flex; align-items: center; justify-content: center; padding-left: 4px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), background 0.2s ease;
}
.yt-facade:hover .yt-facade-play { transform: translate(-50%, -50%) scale(1.08); background: rgba(213,42,42,0.88); }
.lesson-image {
  width: 100%; max-height: 380px; object-fit: cover; border-radius: 14px; margin-top: 14px;
  box-shadow: 0 4px 16px rgba(20,20,25,0.08);
}
.lesson-body { margin-top: 14px; }
.lesson-body p { color: var(--ink); font-size: 0.93rem; line-height: 1.65; margin: 0 0 12px; }
.lesson-resources { border-top: 1px solid var(--border-soft); margin-top: 18px; padding-top: 14px; }
.lesson-resource {
  display: flex; align-items: center; gap: 9px; padding: 10px 14px; margin-top: 8px;
  background: var(--surface-soft); border-radius: 12px; text-decoration: none;
  color: var(--ink); font-size: 0.88rem; font-weight: 500;
  transition: background 0.12s;
}
.lesson-resource:hover { background: var(--hover-suave-fuerte); }

/* ---------- Calendario ---------- */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-head { margin-bottom: 6px; }
.cal-head div { text-align: center; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 500; color: var(--ink-soft); padding: 4px 0; }
.cal-cell {
  min-height: 92px; background: var(--surface-solid); border: 1px solid var(--border-soft);
  border-radius: 12px; padding: 8px; font-size: 0.78rem;
}
.cal-empty { background: transparent; border-color: transparent; }
.cal-daynum { font-size: 0.78rem; font-weight: 500; color: var(--ink-soft); margin-bottom: 5px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.cal-daynum.today { background: var(--red); color: #fff; }
.cal-event {
  background: rgba(47,121,201,0.12); color: var(--ink); border-radius: 8px;
  padding: 3px 7px; margin-bottom: 4px; font-size: 0.72rem; font-weight: 500; line-height: 1.3;
}
.cal-event-time { color: var(--men-500); font-weight: 500; }
.cal-weekly-row { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px dashed var(--border-soft); font-size: 0.9rem; }
.cal-weekly-row:last-child { border-bottom: none; }

/* ---------- Muro (Ventas On Fire + Felicitaciones) ---------- */
.wall-post { padding: 20px 24px; }
.wall-post-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.wall-post-author { font-weight: 500; font-size: 0.93rem; }
.wall-post-meta { font-size: 0.76rem; color: var(--ink-soft); }
.wall-post-cat {
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.72rem; font-weight: 500; padding: 4px 11px; border-radius: var(--radius-pill);
}
.cat-venta { background: rgba(124,138,160,0.14); color: var(--gold-ink); }
.cat-felicitacion { background: rgba(194,65,143,0.1); color: var(--women-500); }
.wall-post-title { font-weight: 500; font-size: 1rem; display: flex; align-items: center; gap: 8px; }
.wall-dot { width: 8px; height: 8px; border-radius: 50%; background: #2E6EF5; flex-shrink: 0; }
.wall-check { color: var(--green); }
.wall-post-body { color: var(--ink); font-size: 0.92rem; margin-top: 6px; line-height: 1.55; white-space: pre-wrap; }
.wall-post-actions { margin-top: 14px; border-top: 1px solid var(--border-soft); padding-top: 10px; }
.wall-like {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 1px solid var(--border); border-radius: var(--radius-pill);
  padding: 6px 14px; font-size: 0.82rem; font-weight: 500; color: var(--ink-soft); cursor: pointer;
  transition: all 0.15s;
}
.wall-like:hover { border-color: var(--women-500); color: var(--women-500); }
.wall-like.liked { background: rgba(194,65,143,0.1); border-color: var(--women-300); color: var(--women-500); }


/* ---------- Fase 20: negritas mas suaves + esfera animada ---------- */
strong, b { font-weight: 700; }
th { font-weight: 500; }


/* ==========================================================================
   Fase 21: réplica de la simplicidad de Skool — secciones armables + muro
   ========================================================================== */

/* Secciones colapsables del classroom (como los módulos de Skool) */
.course-section { margin-top: 6px; }
.course-section summary {
  display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
  padding: 9px 10px 5px; user-select: none;
}
.course-section summary::-webkit-details-marker { display: none; }
/* Fase 26 (a pedido de Alfredo — "que se diferencien los menú de las secciones o
   títulos más negritas que las páginas"): antes el título de sección era una
   etiqueta chica en mayúsculas gris, casi indistinguible de una lección normal a
   primera vista — ahora es un título bien marcado (negro, más grande, bien bold),
   como los módulos de Skool, para que salte a la vista la diferencia entre
   "sección" (agrupador) y "página" (lección individual) en el menú. */
.course-section-title {
  font-size: 0.92rem; text-transform: none; letter-spacing: -0.01em; font-weight: 700;
  color: var(--ink);
}
.course-section { border-top: 1px solid var(--border-soft); padding-top: 4px; margin-top: 10px; }
.course-section:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.section-chevron {
  margin-left: auto; color: var(--gray-400); font-size: 1rem; line-height: 1;
  transform: rotate(90deg); transition: transform 0.15s;
}
.course-section:not([open]) .section-chevron { transform: rotate(0deg); }
.section-add {
  width: 20px; height: 20px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--surface); color: var(--ink-soft); font-size: 0.85rem; line-height: 1;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.section-add:hover { background: var(--surface-2); color: var(--ink); }

/* Muro estilo Skool: tarjeta simple, título bold, pulgar + contador plano */
.wall-post { padding: 18px 22px; }
.wall-post-title { font-size: 1.05rem; font-weight: 700; }
.wall-check-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 4px; background: var(--green); color: #fff;
  vertical-align: -0.15em;
}
.wall-meta-flame { color: var(--orange-500); vertical-align: -0.1em; }
.wall-post-actions { border-top: none; padding-top: 4px; margin-top: 10px; }
.wall-like {
  border: none; background: transparent; padding: 4px 6px;
  color: var(--ink-soft); font-weight: 600; font-size: 0.86rem;
}
.wall-like:hover { color: var(--ink); border-color: transparent; }
.wall-like.liked { background: transparent; border-color: transparent; color: var(--ink); }
.wall-dot { background: #4c7ef3; }
.wall-post-actions { display: flex; align-items: center; gap: 16px; }
.wall-comment-count {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--ink-soft); font-weight: 600; font-size: 0.86rem;
}

/* ---------- Fase 26: comentarios del muro (texto + emoji + GIF), a pedido de
   Alfredo — reacciona a que las ventas se publican solas pero igual debe poder
   comentarse la publicación, con emojis y GIFs como en Skool. ---------- */
.wall-comments { margin-top: 12px; border-top: 1px solid var(--border-soft); padding-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.wall-comment { display: flex; gap: 9px; align-items: flex-start; }
.wall-comment-bubble {
  background: var(--surface-soft); border-radius: 14px; padding: 8px 13px;
  font-size: 0.85rem; max-width: 100%;
}
.wall-comment-author { font-weight: 600; margin-right: 6px; }
.wall-comment-time { color: var(--ink-soft); font-size: 0.74rem; }
.wall-comment-text { color: var(--ink); margin-top: 2px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.wall-comment-gif { max-width: 200px; max-height: 150px; border-radius: 10px; margin-top: 6px; display: block; }

.wall-comment-form { display: flex; gap: 9px; align-items: flex-start; }
.wall-comment-input-wrap {
  flex: 1; min-width: 0; background: var(--surface-soft); border-radius: 16px;
  padding: 8px 10px 8px 13px; border: 1px solid transparent;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.wall-comment-input-wrap:focus-within { background: var(--surface); border-color: var(--gold-400); }
.wall-comment-textarea {
  width: 100%; border: none; background: transparent; resize: none; outline: none;
  font-family: inherit; font-size: 0.87rem; color: var(--ink); line-height: 1.5;
  padding: 3px 0; max-height: 140px;
}
.wall-comment-gif-chip {
  display: none; align-items: center; gap: 8px; margin: 4px 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 4px;
}
.wall-comment-gif-chip img { max-height: 70px; border-radius: 6px; display: block; }
.wall-comment-gif-remove {
  border: none; background: var(--surface-soft); color: var(--ink-soft); cursor: pointer;
  width: 22px; height: 22px; border-radius: 50%; font-size: 0.75rem;
}
.wall-comment-toolbar { display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.wall-toolbar-btn {
  border: none; background: transparent; cursor: pointer; font-size: 1rem;
  padding: 5px 8px; border-radius: 8px; color: var(--ink-soft); line-height: 1;
  transition: background 0.12s ease;
}
.wall-toolbar-btn:hover { background: rgba(120,120,140,0.12); }
.wall-toolbar-gif { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; }
.wall-comment-submit { margin-left: auto; padding: 6px 16px; font-size: 0.82rem; }
.wall-emoji-wrap, .wall-gif-wrap { position: relative; }
.wall-emoji-popover {
  position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 20;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow-pop); padding: 8px; display: grid;
  grid-template-columns: repeat(6, 1fr); gap: 2px; width: 220px;
}
.wall-emoji-popover button {
  border: none; background: transparent; cursor: pointer; font-size: 1.15rem;
  padding: 5px; border-radius: 8px; line-height: 1.2;
}
.wall-emoji-popover button:hover { background: rgba(120,120,140,0.12); }
.wall-gif-popover {
  position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 20;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow-pop); padding: 10px; width: 260px;
}
.wall-gif-search {
  width: 100%; border: 1px solid var(--border); border-radius: 10px; padding: 7px 10px;
  font-size: 0.82rem; font-family: inherit; outline: none; box-sizing: border-box;
}
.wall-gif-search:focus { border-color: var(--gold-400); }
.wall-gif-results {
  margin-top: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  max-height: 220px; overflow-y: auto;
}
.wall-gif-thumb { width: 100%; border-radius: 8px; cursor: pointer; display: block; object-fit: cover; height: 70px; }
.wall-gif-thumb:hover { outline: 2px solid var(--gold-400); }
.wall-gif-note { grid-column: 1 / -1; color: var(--ink-soft); font-size: 0.8rem; text-align: center; padding: 10px 0; }
/* El atributo [hidden] por sí solo no alcanza: como .wall-emoji-popover/.wall-gif-popover
   ya traen su propio "display" fijado arriba, esa regla (misma especificidad) le gana
   al [hidden] del navegador y el popover se quedaba visible aunque estuviera "oculto". */
.wall-emoji-popover[hidden], .wall-gif-popover[hidden] { display: none; }

/* ==========================================================================
   Fase 22: Marketing PRO IA — chat estilo Claude + paywall
   ========================================================================== */
.pro-badge {
  display: inline-block; vertical-align: middle; margin-left: 6px;
  background: linear-gradient(135deg, var(--gold-400), var(--gold-700)); color: #fff;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.8px;
  padding: 3px 9px; border-radius: var(--radius-pill);
}
.proia-features {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 640px; margin: 0 auto;
  text-align: left;
}
@media (max-width: 700px) { .proia-features { grid-template-columns: 1fr; } }
.proia-feature {
  background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 12px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 4px;
}
.proia-feature strong { font-size: 0.9rem; }
.proia-feature span { font-size: 0.8rem; color: var(--ink-soft); line-height: 1.45; }

.proia-chat { padding: 18px 20px; }
.proia-messages {
  max-height: 55vh; min-height: 300px; overflow-y: auto; padding: 6px 4px;
  display: flex; flex-direction: column; gap: 14px;
}
.proia-empty { text-align: center; padding: 40px 10px 20px; }
.proia-suggestions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.proia-suggestions button {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-pill);
  padding: 8px 15px; font-size: 0.82rem; color: var(--ink); cursor: pointer; font-family: inherit;
  transition: background 0.12s, border-color 0.12s;
}
.proia-suggestions button:hover { background: var(--hover-suave); border-color: var(--gold-wash-border); }

.proia-msg { display: flex; gap: 10px; align-items: flex-start; }
.proia-msg.user { justify-content: flex-end; }
.proia-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--gold-400), var(--gold-700)); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.62rem; font-weight: 700; margin-top: 2px;
}
.proia-bubble {
  max-width: 82%; padding: 11px 15px; border-radius: 14px;
  font-size: 0.9rem; line-height: 1.55; white-space: pre-wrap; word-wrap: break-word;
}
.proia-msg.user .proia-bubble { background: var(--surface-2); border: 1px solid var(--border-soft); }
.proia-msg.assistant .proia-bubble { background: var(--surface); border: 1px solid var(--border-soft); box-shadow: var(--shadow-card); }

.proia-composer { display: flex; gap: 10px; align-items: flex-end; margin-top: 14px; border-top: 1px solid var(--border-soft); padding-top: 14px; }
.proia-composer textarea {
  flex: 1; padding: 11px 14px; border-radius: 12px; border: 1.5px solid var(--border);
  font-family: inherit; font-size: 0.92rem; resize: none; max-height: 140px;
}
.proia-composer textarea:focus { outline: none; border-color: var(--gold-500); box-shadow: 0 0 0 3px rgba(124,138,160,0.10); }

/* ---------- Fase 23: menú superior de PRO IA + espía + cupo ---------- */
.proia-topnav {
  display: flex; gap: 4px; border-bottom: 1px solid var(--border);
  margin-bottom: 20px; overflow-x: auto;
}
.proia-topnav-item {
  border: none; background: none; padding: 11px 16px 12px; font-family: inherit;
  font-size: 0.92rem; font-weight: 500; color: var(--ink-soft); cursor: pointer;
  border-bottom: 2.5px solid transparent; margin-bottom: -1px; white-space: nowrap;
  transition: color 0.12s, border-color 0.12s;
}
.proia-topnav-item:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.proia-topnav-item.active { color: var(--ink); font-weight: 700; border-bottom-color: var(--ink); text-decoration: none; }

.proia-quota {
  background: var(--gold-wash); border: 1px solid var(--gold-wash-border); border-radius: var(--radius-pill);
  padding: 8px 16px; font-size: 0.82rem; color: var(--ink);
}

.spy-item {
  border: 1px solid var(--border-soft); border-radius: 12px; padding: 12px 14px;
  margin-top: 10px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
}
.spy-meta { font-size: 0.74rem; color: var(--gray-400); font-weight: 600; }
.spy-caption { font-size: 0.85rem; color: var(--ink); line-height: 1.45; }

/* Fase 24: Estudio PRO IA — biblioteca de voces, clonación y foto */
.studio-label {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--gray-400); margin: 14px 0 8px;
}
.studio-voices { display: flex; flex-wrap: wrap; gap: 10px; }
.studio-voices form { display: contents; }
.voice-card {
  display: flex; flex-direction: column; gap: 3px; align-items: flex-start; text-align: left;
  background: var(--surface); border: 1.5px solid var(--border); border-radius: 12px;
  padding: 11px 16px; min-width: 168px; cursor: pointer; font-family: inherit;
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.voice-card:hover { transform: translateY(-1px); border-color: var(--gray-300); }
.voice-card:hover .voice-name { text-decoration: underline; text-underline-offset: 3px; }
.voice-card.selected { background: var(--gold-wash); border-color: var(--gold-wash-border); }
.voice-card-add { border-style: dashed; background: var(--gray-50); }
.voice-name { font-weight: 700; font-size: 0.88rem; color: var(--ink); }
.voice-tone { font-size: 0.74rem; color: var(--ink-soft); }

.studio-opts {
  display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: flex-end;
  margin-top: 12px; padding: 12px 14px; background: var(--gray-50);
  border: 1px solid var(--border-soft); border-radius: 10px;
}
.studio-opts label { display: flex; flex-direction: column; gap: 4px; font-size: 0.74rem; font-weight: 600; color: var(--ink-soft); }
.studio-opts select {
  padding: 7px 10px; border-radius: 8px; border: 1.5px solid var(--border);
  font-family: inherit; font-size: 0.82rem; background: var(--surface); min-width: 180px;
}
.studio-opts .studio-chk { flex-direction: row; align-items: center; gap: 6px; align-self: center; font-size: 0.82rem; padding-bottom: 2px; }

/* ==========================================================================
   Fase 27: muro con detalle + likes + replies + tarjeta de perfil al pasar
   el mouse, calendario con eventos completos (Zoom, portada, duración,
   zona horaria) y grupos de acceso — réplica del comportamiento de Skool
   a pedido de Alfredo.
   ========================================================================== */

/* ---------- Admin: popover de "Grupos" por agente ---------- */
.groups-popover { position: relative; }
.groups-popover summary { list-style: none; }
.groups-popover summary::-webkit-details-marker { display: none; }
.groups-popover-panel {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 20; min-width: 190px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow-pop); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px;
}

/* ---------- Calendario: menú rápido admin + modal de detalle ---------- */
.event-quickmenu {
  position: absolute; z-index: 200; background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow-pop); padding: 6px; display: flex; flex-direction: column;
  min-width: 170px;
}
.event-quickmenu button {
  border: none; background: transparent; text-align: left; padding: 9px 11px; border-radius: 8px;
  font-family: inherit; font-size: 0.85rem; font-weight: 500; color: var(--ink); cursor: pointer;
}
.event-quickmenu button:hover { background: var(--surface-soft); }

.event-detail-panel { padding: 0; overflow: hidden; }
.event-detail-cover { width: 100%; max-height: 220px; object-fit: cover; display: block; }
.event-detail-cover-fallback {
  height: 120px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--gold-400), var(--gold-700)); color: #fff;
}
.event-detail-close {
  position: absolute; top: 12px; right: 12px; background: rgba(20,20,25,0.55); color: #fff;
  border-radius: 50%; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
}
.event-detail-body { padding: 20px 22px 22px; }
.event-detail-body h3 { margin: 0 0 10px; font-size: 1.15rem; }
.event-detail-meta { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 0.88rem; margin-top: 4px; }
.event-detail-desc { color: var(--ink); font-size: 0.9rem; line-height: 1.55; white-space: pre-wrap; margin-top: 14px; }

/* ---------- Muro: click a detalle, likes, comentarios/replies, hover-card ---------- */
.wall-post-clickarea { cursor: pointer; }
.wall-like-count {
  border: none; background: transparent; padding: 4px 6px; color: var(--ink-soft); font-weight: 600;
  font-size: 0.86rem; cursor: pointer; font-family: inherit;
}
.wall-like-count:hover:not(:disabled) { color: var(--ink); text-decoration: underline; }
.wall-like-count:disabled { cursor: default; }
.wall-comment-count {
  display: inline-flex; align-items: center; gap: 6px; border: none; background: transparent;
  padding: 4px 6px; color: var(--ink-soft); font-weight: 600; font-size: 0.86rem; cursor: pointer; font-family: inherit;
}
.wall-comment-count:hover { color: var(--ink); }

.wall-comment-col { flex: 1; min-width: 0; }
.wall-reply-toggle {
  border: none; background: transparent; color: var(--ink-soft); font-size: 0.74rem; font-weight: 600;
  cursor: pointer; padding: 2px 4px; margin-top: 2px; font-family: inherit;
}
.wall-reply-toggle:hover { color: var(--ink); text-decoration: underline; }
.wall-reply { margin-top: 8px; margin-left: 18px; }
.wall-reply-form { display: flex; gap: 8px; margin-top: 8px; align-items: center; }
.wall-reply-form input[type="text"] {
  flex: 1; padding: 7px 11px; border-radius: var(--radius-pill); border: 1.5px solid var(--border);
  font-family: inherit; font-size: 0.82rem; background: var(--surface-soft);
}
.wall-reply-form input[type="text"]:focus { background: var(--surface); border-color: var(--gold-400); outline: none; }
.wall-reply-form[hidden] { display: none; }

/* Lista de "quién le dio me gusta" */
.likers-list { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; max-height: 60vh; overflow: auto; }
.likers-row { display: flex; align-items: center; gap: 11px; }
.likers-name { font-weight: 500; font-size: 0.9rem; display: flex; align-items: center; }
.likers-sub { font-size: 0.76rem; color: var(--ink-soft); }

/* Avatares y nombres "hoverables" que abren la tarjeta de perfil */
.hoverable-avatar { cursor: pointer; }
.hoverable-name { cursor: pointer; }
.hoverable-name:hover { text-decoration: underline; text-underline-offset: 2px; }

.profile-hovercard {
  position: fixed; z-index: 500; background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow-pop); padding: 12px 15px; min-width: 200px;
}
.profile-hovercard[hidden] { display: none; }
.profile-hovercard-name { font-weight: 600; font-size: 0.92rem; display: flex; align-items: center; }
.profile-hovercard-prod { font-size: 0.78rem; color: var(--ink-soft); margin-top: 4px; }

/* ==========================================================================
   Fase 28 — logo de marca, menú contraíble, privacidad de ranking, muro Skool
   ========================================================================== */

/* Logo subido por el admin en el sidebar (reemplaza el escudo) */
/* (la regla vieja ponia fondo solido y recortaba el logo — ver el bloque del final) */

/* Flechita para contraer/expandir el menú lateral */
.sidebar-collapse-btn {
  margin-left: auto;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface-solid);
  color: var(--ink-soft); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform 0.2s ease, color 0.12s;
  flex-shrink: 0;
}
.sidebar-collapse-btn:hover { color: var(--ink); }

body.side-collapsed .sidebar { width: 76px; padding: 22px 10px; }
body.side-collapsed .sidebar-brand { justify-content: center; padding-left: 0; padding-right: 0; }
body.side-collapsed .sidebar-brand .txt,
body.side-collapsed .sidebar-section-label,
body.side-collapsed .sidebar-logout { display: none; }
body.side-collapsed .sidebar-collapse-btn { margin-left: 0; transform: rotate(180deg); }
body.side-collapsed .sidebar-brand { flex-direction: column; gap: 8px; }
body.side-collapsed .nav-item { justify-content: center; padding: 11px 8px; font-size: 0; gap: 0; }
body.side-collapsed .nav-item .ic { font-size: 1rem; }
body.side-collapsed .nav-item .pro-badge { display: none; }
body.side-collapsed .sidebar-footer { justify-content: center; }

/* Ranking público: del puesto 11 para abajo, borroso para quien no es admin —
   la fila del propio agente que está viendo sí se ve. */
.rank-blur-note { color: var(--ink-soft); font-size: 0.8rem; margin-top: 8px; }

/* Muro estilo Skool: punto azul (como el de Skool), título en negrita con emoji nativo */
.wall-dot { background: #2E6EF5; }
.wall-post-title .wall-title-venta { font-weight: 700; letter-spacing: 0.01em; }

/* La manito de like, como Skool: gris de contorno, se rellena oscuro al dar like */
.wall-like { color: var(--ink-soft); }
.wall-like:hover { color: var(--ink); }
.wall-like.liked { color: var(--ink); }

/* ==========================================================================
   Fase 28 (tercera pasada) — menú de usuario, muro hover dorado, podio serio
   ========================================================================== */

/* Menú de configuración en el nombre (abajo-izquierda): Mi Perfil + Salir */
.sidebar-user-menu { position: relative; }
.sidebar-user-menu summary { list-style: none; cursor: pointer; border-radius: 12px; }
.sidebar-user-menu summary::-webkit-details-marker { display: none; }
.sidebar-user-menu summary:hover { background: var(--surface-soft); }
.sidebar-user-caret { margin-left: auto; color: var(--ink-soft); display: inline-flex; }
.sidebar-user-menu[open] .sidebar-user-caret { transform: rotate(180deg); }
.sidebar-user-pop {
  position: absolute; bottom: calc(100% + 8px); left: 0; right: 0;
  background: var(--surface-solid); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow-pop); padding: 6px; z-index: 60;
}
.sidebar-user-pop-item {
  display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 9px;
  color: var(--ink); text-decoration: none; font-size: 0.86rem; font-weight: 500;
}
.sidebar-user-pop-item:hover { background: rgba(124,138,160,0.20); }
body.side-collapsed .sidebar-user-txt, body.side-collapsed .sidebar-user-caret { display: none; }

/* Fase 62: el suiche de tema, dentro del menú de tu nombre. Tres botones pegados
   dentro de una ranura hundida, como el selector de un iPhone: la posición en la
   que estás se levanta en blanco (o en gris carbón de noche) con el borde dorado. */
.tema-suiche {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px;
  background: var(--surface-soft); border-radius: 10px; padding: 3px; margin-bottom: 6px;
}
.tema-op {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border: 1px solid transparent; background: transparent; border-radius: 8px;
  padding: 7px 2px; cursor: pointer; font-family: inherit; font-size: 0.68rem;
  font-weight: 600; color: var(--ink-soft); line-height: 1;
}
.tema-op:hover { color: var(--ink); }
.tema-op.is-on {
  background: var(--surface); border-color: var(--gold-wash-border);
  color: var(--gold-ink); box-shadow: var(--shadow-card);
}
/* Con el menú contraído solo caben los iconos, en columna. */
body.side-collapsed .tema-suiche { grid-template-columns: 1fr; }
body.side-collapsed .tema-op { font-size: 0; gap: 0; padding: 7px 0; }

/* Muro: al pasar el mouse, solo se levanta la sombra. NADA de rellenar la tarjeta:
   Alfredo lo pidio con estas palabras — "solo en el borde, como un delineado que le de
   profundidad, no como un solido dentro de todo el recuadro". */
.card.wall-post:hover {
  box-shadow: 0 6px 20px rgba(224,172,42,0.22);
  background: var(--surface);
}

/* Top Producers: título del Top 3 como un encabezado serio, en negro */
/* La etiqueta "Top 3" era un cuadradito negro de esquinas rectas que se veia duro al
   lado de un titulo redondeado. Ahora es una pastilla suave, la hermana pequena de la
   que lleva el ano en el titulo del ranking. */
.podium-head .tag {
  background: var(--surface-2); color: var(--ink-soft);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 3px 10px; font-size: 0.66rem; letter-spacing: .09em; font-weight: 700;
  line-height: 1.4;
}
.podium-head h2 { color: var(--ink); font-weight: 700; letter-spacing: -0.01em; }

/* ==========================================================================
   Fase 29 — Studio PRO: interfaz estilo "Ask AI" (captura de Alfredo)
   ========================================================================== */
.studio-shell { display: flex; height: 100vh; overflow: hidden; }
.studio-side {
  width: 240px; flex-shrink: 0; background: var(--surface-2); border-right: 1px solid var(--border-soft);
  display: flex; flex-direction: column; padding: 16px 10px; gap: 2px; overflow-y: auto;
}
.studio-side-head { display: flex; align-items: center; gap: 8px; padding: 4px 10px 14px; }
.studio-spark { color: var(--gold-ink); font-size: 1.1rem; }
.studio-quota { margin-left: auto; font-size: 0.68rem; background: var(--gold-300); color: #6b5a1e; border-radius: 999px; padding: 2px 8px; font-weight: 700; white-space: nowrap; }
.studio-side-item {
  display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 10px;
  border: none; background: none; font-family: inherit; font-size: 0.86rem; font-weight: 500;
  color: var(--ink); cursor: pointer; text-align: left; width: 100%;
}
.studio-side-item:hover { background: rgba(124,138,160,0.18); }
.studio-side-item.active { background: rgba(124,138,160,0.28); }
.studio-newchat { font-weight: 600; }
.studio-search-wrap { padding: 4px 2px 10px; }
.studio-search {
  width: 100%; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--border);
  font-family: inherit; font-size: 0.82rem; background: var(--surface);
}
.studio-side-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 1px; color: var(--gray-400); font-weight: 700; padding: 14px 11px 6px; }
.studio-recents { display: flex; flex-direction: column; gap: 1px; overflow-y: auto; }
.studio-recent {
  border: none; background: none; text-align: left; padding: 7px 11px; border-radius: 8px;
  font-family: inherit; font-size: 0.8rem; color: var(--ink-soft); cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.studio-recent:hover { background: rgba(124,138,160,0.18); color: var(--ink); }

.studio-main { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--surface); }
.studio-panel { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.studio-panel-scroll { overflow-y: auto; }
.studio-panel-inner { max-width: 780px; width: 100%; margin: 0 auto; padding: 28px 24px 40px; }
.studio-panel-title { font-size: 1.2rem; font-weight: 700; margin: 0 0 16px; }

.studio-chat-scroll { flex: 1; overflow-y: auto; padding: 30px 24px 10px; }
.studio-hero { max-width: 640px; margin: 12vh auto 0; text-align: center; }
.studio-hero-title { font-size: 1.9rem; font-weight: 600; letter-spacing: -0.02em; }
.studio-hero-sub { color: var(--ink-soft); font-size: 0.92rem; margin-top: 8px; }

/* Fase 31: atajo de tema (IUL) bajo el hero del chat */
.studio-shortcuts { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.studio-chip {
  border: 1px solid var(--gold-400); background: var(--gold-wash); color: var(--gold-ink);
  font-family: inherit; font-size: 0.84rem; font-weight: 600;
  padding: 8px 16px; border-radius: 999px; cursor: pointer; transition: all .15s ease;
}
.studio-chip:hover { background: var(--hover-suave-fuerte); transform: translateY(-1px); }
/* Fase 36 — el sello de MODO CINE en el atajo de creatividad. */
.studio-chip-tag {
  display: inline-block; margin-left: 5px; padding: 1px 6px; border-radius: 999px;
  background: var(--gold-700); color: #FFF; font-size: 0.62rem; font-weight: 800; letter-spacing: .06em;
  vertical-align: 1px;
}

/* Fase 37 — los ejemplos pegables de la caja libre de creatividad. Botones
   pequeños que pegan un video de ejemplo completo en el cuadro de texto. */
.studio-ejemplo {
  padding: 6px 12px; font-size: 0.78rem; border-radius: 999px; font-weight: 700;
}

/* Fase 37B — MIS FICHAS. El personaje, el lugar o el objeto se dibuja UNA vez en
   una hoja de varios ángulos y se reutiliza escribiendo @sunombre. La tarjeta
   enseña la hoja a la izquierda porque lo que el agente necesita comprobar de un
   vistazo es que la cara es la que él aprobó. */
.studio-ficha-tipos { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.studio-ficha-tipo {
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); color: var(--ink-soft); font-size: 0.82rem; font-weight: 700; cursor: pointer;
}
.studio-ficha-tipo.is-on { border-color: var(--gold-ink); background: var(--gold-50); color: var(--ink); }
.studio-ficha-label {
  display: block; font-size: 0.78rem; font-weight: 800; color: var(--ink-soft);
  letter-spacing: .02em; margin: 12px 0 5px;
}
.studio-ficha-input {
  width: 100%; padding: 10px 13px; border: 1px solid var(--border); border-radius: 12px;
  font: inherit; font-size: 0.88rem; background: var(--surface); resize: vertical;
}
.studio-ficha-input:focus { outline: none; border-color: var(--gold-ink); }
.studio-ficha-slug { font-size: 0.78rem; color: var(--gray-400); margin-top: 5px; }
.studio-ficha-aviso { font-size: 0.78rem; color: var(--ink-soft); margin: 10px 0 0; line-height: 1.5; }
.studio-ficha-error {
  background: #FDECEC; border: 1px solid #F0C4C4; color: #8a2b2b;
  border-radius: 10px; padding: 10px 14px; font-size: 0.83rem; margin-bottom: 12px;
}
.studio-ficha-card { display: flex; gap: 16px; align-items: flex-start; padding: 16px 18px; }
.studio-ficha-hoja {
  width: 132px; flex: 0 0 132px; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden;
  background: var(--surface-soft); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
}
.studio-ficha-hoja img { width: 100%; height: 100%; object-fit: cover; }
.studio-ficha-hoja-vacia { color: var(--gray-400); font-size: 1.2rem; }
.studio-ficha-info { flex: 1; min-width: 0; }
.studio-ficha-arroba { font-size: 0.95rem; color: var(--gold-ink); }
.studio-ficha-nota { color: var(--ink-soft); font-size: 0.82rem; margin: 7px 0 0; line-height: 1.5; }
@media (max-width: 560px) {
  .studio-ficha-card { flex-direction: column; }
  .studio-ficha-hoja { width: 100%; flex: none; }
}

/* Fase 37C: la foto que el agente sube para que su ficha salga con SU cara */
.studio-ficha-foto { display: flex; gap: 14px; align-items: flex-start; margin-top: 4px; }
.studio-ficha-foto-prev {
  width: 92px; flex: 0 0 92px; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden;
  background: var(--surface-soft); border: 1px dashed var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--gray-400); font-size: 1.4rem;
}
.studio-ficha-foto-prev img { width: 100%; height: 100%; object-fit: cover; }

/* Fase 38: la carpeta de rodaje. Toda la tarjeta es el botón para entrar. */
.studio-proy-card { cursor: pointer; margin-top: 14px; transition: transform 0.12s ease, box-shadow 0.12s ease; }
.studio-proy-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(20, 18, 12, 0.08); }
.studio-proy-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.studio-proy-nombre { flex: 1; min-width: 0; font-size: 0.98rem; }
.studio-proy-tira { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 11px; }
.studio-proy-tira img {
  width: 54px; height: 34px; object-fit: cover; border-radius: 7px; border: 1px solid var(--border);
}
/* Si la hoja no carga, en su hueco va la arroba: sigue diciendo qué hay dentro */
.studio-proy-tira-txt {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 54px; height: 34px; padding: 0 8px;
  border-radius: 7px; border: 1px dashed var(--border);
  background: var(--surface-soft); color: var(--gray-400);
  font-size: 0.72rem; white-space: nowrap;
}
/* ---- Fase 39: el banco de ideas ---- */
/* Se lee como un catálogo: filtros arriba, tarjetas debajo agrupadas por para qué
   sirve cada video. Dentro, el guion se ve como lo que es — una hoja de rodaje. */
.studio-banco-filtros {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0 0 22px;
}
.studio-banco-filtro {
  border: 1px solid var(--border); background: var(--surface);
  color: var(--ink-soft); border-radius: 999px; padding: 7px 15px;
  font-size: 0.81rem; font-family: inherit; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.studio-banco-filtro:hover { border-color: var(--gold); }
.studio-banco-filtro.is-on {
  background: var(--ink); border-color: var(--ink); color: var(--ink-inv);
}
.studio-banco-cab { margin: 22px 0 10px; }
.studio-banco-cat { margin: 0; font-size: 0.98rem; }
.studio-banco-catnota { margin: 3px 0 0; color: var(--gray-400); font-size: 0.81rem; }
.studio-banco-card { cursor: pointer; transition: border-color .15s, transform .12s; }
.studio-banco-card:hover { border-color: var(--gold); transform: translateY(-1px); }
.studio-banco-top {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px;
}
.studio-banco-titulo { flex: 1; font-size: 0.95rem; }
.studio-banco-pide { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.studio-banco-chip {
  border: 1px dashed var(--border); background: var(--surface-soft);
  color: var(--ink-soft); border-radius: 999px; padding: 3px 10px; font-size: 0.75rem;
}
.studio-banco-ficha {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 0; border-top: 1px solid var(--border-soft);
}
.studio-banco-ficha:first-child { border-top: 0; padding-top: 0; }
.studio-banco-ficha-ico { font-size: 1.2rem; line-height: 1.4; }
.studio-banco-ficha-txt strong { font-size: 0.88rem; }
.studio-banco-ficha-txt p { margin: 2px 0 0; color: var(--ink-soft); font-size: 0.83rem; }
/* El guion: monoespaciado no — se lee como un texto, pero respetando sus saltos */
.studio-banco-guion {
  white-space: pre-wrap; font-family: inherit; font-size: 0.85rem; line-height: 1.6;
  background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 10px;
  padding: 14px 16px; margin: 0; max-height: 460px; overflow-y: auto; color: var(--ink);
}
.studio-banco-porque { margin: 0; padding-left: 20px; color: var(--ink-soft); font-size: 0.85rem; }
.studio-banco-porque li { margin-bottom: 7px; line-height: 1.55; }

/* ---- Fase 41: LA CADENA ---- */
/* Alfredo: "la creación de fichas debe ir en el proceso, no es una sección aparte…
   simplemente que sea una cadena de procesos continuos no aislados". Así que el
   reparto ya no tiene pantalla: se dibuja dentro de la propia burbuja del chat,
   mientras el agente mira. De ahí que todo esto sea estrecho y se apile bien en el
   móvil — vive dentro de una conversación, no en una tabla. */
.studio-reparto-cab { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.studio-reparto-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 12px; margin: 14px 0 4px;
}
.studio-reparto-slot {
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
  padding: 10px; min-width: 0; transition: border-color .2s ease;
}
/* Cuando la hoja ya está dibujada el borde se vuelve dorado: de un vistazo se sabe
   cuánto reparto queda por salir del horno sin tener que leer un solo estado. */
.studio-reparto-slot.is-lista { border-color: var(--gold); }
.studio-reparto-hoja {
  aspect-ratio: 16 / 9; border-radius: 9px; overflow: hidden; margin-bottom: 8px;
  background: var(--surface-soft); border: 1px solid var(--border-soft);
  display: flex; align-items: center; justify-content: center;
}
.studio-reparto-hoja img { width: 100%; height: 100%; object-fit: cover; }
.studio-reparto-vacia { color: var(--gray-400); font-size: 1.1rem; }
.studio-reparto-nombre {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 0.86rem; line-height: 1.3; min-width: 0;
}
.studio-reparto-nombre strong { min-width: 0; overflow-wrap: anywhere; }
.studio-reparto-ico { font-size: 0.95rem; line-height: 1; }
.studio-reparto-arroba {
  font-size: 0.78rem; color: var(--gold-ink); margin-top: 3px; overflow-wrap: anywhere;
}
.studio-reparto-estado {
  font-size: 0.75rem; color: var(--ink-soft); margin-top: 6px; line-height: 1.45;
}
.studio-reparto-estado.is-ok { color: var(--gold-ink); font-weight: 700; }
.studio-reparto-estado.is-mal { color: #8a2b2b; }
.studio-reparto-acciones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.studio-reparto-mini {
  border: 1px solid var(--border); background: var(--surface-soft); color: var(--ink-soft);
  border-radius: 999px; padding: 4px 10px; font-size: 0.73rem; font-family: inherit;
  cursor: pointer; transition: border-color .15s, color .15s;
}
.studio-reparto-mini:hover { border-color: var(--gold); color: var(--ink); }
/* El "cámbiala" se abre debajo de su propia ficha, no en un modal: el agente tiene
   que poder mirar la cara que no le gustó mientras escribe cómo la quiere. */
.studio-reparto-rehacer {
  margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--border-soft);
}
/* Y la ficha que se está retocando se ensancha a toda la fila: escribir cómo quieres
   que salga alguien en una columna de 148px no lo hace nadie. */
.studio-reparto-slot:has(.studio-reparto-rehacer) { grid-column: 1 / -1; }
.studio-reparto-rehacer .btn-row { margin-top: 8px; gap: 6px; }
.studio-reparto-rehacer .btn { padding: 6px 12px; font-size: 0.78rem; }
.studio-reparto-pie:empty { display: none; }
.studio-reparto-pie { margin-top: 10px; }
/* En pantalla estrecha el reparto se pone en dos columnas y no en una: cinco fichas
   en fila vertical dejarían el guion a un scroll de distancia. */
@media (max-width: 560px) {
  .studio-reparto-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .studio-reparto-slot { padding: 8px; }
}

/* Las ocho ideas ya dirigidas, ahora dentro del hilo y no en una pestaña */
.studio-ideas-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px; margin: 14px 0 4px;
}
.studio-ideas-cat {
  grid-column: 1 / -1; display: flex; flex-direction: column; gap: 2px; margin-top: 6px;
}
.studio-ideas-cat strong { font-size: 0.9rem; }
.studio-ideas-cat span { color: var(--gray-400); font-size: 0.78rem; }
.studio-ideas-card {
  text-align: left; border: 1px solid var(--border); background: var(--surface);
  border-radius: 12px; padding: 12px; font-family: inherit; cursor: pointer;
  display: flex; flex-direction: column; min-width: 0;
  transition: border-color .15s, transform .12s;
}
.studio-ideas-card:hover { border-color: var(--gold); transform: translateY(-1px); }
.studio-ideas-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.studio-ideas-top strong { flex: 1; min-width: 0; font-size: 0.88rem; line-height: 1.35; }
.studio-ideas-card .studio-ficha-nota { margin: 6px 0 0; font-size: 0.8rem; }
.studio-ideas-pide { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }

/* El recordatorio de qué proyecto está escribiendo, encima del cuadro de texto */
.studio-chip-proy {
  display: flex; align-items: center; gap: 8px; align-self: flex-start;
  background: var(--gold-100); border: 1px solid var(--border-soft);
  color: var(--ink-soft); border-radius: 999px; padding: 5px 8px 5px 13px;
  font-size: 0.79rem; margin: 0 auto 8px; width: fit-content;
}
.studio-chip-x {
  border: none; background: transparent; cursor: pointer; color: var(--gray-400);
  font-size: 0.85rem; line-height: 1; padding: 2px 5px; border-radius: 50%;
}
.studio-chip-x:hover { background: rgba(0, 0, 0, 0.07); color: var(--ink); }

/* Fase 34: cabina de grabación de voz (guion en pantalla) */
.voice-rec-overlay {
  position: fixed; inset: 0; z-index: 300; background: rgba(20, 18, 12, 0.55);
  display: flex; align-items: center; justify-content: center; padding: 18px;
}
.voice-rec-modal {
  background: var(--surface); border-radius: 18px; box-shadow: 0 24px 70px rgba(0,0,0,0.28);
  width: 100%; max-width: 620px; max-height: 92vh; display: flex; flex-direction: column;
  padding: 22px 24px;
}
.voice-rec-head { display: flex; align-items: center; justify-content: space-between; }
.voice-rec-close { border: none; background: none; font-size: 1.05rem; cursor: pointer; color: var(--ink-soft); padding: 4px 8px; border-radius: 8px; }
.voice-rec-close:hover { background: var(--surface-soft); }
.voice-rec-tip { color: var(--ink-soft); font-size: 0.85rem; margin: 8px 0 12px; }
.voice-rec-script {
  flex: 1; overflow-y: auto; background: var(--surface-2); border: 1px solid var(--gold-300);
  border-radius: 12px; padding: 16px 18px; font-size: 1.02rem; line-height: 1.75;
}
.voice-rec-script p { margin: 0 0 12px; }
.voice-rec-controls { display: flex; align-items: center; gap: 14px; margin-top: 14px; flex-wrap: wrap; }
.voice-rec-btn { background: #C0392B; color: #fff; border: none; }
.voice-rec-btn:hover { background: #A93226; }
.voice-rec-btn.grabando { animation: recPulse 1.2s ease-in-out infinite; }
@keyframes recPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(192,57,43,0.45); } 50% { box-shadow: 0 0 0 9px rgba(192,57,43,0); } }
.voice-rec-timer { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.05rem; }
.voice-rec-status { color: var(--ink-soft); font-size: 0.84rem; }

/* Fase 32: prompt editable antes de generar */
.studio-msg-prompt[contenteditable] {
  cursor: text; border: 1px dashed transparent; border-radius: 10px; padding: 10px 12px;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.studio-msg-prompt[contenteditable]:hover { border-color: var(--gold-400); background: var(--surface-2); }
.studio-msg-prompt[contenteditable]:focus { outline: none; border-color: var(--gold-400); background: var(--surface); box-shadow: 0 0 0 3px rgba(124,138,160,0.22); }

#chatThread { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; padding-bottom: 8px; }
#chatThread .proia-bubble { max-width: 100%; }
.studio-msg-prompt {
  white-space: pre-wrap; font-family: inherit; font-size: 0.85rem; line-height: 1.55;
  background: none; border: none; padding: 0; margin: 0; max-height: 420px; overflow-y: auto;
}
.studio-msg-actions {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  border-top: 1px solid var(--border-soft); margin-top: 12px; padding-top: 12px; font-size: 0.8rem;
}
.studio-msg-select { padding: 6px 9px; border-radius: 8px; border: 1px solid var(--border); font-family: inherit; font-size: 0.8rem; margin-left: 4px; }
.studio-gen-btn { padding: 8px 18px; font-size: 0.84rem; margin-left: auto; }
.studio-msg-status { margin-top: 10px; font-size: 0.82rem; color: var(--gold-ink); font-weight: 600; }
.studio-video { width: 100%; max-width: 300px; border-radius: 14px; border: 1px solid var(--border); margin-top: 12px; display: block; background: var(--ink-hover); aspect-ratio: 9/16; }
.studio-ai-note { font-size: 0.72rem; color: var(--gray-400); margin: 8px 0 0; }

.studio-composer-wrap { padding: 10px 24px 16px; }
.studio-composer {
  /* Fase 35.9 — el cuadro se ensancha para que la plantilla de creatividad se lea entera */
  max-width: 940px; margin: 0 auto; display: flex; align-items: flex-end; gap: 10px;
  background: var(--surface); border: 1.5px solid var(--border); border-radius: 26px;
  padding: 10px 10px 10px 20px; box-shadow: 0 4px 18px rgba(20,20,25,0.06);
}
.studio-composer:focus-within { border-color: var(--gold-500); box-shadow: 0 4px 18px rgba(124,138,160,0.14); }
.studio-composer textarea {
  flex: 1; border: none; outline: none; resize: none; font-family: inherit; font-size: 0.95rem;
  /* Fase 35.9 — 340px de alto: la plantilla de 6 lineas cabe entera sin recortarse.
     (Antes 120px: el tope del CSS ganaba al de JS y cortaba el texto.) */
  line-height: 1.5; max-height: 340px; background: none; padding: 4px 0;
}
.studio-send {
  width: 38px; height: 38px; border-radius: 50%; border: none; background: var(--ink); color: var(--ink-inv);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
}
.studio-send:disabled { opacity: 0.4; cursor: default; }
.studio-disclaimer { max-width: 940px; margin: 8px auto 0; text-align: center; font-size: 0.68rem; color: var(--gray-400); }

@media (max-width: 900px) {
  .studio-shell { flex-direction: column; height: auto; }
  .studio-side { width: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .studio-recents { display: none; }
  .studio-side-label { display: none; }
  .studio-chat-scroll { padding: 18px 14px 8px; }
  .studio-hero { margin-top: 6vh; }
}

/* En Studio PRO el composer vive abajo — el popup de "amor" sube para no taparlo */
body:has(.studio-shell) .love-popup-root { bottom: 150px; }

/* ==========================================================================
   Fase 29 (pulido) — composer centrado, dictado por voz, cerebrito pensando
   ========================================================================== */

/* Antes de la primera conversación: todo centrado (como Ask AI); al escribir,
   el composer baja a la parte inferior (el layout normal del flex). */
#panel-chat.studio-empty { justify-content: center; }
#panel-chat.studio-empty .studio-chat-scroll { flex: 0 0 auto; overflow: visible; padding-bottom: 0; }
#panel-chat.studio-empty .studio-hero { margin-top: 0; }
#panel-chat.studio-empty .studio-composer-wrap { padding-top: 22px; }
/* Fase 35.9 — en la pantalla de bienvenida el scroll no debe recortar el cuadro grande */
#panel-chat.studio-empty .studio-chat-scroll { padding-bottom: 0; }

/* Botón de dictado por voz */
.studio-mic {
  width: 38px; height: 38px; border-radius: 50%; border: none; background: transparent;
  color: var(--ink-soft); display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
}
.studio-mic:hover { color: var(--ink); background: var(--surface-soft); }
.studio-mic.mic-on { background: #fbe4e2; color: var(--red); animation: micPulse 1.2s ease-in-out infinite; }
@keyframes micPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(213,73,62,0.35); }
  50% { box-shadow: 0 0 0 8px rgba(213,73,62,0); }
}

/* Fase 33.1: cerebrito "pensando" — se desvanece deshaciéndose en partículas
   FINAS de su propio color rosado que NACEN de él, y se reconstruye cuando las
   partículas se funden de vuelta. Sin blur, sin puntos satélite. */
.studio-brain-build {
  position: relative; display: inline-block; width: 24px; height: 24px;
  margin-right: 8px; vertical-align: middle;
}
.studio-brain-build .brain-core {
  position: absolute; inset: 0; font-size: 1.05rem; line-height: 24px; text-align: center;
  animation: brainAssemble 2.6s ease-in-out infinite;
}
@keyframes brainAssemble {
  /* entero → se deshace → vuelve a formarse */
  0%, 26%  { opacity: 1; transform: scale(1); }
  46%, 62% { opacity: 0; transform: scale(0.88); }
  86%, 100% { opacity: 1; transform: scale(1); }
}
.studio-brain-build i {
  position: absolute; left: 50%; top: 50%; width: 2px; height: 2px; border-radius: 50%;
  background: #E8919F; /* el rosado del propio cerebro */
  pointer-events: none;
  animation: brainDot 2.6s ease-in-out infinite;
  animation-delay: var(--dd, 0s);
}
@keyframes brainDot {
  /* nacen DEL cerebro (centro) cuando se deshace, derivan apenas unos píxeles,
     y se funden de vuelta en el centro cuando se reconstruye */
  0%, 24%  { transform: translate(-50%, -50%); opacity: 0; }
  36%      { transform: translate(calc(-50% + var(--dx)*0.6), calc(-50% + var(--dy)*0.6)); opacity: 0.9; }
  50%, 58% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))); opacity: 0.85; }
  78%      { transform: translate(-50%, -50%); opacity: 0.6; }
  86%, 100% { transform: translate(-50%, -50%); opacity: 0; }
}
.studio-think-label { vertical-align: middle; }
.studio-dots { display: inline-flex; gap: 4px; margin-left: 7px; vertical-align: middle; }
.studio-dots i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--gold-700); display: inline-block;
  animation: dotBounce 1.2s ease-in-out infinite;
}
.studio-dots i:nth-child(2) { animation-delay: 0.15s; }
.studio-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dotBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* ==========================================================================
   Fase 42 — LA GALERÍA DE PLANTILLAS (la columna de la derecha)
   Alfredo: "se me ocurre que las ideas y los templates aparezcan del lado
   derecho al darle click a usa tu creatividad".
   ========================================================================== */

/* Va DENTRO del flex de .studio-shell, como hermana de .studio-main. Por eso al
   abrirse el chat se estrecha en vez de quedar tapado: las dos cosas se ven a la
   vez, que es lo que hace que la plantilla caiga dentro de la conversación y no
   la reemplace. Cerrada mide 0 y no se ve; no hay display:none porque de ahí no
   se puede animar. */
.studio-galeria {
  width: 0; flex-shrink: 0; overflow: hidden; background: var(--surface-2);
  border-left: 1px solid var(--border-soft);
  display: flex; flex-direction: column;
  transition: width 0.22s ease;
}
.studio-galeria.is-open { width: 340px; }

.studio-galeria-head {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 16px 14px 10px; border-bottom: 1px solid var(--border-soft);
}
.studio-galeria-titulo { font-size: 0.92rem; font-weight: 700; color: var(--ink); }
.studio-galeria-sub { font-size: 0.74rem; color: var(--gray-400); margin-top: 2px; }
.studio-galeria-cerrar {
  margin-left: auto; border: none; background: none; cursor: pointer; flex-shrink: 0;
  font-size: 0.95rem; color: var(--gray-400); line-height: 1; padding: 2px 4px; border-radius: 6px;
}
.studio-galeria-cerrar:hover { background: rgba(0,0,0,0.06); color: var(--ink); }

.studio-galeria-cats {
  display: flex; gap: 6px; padding: 10px 14px; overflow-x: auto;
  border-bottom: 1px solid var(--border-soft); scrollbar-width: none;
}
.studio-galeria-cats::-webkit-scrollbar { display: none; }
.studio-galeria-cat {
  border: 1px solid var(--border); background: var(--surface); color: var(--ink-soft);
  font-family: inherit; font-size: 0.72rem; font-weight: 600; white-space: nowrap;
  padding: 5px 10px; border-radius: 999px; cursor: pointer;
}
.studio-galeria-cat:hover { border-color: var(--gold-ink); color: var(--ink); }
.studio-galeria-cat.is-on { background: var(--gold-300); border-color: var(--gold-300); color: #6b5a1e; }

.studio-galeria-scroll { flex: 1; overflow-y: auto; padding: 12px 14px 26px; }
.studio-galeria-vacia { font-size: 0.78rem; color: var(--gray-400); text-align: center; padding: 20px 0; }

/* Dos columnas de tarjetas verticales. 9:16 porque estos videos se ven en un
   móvil y en la galería tienen que verse como se van a ver de verdad. */
.studio-tpl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.studio-tpl {
  border: 1px solid var(--border-soft); border-radius: 12px; overflow: hidden;
  background: var(--surface); cursor: pointer; display: flex; flex-direction: column;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.studio-tpl:hover, .studio-tpl:focus-visible {
  border-color: var(--gold-ink); box-shadow: 0 6px 18px rgba(0,0,0,0.10);
  transform: translateY(-2px); outline: none;
}

.studio-tpl-media { position: relative; aspect-ratio: 9 / 16; background: #14141A; overflow: hidden; }
.studio-tpl-media img,
.studio-tpl-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* El <video> vive DEBAJO del póster y solo se descubre cuando de verdad está
   reproduciéndose. Así, si el navegador se niega a arrancarlo solo, lo que se ve
   es el póster y no un rectángulo negro: la tarjeta nunca se ve rota. */
.studio-tpl-media video { opacity: 0; transition: opacity 0.18s ease; }
.studio-tpl.is-viendo .studio-tpl-media video { opacity: 1; }

/* Mientras un template no tenga su video de muestra generado. Se ve intencional. */
.studio-tpl-hueco {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
  background: linear-gradient(150deg, #23232B 0%, #14141A 60%, #2A2416 100%);
}
.studio-tpl-hueco-ico { font-size: 1.5rem; opacity: 0.55; }
.studio-tpl-hueco-txt { font-size: 0.68rem; color: rgba(255,255,255,0.55); font-weight: 600; }

/* Solo aparece donde no hay cursor (móvil): allí "pasar el cursor" no existe. */
.studio-tpl-play {
  position: absolute; right: 6px; bottom: 6px; z-index: 2;
  width: 28px; height: 28px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(0,0,0,0.55); color: #fff; font-size: 0.68rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}

.studio-tpl-pie { padding: 8px 9px 10px; }
.studio-tpl-titulo {
  font-size: 0.78rem; font-weight: 700; color: var(--ink); line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.studio-tpl-meta { font-size: 0.66rem; color: var(--gray-400); margin-top: 2px; }

/* En pantalla estrecha la galería deja de ser una columna y pasa a ser una hoja
   que sube desde abajo: a 340px de ancho fijo se comería el chat entero. */
@media (max-width: 900px) {
  .studio-galeria {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 60;
    width: auto; max-height: 0; border-left: none; border-top: 1px solid var(--border);
    border-radius: 16px 16px 0 0; box-shadow: 0 -8px 30px rgba(0,0,0,0.18);
    transition: max-height 0.24s ease;
  }
  .studio-galeria.is-open { width: auto; max-height: 78vh; }
  .studio-tpl-grid { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 560px) {
  .studio-tpl-grid { grid-template-columns: 1fr 1fr; }
}

/* Quien no quiere animaciones tampoco quiere que un video le arranque solo. */
@media (prefers-reduced-motion: reduce) {
  .studio-galeria, .studio-tpl, .studio-tpl-media video { transition: none; }
}

/* Fase 42.4 — la caja que pide la cara. Es el freno intencional entre elegir una
   plantilla y rodarla: destaca porque es una decisión, no un paso de trámite. */
.studio-tpl-cara {
  margin-top: 10px; padding: 12px; border-radius: 12px;
  background: rgba(124,138,160,0.14); border: 1px solid var(--gold-300);
}
.studio-tpl-cara-tit { font-size: 0.86rem; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.studio-tpl-cara-est { font-size: 0.76rem; color: var(--ink-soft); margin: 6px 0 0; }
.studio-tpl-cara-est.is-mal { color: #B4402A; }
.studio-tpl-desc { margin-top: 10px; }
.studio-tpl-desc textarea {
  width: 100%; border: 1px solid var(--border); border-radius: 10px; padding: 9px 11px;
  font-family: inherit; font-size: 0.85rem; line-height: 1.45; resize: vertical; background: var(--surface);
}

/* ============ Fase 50 — Imagen PRO dentro de Marketing IA ============
   Alfredo: "debe ser más simple, solo cargar una imagen y de resto un chat".
   De toda la pantalla vieja (modo, gesto, fondo, ropa, formato) queda esto: una
   fila con el hueco de su foto encima de la caja de texto. Nada más. */
.img-foto-fila {
  max-width: 940px; margin: 0 auto 8px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.img-foto-chip {
  position: relative; width: 40px; height: 40px; flex: none; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface-2); overflow: hidden;
  display: flex; align-items: center; justify-content: center; transition: opacity 0.15s;
}
.img-foto-chip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-foto-vacia { font-size: 0.56rem; color: var(--gray-400); text-align: center; line-height: 1.1; padding: 0 3px; }
.img-foto-x {
  position: absolute; top: 1px; right: 1px; width: 15px; height: 15px; padding: 0;
  border: none; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #fff;
  font-size: 0.6rem; line-height: 15px; cursor: pointer;
}
.img-foto-x:hover { background: rgba(0, 0, 0, 0.8); }
.img-foto-txt { display: flex; align-items: center; gap: 8px; font-size: 0.76rem; color: var(--ink-soft); }
.img-foto-link {
  border: none; background: none; padding: 0; cursor: pointer;
  font: inherit; font-size: 0.76rem; color: var(--ink-soft); text-decoration: underline;
}
.img-cadena {
  margin-left: auto; display: flex; align-items: center; gap: 8px;
  font-size: 0.72rem; color: var(--gray-400);
}
.img-resultado {
  display: block; max-width: 320px; width: 100%; border-radius: 12px;
  border: 1px solid var(--border-soft); background: var(--surface-2);
}
.img-pie { margin-top: 6px; font-size: 0.7rem; color: var(--gray-400); }

/* ============ Fase 51 — Recientes, varias fotos y arrastrar ============
   Tres cosas que Alfredo pidió el mismo día: que "Empezar de cero" abra de verdad
   una conversación nueva y la vieja quede a mano, que se pueda arrastrar una foto
   al chat, y que se puedan cargar varias y dar órdenes sobre todas. */
.img-recientes-fila {
  position: relative; max-width: 940px; margin: 0 auto 6px; width: 100%;
  display: flex; align-items: center; gap: 8px; padding: 0 4px;
}
.img-recientes-btn, .img-nueva-btn {
  border: 1px solid var(--border); background: var(--surface); border-radius: 999px;
  padding: 4px 12px; font: inherit; font-size: 0.74rem; color: var(--ink-soft);
  cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.img-recientes-btn:hover, .img-nueva-btn:hover { background: var(--surface-2); border-color: var(--gray-400); }
.img-recientes-flecha { font-size: 0.62rem; opacity: 0.6; }
/* El desplegable. Va por encima del chat y con su propio scroll: veinticinco
   conversaciones no pueden empujar la caja de texto fuera de la pantalla. */
.img-recientes-menu {
  position: absolute; top: 100%; left: 4px; z-index: 30; margin-top: 4px;
  width: min(380px, calc(100vw - 40px)); max-height: 340px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12); padding: 4px;
}
.img-reciente {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  border: none; background: none; padding: 7px 8px; border-radius: 9px;
  font: inherit; font-size: 0.78rem; color: var(--ink); cursor: pointer;
}
.img-reciente:hover { background: var(--surface-2); }
.img-reciente.actual { background: var(--surface-3); }
.img-reciente-mini {
  width: 34px; height: 34px; flex: none; border-radius: 7px; object-fit: cover;
  background: var(--surface-2); border: 1px solid var(--border-soft);
}
.img-reciente-txt { min-width: 0; flex: 1; }
.img-reciente-titulo { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.img-reciente-sub { display: block; font-size: 0.68rem; color: var(--gray-400); margin-top: 1px; }
.img-recientes-vacio { padding: 12px 10px; font-size: 0.76rem; color: var(--gray-400); }

/* Las fotos numeradas. El número que ve es el mismo al que puede referirse
   escribiendo ("la foto 2"), así que se pinta grande y no se esconde. */
.img-foto-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.img-foto-num {
  position: absolute; bottom: 1px; left: 1px; min-width: 13px; height: 13px;
  border-radius: 4px; background: rgba(0, 0, 0, 0.62); color: #fff;
  font-size: 0.55rem; line-height: 13px; text-align: center; padding: 0 3px; font-weight: 600;
}
.img-foto-mas {
  width: 40px; height: 40px; flex: none; border-radius: 10px; padding: 0;
  border: 1px dashed var(--border); background: var(--surface-2); color: var(--gray-400);
  font-size: 1.05rem; line-height: 1; cursor: pointer;
}
.img-foto-mas:hover { border-color: var(--gray-400); color: var(--ink-soft); }

/* La capa de "suelta aquí". Cubre el panel entero mientras arrastra. */
.img-soltar {
  position: absolute; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center;
  background: var(--glass-strong); pointer-events: none;
}
.img-soltar-caja {
  border: 2px dashed var(--gray-400); border-radius: 16px; padding: 22px 30px;
  font-size: 0.9rem; color: var(--ink-soft); background: var(--surface);
}
#panel-imagen { position: relative; }

@media (max-width: 640px) {
  .img-cadena { margin-left: 0; width: 100%; }
  .img-resultado { max-width: 100%; }
  .img-recientes-menu { width: calc(100vw - 32px); }
}

/* ============ Fase 52 — Una foto por escenario del video ============
   Alfredo: "haz que puedar cargar 5 fotos igual al momento de hacer el video",
   una por escenario. Cada hueco lleva escrito debajo a QUÉ fondo del guion
   pertenece, sacado de su propio texto: sin eso tendría que acordarse del orden
   en que los escribió, y equivocarse ahí es pagar un video con su sala detrás
   del volante del carro. */
.fondo-foto-fila {
  margin: 8px 0 4px; padding: 10px 12px;
  border: 1px dashed var(--border); border-radius: 12px; background: var(--surface-2);
}
/* Fase 60.3 — mientras arrastra una foto por la pantalla, la fila se enciende
   entera. Es la respuesta visual a "no me lo permite": ahora se ve, antes de
   soltar, que hay un sitio esperándola y cuál es. */
.fondo-foto-fila.va-a-caer {
  border-style: solid; border-color: var(--gold); background: var(--gold-50);
  box-shadow: 0 0 0 3px rgba(124,138,160,0.20);
}
.fondo-foto-titulo {
  margin: 0 0 8px; font-size: 0.74rem; line-height: 1.35; color: var(--ink-soft);
}
.fondo-foto-huecos { display: flex; flex-wrap: wrap; gap: 12px; }
.fondo-foto-hueco {
  position: relative; width: 84px; display: flex; flex-direction: column;
  align-items: center; gap: 4px;
}
.fondo-foto-caja {
  width: 84px; height: 62px; padding: 0; flex: none; cursor: pointer;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
  overflow: hidden; display: flex; align-items: center; justify-content: center;
  transition: border-color 0.15s, background 0.15s;
}
.fondo-foto-caja:hover, .fondo-foto-caja.is-drop { border-color: var(--gold); background: var(--hover-suave); }
.fondo-foto-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fondo-foto-mas { font-size: 1.1rem; color: var(--gray-400); line-height: 1; }
.fondo-foto-nombre {
  font-size: 0.64rem; line-height: 1.2; color: var(--ink-soft); text-align: center;
  /* Un fondo puede ser una frase larga ("la terraza de mi casa al atardecer") y
     no puede empujar la fila entera: se corta a dos líneas y el título completo
     sigue estando en el tooltip de la caja. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; word-break: break-word;
}
.fondo-foto-x {
  position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; padding: 0;
  border: none; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #fff;
  font-size: 0.62rem; line-height: 16px; cursor: pointer;
}
.fondo-foto-x:hover { background: rgba(0, 0, 0, 0.8); }
@media (max-width: 640px) {
  .fondo-foto-hueco, .fondo-foto-caja { width: 72px; }
  .fondo-foto-caja { height: 54px; }
}

/* ============ Fase 58 — El mapa de fondos, antes de pagarlo ============
   Alfredo produjo un video entero y descubrió que el último tramo había salido
   gris cuando ya estaba cobrado. Esto es la lista, en orden, de lo que se va a
   filmar, calculada con las mismas reglas que el motor. Va deliberadamente sobria
   y pequeña: es una comprobación de un vistazo antes del botón, no una sección. */
.fondo-mapa {
  margin: 8px 0 4px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2);
}
.fondo-mapa-titulo {
  margin: 0 0 6px; font-size: 0.74rem; line-height: 1.35; color: var(--ink-soft);
}
.fondo-mapa-lista { margin: 0; padding-left: 20px; }
.fondo-mapa-item {
  font-size: 0.72rem; line-height: 1.4; color: var(--ink-soft); margin-bottom: 3px;
}
.fondo-mapa-donde { font-weight: 600; color: var(--ink); }
/* El tramo que sale con su propia foto sin repintar se distingue del resto: es el
   que no cuesta imagen y el que remata el video cuando vuelve al principio. */
.fondo-mapa-donde.es-tuya { color: var(--gold); }
.fondo-mapa-dice {
  display: block; opacity: 0.75;
  /* El texto de un tramo puede ser largo; dos líneas bastan para reconocerlo. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; word-break: break-word;
}

/* ---------- Hoja de ventas: bloques PREVENTA / POSTVENTA y cabecera del cuadro ----------
   Las dos hojas de Drive que mandó Alfredo separan el cuadro en dos mitades con nombre:
   lo que pasa ANTES de que la venta se apruebe, y lo que pasa DESPUÉS. Con 23 columnas
   eso no es adorno: es lo que te dice si estás mirando el trámite o el seguimiento. */
.sheet-head { display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:6px; }
.sheet-head .sheet-sub { color:var(--ink-soft); font-size:0.85rem; margin:4px 0 0; }
.sheet-filtros { display:flex; align-items:center; gap:8px; }
.sheet-filtros label { margin:0; font-size:0.82rem; color:var(--ink-soft); font-weight:600; }
.sheet-filtros select { padding:7px 10px; border-radius:8px; border:1px solid var(--border); background:var(--surface); color:var(--ink); font-size:0.85rem; }

/* El cierre de bloque de Drive: "$12,000.00   issue= $12,000.00" */
.sheet-totales { display:flex; gap:10px; flex-wrap:wrap; margin:10px 0 14px; }
.sheet-totales .tot { display:inline-flex; align-items:baseline; gap:8px; padding:8px 14px; border:1px solid var(--border); border-radius:var(--radius-pill); background:var(--surface-soft); }
.sheet-totales .tot .lab { font-size:0.72rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.04em; font-weight:600; }
.sheet-totales .tot .val { font-size:1rem; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
.sheet-totales .tot.issue .val { color:#2f7a3f; }

.sheet thead tr.sheet-grupos th { text-align:center; font-size:0.68rem; letter-spacing:0.16em; font-weight:700; padding:6px 8px; border-bottom:2px solid var(--border); }
.sheet thead tr.sheet-grupos .grupo-preventa { background:#eef4ee; color:#2f6b3f; }
.sheet thead tr.sheet-grupos .grupo-postventa { background:#f2eee6; color:#7a5c1f; }

/* El numero de poliza abre el cuadro: es por donde busca underwriting. */
.sheet td.col-poliza { font-variant-numeric:tabular-nums; font-weight:600; white-space:nowrap; }
.sheet td.col-cliente { min-width:190px; }
.sheet td.col-prima { font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }
.sheet .sheet-vacio { color:var(--ink-soft); text-align:center; padding:26px 10px; white-space:normal; }

/* ---------- Casillas editables del cuadro de ventas ----------
   Se editan en sitio, como en una hoja de cálculo: nada de un botón "guardar" por
   celda. La pista de que se puede escribir aparece al pasar el cursor, para que el
   cuadro no se vea como un formulario gigante lleno de recuadros. */
.sheet .ed { display:block; min-width:60px; min-height:1.1em; padding:3px 5px; margin:-3px -5px; border-radius:6px; border:1px solid transparent; cursor:text; transition:background .12s ease, border-color .12s ease; }
.sheet .ed:empty::before { content:"—"; color:var(--ink-soft); opacity:.55; }
.sheet .ed:hover { background:var(--hover-suave); border-color:var(--border); }
.sheet .ed:focus { outline:none; background:var(--surface); border-color:var(--gold-500); box-shadow:0 0 0 3px rgba(124,138,160,.20); white-space:normal; }
.sheet .ed-fuerte { font-weight:700; }
.sheet .ed-corto { min-width:38px; text-align:center; }
.sheet .ed-num { text-align:right; font-variant-numeric:tabular-nums; }
.sheet .ed-largo { white-space:normal; min-width:150px; }
.sheet .ed-sel { border:1px solid transparent; background:transparent; border-radius:6px; padding:3px 4px; color:var(--ink); font-size:0.82rem; cursor:pointer; }
.sheet .ed-sel:hover { border-color:var(--border); background:var(--hover-suave); }

/* Confirmación discreta: verde un instante si guardó, rojo si no. */
.sheet .ed-ok, .sheet .ed-sel.ed-ok { background:rgba(47,122,63,.12) !important; border-color:rgba(47,122,63,.45) !important; }
.sheet .ed-mal, .sheet .ed-sel.ed-mal { background:rgba(190,50,50,.12) !important; border-color:rgba(190,50,50,.5) !important; }

/* El motivo del rechazo, abajo a la derecha — para que no se pierda en una tabla ancha. */
.ed-aviso { position:fixed; right:18px; bottom:18px; z-index:120; max-width:340px; background:var(--surface); color:var(--ink); border:1px solid rgba(190,50,50,.45); border-left:4px solid #be3232; border-radius:10px; padding:11px 14px; font-size:0.85rem; box-shadow:var(--shadow-card); opacity:0; transform:translateY(8px); pointer-events:none; transition:opacity .18s ease, transform .18s ease; }
.ed-aviso.visible { opacity:1; transform:translateY(0); }
.sheet-ayuda { color:var(--ink-soft); font-size:0.8rem; margin:4px 0 0; }

/* ---------- Publicar una venta desde el cuadro ---------- */
/* Alfredo: "el boton de publicar si puede correrse, y que queden fijos el numero de
   poliza y el nombre del cliente". Son las dos columnas con las que uno se ubica en la
   fila; el boton se puede ir con el desplazamiento sin que se pierda nada. */
/* OJO CON EL :not(.sheet-grupos) — sin el, esto rompia el encabezado y se veia en la
   captura que mando Alfredo. La fila de PREVENTA/POSTVENTA tambien tiene celdas, y su
   SEGUNDA celda es POSTVENTA: la regla se la aplicaba tambien a ella y la clavaba a la
   izquierda encima de PREVENTA, con lo que el bloque verde parecia meterse dentro del
   violeta. Estas reglas son solo para la fila de titulos de columna y para el cuerpo. */
/* ---------- Columnas fijas al desplazar ----------
   Alfredo: "que nada mas quede fijo el numero de poliza y nombre". La banda del mes, el
   numero y Publicar ahora se corren con el resto, asi la zona clavada pasa de ~460px a
   ~250px y queda mucho mas aire para el resto del cuadro.
   Se eligen POR CLASE y no por posicion: la banda del mes usa `rowspan`, asi que en las
   filas que no abren el mes hay una celda menos y cualquier regla por posicion se
   descuadraria. */
.sheet .col-poliza { position:sticky; left:0;     z-index:2; background:var(--surface); }
.sheet .col-cliente { position:sticky; left:104px; z-index:2; background:var(--surface); }
/* Alfredo: "que la prima se mueva pero que quede bloqueada, fija junto al nombre".
   Es el numero que se mira mientras se recorre la fila hacia la derecha. */
.sheet .col-prima { position:sticky; left:350px; z-index:2; background:var(--surface); box-shadow:1px 0 0 var(--border); }
.sheet thead .th-poliza { position:sticky; left:0;     z-index:8; background:var(--surface-3); }
.sheet thead .th-cliente { position:sticky; left:104px; z-index:8; background:var(--surface-3); box-shadow:1px 0 0 var(--border); }
.sheet tbody tr:nth-child(even) > .col-poliza, .sheet tbody tr:nth-child(even) > .col-cliente, .sheet tbody tr:nth-child(even) > .col-prima { background:#fafafb; }
.sheet tbody tr:hover > .col-poliza, .sheet tbody tr:hover > .col-cliente, .sheet tbody tr:hover > .col-prima { background:#eef2f7; }

/* Anchuras ajustadas: antes sobraba aire entre poliza, cliente y aseguradora. */
.sheet .th-mes, .sheet .td-mes { width:26px; min-width:26px; max-width:26px; padding:0; }
.sheet .th-num, .sheet .td-num { width:30px; min-width:30px; text-align:center; color:var(--ink-soft); font-variant-numeric:tabular-nums; font-size:0.78rem; }
.sheet .th-publicar, .sheet .td-publicar { width:44px; min-width:44px; text-align:center; padding-left:4px; padding-right:4px; }



.sheet td, .sheet th { padding-left:9px; padding-right:9px; }

/* La banda del mes: una sola pieza de verde, con el texto libre a lo alto. */
.sheet .td-mes {
  background:linear-gradient(180deg, var(--navy-700), var(--navy-950)) !important;
  vertical-align:middle; text-align:center; border:0;
}
.sheet .td-mes span {
  writing-mode:vertical-rl; transform:rotate(180deg);
  display:inline-block; color:#fff; font-weight:800; font-size:0.66rem;
  letter-spacing:0.18em; white-space:nowrap;
}
/* La esquina de arriba: el MISMO verde oscuro de la banda, para que la columna se lea
   de una pieza de arriba abajo (antes llevaba el verde claro del titulo PREVENTA). */

.sheet thead tr.sheet-grupos .grupo-vacio { background:linear-gradient(180deg, var(--navy-700), var(--navy-950)) !important; border:0; border-top-left-radius:10px; }

/* El cierre del mes: el total pegado al conteo, no perdido a la derecha. */
.sheet tr.fila-total-mes > td { background:var(--surface-soft); border-top:1px solid var(--border); }
.sheet tr.fila-total-mes .td-total-etiqueta { font-size:0.84rem; color:var(--ink-soft); white-space:nowrap; }
.sheet tr.fila-total-mes .td-total-monto { font-size:1.06rem; font-weight:750; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap; }
.sheet tr.fila-total-mes:hover > td { background:var(--surface-soft); }

/* Que PREVENTA se DETENGA donde empieza POSTVENTA: cada bloque con su borde propio a
   la derecha, para que se vea el corte y no parezca que uno invade al otro. */
.sheet thead tr.sheet-grupos .grupo-preventa { border-right:2px solid #73E6C4; }
.sheet thead tr.sheet-grupos .grupo-postventa { border-left:2px solid #B9A3FF; }
.pub-btn { border:1px solid var(--gold-700); background:var(--gold-500); color:#2a1f04; font-size:0.74rem; font-weight:700; padding:4px 10px; border-radius:var(--radius-pill); cursor:pointer; white-space:nowrap; }
.pub-btn:hover { filter:brightness(1.05); }
.pub-ok { display:inline-block; font-size:0.72rem; font-weight:700; color:#2f7a3f; background:rgba(47,122,63,.12); border:1px solid rgba(47,122,63,.35); border-radius:var(--radius-pill); padding:4px 10px; white-space:nowrap; }
.pub-texto { width:100%; border:1px solid var(--border); border-radius:10px; padding:11px 12px; font-size:0.9rem; font-family:inherit; line-height:1.5; resize:vertical; background:var(--surface); color:var(--ink); }
.pub-texto:focus { outline:none; border-color:var(--gold-500); box-shadow:0 0 0 3px rgba(124,138,160,.20); }
.pub-error { color:#be3232; font-size:0.83rem; margin-top:8px; min-height:1em; }
.pub-hecho { display:none; margin-top:16px; padding-top:14px; border-top:1px solid var(--border); }
.pub-hecho.visible { display:block; }

/* =========================================================================
   MIS VENTAS — pasada de diseño (a pedido de Alfredo: "más moderno, con más
   color, que sea atractivo"). Los colores vivos se usan como ACENTO, no como
   fondo: en una hoja de 18 columnas que se mira todos los días, el color que
   grita cansa a los diez minutos. Aquí grita el gráfico y los estados; el
   resto se queda tranquilo para poder leerse.
   ========================================================================= */

/* ---------- Producción por mes: KPIs y gráfico ---------- */
.prod-sub { color:var(--ink-soft); font-size:0.84rem; margin:6px 0 0; }
.prod-kpis { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px; margin:16px 0 6px; }
.kpi-neon { position:relative; overflow:hidden; border-radius:14px; padding:14px 16px; border:1px solid var(--border); background:var(--surface); }
.kpi-neon .lab { display:block; font-size:0.68rem; text-transform:uppercase; letter-spacing:0.07em; font-weight:700; color:var(--ink-soft); }
.kpi-neon .val { display:block; margin-top:5px; font-size:1.34rem; font-weight:750; letter-spacing:-0.02em; color:var(--ink); font-variant-numeric:tabular-nums; }
/* La barrita de color de la izquierda es todo el "fluorescente" que necesita un KPI. */
.kpi-neon::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; }
.kpi-neon-1::before { background:linear-gradient(180deg,#00E5A0,#00D1FF); }
.kpi-neon-2::before { background:linear-gradient(180deg,#7C5CFF,#FF3D9A); }
.kpi-neon-3::before { background:linear-gradient(180deg,#FFB020,#FF3D9A); }
.kpi-neon::after { content:""; position:absolute; right:-30px; top:-30px; width:90px; height:90px; border-radius:50%; opacity:.10; }
.kpi-neon-1::after { background:#00E5A0; }
.kpi-neon-2::after { background:#7C5CFF; }
.kpi-neon-3::after { background:#FFB020; }
.prod-chart-wrap { position:relative; height:230px; margin-top:10px; }
.prod-tabla { margin-top:14px; }
.prod-tabla > summary { cursor:pointer; font-size:0.83rem; font-weight:600; color:var(--ink-soft); padding:6px 0; list-style:none; }
.prod-tabla > summary::before { content:"▸ "; }
.prod-tabla[open] > summary::before { content:"▾ "; }
.prod-tabla > summary:hover { color:var(--ink); }

/* ---------- Los dos bloques del cuadro, en grande ---------- */
.sheet thead tr.sheet-grupos th { text-align:center; font-size:0.86rem; letter-spacing:0.16em; font-weight:800; padding:11px 8px; text-transform:uppercase; }
.sheet thead tr.sheet-grupos .grupo-preventa { background:linear-gradient(180deg, rgba(0,229,160,.20), rgba(0,229,160,.09)) var(--surface-solid); color:#0d6b4a; border-bottom:2px solid #73E6C4; }
.sheet thead tr.sheet-grupos .grupo-postventa { background:linear-gradient(180deg, rgba(124,92,255,.20), rgba(124,92,255,.09)) var(--surface-solid); color:#4a32b0; border-bottom:2px solid #B9A3FF; }

/* ---------- El cuadro: más vivo pero legible ---------- */
.sheet tbody tr:nth-child(even) > td { background:rgba(128,128,140,.035); }
.sheet tbody tr:hover > td { background:var(--hover-suave); }

.sheet thead tr:not(.sheet-grupos) th { font-size:0.72rem; letter-spacing:0.03em; text-transform:uppercase; font-weight:700; }

/* Los estatus, cada uno con su color, que es lo que se busca al barrer la hoja */
.sheet .sheet-status-select { border-radius:var(--radius-pill); font-weight:700; font-size:0.74rem; padding:4px 9px; border:1px solid transparent; }

/* ---------- El botón de publicar ---------- */
/* Solo el icono: con la columna del mes y la numeracion nuevas, el boton con texto
   ensanchaba demasiado la parte de la izquierda. El nombre sale al pasar el cursor. */
.pub-btn { display:inline-flex; align-items:center; justify-content:center; border:0; cursor:pointer;
  width:28px; height:28px; padding:0;
  background:linear-gradient(135deg,#7C5CFF,#FF3D9A); color:#fff;
  border-radius:50%; box-shadow:0 2px 8px rgba(124,92,255,.34); }
.pub-btn:hover { transform:translateY(-1px); box-shadow:0 5px 16px rgba(124,92,255,.44); filter:brightness(1.06); }
.pub-btn:active { transform:translateY(0); }
.pub-ok { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; color:#0d6b4a;
  background:rgba(0,229,160,.18); border:1px solid rgba(0,229,160,.5); border-radius:50%; }

/* ---------- El popup ---------- */
.pub-overlay { backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); background:rgba(18,18,24,.44); }
.pub-panel { width:100%; max-width:520px; background:var(--surface); border-radius:20px; overflow:hidden;
  box-shadow:0 26px 70px rgba(0,0,0,.30); animation:pubEntra .22s cubic-bezier(.2,.9,.3,1.2); }
@keyframes pubEntra { from { opacity:0; transform:translateY(14px) scale(.97); } to { opacity:1; transform:none; } }
.pub-cabecera { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:20px 22px 18px;
  background:linear-gradient(135deg,#7C5CFF,#FF3D9A); color:#fff; }
.pub-eyebrow { display:block; font-size:0.68rem; text-transform:uppercase; letter-spacing:0.13em; font-weight:700; opacity:.85; }
.pub-cabecera h3 { margin:4px 0 0; font-size:1.16rem; font-weight:750; color:#fff; letter-spacing:-0.01em; }
.pub-x { background:rgba(255,255,255,.18); border:0; color:#fff; width:30px; height:30px; border-radius:50%; font-size:1.2rem; line-height:1; cursor:pointer; flex:0 0 auto; }
.pub-x:hover { background:rgba(255,255,255,.3); }
.pub-cuerpo { padding:18px 22px 22px; }
.pub-nota { color:var(--ink-soft); font-size:0.85rem; margin:0 0 12px; }
.pub-preview { border:1px solid var(--border); border-radius:14px; padding:14px; background:var(--surface-soft); }
.pub-preview-top { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.pub-preview-nombre { font-weight:700; font-size:0.9rem; }
.pub-preview-meta { color:var(--ink-soft); font-size:0.76rem; }
.pub-texto { width:100%; border:1px solid transparent; border-radius:10px; padding:10px 11px; font-size:0.92rem;
  font-family:inherit; line-height:1.5; resize:vertical; background:var(--surface); color:var(--ink); }
.pub-texto:focus { outline:none; border-color:#7C5CFF; box-shadow:0 0 0 3px rgba(124,92,255,.18); }
.pub-error { color:#be3232; font-size:0.83rem; margin-top:8px; min-height:1em; }
.pub-destinos { display:flex; gap:7px; flex-wrap:wrap; margin-top:12px; }
.pub-chip { display:inline-flex; align-items:center; gap:6px; font-size:0.74rem; font-weight:600; color:var(--ink-soft);
  border:1px solid var(--border); border-radius:var(--radius-pill); padding:5px 11px; }
.pub-chip .pt { width:7px; height:7px; border-radius:50%; background:#00E5A0; }
.pub-chip .pt-dis { background:#5865F2; }
.pub-chip .pt-off { background:#b9b9c2; }
.pub-chip-off { opacity:.72; }
.pub-acciones { display:flex; gap:10px; justify-content:flex-end; margin-top:18px; }
.pub-enviar { display:inline-flex; align-items:center; gap:7px; border:0; cursor:pointer;
  background:linear-gradient(135deg,#7C5CFF,#FF3D9A); color:#fff; font-weight:700; font-size:0.88rem;
  padding:10px 20px; border-radius:var(--radius-pill); box-shadow:0 3px 14px rgba(124,92,255,.34); transition:transform .12s ease, filter .12s ease; }
.pub-enviar:hover:not(:disabled) { transform:translateY(-1px); filter:brightness(1.06); }
.pub-enviar:disabled { opacity:.55; cursor:default; }
.pub-hecho { display:none; margin-top:16px; padding-top:15px; border-top:1px solid var(--border); }
.pub-hecho.visible { display:block; }
.pub-hecho-ok { display:flex; align-items:center; gap:8px; font-weight:650; color:#0d6b4a; font-size:0.9rem; }
.pub-hecho-nota { margin:8px 0 10px; color:var(--ink-soft); font-size:0.82rem; }


/* La celda de Underwriter llevaba texto larguisimo en una sola linea que empujaba toda
   la tabla a lo ancho. Ahora se parte en varias lineas, igual que Notas del Agente, y
   se limita el alto: si hay una historia entera, se lee con la barrita de la celda. */
.sheet td .ed-largo { white-space:normal; min-width:170px; max-width:240px; max-height:5.4em; overflow-y:auto; line-height:1.35; }
.sheet td .ed-largo:focus { max-height:14em; }

/* Los desplegables, con su colorcito: se ven como algo que se puede tocar, no como
   texto plano, pero sin gritar. */
.sheet .ed-sel { background:rgba(88,118,155,.07); border:1px solid rgba(88,118,155,.20); color:var(--ink); font-weight:600; border-radius:7px; padding:4px 6px; }
.sheet .ed-sel:hover { background:rgba(88,118,155,.14); border-color:rgba(88,118,155,.34); }
.sheet .ed-sel:focus { outline:none; border-color:#58769b; box-shadow:0 0 0 3px rgba(88,118,155,.18); }
/* Los estatus mandan sobre ese color: cada uno con el suyo (se definen mas arriba). */


/* ---------- El unico dorado de la aplicacion ----------
   Alfredo: "si lo quieres poner hazlo solo en las publicaciones de Ventas On Fire, y
   solo lo quiero en el borde". Aqui esta: borde dorado en la tarjeta de cada
   publicacion del muro. Nada de relleno, nada en el resto de la aplicacion. */
.wall-post {
  border: 1px solid var(--oro-borde) !important;
  background: var(--surface) !important;   /* por dentro, limpio: el dorado es SOLO el contorno */
  box-shadow: 0 1px 3px rgba(224,172,42,0.18), 0 6px 18px rgba(224,172,42,0.10);
}

/* =========================================================================
   EL DELINEADO DORADO DE "AQUI ESTOY PARADO"
   Alfredo: "mira lo elegante que se ve con el delineado dorado, aplicalo en
   todas las secciones donde nos paremos". Es el mismo tratamiento del muro:
   contorno dorado fino + una sombra dorada muy suave que da profundidad. NUNCA
   relleno dorado — el fondo se queda en el gris azulado de siempre.
   Una sola regla para todos los sitios donde algo esta seleccionado, para que
   no vuelva a pasar que un menu lo tenga y otro no.
   ========================================================================= */
.nav-item.active,
.course-nav-item.active,
.studio-side-item.active,
.view-toggle .toggle-btn.active,
.chart-metric-btn.active,
.studio-banco-filtro.active,
.studio-galeria-cat.active,
.tema-op.active,
.filter-chip.active {
  border: 1px solid var(--oro-borde) !important;
  box-shadow: 0 1px 3px rgba(224,172,42,0.20), 0 4px 12px rgba(224,172,42,0.10) !important;
}

/* El menu superior de Marketing PRO IA es una pestana subrayada, no una pastilla:
   ahi el delineado completo quedaria raro, asi que se le pone el dorado en la linea
   de abajo, que es su forma de decir "estoy aqui". */
.proia-topnav-item.active { border-bottom-color: var(--oro-borde) !important; }


/* La venta a medio llenar ya no tiñe la fila entera (Alfredo: "se vera mejor como las
   demas"). El aviso pasa a esta etiqueta, al lado del nombre del cliente. */
table.sheet tbody tr.row-needs-completion td { background: inherit; }
table.sheet tbody tr.row-needs-completion td:first-child { background: inherit; }
table.sheet tbody tr.row-needs-completion:hover td { background: var(--hover-suave); }
.chip-completar {
  display:inline-block; margin-left:7px; vertical-align:middle;
  background:#3f6ea8; color:#fff; border:0; border-radius:var(--radius-pill);
  font-size:0.66rem; font-weight:700; padding:3px 8px; cursor:pointer; white-space:nowrap;
}
.chip-completar:hover { background:#33598a; }

/* =========================================================================
   VENTAS ON FIRE — pasada para que se parezca al Skool real, con las capturas
   de Alfredo delante.
   ========================================================================= */

/* El punto azul, del tamano del de Skool y en TODAS las publicaciones. */
.wall-dot { width: 11px !important; height: 11px !important; background: #2E6EF5 !important; }

/* La linea "1h · Ventas On Fire": en Skool es gris pero con algo mas de cuerpo. */
.wall-post-meta { font-size: 0.82rem !important; color: #6b7280 !important; font-weight: 500 !important; letter-spacing: 0.005em; }

/* La manito: mas grande, y se pone DORADA al marcar me gusta (como la de Skool). */
.wall-like { font-size: 1.05rem !important; padding: 6px 10px !important; gap: 8px !important; }
.wall-like svg { width: 22px !important; height: 22px !important; }
.wall-like.liked { color: var(--oro-borde) !important; }
.wall-like.liked svg { fill: var(--oro-borde) !important; stroke: var(--oro-borde) !important; }
.wall-like:hover { color: var(--oro-borde) !important; }

/* El contador de "me gusta" y el de comentarios, con la misma letra y peso. */
.wall-like-count, .wall-post-actions .wall-comments-count {
  font-size: 0.92rem !important; font-weight: 600 !important; color: #4b5563 !important;
}

/* La tarjeta que sale al pasar el mouse: en grande, con la foto grande, como Skool. */
.profile-hovercard {
  min-width: 250px; max-width: 300px; padding: 16px 18px !important; border-radius: 16px !important;
  text-align: center; box-shadow: 0 18px 44px rgba(0,0,0,0.16) !important;
}
.profile-hovercard-foto { display: flex; justify-content: center; margin-bottom: 10px; }
.profile-hovercard-foto img,
.profile-hovercard-foto .avatar-circle {
  width: 88px !important; height: 88px !important; border-radius: 50% !important;
  object-fit: cover; font-size: 30px !important; box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--oro-borde);
}
.profile-hovercard-name { justify-content: center; font-size: 1.02rem !important; font-weight: 700 !important; }
.profile-hovercard-slogan { font-size: 0.82rem; color: var(--ink-soft); margin-top: 5px; line-height: 1.35; }
.profile-hovercard-prod { margin-top: 8px !important; font-weight: 600; color: var(--ink) !important; }

/* El detalle de una publicacion: mas ancho y aireado, no ese cuadrito apretado. */
#postModal, [id^="postModal"] .modal-panel { max-width: 720px !important; }
[id^="postModal"] .modal-panel { border-radius: 18px !important; }
.wall-comment { padding: 12px 14px !important; border-radius: 14px !important; }
.wall-comment-author { font-size: 0.92rem !important; font-weight: 700 !important; }
.wall-comment-time { font-size: 0.8rem !important; color: #6b7280 !important; font-weight: 500 !important; }
.wall-comment-body { font-size: 0.94rem !important; line-height: 1.5 !important; }

/* =========================================================================
   AJUSTES FINOS DE LA HOJA Y DEL MURO (ronda de correcciones de Alfredo)
   ========================================================================= */

/* La manito dorada al marcar me gusta, con el contorno negro que pidio. */
.wall-like.liked svg {
  fill: var(--oro-borde) !important;
  stroke: #1b1b1f !important;
  stroke-width: 1.6 !important;
  paint-order: stroke fill;
}

/* Una linea entre "N Me gusta" y la lista, para que el titulo no quede pegado. */
.likers-list-sep { border-top: 1px solid var(--border); padding-top: 12px; margin-top: 4px; }

/* ---------- La esquina de arriba a la izquierda ----------
   Estaba en verde OSCURO y con dos esquinas redondeadas encimadas, y por eso se veia
   ese escaloncito. Ahora las dos celdas de la cabecera van en el verde CLARO del
   titulo PREVENTA, sin redondeos sueltos: la cabecera se lee de corrido y la banda
   oscura empieza recien en la primera venta. */

.sheet thead tr.sheet-grupos .grupo-vacio { background: linear-gradient(rgba(0,229,160,.20), rgba(0,229,160,.20)) var(--surface-solid) !important; border: 0 !important; border-radius: 0 !important; }

/* ---------- La banda del mes ----------
   Queda fija al desplazar (Alfredo: "que se quede tambien ese titulo que dice julio
   2026") y con la letra del mismo tamano que PREVENTA. */
.sheet .td-mes { position: sticky; left: 0; z-index: 3; }
.sheet .th-mes { position: sticky; left: 0; z-index: 5; }
.sheet .td-mes span { font-size: 0.86rem !important; letter-spacing: 0.16em !important; }

/* El hover NO puede pintar encima de la banda: eso era lo que la "picaba" en las
   filas 3 y 4 al pasar el cursor. */
.sheet tbody tr:hover > td.td-mes,
.sheet tbody tr:nth-child(even) > td.td-mes {
  background: linear-gradient(180deg, var(--navy-700), var(--navy-950)) !important;
}

/* Las dos columnas que se quedan fijas se corren para dejarle sitio a la banda. */
.sheet .col-poliza, .sheet thead .th-poliza { left: 26px !important; }
.sheet .col-cliente, .sheet thead .th-cliente { left: 130px !important; }
.sheet .col-prima { left: 350px !important; }
.sheet thead .th-prima { left: 350px !important; position: sticky; z-index: 8; background: var(--surface-3); }

/* El nombre largo ya no se monta sobre la prima: se corta con puntos suspensivos y
   se ve entero al pasar el cursor o al entrar a editarlo. */
.sheet .col-cliente { overflow: hidden; }
.sheet .col-cliente .ed-fuerte {
  display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; vertical-align: middle;
}
.sheet .col-cliente .ed-fuerte:focus { overflow: visible; text-overflow: clip; white-space: normal; }

/* El titulo "Prima" alineado con sus montos (los dos a la derecha). */
.sheet .th-prima { text-align: right !important; }
.sheet tr.fila-total-mes .td-total-monto { text-align: right; }
.sheet tr.fila-total-mes .td-total-etiqueta { text-align: right; }

/* ---------- El boton de publicar ----------
   Vuelve a llevar texto para que se sepa que existe, y TITILA mientras la venta no
   este publicada. Al publicarse pasa a verde y deja de llamar la atencion. */
.pub-btn {
  width: auto !important; height: auto !important; border-radius: var(--radius-pill) !important;
  gap: 5px; padding: 5px 11px !important; font-size: 0.72rem; font-weight: 700;
  animation: pubTitila 2.6s ease-in-out infinite;
}
/* No para hasta que la venta quede PUBLICADA de verdad: el boton solo se cambia por la
   etiqueta "Publicada" cuando el servidor confirma (mira views/ventas.ejs) — cerrar el
   popup sin publicar lo deja latiendo. El ciclo: late dos veces, se sacude una vez y
   descansa un momento. La sacudida es lo que agarra el ojo aunque el latido pase
   desapercibido. */
/* Alfredo: "un fluorescente mas fuerte, que el agente se de cuenta con mas intensidad".
   El resplandor es NEON de verdad: un aro rosa pegado al boton y un halo ancho que se
   expande, con el brillo del boton subiendo en cada latido. Los colores son los
   fluorescentes de la grafica (rosa #FF3D9A y violeta #7C5CFF) a plena potencia. */
@keyframes pubTitila {
  0%        { transform: scale(1); filter: brightness(1);
              box-shadow: 0 0 4px 1px rgba(255,61,154,.55), 0 0 0 0 rgba(255,61,154,.8); }
  8%        { transform: scale(1.16); filter: brightness(1.35);
              box-shadow: 0 0 12px 3px rgba(255,61,154,.95), 0 0 24px 6px rgba(124,92,255,.55), 0 0 0 11px rgba(255,61,154,0); }
  16%       { transform: scale(1); filter: brightness(1);
              box-shadow: 0 0 4px 1px rgba(255,61,154,.55), 0 0 0 0 rgba(255,61,154,.8); }
  24%       { transform: scale(1.16); filter: brightness(1.35);
              box-shadow: 0 0 12px 3px rgba(255,61,154,.95), 0 0 24px 6px rgba(124,92,255,.55), 0 0 0 11px rgba(255,61,154,0); }
  32%       { transform: scale(1); filter: brightness(1); }
  40%       { transform: scale(1) rotate(0deg); }
  43%       { transform: rotate(-8deg) scale(1.06); box-shadow: 0 0 14px 4px rgba(255,61,154,.9); }
  46%       { transform: rotate(7deg) scale(1.06); }
  49%       { transform: rotate(-5deg) scale(1.04); }
  52%       { transform: rotate(3deg); }
  55%, 100% { transform: scale(1) rotate(0deg); filter: brightness(1);
              box-shadow: 0 0 4px 1px rgba(255,61,154,.55); }
}
/* Con "menos animaciones" activado NO se apaga (asi fue como Alfredo se quedo sin ver
   nada): se cambia por una respiracion suave de brillo, sin movimiento. */
@media (prefers-reduced-motion: reduce) {
  .pub-btn { animation: pubRespira 2.2s ease-in-out infinite; }
}
@keyframes pubRespira {
  0%, 100% { filter: brightness(1); box-shadow: 0 0 4px 1px rgba(255,61,154,.5); }
  50%      { filter: brightness(1.45); box-shadow: 0 0 16px 5px rgba(255,61,154,.95), 0 0 30px 8px rgba(124,92,255,.5); }
}
.pub-ok {
  width: auto !important; height: auto !important; border-radius: var(--radius-pill) !important;
  gap: 5px; padding: 5px 11px !important; font-size: 0.72rem; font-weight: 700;
  background: rgba(0,229,160,.18) !important; color: #0d6b4a !important;
  border: 1px solid rgba(0,229,160,.55) !important;
}
.sheet .th-publicar, .sheet .td-publicar { width: 104px; min-width: 104px; text-align: left; }

/* ---------- La banda del mes: de una pieza, y por encima de todo lo que se desplaza ----------
   Se veia "picada": aparecian trozos de otras celdas a traves de ella (la palabra
   "TELE" al pasar el cursor, un "3" abajo). No era un hueco: eran las celdas que se
   desplazan pasando POR ENCIMA, porque la banda tenia menos prioridad de apilado que
   ellas. La banda va por ENCIMA de las celdas del cuerpo (capa 5) pero por DEBAJO del
   encabezado (capas 6 a 8): antes llevaba capa 8 y, al bajar por la lista, el verde se
   montaba sobre los titulos PREVENTA/POSTVENTA — era el "verde subiendo" que veia
   Alfredo. Su fondo sigue opaco de punta a punta. */
.sheet .td-mes { z-index: 5 !important; background: var(--navy-950) !important; background-image: linear-gradient(180deg, var(--navy-700), var(--navy-950)) !important; }
.sheet thead .th-mes { z-index: 8 !important; }
.sheet tbody tr:hover > td.td-mes,
.sheet tbody tr:nth-child(even) > td.td-mes,
.sheet tr.fila-total-mes > td.td-mes {
  background: var(--navy-950) !important; background-image: linear-gradient(180deg, var(--navy-700), var(--navy-950)) !important;
}

/* El encabezado queda gris entero: el verde de la banda llega SOLO hasta las filas de
   ventas (decision final de Alfredo, tras probar lo contrario). Esta regla anula a
   todas las de fases anteriores que pintaban esta celda de verde. */
.sheet thead .th-mes {
  background: var(--surface-3) !important; background-image: none !important;
  border-radius: 0 !important; border-bottom: 0 !important; box-shadow: none !important;
}

/* La etiqueta de faltantes, debajo del nombre y entera (antes salia cortada al lado). */
.chip-completar { display: block !important; margin: 5px 0 0 !important; width: fit-content; }
/* EL BUG DE SEMANAS: la regla de arriba (display block !important) le GANA al
   style="display:none" con el que el codigo escondia el chip. Por eso el aviso nunca
   desaparecia en vivo por mas que el codigo lo ordenara — y los "guioncitos azules"
   eran chips vacios que debian estar ocultos. Esconder ahora es con ESTA clase, que
   tambien lleva !important y va despues, asi que gana ella. */
.chip-completar.chip-oculto { display: none !important; }

/* El conteo del mes, pegado a la izquierda como estaba antes; el monto sigue bajo Prima. */
.sheet tr.fila-total-mes .td-total-izq { text-align: left !important; padding-left: 12px; }


/* El buscador de la hoja (solo lo ve el admin). */
.buscador-ventas {
  min-width: 260px; padding: 7px 12px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: var(--surface); color: var(--ink); font-size: 0.85rem;
}
.buscador-ventas:focus { outline: none; border-color: #58769b; box-shadow: 0 0 0 3px rgba(88,118,155,.18); }
.sheet .th-agente, .sheet .col-agente { min-width: 140px; font-size: 0.82rem; color: var(--ink-soft); }

/* La lista de agentes por la que entra el admin a Ventas. */
.lista-agentes { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; }
.agente-card {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 14px; background: var(--surface);
  text-decoration: none; color: var(--ink); transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.agente-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); border-color: var(--oro-borde); text-decoration: none; }
.agente-card .avatar-circle { width: 42px; height: 42px; font-size: 15px; flex: 0 0 auto; }
.agente-datos { min-width: 0; flex: 1; }
.agente-nombre { font-weight: 700; font-size: 0.94rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agente-meta { font-size: 0.78rem; color: var(--ink-soft); margin-top: 2px; }
.agente-prod { font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Barras de mezcla por aseguradora / producto en el Reporte del admin. */
.barra-mix { height: 5px; border-radius: 3px; background: rgba(124,138,160,.16); margin-top: 5px; overflow: hidden; }
.barra-mix span { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #00E5A0, #00D1FF); }
.mix-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mix-chip { border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 6px 12px; font-size: 0.82rem; color: var(--ink-soft); }
.mix-chip strong { color: var(--ink); }

/* ---------- Agent PRO IA ---------- */
.aviso-ia { border-left: 4px solid var(--oro-borde); font-size: 0.86rem; color: var(--ink-soft); }
.aviso-ia strong { color: var(--ink); }
.chat-agente { min-height: 180px; max-height: 480px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 4px 0 12px; }
.chat-msg { max-width: 78%; padding: 11px 14px; border-radius: 14px; font-size: 0.92rem; line-height: 1.55; white-space: pre-wrap; }
.chat-msg-yo { align-self: flex-end; background: #1F2430; color: #fff; border-bottom-right-radius: 5px; }
.chat-msg-ia { align-self: flex-start; background: var(--surface-soft); border: 1px solid var(--border); border-bottom-left-radius: 5px; }
.chat-fuentes { margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--border); font-size: 0.75rem; color: var(--ink-soft); }
.chat-agente-form { display: flex; gap: 10px; align-items: flex-end; }
.chat-agente-form textarea { flex: 1; border: 1px solid var(--border); border-radius: 12px; padding: 11px 13px; font-family: inherit; font-size: 0.92rem; resize: vertical; background: var(--surface); color: var(--ink); }
.chat-agente-form textarea:focus { outline: none; border-color: #58769b; box-shadow: 0 0 0 3px rgba(88,118,155,.18); }
.chat-agente-sugerencias { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chat-agente-sugerencias button { border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius-pill); padding: 6px 13px; font-size: 0.8rem; color: var(--ink-soft); cursor: pointer; }
.chat-agente-sugerencias button:hover { background: var(--hover-suave); color: var(--ink); }
.kb-lista { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.kb-doc { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 12px; }
.kb-doc-titulo { font-weight: 650; font-size: 0.9rem; }
.kb-doc-meta { font-size: 0.78rem; color: var(--ink-soft); margin-top: 2px; }
.kb-alta { margin-top: 14px; }
.kb-alta > summary { cursor: pointer; font-weight: 600; font-size: 0.88rem; color: var(--ink-soft); padding: 6px 0; }
.kb-form label { display: block; margin-top: 12px; }
.kb-form input[type=text], .kb-form select, .kb-form textarea { width: 100%; border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; font-family: inherit; font-size: 0.9rem; background: var(--surface); color: var(--ink); }

/* ---------- Agent PRO IA: portada centrada, como Marketing PRO IA ---------- */
.ia-wrap { max-width: 780px; margin: 0 auto; }
.ia-portada { text-align: center; padding: 46px 0 24px; transition: opacity .2s ease; }
.ia-portada.oculta { display: none; }
.ia-titulo { font-size: 2rem; font-weight: 750; letter-spacing: -0.02em; margin: 0 0 12px; }
.ia-sub { color: var(--ink-soft); font-size: 0.96rem; line-height: 1.6; margin: 0 auto 22px; max-width: 620px; }
.ia-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.ia-chips button {
  border: 1px solid var(--border); background: var(--surface-soft); border-radius: var(--radius-pill);
  padding: 9px 16px; font-size: 0.87rem; font-weight: 600; color: var(--ink); cursor: pointer;
  transition: transform .12s ease, border-color .12s ease;
}
.ia-chips button:hover { transform: translateY(-1px); border-color: var(--oro-borde); }
.ia-chat { display: flex; flex-direction: column; gap: 12px; margin: 8px 0 18px; }
.ia-chat:empty { margin: 0; }
.ia-composer {
  display: flex; align-items: flex-end; gap: 10px;
  border: 1px solid var(--border); border-radius: 28px; padding: 8px 8px 8px 20px;
  background: var(--surface); box-shadow: var(--shadow-card);
}
.ia-composer:focus-within { border-color: #58769b; box-shadow: 0 0 0 3px rgba(88,118,155,.16); }
.ia-composer textarea {
  flex: 1; border: 0; background: transparent; resize: none; outline: none;
  font-family: inherit; font-size: 1rem; color: var(--ink); padding: 10px 0; max-height: 180px;
}
.ia-enviar {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  background: #1F2430; color: #fff; display: inline-flex; align-items: center; justify-content: center;
  transition: transform .12s ease, filter .12s ease;
}
.ia-enviar:hover { transform: translateY(-1px); filter: brightness(1.15); }
.ia-disclaimer { text-align: center; color: var(--ink-soft); font-size: 0.78rem; line-height: 1.5; margin: 12px auto 0; max-width: 660px; }
.ia-base { max-width: 780px; margin: 26px auto 0; }
.ia-base > summary { cursor: pointer; font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); padding: 8px 0; text-align: center; }
.ia-base > summary:hover { color: var(--ink); }
.chat-fuentes a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

/* El aviso del admin en Agent PRO IA, con el boton de cargar documentos a la vista. */
.kb-aviso-admin {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  border: 1px solid var(--oro-borde); border-radius: 14px; padding: 13px 16px; margin-bottom: 16px;
  background: var(--surface); font-size: 0.88rem; color: var(--ink-soft);
  box-shadow: 0 1px 3px rgba(224,172,42,0.18);
}
.kb-aviso-admin strong { color: var(--ink); }

/* =========================================================================
   PORTADA (/) — la pantalla que ve quien todavia no ha entrado.
   Existe porque antes la raiz mandaba directo al panel de Top Producers, que era
   publico: cualquiera con el enlace veia nombres y produccion de la agencia sin
   tener cuenta. Aqui no hay un solo dato del negocio, solo que es la plataforma.
   ========================================================================= */
.landing-body { margin: 0; background: #0C0D12; color: #EEF1F6; }
.landing { position: relative; min-height: 100vh; overflow: hidden; padding: 0 22px; }
/* El resplandor de fondo: es lo unico "futurista" y va en CSS puro, sin librerias. */
.landing-glow {
  position: absolute; inset: -20% -10% auto -10%; height: 720px; pointer-events: none;
  background:
    radial-gradient(closest-side, rgba(124,92,255,.28), transparent 70%) 18% 22% / 55% 70% no-repeat,
    radial-gradient(closest-side, rgba(0,229,160,.20), transparent 70%) 78% 8% / 48% 62% no-repeat,
    radial-gradient(closest-side, rgba(255,61,154,.16), transparent 70%) 55% 46% / 46% 56% no-repeat;
  filter: blur(18px);
}
.landing-top {
  position: relative; z-index: 2; max-width: 1080px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 24px 0;
}
.landing-marca { display: flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: .06em; font-size: .95rem; }
.landing-marca strong { color: var(--oro-borde); }
.landing-escudo {
  width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); color: var(--oro-borde);
}
.landing-body .btn-gold { background: #fff; color: #14161C; border-color: #fff; }
.landing-body .btn-gold:hover { background: #E7EAF0; border-color: #E7EAF0; }
.landing-body .btn-outline { background: transparent; color: #EEF1F6; border: 1px solid rgba(255,255,255,.26); }
.landing-body .btn-outline:hover { background: rgba(255,255,255,.08); }

.landing-hero { position: relative; z-index: 2; max-width: 800px; margin: 0 auto; text-align: center; padding: 56px 0 40px; }
.landing-badge {
  display: inline-block; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
  color: #C9D2E2; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 6px 14px; margin-bottom: 22px;
}
.landing-hero h1 { font-size: clamp(2.2rem, 5.4vw, 3.6rem); line-height: 1.08; font-weight: 750; letter-spacing: -.03em; margin: 0 0 18px; color: #fff; }
.landing-degrade {
  background: linear-gradient(100deg, #00E5A0, #00D1FF 42%, #7C5CFF 78%, #FF3D9A);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.landing-lead { color: #AFB8C8; font-size: 1.03rem; line-height: 1.65; max-width: 620px; margin: 0 auto 28px; }
.landing-acciones { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.landing-cta { padding: 12px 24px; font-size: .95rem; }

.landing-bondades {
  position: relative; z-index: 2; max-width: 1080px; margin: 0 auto; padding: 22px 0 46px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px;
}
.landing-card {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px; padding: 20px; transition: transform .15s ease, border-color .15s ease;
}
.landing-card:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.24); }
.landing-ic {
  width: 38px; height: 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(124,92,255,.18); color: #C9B6FF; margin-bottom: 12px;
}
.landing-card h3 { margin: 0 0 7px; font-size: 1rem; font-weight: 700; color: #fff; }
.landing-card p { margin: 0; color: #9FA9BB; font-size: .88rem; line-height: 1.55; }
.landing-pie { position: relative; z-index: 2; text-align: center; color: #6C7689; font-size: .78rem; padding: 0 0 30px; }

/* El cerebrito pensando, como en el chat de Marketing IA. */
.ia-pensando { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-soft); }
.ia-pensando .cerebro { font-size: 1.1rem; display: inline-block; animation: cerebroLate 1.4s ease-in-out infinite; }
@keyframes cerebroLate { 0%,100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.18); opacity: 1; } }
.ia-pensando .puntos i { font-style: normal; animation: puntoSube 1.2s infinite; }
.ia-pensando .puntos i:nth-child(2) { animation-delay: .2s; }
.ia-pensando .puntos i:nth-child(3) { animation-delay: .4s; }
@keyframes puntoSube { 0%,60%,100% { opacity: .25; } 30% { opacity: 1; } }

/* ---------- Agent PRO IA: centrado al entrar, y al preguntar el composer baja ----------
   Mismo comportamiento que Marketing IA. */
.ia-wrap.ia-vacio { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; }
.ia-wrap.ia-vacio .ia-portada { padding: 0 0 26px; }
.chat-msg-pensando { display: inline-flex; align-items: center; background: transparent !important; border: 0 !important; padding: 6px 0 !important; }

/* ---------- Soltar archivos ---------- */
.soltar {
  border: 2px dashed var(--border); border-radius: 16px; padding: 30px 20px; text-align: center;
  cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.soltar:hover, .soltar.encima { border-color: var(--oro-borde); background: var(--hover-suave); }
.soltar-ic { font-size: 1.9rem; margin-bottom: 8px; }
.soltar-txt { margin: 0 0 6px; font-size: 0.94rem; color: var(--ink); }
.soltar-sub { margin: 0; font-size: 0.79rem; color: var(--ink-soft); line-height: 1.5; }
.carga-lista { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; }
.carga-fila { display: flex; justify-content: space-between; gap: 12px; font-size: 0.82rem; padding: 7px 11px; border: 1px solid var(--border); border-radius: 10px; }
.carga-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carga-estado { color: var(--ink-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* El avatar del asistente al lado de cada respuesta (el logo chico que sube el admin). */
.chat-fila { display: flex; gap: 10px; align-items: flex-start; }
.chat-fila-yo { justify-content: flex-end; }
.chat-avatar-ia { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; margin-top: 2px; border: 1px solid var(--border); }

/* El cuadro de escribir de los chats: crece con el texto (ver public/js/autocrece.js).
   `field-sizing` lo hace solo en Chrome y Edge; el JavaScript cubre Safari, que todavia
   no lo soporta — y aqui hay agentes con iPhone. */
.ia-composer textarea,
.studio-composer textarea,
.proia-composer textarea,
.wall-comment-textarea {
  field-sizing: content;
  min-height: 24px;
  max-height: 220px;
  overflow-y: hidden;
  line-height: 1.5;
}

/* El texto de las respuestas del asistente ya viene con formato (negritas, viñetas). */
.chat-msg-ia p { margin: 0 0 9px; }
.chat-msg-ia p:last-child { margin-bottom: 0; }
.chat-msg-ia ul { margin: 6px 0 10px; padding-left: 20px; }
.chat-msg-ia li { margin-bottom: 5px; }
.chat-msg-ia li:last-child { margin-bottom: 0; }
.chat-msg-ia strong { font-weight: 700; }
.chat-msg-ia code { background: rgba(124,138,160,.16); padding: 1px 5px; border-radius: 5px; font-size: 0.88em; }

/* Historial de preguntas del Agent PRO IA. */
.ia-historial { max-width: 780px; margin: 14px auto 0; }
.ia-historial > summary { cursor: pointer; font-size: 0.82rem; font-weight: 600; color: var(--ink-soft); padding: 6px 0; text-align: center; }
.ia-historial > summary:hover { color: var(--ink); }
.hist-lista { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; max-height: 260px; overflow-y: auto; }
.hist-fila { display: flex; align-items: center; gap: 8px; }
.hist-pregunta {
  flex: 1; text-align: left; background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 8px 12px; font-size: 0.84rem; color: var(--ink); cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hist-pregunta:hover { background: var(--hover-suave); border-color: var(--oro-borde); }
.hist-borrar { border: 0; background: transparent; color: var(--ink-soft); font-size: 1.1rem; cursor: pointer; padding: 4px 8px; border-radius: 8px; }
.hist-borrar:hover { background: var(--hover-suave); color: #be3232; }
.hist-vaciar { margin-top: 10px; padding: 6px 14px; font-size: 0.8rem; }

/* ---------- El logo de la marca en el menu ----------
   Alfredo: "que no haya palabra, solo el logo, en transparente y mas grande". El logo ya
   trae el nombre dentro, asi que poner "THE PRO CLUB" al lado era decirlo dos veces.
   Sin fondo, sin recuadro y sin sombra: si el PNG es transparente, se ve transparente
   (antes heredaba el recuadro redondeado y el degradado del escudo). */
.sidebar-brand-logo {
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  object-fit: contain;
  display: block;
}

/* ---------- Logo con fondo solido metido dentro del PNG ----------
   Alfredo: "si el fondo es blanco entonces el logo es negro, y si el fondo es negro
   entonces el logo es blanco". Su archivo es un cuadrado negro con el dibujo en blanco,
   asi que en el menu claro se veia como un rectangulo negro.
   En tema CLARO se invierte (el fondo negro pasa a blanco y el dibujo a negro) y el
   blanco se vuelve transparente al mezclarse. En OSCURO se deja el original y el negro
   es el que desaparece. Resultado: el logo se adapta al fondo sin tocar el archivo.
   Es un apaño; lo ideal sigue siendo subirlo con fondo transparente. */
.sidebar-brand-logo.logo-recorta { filter: invert(1); mix-blend-mode: multiply; }
[data-tema="oscuro"] .sidebar-brand-logo.logo-recorta { filter: none; mix-blend-mode: screen; }
@media (prefers-color-scheme: dark) {
  [data-tema="auto"] .sidebar-brand-logo.logo-recorta { filter: none; mix-blend-mode: screen; }
}

/* El cursor que parpadea mientras el texto se va escribiendo. */
.cursor-escribe {
  display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -0.15em;
  background: var(--ink); animation: cursorParpadea 1s steps(2) infinite;
}
@keyframes cursorParpadea { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* ---------- El logo, en grande de verdad ----------
   Alfredo: "tiene que ser mas grande, minimo 3 o 4 veces ese tamaño". Con una altura
   fija no crecia lo suficiente, asi que ahora ocupa el ANCHO del menu (264px menos los
   margenes) y la altura se calcula sola segun la forma del logo. Para uno cuadrado eso
   son unos 200px: cuatro veces los 46px de antes.
   El boton de contraer se saca del flujo (se ancla arriba a la derecha) para que no le
   robe sitio al logo — antes iba al lado y lo estrechaba. */
/* Ajustado tras verlo: 200px era demasiado y empujaba el menu hacia abajo. Con 96px
   queda al doble del original sin comerse la pantalla, y pegado arriba. */
.sidebar-brand { position: relative; padding: 4px 10px 14px; }
.sidebar-brand-logo {
  width: auto !important;
  max-width: 190px !important;
  height: 96px !important;
  margin: 0;
}
.sidebar-brand:has(.sidebar-brand-logo) .sidebar-collapse-btn {
  position: absolute; top: 0; right: 0; margin-left: 0; z-index: 2;
}
/* Con el menu contraido vuelve a ser pequeño, que ahi solo hay una franja estrecha. */
body.side-collapsed .sidebar-brand-logo { height: auto !important; max-height: 40px; width: auto !important; max-width: 46px !important; margin: 0 auto; }
body.side-collapsed .sidebar-brand:has(.sidebar-brand-logo) .sidebar-collapse-btn { position: static; margin: 0 auto; }

/* La adaptacion al tema vale para CUALQUIER logo marcado como "fondo solido": el de la
   marca y el de cada agencia. Antes solo funcionaba en el del menu. */
.logo-recorta { filter: invert(1); mix-blend-mode: multiply; }
[data-tema="oscuro"] .logo-recorta { filter: none; mix-blend-mode: screen; }
@media (prefers-color-scheme: dark) {
  [data-tema="auto"] .logo-recorta { filter: none; mix-blend-mode: screen; }
}
/* Un poquito mas grande, como pidio. */
.sidebar-brand-logo { height: 112px !important; }

/* Casillas para elegir a que compañias aplica una nota o un documento. */
.companias-check { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.companias-check label {
  display: inline-flex; align-items: center; gap: 7px; margin: 0;
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  padding: 7px 13px; font-size: 0.85rem; cursor: pointer; background: var(--surface);
}
.companias-check label:hover { border-color: var(--oro-borde); background: var(--hover-suave); }
.companias-check input { margin: 0; cursor: pointer; }

/* ---------- Las ventanas emergentes tienen que poder desplazarse ----------
   Alfredo: "sigue sin poder bajar para poner la respuesta". Mi primer intento fue
   hacer que el CUERPO de la ventana se desplazara por dentro. No funciono, y la razon
   es un detalle conocido de este tipo de maquetado: para que una parte de una caja
   flexible pueda encogerse y sacar su barra de desplazamiento hace falta permitirselo
   explicitamente; si no, se estira todo lo que haga falta y lo que sobra queda cortado.
   Podria arreglarlo con ese ajuste, pero no puedo VER el resultado desde aqui, y ya
   fallo una vez. Asi que se resuelve de la forma que no depende de ese detalle:
   la ventana crece lo que necesite y quien se desplaza es el FONDO OSCURO que la
   contiene, que ya sabia hacerlo. Es imposible que quede contenido inalcanzable.
   Lo unico que se pierde es que la cabecera de color ya no queda clavada arriba —
   se va con el desplazamiento, que es como se comportan casi todos los formularios. */
.pub-panel {
  max-height: none !important;
  overflow: visible !important;
  display: block !important;
  margin: auto 0;
}
.pub-cuerpo { overflow: visible !important; }
/* Al no recortar el panel, las esquinas redondeadas se ponen en la cabecera y en el
   cuerpo, que antes las heredaban del recorte. */
.pub-cabecera { border-radius: 20px 20px 0 0; }
.pub-cuerpo { border-radius: 0 0 20px 20px; }
/* El fondo oscuro es el que se desplaza. */
.modal-overlay { align-items: flex-start; overflow-y: auto; }
/* Y el cuadro de escribir no crece sin fin: a partir de cierto alto saca su propia
   barrita, para que los botones de Guardar y Cancelar no se vayan demasiado lejos. */
#notaModal .pub-texto, #editorModal .pub-texto { max-height: 45vh; }
@media (max-width: 640px) { .modal-overlay { padding: 16px 10px; } }
}

/* ---------- El cuadro de escribir, siempre visible ----------
   `.pub-texto` nacio para el popup de publicar una venta, donde va DENTRO de una tarjeta
   que ya tiene su marco — por eso su borde es transparente. Al reutilizarlo aqui quedaba
   como texto suelto flotando, sin que se viera donde hay que escribir.
   En estas dos ventanas lleva su propio marco, y se resalta al tocarlo. */
#notaModal .pub-texto,
#editorModal .pub-texto,
#notaModal input[type="text"],
#editorModal input[type="text"] {
  border: 1px solid var(--border);
  background: var(--surface);
}
#notaModal .pub-texto:hover,
#editorModal .pub-texto:hover { border-color: var(--gold-wash-border); }
#notaModal .pub-texto:focus,
#editorModal .pub-texto:focus,
#notaModal input[type="text"]:focus,
#editorModal input[type="text"]:focus {
  border-color: #7C5CFF;
  box-shadow: 0 0 0 3px rgba(124,92,255,.18);
  outline: none;
}
/* Un alto minimo para que se vea que es un cuadro de varias lineas antes de escribir. */
#notaModal .pub-texto { min-height: 150px; }

/* ==========================================================================
   Fase 90 — EN PANTALLA ESTRECHA, LA BARRA SE QUEDA EN ICONOS
   ==========================================================================
   Alfredo mandó la captura de otro programa: "al poner fina la pantalla debería
   ponerse solo los iconos y listo, tipo así".

   Y lo mejor de todo es que ESO YA EXISTÍA en la plataforma. El botón de contraer
   de la barra enciende `body.side-collapsed`, que deja la barra en 76px con solo
   los iconos y las etiquetas escondidas — justo lo de su captura. Lo único que
   pasaba es que ese modo solo se encendía a mano, y por debajo de 900px mandaba
   otra regla completamente distinta que tumbaba la barra a horizontal y repartía
   las doce entradas en cuadrícula.

   Así que aquí no se inventa nada: en pantalla estrecha se aplican las MISMAS
   reglas del modo contraído, sin depender de que nadie pulse el botón. La barra se
   queda vertical y en iconos, y al ensanchar la ventana vuelve entera con sus
   textos, sola. Las declaraciones se repiten en vez de reutilizar la clase porque
   desde CSS no se le puede poner una clase al body — y meter JavaScript para algo
   que el CSS resuelve solo sería peor.

   Esto sustituye a lo que subí antes (una tira horizontal deslizable, y después
   esconder el menú del todo): las dos eran peores que lo que la propia plataforma
   ya sabía hacer. Los botones de "Menú principal" que añadí a Marketing PRO IA y a
   Agent PRO IA se quedan — con la barra en iconos ya no son imprescindibles, pero
   en el móvil un botón de volver grande y con texto siempre se agradece.

   Va AÑADIDO AL FINAL del archivo y no editando la media query de la línea 906, a
   propósito: esta hoja la lleva la conversación de PLATAFORMA. Al ir después, gana
   sobre lo anterior sin necesidad de !important.
   ========================================================================== */
@media (max-width: 900px) {
  /* Lo primero: deshacer el vuelco a horizontal. La barra sigue siendo una columna
     a la izquierda, como en el escritorio — solo que más angosta. */
  .app-shell { flex-direction: row; }

  /* Fase 91 — LA FLECHITA TIENE QUE SEGUIR FUNCIONANDO. Alfredo: "eliminaste la
     flechita para volver a poner ancho el menú, esa flechita que siga estando".
     La escondí, y además no habría servido de nada: estas reglas se aplicaban
     SIEMPRE, así que pulsarla no cambiaba nada visible.
     Ahora el riel de iconos es el estado por defecto y la flechita lo abre. Se
     apoya en la clase que el botón ya enciende (body.side-collapsed) sin tocar su
     JavaScript, que es de la otra conversación. Sí, el nombre queda al revés en
     estrecho — ahí "collapsed" significa "abierta" — y es feo, pero la alternativa
     era meter mano a su script para renombrar una clase. Queda dicho aquí para que
     nadie lo lea como un despiste. */
  .sidebar {
    height: auto; min-height: 100vh;
    flex-direction: column; align-items: stretch;
    gap: 0;
  }
  body:not(.side-collapsed) .sidebar { width: 76px; padding: 22px 10px; }

  /* Y ahora, las mismas reglas del modo contraído que ya existe. */
  body:not(.side-collapsed) .sidebar-brand { justify-content: center; padding: 0; flex-direction: column; gap: 8px; }
  body:not(.side-collapsed) .sidebar-brand .txt { display: none; }
  .sidebar-brand-logo { max-height: 40px; max-width: 46px; width: auto; margin: 0 auto; }
  .sidebar-section-label { display: none; }
  .sidebar-divider { display: block; }
  .sidebar-spacer { display: block; }

  .sidebar-nav { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 3px; overflow: visible; }
  body:not(.side-collapsed) .nav-item { justify-content: center; padding: 11px 8px; font-size: 0; gap: 0; white-space: nowrap; }
  body:not(.side-collapsed) .nav-item .ic { font-size: 1rem; }
  body:not(.side-collapsed) .nav-item .pro-badge { display: none; }

  body:not(.side-collapsed) .sidebar-cta { display: flex; justify-content: center; margin: 0; font-size: 0; gap: 0; padding: 11px 8px; }
  body:not(.side-collapsed) .sidebar-cta .ic { font-size: 1rem; }

  body:not(.side-collapsed) .sidebar-footer { justify-content: center; margin-left: 0; }
  body:not(.side-collapsed) .sidebar-user-txt,
  body:not(.side-collapsed) .sidebar-user-caret { display: none; }
  /* La flechita se queda, y ahora sí hace algo: abre y cierra el menú. */
  .sidebar-collapse-btn { display: inline-flex; }
  body:not(.side-collapsed) .tema-suiche { grid-template-columns: 1fr; }
  body:not(.side-collapsed) .tema-op { font-size: 0; gap: 0; padding: 7px 0; }

  /* ---- Con la flechita pulsada: el menú se abre ENCIMA del contenido ---- */
  /* Se abre como un cajón flotante y no empujando la página, que es lo que hace
     cualquier app en el móvil: empujar dejaría el contenido en una rendija
     inservible mientras el menú está abierto. Al elegir una entrada se navega y el
     cajón se va solo, porque la página nueva arranca otra vez en el riel. */
  body.side-collapsed .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 240px; padding: 22px 14px;
    z-index: 80; box-shadow: var(--shadow-pop); overflow-y: auto;
  }
  body.side-collapsed .nav-item { justify-content: flex-start; font-size: 0.9rem; gap: 11px; padding: 11px 13px; }
  body.side-collapsed .sidebar-section-label { display: block; }
  /* El contenido no se mueve: el cajón va encima, así que se le deja el hueco del
     riel para que al cerrarse todo siga en su sitio. */
  body.side-collapsed .main { margin-left: 76px; }

  /* ---- EL MENÚ DEL NOMBRE, QUE SE SALÍA ---- */
  /* Alfredo: "las palabras Mi Perfil se salen de todo".
     La causa: .sidebar-user-pop lleva `left: 0; right: 0`, o sea que mide
     EXACTAMENTE lo que la barra. En escritorio son 240px y cabe de sobra; en el
     riel son 62 y "Mi Perfil" no entra ni partido en dos. Aquí se despega del
     riel y sale flotando a su derecha, con su propio ancho. */
  body:not(.side-collapsed) .sidebar-user-pop {
    left: calc(100% + 8px); right: auto;
    bottom: 8px;
    min-width: 190px; width: max-content; max-width: 62vw;
  }
  body:not(.side-collapsed) .sidebar-user-pop .tema-suiche { grid-template-columns: repeat(3, 1fr); }
  body:not(.side-collapsed) .sidebar-user-pop .tema-op { font-size: 0.78rem; gap: 6px; padding: 7px 6px; }

  /* El contenido ocupa el resto, sin el respiro de escritorio. */
  .container { padding: 24px 16px 60px; }
}

/* En el móvil de verdad, la barra se estrecha un poco más: 76px de doce iconos son
   muchos píxeles cuando la pantalla entera mide 360. */
@media (max-width: 560px) {
  .sidebar { width: 62px; padding: 16px 6px; }
  .nav-item { padding: 10px 6px; }
  .sidebar-brand-logo { max-height: 32px; max-width: 38px; }
  .container { padding: 20px 12px 50px; }
}

/* Fase 92 — el mismo aire arriba en Agent PRO IA, por lo mismo: el primer mensaje
   arrancaba pegado al borde de la tarjeta y se leía cortado. Va al final del archivo
   y sin tocar ninguna línea de la conversación de PLATAFORMA. */
.ia-chat:not(:empty) { padding-top: 22px; }

/* Las filas por debajo del puesto 20: borrosas y sin datos reales detras. */
tr.rank-blur td { filter: blur(4px); user-select: none; pointer-events: none; opacity: .75; }
tr.rank-blur td:first-child { filter: none; opacity: .5; }
/* El resumen de arriba, con su selector de mes/año. */
.hero-toggle { flex: 0 0 auto; }

/* El detalle del mes que aparece bajo la grafica de Mi Produccion al pulsar un mes. */
.detalle-mes:empty { display: none; }
.detalle-mes { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.detalle-mes-cab { font-weight: 700; font-size: 0.92rem; margin-bottom: 10px; }
.detalle-mes-lista { display: flex; flex-direction: column; gap: 4px; max-height: 300px; overflow-y: auto; }
.detalle-fila { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; font-size: 0.88rem; }
.detalle-fila .pos { width: 22px; color: var(--ink-soft); font-variant-numeric: tabular-nums; font-size: 0.8rem; }
.detalle-fila .nom { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.detalle-fila .monto { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- BARRA DE AGENTES DEL ADMIN (arriba de Mis Ventas) ---- */
/* Queda pegada arriba al bajar, para poder cambiar de agente sin subir la pagina. */
.barra-agentes { position: sticky; top: 8px; z-index: 30; padding: 12px 14px; margin-bottom: 14px; }
.barra-agentes-fila { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.barra-agentes-fila .buscador-ventas { flex: 1 1 220px; min-width: 180px; }
.barra-agentes-sel {
  flex: 1 1 240px; min-width: 200px; padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface-solid); color: var(--ink); font-size: 0.86rem;
}
.barra-agentes .btn { padding: 8px 14px; font-size: 0.82rem; }

/* ---- LOS CUADROS APILADOS (vista "todos los agentes") ---- */
/* El espacio pequenito entre uno y otro que pidio Alfredo. */
.hoja-apilada { margin-bottom: 18px; }
.hoja-apilada-cab {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 0 4px 6px; font-size: 0.92rem;
}
.hoja-apilada-cab a { font-weight: 700; color: var(--ink); text-decoration: none; }
.hoja-apilada-cab a:hover { text-decoration: underline; }
.hoja-apilada-cab span { color: var(--ink-soft); font-size: 0.82rem; }


/* ---- LA FILA DE RE-SOMETIDA ---- */
/* Se ve claramente colgada de la venta de arriba: fondo apenas distinto y la flechita. */
.sheet tr.fila-resometida > td { background: rgba(124,131,153,0.07); }
.sheet tr.fila-resometida .flecha-hija { color: var(--ink-soft); font-size: 1rem; }
.etiqueta-resometida {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--ink-soft); border: 1px dashed var(--border); border-radius: 6px; padding: 2px 8px;
}

/* ---------- LOS COLORES DEL ESTATUS ----------
   Alfredo: "los colores van variando y nunca son los mismos, la idea es que se
   mantengan". Antes cada sitio tenia su propia regla y el mismo estatus salia de un
   color en el cuadro y de otro en el muro. Ahora se definen UNA vez, aqui, con una
   variable por estatus, y todo lo demas las usa. Cambiar un color es cambiar una linea.

   El codigo de colores que pidio, y que se lee solo:
     Pendiente  turquesa  — va en camino
     Aprobada   amarillo  — falta el ultimo paso
     Issue      verde     — hecho, la poliza esta en vigor
     Re-Sometida / Pospuesta / Declinada / Cancelada  rojo — no suma produccion */
:root {
  --est-pendiente-bg:  rgba(0,209,255,.16);  --est-pendiente-tx:  #0a5b78;  --est-pendiente-bd:  rgba(0,209,255,.55);
  --est-aprobada-bg:   rgba(255,193,7,.20);  --est-aprobada-tx:   #7a5600;  --est-aprobada-bd:   rgba(255,193,7,.6);
  --est-emitida-bg:    rgba(0,200,110,.18);  --est-emitida-tx:    #0d6b4a;  --est-emitida-bd:    rgba(0,200,110,.55);
  --est-rojo-bg:       rgba(224,49,73,.14);  --est-rojo-tx:       #a3172c;  --est-rojo-bd:       rgba(224,49,73,.45);
}
.sheet .sheet-status-select.badge-pendiente  { background: var(--est-pendiente-bg); color: var(--est-pendiente-tx); border-color: var(--est-pendiente-bd); }
.sheet .sheet-status-select.badge-aprobada   { background: var(--est-aprobada-bg);  color: var(--est-aprobada-tx);  border-color: var(--est-aprobada-bd); }
.sheet .sheet-status-select.badge-emitida    { background: var(--est-emitida-bg);   color: var(--est-emitida-tx);   border-color: var(--est-emitida-bd); }
.sheet .sheet-status-select.badge-resometida,
.sheet .sheet-status-select.badge-pospuesta,
.sheet .sheet-status-select.badge-declinada,
.sheet .sheet-status-select.badge-cancelada  { background: var(--est-rojo-bg);      color: var(--est-rojo-tx);      border-color: var(--est-rojo-bd); }

/* Las mismas cuatro reglas para las etiquetas de fuera del cuadro (muro, reportes,
   panel de admin), para que un estatus no cambie de color al cambiar de pantalla. */
.badge-pendiente  { background: var(--est-pendiente-bg); color: var(--est-pendiente-tx); }
.badge-aprobada   { background: var(--est-aprobada-bg);  color: var(--est-aprobada-tx); }
.badge-emitida    { background: var(--est-emitida-bg);   color: var(--est-emitida-tx); }
.badge-resometida,
.badge-pospuesta,
.badge-declinada,
.badge-cancelada  { background: var(--est-rojo-bg);      color: var(--est-rojo-tx); }

/* La fila entera de una venta que ya no suma se lee de un vistazo: un filo rojo a la
   izquierda y la prima tachada, para que nadie la sume de cabeza por error. */
.sheet tr.fila-no-suma > .td-num { box-shadow: inset 3px 0 0 var(--est-rojo-bd); }
.sheet tr.fila-no-suma .col-prima .ed { text-decoration: line-through; color: var(--est-rojo-tx); opacity: .75; }

/* ---------- BORRAR UNA VENTA ---------- */
.th-borrar, .td-borrar { width: 38px; text-align: center; }
.btn-borrar {
  background: transparent; border: 1px solid transparent; border-radius: 7px;
  color: var(--ink-soft); cursor: pointer; padding: 4px 6px; line-height: 0;
}
.btn-borrar:hover { color: var(--est-rojo-tx); border-color: var(--est-rojo-bd); background: var(--est-rojo-bg); }

/* ==================== EL CUADRO DE VENTAS, A LO ANCHO ====================
   Alfredo: "es probable ensanchar el cuadro de ventas en funcion del tamano de la
   pantalla, para que no tenga tanto espacio en blanco". El resto de la aplicacion tiene
   un ancho comodo para leer (1180px), que para un texto esta bien pero para una tabla de
   veinte columnas deja los lados vacios. Asi que SOLO la tarjeta del cuadro se sale de
   ese limite y se estira hasta donde de la pantalla, con un respiro a los lados.
   El truco del margen negativo la saca del contenedor sin tener que cambiar el armazon
   de todas las paginas — que es lo que romperia otras secciones. */
/* La barra lateral mide 264px abierta y 76px cerrada, y el contenido lleva 32px de
   margen a cada lado. Se le descuenta lo que ocupa para que la seccion llegue justo
   hasta el borde de la ventana sin pasarse — si se pasara, apareceria una barra
   horizontal en TODA la pagina, no solo en el cuadro. */
@media (min-width: 1260px) {
  .container-ancho { max-width: calc(100vw - 264px - 64px); }
  body.side-collapsed .container-ancho { max-width: calc(100vw - 76px - 64px); }
}

/* ==================== BUSCADOR ====================
   Una sola caja: el desplegable de "donde buscar", la lupa, el texto y el boton, todo
   pegado y con un solo borde alrededor. Antes eran tres piezas sueltas y el boton
   quedaba lejisimos del sitio donde se escribe. */
.buscador-caja {
  display: flex; align-items: stretch; margin: 0 0 10px;
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
  background: var(--surface-solid); max-width: 620px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.buscador-caja:focus-within { border-color: var(--gold-ink); box-shadow: 0 0 0 3px rgba(90,120,255,.13); }
.buscador-campo {
  border: 0; border-right: 1px solid var(--border); background: transparent;
  color: var(--ink-soft); font-size: 0.8rem; padding: 0 26px 0 12px; cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b93a7' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 12px;
}
.buscador-campo:focus { outline: none; }
.buscador-lupa { display: flex; align-items: center; padding: 0 0 0 12px; color: var(--ink-soft); }
.buscador-texto {
  flex: 1; border: 0; background: transparent; color: var(--ink);
  font-size: 0.87rem; padding: 9px 10px;
}
.buscador-texto:focus { outline: none; }
.buscador-texto::-webkit-search-cancel-button { display: none; }
.buscador-limpiar {
  display: flex; align-items: center; padding: 0 10px; text-decoration: none;
  color: var(--ink-soft); font-size: 1.15rem; line-height: 1;
}
.buscador-limpiar:hover { color: var(--ink); }
.buscador-ir {
  border: 0; border-left: 1px solid var(--border); background: var(--gold-ink); color: #fff;
  font-size: 0.8rem; font-weight: 600; padding: 0 18px; cursor: pointer;
}
.buscador-ir:hover { filter: brightness(1.08); }

/* ---- LISTAS RAPIDAS ---- */
.listas-rapidas { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 14px; }
.listas-titulo {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-soft); margin-right: 2px;
}
.lista-chip {
  font-size: 0.74rem; font-weight: 600; padding: 4px 11px; border-radius: 999px;
  text-decoration: none; border: 1px solid transparent; opacity: .78;
  transition: opacity .12s ease, transform .12s ease;
}
.lista-chip:hover { opacity: 1; transform: translateY(-1px); }
.lista-chip.activo { opacity: 1; border-color: currentColor; }


/* ==================== LO QUE SE QUEDA PEGADO ARRIBA ====================
   Alfredo: "que no solo se fije la prima, sino el titulo y el total de la sumatoria".
   Al bajar por un mes con muchas ventas se perdia de vista cuanto llevaba sumado y de
   que mes era la lista. Ahora el titulo, los selectores y los totales se quedan
   pegados arriba, y el encabezado de columnas justo debajo de ellos. */
.sheet-fijo {
  position: sticky; top: 0; z-index: 40;
  background: var(--surface-solid);
  margin: 0 -18px 0; padding: 14px 18px 10px;
  border-bottom: 1px solid var(--border);
}
.sheet-fijo .sheet-head { margin-bottom: 10px; }
.sheet-fijo .sheet-totales { margin-bottom: 0; }
/* OJO con el encabezado de la tabla: el cuadro tiene SU PROPIO marco con barra de
   desplazamiento (.sheet-wrap), asi que el encabezado se pega al borde de ESE marco, no
   al de la ventana. Por eso va en cero. Empujarlo con el alto del bloque de arriba (que
   es lo que se intento primero) lo dejaba flotando encima de la segunda fila, que es
   justo lo que se veia mal. */
table.sheet thead tr.sheet-grupos th { top: 0; }
/* Un pixel de solape a proposito: el alto de la fila de arriba se mide entero pero el
   navegador la dibuja con fracciones; al redondear quedaba una rendija de medio pixel
   entre las dos filas por la que se veian pasar las ventas. Mejor un pelo montada que
   una hendija transparente. */
table.sheet thead tr:last-child th { top: calc(var(--alto-grupos, 27px) - 1px); }

/* ==================== LA SEPARACION ENTRE MESES ====================
   Una franja con el nombre del mes que cruza el cuadro entero. Con la banda vertical
   sola habia que buscarla con la vista; asi el corte se ve de un golpe, sobre todo al
   usar una lista rapida, donde salen meses de todo el ano seguidos. */
/* Cierra el bloque del mes: linea gruesa DEBAJO, no encima, porque ahora va al final. */
.sheet tr.fila-mes > td {
  background: var(--surface-3);
  border-bottom: 2px solid var(--gold-ink);
  padding: 7px 12px;
  position: sticky; left: 0;
}
.sheet tr.fila-mes .mes-nombre {
  font-size: 0.74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink);
}
.sheet tr.fila-mes .mes-cuantas { font-size: 0.72rem; color: var(--ink-soft); margin-left: 10px; font-weight: 500; }

/* La lista cerrada del buscador ocupa el mismo hueco que la caja de texto. */
.buscador-lista {
  flex: 1; border: 0; background: transparent; color: var(--ink);
  font-size: 0.87rem; padding: 9px 10px; cursor: pointer;
}
.buscador-lista:focus { outline: none; }

/* La tarjeta del cuadro no lleva el efecto de cristal ni el salto al pasar el cursor:
   los dos crean un marco propio que le rompe el "pegado" al titulo y a los totales. */
.card.card-hoja { backdrop-filter: none; -webkit-backdrop-filter: none; }
.card.card-hoja:hover { transform: none; }

/* ==================== LA PILA DE AVISOS ====================
   Como las notificaciones del telefono: el aviso de adelante completo y los de atras
   asomando por debajo, un poco mas estrechos y bajados. Una sola X arriba a la derecha
   los cierra TODOS — no hay que ir cerrando de uno en uno. */
.love-popup-pila { position: relative; width: 340px; padding-top: 6px; }
.love-popup-capas { position: relative; }
/* Las capas se apilan una encima de otra; el desplazamiento lo pone --capa. */
.love-popup-capas > .love-popup-card { position: relative; }
.love-popup-capas > .love-popup-card-atras {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 100%;
  transform: translateY(calc(var(--capa) * 7px)) scale(calc(1 - var(--capa) * 0.035));
  opacity: calc(1 - var(--capa) * 0.28);
  z-index: 0; pointer-events: none;
}
.love-popup-capas > .love-popup-card[style*="--capa:0"] { z-index: 3; }
.love-popup-pila .love-popup-close { top: -2px; right: 4px; z-index: 5; }
.love-popup-barra {
  display: flex; align-items: center; gap: 10px;
  padding: 0 34px 6px 4px;
}
.love-popup-cuenta { font-size: 0.72rem; color: var(--ink-soft); font-weight: 600; }
.love-popup-siguiente {
  margin-left: auto; background: none; border: none; cursor: pointer;
  font-size: 0.72rem; color: var(--ink-soft); padding: 2px 6px; border-radius: 6px;
}
.love-popup-siguiente:hover { background: rgba(120,120,140,0.14); color: var(--ink); }


/* ---- TITULO DEL RANKING ---- */
/* Una palabra grande y el periodo en una pastilla al lado, en vez de la frase larga
   "Ranking general — Enero a Diciembre 2026" que ademas repetia los botones de al lado. */
.titulo-ranking { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.titulo-ranking h3 { margin: 0; }
.chip-periodo {
  font-size: 0.76rem; font-weight: 600; letter-spacing: .01em;
  color: var(--ink-soft); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 999px; padding: 3px 11px;
  font-variant-numeric: tabular-nums;
}
/* El "Agentes · 2026" del lado: mismo aire que la pastilla del ano, mas discreto. */
.podium-head { align-items: center; gap: 9px; }
.podium-head .podio-detalle {
  font-size: 0.73rem; font-weight: 600; color: var(--ink-soft);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 3px 11px;
  font-variant-numeric: tabular-nums;
}

/* ---- EL RESUMEN OSCURO DE MIS VENTAS ---- */
/* Mismo recuadro que abre Top Producers, un poco mas bajo: aqui no hay barra de meta. */
.hero-ventas { padding: 24px 28px; border-radius: 18px; }
.hero-ventas .hero-amount { font-size: 2.3rem; margin: 4px 0 2px; }
.hero-ventas .hero-goal .num { font-size: 1.7rem; }

/* La etiqueta de una venta que entro por el webhook de GHL. */
.chip-completar.chip-ghl {
  background: rgba(0,209,255,.16); color: #0a5b78; border-color: rgba(0,209,255,.5);
}

/* La marca de "estás mirando la hoja de otro, no puedes escribir". */
.chip-lectura {
  font-size: 0.66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-soft); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 3px 10px; margin-left: 8px; vertical-align: 2px;
}
/* Las casillas apagadas se ven planas, sin invitar a escribir en ellas. */
.sheet .ed-sel:disabled, .sheet .ed-fecha-txt:disabled {
  opacity: .8; cursor: default; border-color: transparent; background: transparent;
}

/* ---- EL CANDADO DE LA HOJA DE OTRO ---- */
.chip-candado {
  display: inline-flex; align-items: center; gap: 5px; vertical-align: 2px;
  font-size: 0.66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-soft); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 3px 11px; margin-left: 8px; cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.chip-candado:hover { border-color: var(--gold-ink); color: var(--ink); }
.chip-candado.abierto {
  background: rgba(255,193,7,.20); color: #7a5600; border-color: rgba(255,193,7,.6);
}

/* ---- PANEL TEMPORAL PARA ELEGIR EL SONIDO ---- */
.probar-sonidos { display: grid; gap: 8px; }
.probar-sonido {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px;
  padding: 11px 14px; cursor: pointer; color: var(--ink);
}
.probar-sonido:hover { border-color: var(--gold-ink); }
.probar-sonido .num {
  width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%;
  background: var(--gold-ink); color: #fff; font-size: 0.75rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.probar-sonido .txt { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.probar-sonido .txt strong { font-size: 0.9rem; font-weight: 600; }
.probar-sonido .txt small { font-size: 0.78rem; color: var(--ink-soft); }
.probar-sonido .play { color: var(--ink-soft); font-size: 0.9rem; }

/* El renglón del total usa las mismas columnas fijas que las ventas, así que hereda su
   pegado; solo hace falta darle el fondo del renglón para que no se transparente. */
.sheet tr.fila-total-mes > .col-poliza,
.sheet tr.fila-total-mes > .col-cliente,
.sheet tr.fila-total-mes > .col-prima { background: var(--surface-2); }
.sheet tr.fila-total-mes .td-total-etiqueta { text-align: left; padding-left: 4px; }

/* ---- LAS FECHAS EN FORMATO DE ESTADOS UNIDOS ---- */
/* La caja visible es de texto (mm/dd/aaaa); el calendario nativo vive escondido detras
   del botoncito y solo se usa para elegir con clic. */
.sheet .td-fecha { white-space: nowrap; }
.sheet .ed-fecha-txt {
  border: 1px solid transparent; border-radius: 6px; background: transparent;
  color: var(--ink); font-size: 0.78rem; font-family: inherit; padding: 2px 4px;
  width: 86px; font-variant-numeric: tabular-nums;
}
.sheet .ed-fecha-txt:hover { border-color: var(--border); }
.sheet .ed-fecha-txt:focus { outline: none; border-color: var(--gold-ink); background: var(--surface-solid); }
.sheet .ed-fecha-txt.ed-ok { border-color: var(--green); }
.sheet .ed-fecha-txt.ed-mal { border-color: var(--red); }
.sheet .btn-calendario {
  background: none; border: none; cursor: pointer; color: var(--ink-soft);
  padding: 2px 3px; vertical-align: -2px;
}
.sheet .btn-calendario:hover { color: var(--ink); }
.sheet .btn-calendario:disabled { opacity: .4; cursor: default; }
/* El nativo no se ve, pero tiene que EXISTIR en el flujo para que showPicker() ancle el
   calendario a la celda. Con display:none algunos navegadores no lo abren. */
.sheet .ed-fecha-nativa {
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0;
}

/* En la hoja de otro, el aviso de faltan datos SOLO informa: no es boton, no abre nada. */
.chip-completar.chip-solo-aviso { cursor: default; opacity: .75; }

/* Las cajas de fecha: la regla generica de los input del cuadro las inflaba a todo el
   ancho de la columna con borde gordo — por eso quedaba ese espacio vacio al lado. Se
   les devuelve su tamano justo, y la columna se encoge a lo que de verdad ocupan. */
.card table.sheet td input.ed-fecha-txt {
  width: 86px; padding: 2px 4px; border: 1px solid transparent; border-radius: 6px;
  background: transparent; font-size: 0.78rem;
}
.card table.sheet td input.ed-fecha-txt:hover { border-color: var(--border); }
.card table.sheet td input.ed-fecha-txt:focus { border-color: var(--gold-ink); background: var(--surface-solid); }
.sheet .td-fecha { width: 118px; }

/* Los rotulos PREVENTA y POSTVENTA, siempre a la vista.
   Primer intento fallido: centrados con un "left" y un "right" pegajosos a la vez — el
   navegador no puede cumplir los dos y el de POSTVENTA se quedaba escondido.
   Ahora es simple: cada rotulo arranca al PRINCIPIO de su banda (no en el centro, que
   con el cuadro ancho caia fuera de la pantalla), y al recorrer el cuadro se queda
   pegado justo despues de las columnas fijas (que terminan a los ~410px) hasta que su
   banda se acaba. Asi POSTVENTA aparece en cuanto asoma Estatus, que es donde empieza. */
/* Con los anchos fijos el cuadro entero cabe en una pantalla grande, asi que los
   rotulos vuelven a su centro de toda la vida y no hace falta recolocarlos. */
.sheet thead tr.sheet-grupos th { text-align: center; }
.sheet thead tr.sheet-grupos th > span.rotulo-grupo { display: inline; padding: 0; }

/* La columna del mes tambien en el encabezado: sin esto la banda verde subia por las
   filas y se cortaba en seco al llegar a los titulos. */
/* La banda verde llega SOLO hasta las filas de ventas: el encabezado queda gris
   entero, sin cuadrito verde (Alfredo lo pidio asi despues de probar lo contrario). */
.sheet tbody .td-mes { border-top: 0 !important; }


/* La versión desplegada, chiquita al pie del menú. */
.version-app { margin-top: auto; padding: 8px 14px 2px; font-size: 0.62rem; color: var(--ink-soft); opacity: .6; font-variant-numeric: tabular-nums; }
body.side-collapsed .version-app { display: none; }

/* Los desplegables llenan su columna exacta: ni se salen (era el "comido") ni dejan
   aire de mas. Y el aire lateral de las celdas baja un poco: era parte del espacio
   muerto entre el nombre y la prima. */
.sheet .ed-sel { width: 100%; box-sizing: border-box; }
table.sheet th, table.sheet td { padding-left: 8px; padding-right: 8px; }

/* El titulo de Top Producers, dentro del recuadro negro. */
.hero-titulo { margin: 0 0 10px; font-size: 1.55rem; font-weight: 700; letter-spacing: -0.02em; color: #fff; }

/* ==================== LA CAMPANITA ==================== */
.campana {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink-soft);
  text-decoration: none; transition: color .12s, border-color .12s;
}
.campana:hover { color: var(--ink); border-color: var(--gold-ink); }
.campana-num {
  position: absolute; top: -5px; right: -6px; min-width: 18px; height: 18px;
  border-radius: 999px; padding: 0 5px;
  background: #E0314A; color: #fff; font-size: 0.66rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--surface);
}
.notif-cab { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.notif-titulo { margin: 0; font-weight: 600; font-size: 0.94rem; }
.notif-meta { margin: 2px 0 0; font-size: 0.76rem; color: var(--ink-soft); }
.notif-punto { width: 10px; height: 10px; border-radius: 50%; background: #E0314A; flex-shrink: 0; margin-top: 5px; }
.notif-cuerpo {
  margin: 10px 0 0; padding: 8px 12px; border-left: 3px solid var(--border);
  color: var(--ink-soft); font-size: 0.86rem; white-space: pre-wrap;
}
.btn-liga { background: none; border: none; color: var(--ink-soft); font-size: 0.78rem; cursor: pointer; padding: 0; text-decoration: underline; }
.btn-liga:hover { color: var(--ink); }

/* La sugerencia que salta al escribir @ en la nota de underwriter. */
.sugerencia-arroba {
  position: fixed; z-index: 10000; cursor: pointer;
  background: var(--surface-solid); color: var(--ink);
  border: 1px solid var(--gold-ink); border-radius: 8px;
  padding: 6px 12px; font-size: 0.8rem; font-weight: 600;
  box-shadow: 0 6px 18px rgba(20,20,30,.18);
}
.sugerencia-arroba:hover { background: var(--surface-2); }

/* La campana del menu lateral, presente en todas las paginas. */
.campana-menu { width: 32px; height: 32px; margin-left: auto; margin-right: 6px; flex-shrink: 0; }
body.side-collapsed .campana-menu { display: none; }
.campana-num[hidden] { display: none !important; }
@keyframes campanaSacude {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(-18deg); } 30% { transform: rotate(14deg); }
  45% { transform: rotate(-10deg); } 60% { transform: rotate(6deg); } 75% { transform: rotate(-3deg); }
}
.campana-sacude { animation: campanaSacude .8s ease-in-out; transform-origin: top center; }

/* ==================== LA BANDEJA DE NOTIFICACIONES ====================
   Mezcla de Ventas On Fire (tarjetas con vida, degradado violeta-rosa) y Agent PRO IA
   (hilo tipo chat). La conversacion no vive aqui: el boton lleva al cuadro. */
.notif-vacia { text-align: center; padding: 44px 20px; color: var(--ink-soft); }
.notif-vacia-icono { display: inline-flex; width: 72px; height: 72px; border-radius: 50%;
  align-items: center; justify-content: center; margin-bottom: 12px;
  background: var(--surface-2); border: 1px solid var(--oro-borde); color: var(--gold-ink); }
.notif-tarjeta {
  display: flex; background: var(--surface-solid); border: 1px solid var(--border);
  border-radius: 16px; margin-bottom: 14px; overflow: hidden;
  box-shadow: 0 2px 10px rgba(20,20,35,.05);
}
/* La franja lateral se quito (Alfredo: "solo el borde dorado sutil"). */
.notif-franja { display: none; }
.notif-viva {
  border: 1px solid var(--oro-borde);
  box-shadow: 0 1px 3px rgba(224,172,42,0.20), 0 4px 12px rgba(224,172,42,0.10);
}
.notif-cuerpo-t { flex: 1; padding: 16px 20px; min-width: 0; }
.notif-cab { display: flex; gap: 12px; align-items: center; }
.notif-avatar { width: 40px; height: 40px; font-size: 0.85rem; flex-shrink: 0; }
.notif-titulo { margin: 0; font-weight: 700; font-size: 0.96rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.notif-poliza { font-size: 0.7rem; font-weight: 600; color: var(--ink-soft);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px; }
.notif-meta { margin: 2px 0 0; font-size: 0.75rem; color: var(--ink-soft); }
.notif-punto { width: 10px; height: 10px; border-radius: 50%; background: var(--oro-borde); flex-shrink: 0; }
.notif-hilo { margin: 12px 0 0; display: flex; flex-direction: column; gap: 8px; }
.notif-item { display: flex; gap: 10px; padding: 9px 12px; border-radius: 12px; background: var(--surface-2); }
/* Sin gris: todos los avisos del hilo van del mismo blanco hueso. */
.notif-emoji { font-size: 1rem; line-height: 1.4; }
.notif-item-titulo { margin: 0; font-size: 0.86rem; }
.notif-item-cita { margin: 3px 0 0; font-size: 0.8rem; color: var(--ink-soft); white-space: pre-wrap; }
.notif-item-meta { font-size: 0.7rem; color: var(--ink-soft); }
.notif-acciones { display: flex; gap: 12px; align-items: center; margin-top: 12px; }
/* El boton de responder, sobrio como los de Agent PRO IA: el negro de la casa. */
.notif-btn-responder { font-size: 0.82rem; padding: 8px 16px; }
.notif-seccion-agente { display: flex; align-items: center; gap: 10px; margin: 22px 0 10px; }
.notif-seccion-agente h3 { margin: 0; font-size: 1rem; }
.notif-seccion-agente .avatar-circle { width: 30px; height: 30px; font-size: 0.72rem; }
.notif-seccion-cuenta { min-width: 20px; height: 20px; border-radius: 999px; padding: 0 6px;
  background: var(--ink); color: var(--ink-inv); font-size: 0.7rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; }

/* La campana flotante, arriba a la derecha en TODAS las paginas, con el mismo borde
   dorado de los botones activos del menu. */
.campana-flotante {
  position: fixed; top: 16px; right: 20px; z-index: 90;
  width: 36px; height: 36px;
  background: var(--surface-solid);
  border: 1px solid var(--oro-borde);
  box-shadow: 0 1px 3px rgba(224,172,42,0.20), 0 4px 12px rgba(224,172,42,0.10);
}

/* La fila a la que te trajo la campanita, resaltada. OJO: el color va SOBRE un fondo
   solido — un resaltado transparente le quitaba la opacidad a las columnas fijas y se
   veia el contenido de abajo montado encima (paso, con captura de Alfredo). */
.sheet tr.fila-enfocada > td {
  background: linear-gradient(rgba(124,92,255,.12), rgba(124,92,255,.12)) var(--surface-solid) !important;
}

/* El popup translucido de la campanita, hermano del de "ve a darle amor". */
.campana-popup {
  position: fixed; top: 62px; right: 20px; z-index: 9999; width: 320px;
  background: var(--glass, rgba(255,255,255,.82));
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid var(--oro-borde); border-radius: 14px;
  box-shadow: 0 10px 34px rgba(20,20,35,.18);
  padding: 14px 16px 12px;
  animation: love-popup-in .25s ease-out;
}
.campana-popup-x {
  position: absolute; top: 6px; right: 9px; background: none; border: none; cursor: pointer;
  font-size: 1.1rem; line-height: 1; color: var(--ink-soft); padding: 3px 6px; border-radius: 50%;
}
.campana-popup-x:hover { background: rgba(120,120,140,.14); color: var(--ink); }
.campana-popup-titulo { font-weight: 700; font-size: 0.9rem; margin-bottom: 8px; }
.campana-popup-fila { display: flex; gap: 8px; align-items: flex-start; margin: 5px 0; }
.campana-popup-fila p { margin: 0; font-size: 0.82rem; color: var(--ink); }
.campana-popup-ver {
  display: inline-block; margin-top: 8px; font-size: 0.8rem; font-weight: 600;
  color: var(--gold-ink); text-decoration: none;
}
.campana-popup-ver:hover { text-decoration: underline; }

/* ---- EL RESPIRO ENTRE MESES ----
   En "Todo el año" los bloques iban pegados y la banda de junio tocaba la de mayo. Este
   renglon vacio corta la tabla en islas: sin fondo, sin bordes, nada que pintar. */
.sheet tr.fila-separa-mes > td {
  height: 22px; padding: 0 !important; border: 0 !important;
  background: transparent !important; box-shadow: none !important;
}
.sheet tr.fila-separa-mes:hover > td { background: transparent !important; }
/* Y cada banda de mes cierra redondeada abajo, para que el corte se vea a proposito. */
.sheet .td-mes { border-bottom-left-radius: 10px; border-top-left-radius: 10px; }

/* ==================== MI PRODUCCION, ELEGANTE ==================== */
.hero-prod { padding: 26px 30px; }
.hero-prod .hero-prod-kpis { display: flex; gap: 34px; margin-top: 16px; flex-wrap: wrap; }
.hero-prod .hero-prod-kpis .lab {
  display: block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 1.2px;
  color: rgba(255,255,255,.55); margin-bottom: 3px;
}
.hero-prod .hero-prod-kpis .val { font-size: 1.6rem; font-weight: 700; color: #fff; letter-spacing: -0.5px; }
.hero-prod-mandos { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.hero-prod-selects { display: flex; gap: 8px; }
.hero-prod-selects select {
  background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.22);
  border-radius: 9px; padding: 7px 10px; font-size: 0.82rem;
}
.hero-prod-selects select option { color: #1A1A1E; }

/* El aviso del 1ro de mes: escribir las metas nuevas. */
.aviso-metas {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border: 1px solid var(--oro-borde);
  box-shadow: 0 1px 3px rgba(224,172,42,0.20), 0 4px 12px rgba(224,172,42,0.10);
}

/* Las metas, debajo de la grafica. */
.metas-fila { margin-top: 18px; border-top: 1px solid var(--border-soft); padding-top: 16px; }
.metas-form { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.meta-caja .lab {
  display: block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-soft); margin-bottom: 5px;
}
.meta-monto {
  display: flex; align-items: center; gap: 4px; font-weight: 700; color: var(--ink);
  border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; background: var(--surface-2);
}
.meta-monto input {
  border: 0; background: transparent; font: inherit; color: inherit; width: 110px; outline: none;
}
.metas-nota { margin: 10px 0 0; font-size: 0.78rem; color: var(--ink-soft); }

/* ==================== EL EQUIPO, ELEGANTE ==================== */
.grafica-mandos { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 6px; }
.grafica-mandos select {
  border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2);
  color: var(--ink); font-size: 0.82rem; padding: 6px 10px;
}
.detalle-chips { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 4px; }
.chip-dato {
  display: flex; flex-direction: column; gap: 1px;
  border: 1px solid var(--border); border-radius: 12px; padding: 9px 16px; background: var(--surface-2);
}
.chip-dato .lab { font-size: 0.66rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-soft); }
.chip-dato .val { font-size: 1.05rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.chip-dato.chip-meta { border-color: var(--oro-borde); }
.equipo-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.equipo-mandos { display: flex; gap: 10px; align-items: center; }
.equipo-mandos select { border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); color: var(--ink); font-size: 0.82rem; padding: 6px 10px; }
.equipo-resumen { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 14px 0 6px; }
.meta-barra { flex: 1 1 160px; height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
/* Dentro de las tarjetas (caja en columna) el flex-basis se vuelve ALTURA y la barrita
   se inflaba a un ovalo de 160px. Aqui la barra es plana: 6px y ancho completo. */
.panel-meta-caja .meta-barra { flex: none; width: 100%; height: 6px; }
.meta-barra-in { height: 100%; border-radius: 999px; background: var(--oro-borde); transition: width .4s ease; }
.equipo-lista { margin-top: 8px; }
.equipo-fila {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border-bottom: 1px solid var(--border-soft); font-size: 0.92rem;
}
.equipo-fila .avatar-circle { width: 30px; height: 30px; font-size: 0.72rem; flex-shrink: 0; }
.equipo-fila:last-child { border-bottom: 0; }
.equipo-fila .pos { width: 22px; color: var(--ink-soft); font-size: 0.78rem; font-weight: 700; }
.equipo-fila .nom { flex: 1; font-weight: 500; }
.equipo-fila .mes { font-variant-numeric: tabular-nums; font-weight: 500; }
.equipo-fila .anio { width: 140px; text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.equipo-fila .anio b { font-weight: 700; }
.equipo-fila .anio small, .arbol-fila .anio small { font-size: 0.68rem; }
.equipo-arbol { margin-top: 8px; }
.arbol-fila {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px;
  border-bottom: 1px solid var(--border-soft); font-size: 0.9rem; cursor: default;
}
.arbol-fila[data-abre] { cursor: pointer; }
.arbol-fila[data-abre]:hover { background: var(--hover-suave); }
.arbol-flecha { width: 16px; color: var(--ink-soft); }
.arbol-flecha.vacia::before { content: "·"; opacity: .4; }
.arbol-fila .nom { flex: 1; font-weight: 600; }
.arbol-agencia {
  font-size: 0.68rem; font-weight: 600; color: var(--ink-soft);
  border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; margin-left: 6px;
}
.arbol-fila .mes { font-variant-numeric: tabular-nums; font-weight: 700; }
.arbol-fila .anio { width: 130px; text-align: right; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.arbol-hijos { margin-left: 22px; border-left: 1px dashed var(--border); }

/* La comparacion meta-produccion, una debajo de la otra. */
.detalle-comparo { min-width: 240px; }
.comparo-fila { display: flex; justify-content: space-between; gap: 16px; font-size: 0.84rem; }
.comparo-fila b { font-variant-numeric: tabular-nums; }
.detalle-comparo .meta-barra { margin: 6px 0 3px; }
.comparo-pct { font-size: 0.72rem; color: var(--ink-soft); }

/* ==================== EL PANEL DE METAS, ESTILO IA ==================== */
.panel-metas {
  display: flex; gap: 14px; align-items: stretch; flex-wrap: wrap;
  margin-top: 18px; border-top: 1px solid var(--border-soft); padding-top: 16px;
}
.panel-meta-caja {
  flex: 1 1 260px; max-width: 380px;
  border: 1px solid var(--border); border-radius: 14px; padding: 14px 18px;
  background: var(--surface-2); display: flex; flex-direction: column; gap: 7px;
}
.pm-titulo { font-size: 0.68rem; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-soft); font-weight: 700; }
.pm-fila { display: flex; justify-content: space-between; align-items: center; gap: 14px; font-size: 0.9rem; }
.pm-fila b { font-variant-numeric: tabular-nums; font-size: 1.02rem; }
.pm-meta { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pm-meta input {
  border: 0; border-bottom: 1px dashed var(--oro-borde); background: transparent;
  font: inherit; color: inherit; width: 92px; text-align: right; outline: none; padding: 1px 2px;
}
.pm-meta input:disabled { border-bottom-color: transparent; color: var(--ink); }
.pm-pct { font-size: 0.72rem; color: var(--ink-soft); }
.panel-metas > .btn { align-self: center; }
.arbol-principal { border-color: var(--oro-borde); color: var(--gold-ink); }

/* El boton claro dentro de los encabezados negros. */
.btn-hero { background: #fff; color: var(--navy-950); }
.btn-hero:hover { background: #f0f0ee; }

/* El semáforo del % de issue: quien cierra mucho y emite poco, en rojo, para la lupa. */
.pct-issue {
  width: 84px; text-align: center; font-size: 0.72rem; font-weight: 700;
  border-radius: 999px; padding: 3px 8px; flex-shrink: 0; font-variant-numeric: tabular-nums;
}
.pct-issue.pct-alto  { background: var(--est-emitida-bg);   color: var(--est-emitida-tx); }
.pct-issue.pct-medio { background: var(--est-aprobada-bg);  color: var(--est-aprobada-tx); }
.pct-issue.pct-bajo  { background: var(--est-rojo-bg);      color: var(--est-rojo-tx); }
.pct-issue.pct-nada  { background: var(--surface-3); color: var(--ink-soft); }

/* El contador de días en trámite: se detiene (verde) al emitirse; ámbar 21+, rojo 30+. */
.td-dias { text-align: center; }
.dias { font-size: 0.76rem; font-weight: 700; font-variant-numeric: tabular-nums;
  border-radius: 999px; padding: 3px 9px; background: var(--surface-3); color: var(--ink-soft); }
.dias.dias-ambar { background: var(--est-aprobada-bg); color: var(--est-aprobada-tx); }
.dias.dias-rojo  { background: var(--est-rojo-bg); color: var(--est-rojo-tx); }
.dias.dias-hecho { background: var(--est-emitida-bg); color: var(--est-emitida-tx); }
.dias-nada { color: var(--ink-soft); }

/* Las estadísticas del equipo: caída, prima promedio, días a issue y mezcla. */
.equipo-stats { margin-top: 8px; }
.stats-fila {
  display: grid; grid-template-columns: 1fr 64px 74px 74px 104px 96px 1.2fr;
  gap: 10px; align-items: center; padding: 9px 12px;
  border-bottom: 1px solid var(--border-soft); font-size: 0.88rem;
}
.stats-fila:last-child { border-bottom: 0; }
.stats-fila.stats-cab {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-soft); font-weight: 700; border-bottom: 1px solid var(--border);
}
.stats-fila .nom { font-weight: 500; }
.stats-fila .mezcla { color: var(--ink-soft); font-size: 0.8rem; }
.stat-bien  { color: var(--est-emitida-tx); }
.stat-medio { color: var(--est-aprobada-tx); }
.stat-mal   { color: var(--est-rojo-tx); }

/* ==================== LICENCIAS, REDISEÑO ==================== */
/* Tabla compacta: fuera los espacios inutiles de la version vieja. */
.lic-card { padding-top: 16px; }
.licencias-tabla .sheet th { padding: 8px 10px; font-size: 0.72rem; }
.licencias-tabla .sheet td { padding: 5px 10px; }
.licencias-tabla input[type="text"], .licencias-tabla input[type="date"] {
  padding: 6px 8px; font-size: 0.8rem;
}
.licencias-tabla .lic-nombre-estado { color: var(--ink-soft); font-size: 0.78rem; }
.lic-btn-guardar { padding: 5px 10px; font-size: 0.75rem; white-space: nowrap; }
.lic-punto {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  vertical-align: baseline; margin-right: 2px;
}
.lic-hero-nota { font-size: 0.7rem; color: rgba(255,255,255,.55); text-align: right; max-width: 220px; }

/* EL TITILEO. Vencida: parpadea en rojo hasta que se cargue una nueva (la clase se
   calcula con la fecha, asi que al guardar una vigente se apaga sola). Residente por
   vencer: parpadea en dorado avisando el Continuing Education. Se anima un halo
   interior, no el fondo, para no pelear con los colores de fila ya existentes. */
@keyframes lic-titileo-rojo {
  0%, 100% { box-shadow: inset 0 0 0 2px rgba(214, 69, 69, 0.9); }
  50%      { box-shadow: inset 0 0 0 2px rgba(214, 69, 69, 0.12); }
}
.sheet tr.lic-titila > td { animation: lic-titileo-rojo 1.2s ease-in-out infinite; }
@keyframes lic-titileo-oro {
  0%, 100% { box-shadow: inset 0 0 0 2px rgba(224, 172, 42, 0.9); }
  50%      { box-shadow: inset 0 0 0 2px rgba(224, 172, 42, 0.12); }
}
.sheet tr.lic-titila-ce > td { animation: lic-titileo-oro 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .sheet tr.lic-titila > td { animation: none; box-shadow: inset 0 0 0 2px rgba(214,69,69,.85); }
  .sheet tr.lic-titila-ce > td { animation: none; box-shadow: inset 0 0 0 2px rgba(224,172,42,.85); }
}

/* La pildora del Continuing Education en la fila del estado de residencia. */
.lic-ce-pill {
  display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap;
  background: rgba(224, 172, 42, 0.14); color: var(--gold-ink);
  border: 1px solid var(--oro-borde);
}
.license-row-expired .lic-ce-pill { background: rgba(214,69,69,.12); color: var(--red); border-color: rgba(214,69,69,.5); }

/* El aviso bajo el encabezado (resultado de la lectura del PDF). */
.lic-aviso {
  margin: 0 0 14px; padding: 11px 16px; border-radius: 12px; font-size: 0.85rem;
  background: var(--surface); border: 1px solid var(--oro-borde);
  box-shadow: 0 1px 3px rgba(224,172,42,0.20), 0 4px 12px rgba(224,172,42,0.10);
}
.lic-aviso-mal { border-color: rgba(214,69,69,.55); box-shadow: 0 1px 3px rgba(214,69,69,.18); color: var(--red); }

/* La fila recien llenada desde el PDF: un brillo dorado que se apaga solo. */
@keyframes lic-brillo {
  0% { box-shadow: inset 0 0 0 3px rgba(224, 172, 42, 0.95); }
  100% { box-shadow: inset 0 0 0 3px rgba(224, 172, 42, 0); }
}
.sheet tr.lic-recien-leida > td { animation: lic-brillo 2.6s ease-out 3; }

/* Licencias: columnas a medida fija — el hueco sobrante muere en la ultima columna
   vacia en vez de inflar el espacio entre el estado y el numero de licencia. */
.licencias-tabla .lic-c-estado { width: 1px; white-space: nowrap; } /* 1px + nowrap = "lo justo del contenido" en layout auto */
.licencias-tabla .lic-c-num { width: 175px; }
.licencias-tabla .lic-c-fecha { width: 165px; }
.licencias-tabla .lic-c-res { width: 82px; text-align: center; }
.licencias-tabla .lic-c-status { width: 150px; white-space: nowrap; }
.licencias-tabla .lic-c-btn { width: 92px; }

/* La tabla de licencias NO es la hoja de ventas: fuera el min-width gigante (2358px)
   y el table-layout fijo que heredaba de table.sheet — eso era lo que estiraba el
   hueco entre el estado y el numero y empujaba columnas fuera de la pantalla. */
.licencias-tabla table.sheet { table-layout: auto; min-width: 0; width: 100%; }

/* Licencias: la cabecera pegajosa a top 0 — heredaba los 26px reservados para la
   banda PREVENTA/POSTVENTA de la hoja de ventas, que aqui no existe, y al hacer
   scroll las filas asomaban cortadas por esa franja de arriba. */
.licencias-tabla .sheet thead tr:last-child th { top: 0; }
/* Y la fecha mal escrita se marca en rojo hasta que sea una fecha real. */
.licencias-tabla .lic-fecha-mala { border-color: var(--red) !important; color: var(--red); }

/* El telon del cajon del menu: solo existe en ventana estrecha con el cajon abierto.
   Va justo debajo del cajon (z 80) y encima de todo lo demas. */
.menu-telon { display: none; }
@media (max-width: 900px) {
  body.side-collapsed .menu-telon {
    display: block; position: fixed; inset: 0;
    background: rgba(10, 12, 20, 0.45); z-index: 79;
  }
}

/* ==================== LICENCIAS DEL EQUIPO (ADMIN) ==================== */
.adm-lic-agente { border-bottom: 1px solid var(--border-soft); }
.adm-lic-agente:last-of-type { border-bottom: 0; }
.adm-lic-agente > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px;
  padding: 10px 8px; border-radius: 10px;
}
.adm-lic-agente > summary::-webkit-details-marker { display: none; }
.adm-lic-agente > summary:hover { background: var(--surface-soft); }
.adm-lic-agente[open] > summary { background: var(--surface-soft); }
.adm-lic-nombre { font-weight: 600; }
.adm-lic-agente.adm-lic-alerta > summary { box-shadow: inset 3px 0 0 var(--red); }
.adm-lic-chips { display: flex; gap: 6px; margin-left: auto; }
.adm-chip {
  font-size: 0.7rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
.adm-chip-mal { background: rgba(214,69,69,.12); color: var(--red); border: 1px solid rgba(214,69,69,.4); }
.adm-chip-medio { background: rgba(229,168,0,.12); color: #916800; border: 1px solid rgba(229,168,0,.4); }
.adm-chip-bien { background: rgba(46,160,90,.10); color: var(--green); border: 1px solid rgba(46,160,90,.35); }
.adm-lic-proxima { color: var(--ink-soft); font-size: 0.78rem; white-space: nowrap; }
.adm-lic-tabla { width: 100%; margin: 2px 0 12px; border-collapse: collapse; }
.adm-lic-tabla th {
  text-align: left; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--ink-soft); padding: 6px 10px; border-bottom: 1px solid var(--border-soft);
}
.adm-lic-tabla td { padding: 6px 10px; font-size: 0.84rem; border-bottom: 1px solid var(--border-soft); }
.adm-lic-tabla tr:last-child td { border-bottom: 0; }

/* La banda de cada agente en "Ventas de todos": oscura como las bandas de mes, con el
   puesto delante — el 1 es el que mas ha vendido en el periodo. La separacion entre
   cuadros se nota sola: banda, cuadro, aire, banda del siguiente. */
.hoja-apilada { margin-bottom: 30px; }
.hoja-apilada-cab {
  background: linear-gradient(180deg, var(--navy-700), var(--navy-950));
  border-radius: 12px; padding: 10px 14px; margin-bottom: 8px;
  align-items: center;
}
.hoja-apilada-cab a { color: #fff; font-size: 1rem; }
.hoja-apilada-cab .apilada-datos { color: rgba(255,255,255,.8); margin-left: auto; font-weight: 600; }
.apilada-puesto {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,.1); border: 1px solid var(--oro-borde);
  color: #FFD569; font-weight: 800; font-size: 0.8rem;
}

/* El "Agregar estado o territorio" al pie de cada tabla de licencias. */
.lic-agrega { margin-top: 10px; }
.lic-agrega > summary {
  list-style: none; cursor: pointer; color: var(--ink-soft); font-size: 0.82rem;
  font-weight: 600; padding: 6px 4px; display: inline-block; border-radius: 8px;
}
.lic-agrega > summary::-webkit-details-marker { display: none; }
.lic-agrega > summary:hover { color: var(--ink); }
.lic-agrega-form { display: flex; gap: 8px; align-items: center; padding: 6px 4px; }
.lic-agrega-form select { padding: 7px 10px; border-radius: 9px; font-size: 0.84rem; }