/* ==================================================================
   Nemo Care · Análisis Avanzado

   Tipografía: la del sistema. En Windows resuelve a Segoe UI, que es
   la misma que Daniel ve en VSCode; en Mac a SF Pro. Mono: Consolas.

   Historia de los intentos, para no repetirlos:
     IBM Plex Sans   -> "no me gusta esa"
     Source Sans 3   -> "las letras no cambiaron" (cierto: es casi
                        indistinguible de IBM Plex en pantalla)
     Archivo         -> "no me gusta la letra"
     sistema         -> pedido textual: "la misma que usamos acá contigo"

   Ventaja adicional: sin webfont no hay dependencia de Google Fonts, la
   primera carga es instantánea y no hay parpadeo de texto.
   Prohibidas por instrucción: Inter, Space Grotesk, Sora, Manrope,
   Outfit, Plus Jakarta, DM Sans, Poppins.

   Dirección: editorial y de taller, no SaaS. Color plano en vez de
   degradé, esquinas de 2-3px, reglas de un pixel en vez de sombras.
   Paleta tomada del logo: tres velas azules, grafito y gris de olas.
   ================================================================== */

:root {
  /* --- marca, leída del logo --- */
  --vela-1:  #6aa6dc;
  --vela-2:  #3a7cbe;
  --vela-3:  #2b6382;
  --grafito: #3a3a3a;
  --onda:    #a7a9ac;

  /* --- fondo blanco limpio; la jerarquía la dan las reglas, no los tonos --- */
  --papel:     #ffffff;
  --tarjeta:   #ffffff;
  --hundido:   #f5f5f4;
  --linea:     #e5e4e1;
  --linea-alta:#c9c7c2;

  --tinta:     #2a2a28;
  --tinta-med: #5f5c56;
  --tinta-baja:#8d8880;

  --azul:      #2b6382;
  --azul-tenue:#e6eef4;

  /* --- cromo corporativo: el menú lateral ---
     Recorrido del 2026-09-04, para no repetirlo. Daniel pidió "azul
     claro" y se probaron tres tonos claros: #eaf2f8 (casi blanco),
     #c6dff0 (seguía claro) y #82b8dc (el más azul que aún cumplía AA
     con texto oscuro). Después pidió "un color más oscuro", y ahí la
     única salida es volver a texto claro sobre azul profundo: con texto
     oscuro no se puede bajar más sin romper el contraste de los títulos
     de grupo, que van en 10,5px.

     Contrastes medidos, sobre --corp-fondo #134066:
       blanco        #ffffff  ->  10,75:1   pasa AAA
       --corp-tenue  #a8cfe8  ->   6,53:1   pasa AA para texto chico

     Y --corp #26708f sobre blanco da 5,53:1, así que sirve para el
     título del header, que va en 13px sobre fondo blanco. */
  --corp:       #26708f;   /* acento sobre blanco: títulos del header */
  --corp-fondo: #134066;   /* fondo del menú lateral */
  --corp-hondo: #0d2f4d;   /* un paso más oscuro, para los hover */
  --corp-claro: #1d5480;   /* un paso más claro, para el tab activo */
  --corp-texto: #ffffff;
  --corp-tenue: #a8cfe8;
  --corp-borde: rgba(255, 255, 255, .18);

  --verde: #2f6b4f;
  --ambar: #9a6b12;
  --rojo:  #a83c30;

  --radio: 3px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papel:     #1a1917;
    --tarjeta:   #221f1d;
    --hundido:   #2a2724;
    --linea:     #383430;
    --linea-alta:#4d4842;
    --tinta:     #ece8e1;
    --tinta-med: #b0aaa1;
    --tinta-baja:#847e75;
    --azul:      #7fb0d4;
    --azul-tenue:#1e2c36;
    --verde: #6bb591;
    --ambar: #d3a44f;
    --rojo:  #d9776b;
  }
}
:root[data-theme="dark"] {
  --papel:     #1a1917;
  --tarjeta:   #221f1d;
  --hundido:   #2a2724;
  --linea:     #383430;
  --linea-alta:#4d4842;
  --tinta:     #ece8e1;
  --tinta-med: #b0aaa1;
  --tinta-baja:#847e75;
  --azul:      #7fb0d4;
  --azul-tenue:#1e2c36;
  --verde: #6bb591;
  --ambar: #d3a44f;
  --rojo:  #d9776b;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 400 15.5px/1.55 "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  letter-spacing: -.015em;
  text-wrap: balance;
}

a { color: var(--azul); text-decoration: underline; text-underline-offset: 2px; }

:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }

/* ------------------------------ logo ------------------------------ */
.velas { display: block; flex: none; }
.velas .v1 { fill: #6aa6dc; }
.velas .v2 { fill: #3a7cbe; }
.velas .v3 { fill: #2b6382; }
.velas .ola { fill: #a7a9ac; }

/* Sobre fondo azul corporativo el degradé original no se ve: la vela
   oscura es el mismo tono que el fondo. Acá se invierte a claros. */
.portada .velas .v1 { fill: #ffffff; }
.portada .velas .v2 { fill: #b9d5e9; }
.portada .velas .v3 { fill: #9dc0d8; }
.portada .velas .ola { fill: rgba(255, 255, 255, .42); }
/* sobre el azul profundo del lateral las velas se invierten a claros:
   la vela oscura del logo es casi el mismo tono que el fondo */
.lateral .velas .v1 { fill: #ffffff; }
.lateral .velas .v2 { fill: #b9d5e9; }
.lateral .velas .v3 { fill: #7fb0d4; }
.lateral .velas .ola { fill: rgba(255, 255, 255, .45); }

.marca {
  display: flex;
  align-items: center;
  gap: 13px;
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -.01em;
}
.marca .velas { width: 46px; height: 40px; }
.marca em {
  font-style: italic;
  font-weight: 400;
  font-size: 15.5px;
  letter-spacing: 0;
}

/* ==================================================================
   ACCESO
   ================================================================== */
.acceso { display: grid; grid-template-columns: 1.1fr .9fr; min-height: 100dvh; }

/* portada: azul plano, sin degradé ni animación de fondo */
.portada {
  background: var(--vela-3);
  color: #f0f4f7;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 44px;
  padding: 46px 56px;
}
.portada .marca { color: #fff; }
.portada .marca em { color: #a8c6dc; }

.portada h1 {
  font-size: clamp(33px, 3.9vw, 47px);
  line-height: 1.14;
  font-weight: 500;
  margin: 0 0 18px;
  color: #fff;
  max-width: 22ch;
}
.portada h1 i { font-style: italic; color: var(--vela-1); }

.portada .bajada {
  font-size: 17.5px;
  line-height: 1.6;
  color: #b8d0e2;
  margin: 0;
  max-width: 40ch;
}

.portada footer {
  font-size: 14px;
  color: #90b2ca;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: baseline;
}
.portada footer span:not(:last-child)::after { content: " ·"; padding-left: 8px; }

/* ------------------------------ formulario ------------------------ */
.panel {
  display: grid;
  place-items: center;
  padding: 48px 44px;
}
.caja { width: 100%; max-width: 366px; }

.caja > header { margin-bottom: 28px; }
.caja h2, .caja h3 {
  font-size: 30px;
  font-weight: 500;
  margin: 0 0 5px;
}
.caja > header p { margin: 0; color: var(--tinta-med); font-size: 16px; }

form { display: grid; gap: 18px; }

.campo { display: grid; gap: 6px; }
.campo label {
  font-size: 15px;
  font-weight: 600;
  color: var(--tinta-med);
}

.envoltura { position: relative; display: flex; }

input[type="email"], input[type="password"], input[type="text"] {
  width: 100%;
  font: inherit;
  font-size: 16px;
  color: var(--tinta);
  background: var(--tarjeta);
  border: 1px solid var(--linea-alta);
  border-radius: var(--radio);
  padding: 10px 12px;
  transition: border-color .15s ease, background .15s ease;
}
input::placeholder { color: var(--tinta-baja); }
input:hover:not(:focus) { border-color: var(--tinta-baja); }
input:focus {
  outline: none;
  border-color: var(--azul);
  box-shadow: inset 0 0 0 1px var(--azul);
}
.envoltura:has(#password) input { padding-right: 44px; }

.ojo {
  position: absolute;
  right: 1px; top: 1px; bottom: 1px;
  width: 40px;
  display: grid; place-items: center;
  border: 0; border-left: 1px solid var(--linea);
  background: transparent;
  color: var(--tinta-baja);
  cursor: pointer;
}
.ojo:hover { color: var(--azul); background: var(--hundido); }
.ojo svg { width: 18px; height: 18px; }

.fila { display: flex; align-items: center; gap: 14px; font-size: 15.5px; }
.recordar {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--tinta-med); cursor: pointer; user-select: none;
}
.recordar input { width: 15px; height: 15px; margin: 0; accent-color: var(--azul); cursor: pointer; }

/* botón: color plano, sin degradé ni sombra de color */
.boton {
  font: inherit;
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 16.5px; font-weight: 700;
  color: #fff;
  background: var(--vela-3);
  border: 1px solid var(--vela-3);
  border-radius: var(--radio);
  padding: 11px 18px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  transition: background .15s ease, border-color .15s ease;
}
.boton:hover { background: #22506a; border-color: #22506a; }
.boton:active { background: #1b4257; }
.boton[disabled] { opacity: .55; cursor: progress; }

.girador {
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,.4); border-top-color: #fff;
  border-radius: 50%; animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

.aviso { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .2s ease; }
.aviso.visible { grid-template-rows: 1fr; }
.aviso > div { overflow: hidden; }
.aviso p {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 0 0 2px;
  padding: 9px 12px;
  font-size: 15.5px;
  color: var(--rojo);
  background: var(--tarjeta);
  border: 1px solid var(--rojo);
  border-left-width: 3px;
  border-radius: var(--radio);
}
.aviso svg { width: 16px; height: 16px; flex: none; margin-top: 3px; }

.pie-caja {
  margin-top: 26px; padding-top: 18px;
  border-top: 1px solid var(--linea);
  font-size: 14.5px; color: var(--tinta-baja); line-height: 1.55;
}
.pie-caja code {
  font-family: Consolas, "Cascadia Mono", "SF Mono", ui-monospace, monospace;
  font-size: 13.5px;
  color: var(--tinta-med);
  background: var(--hundido);
  padding: .1em .35em;
}

/* ==================================================================
   PANEL
   ================================================================== */
.barra { border-bottom: 1px solid var(--linea); background: var(--tarjeta); }
.barra-interior {
  max-width: 1080px; margin: 0 auto; padding: 14px 30px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.marca-clara { color: var(--tinta); font-size: 17px; }
.marca-clara .velas { width: 40px; height: 35px; }
.marca-clara em { color: var(--tinta-baja); }

.barra-derecha { display: flex; align-items: center; gap: 16px; }
.quien { font-size: 15px; color: var(--tinta-med); white-space: nowrap; }

.boton-fantasma {
  font: inherit; font-size: 15px; font-weight: 600;
  color: var(--tinta-med); background: transparent;
  border: 1px solid var(--linea-alta); border-radius: var(--radio);
  padding: 6px 14px; cursor: pointer;
}
.boton-fantasma:hover { color: var(--azul); border-color: var(--azul); }

.lienzo { max-width: 1080px; margin: 0 auto; padding: 38px 30px 80px; }

.titular { border-bottom: 2px solid var(--tinta); padding-bottom: 12px; margin-bottom: 4px; }
.titular h1 { font-size: 32px; font-weight: 500; margin: 0 0 4px; }

.estado { margin: 0; font-size: 15.5px; color: var(--tinta-med); }
.estado-buena { color: var(--verde); }
.estado-mala { color: var(--rojo); }

/* rótulo de grupo: regla con etiqueta, no eyebrow con punto */
.grupo {
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 18px; font-weight: 600;
  letter-spacing: -.01em;
  color: var(--tinta);
  margin: 34px 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--linea);
}

.tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(266px, 1fr));
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
}

/* tarjetas sin sombra ni redondeo: celdas separadas por reglas */
.tarjeta {
  background: var(--tarjeta);
  padding: 20px 22px 18px;
}

.tarjeta-alto { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.tarjeta h3 { font-size: 19px; font-weight: 500; margin: 0; }

/* etiqueta de estado: texto con subrayado de color, no píldora */
.chip {
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 13.5px; font-weight: 700;
  letter-spacing: .01em;
  padding-bottom: 2px;
  border-bottom: 2px solid currentColor;
  white-space: nowrap;
}
.chip-buena { color: var(--verde); }
.chip-tibia { color: var(--ambar); }
.chip-mala  { color: var(--rojo); }
.chip-pendiente { color: var(--tinta-baja); border-bottom-style: dotted; }

.cifra {
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-weight: 500; font-size: 40px;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  margin: 16px 0 0; line-height: 1;
}
.cifra-nota { margin: 4px 0 0; font-size: 14.5px; color: var(--tinta-baja); }

.detalle {
  margin: 18px 0 0; padding: 14px 0 0;
  border-top: 1px solid var(--linea);
  display: grid; gap: 8px;
}
.detalle > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.detalle dt { font-size: 15px; color: var(--tinta-med); }
.detalle dd {
  margin: 0; font-size: 15px; font-weight: 600;
  text-align: right; font-variant-numeric: tabular-nums;
}
.detalle dd small { font-weight: 400; color: var(--tinta-baja); }

.tabla-nombre {
  display: inline-block; margin-top: 14px;
  font-family: Consolas, "Cascadia Mono", "SF Mono", ui-monospace, monospace; font-size: 13px;
  color: var(--tinta-baja);
}

.tarjeta-pendiente { background: var(--hundido); }
.pendiente-texto { margin: 14px 0 0; font-size: 15.5px; color: var(--tinta-med); line-height: 1.5; }

.vacio {
  grid-column: 1 / -1; margin: 0; padding: 30px;
  color: var(--tinta-med); font-size: 16px;
  background: var(--tarjeta);
}

.siguiente {
  margin-top: 42px; padding: 22px 0 0;
  border-top: 2px solid var(--tinta);
}
.siguiente h2 { font-size: 21px; font-weight: 500; margin: 0 0 6px; }
.siguiente p { margin: 0; color: var(--tinta-med); font-size: 16.5px; max-width: 66ch; }

/* ==================================================================
   RESPONSIVE
   ================================================================== */
@media (max-width: 980px) {
  .acceso { grid-template-columns: 1fr; }
  .portada { padding: 32px 28px 38px; gap: 30px; }
  .portada h1 { font-size: clamp(28px, 7vw, 38px); }
  .portada .bajada { font-size: 16.5px; }
  .lineas { columns: 2; margin-top: 28px; }
  .portada footer { display: none; }
  .panel { padding: 36px 26px 56px; }
}
@media (max-width: 620px) {
  .lineas { columns: 1; }
  .barra-interior { padding: 12px 18px; }
  .quien { display: none; }
  .lienzo { padding: 26px 18px 60px; }
  .marca em { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ==================================================================
   CINTA DE PRODUCTOS — portada
   Tres carriles con el catálogo real desplazándose, como línea de producción.
   ================================================================== */
.cinta-zona {
  margin: 34px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid rgba(168, 198, 220, .28);
  /* el desborde se recorta contra los bordes de la portada */
  margin-left: -56px;
  margin-right: -56px;
  padding-left: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.cinta-rotulo {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0;
  color: #8fb4cd;
  margin: 0 0 14px 56px;
}
.cinta-rotulo b { color: var(--vela-1); font-weight: 700; }

.carril { overflow: hidden; padding: 3px 0; }
.pista {
  display: flex;
  gap: 10px;
  width: max-content;
  animation: correr var(--dur, 70s) linear infinite;
}
.carril:nth-child(2) .pista { animation-direction: reverse; }
@keyframes correr {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }   /* la mitad = una copia completa */
}
.cinta-zona:hover .pista { animation-play-state: paused; }

.pieza {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  flex: none;
  padding: 5px 12px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(168, 198, 220, .2);
  border-radius: 2px;
  font-size: 14px;
  color: #d3e4ef;
  white-space: nowrap;
}
.pieza b {
  font-family: Consolas, "Cascadia Mono", "SF Mono", ui-monospace, monospace;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--vela-1);
  letter-spacing: .02em;
}
.cinta-error { color: #90b2ca; font-size: 14px; margin: 0 0 0 56px; }

@media (max-width: 980px) {
  .cinta-zona { margin-left: -28px; margin-right: -28px; }
  .cinta-rotulo, .cinta-error { margin-left: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .pista { animation: none !important; }
}

/* ==================================================================
   ESTADO DE FUENTES — portada
   ================================================================== */
.estado-fuentes {
  margin: 34px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid rgba(168, 198, 220, .28);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
}
.estado-fuentes div { display: grid; gap: 2px; }
.estado-fuentes dt { font-size: 15px; color: #c6dbe9; }
.estado-fuentes dd {
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0;
}
.estado-fuentes dd.ok { color: #8fd3ae; }
.estado-fuentes dd.pend { color: #8fb4cd; }

/* ==================================================================
   SHELL DE ADMINISTRACIÓN
   Estructura de portal: menú lateral fijo + barra superior + contenido.
   El patrón de layout es el convencional; el estilo se mantiene en la
   línea del proyecto (color plano, 3px, reglas de un pixel, fuente del sistema).
   ================================================================== */
body.con-shell { background: var(--papel); }

/* Rediseño del 2026-09-04 pedido por Daniel: header blanco, lateral en
   el azul de Nemo, menú con la tipografía de las tarjetas (versalitas
   con interletra) y lateral que se puede plegar. */
.shell {
  display: grid;
  grid-template-columns: var(--ancho-lateral, 236px) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 100dvh;
  transition: grid-template-columns .22s ease;
}
.shell.plegado { --ancho-lateral: 62px; }

/* ------------------------------ lateral --------------------------- */
.lateral {
  grid-row: 1 / 3;
  background: var(--corp-fondo);
  color: var(--corp-texto);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.lateral-marca {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 12px 0 18px;
  min-height: 58px;
  border-bottom: 1px solid var(--corp-borde);
  font-weight: 700;
  font-size: 16.5px;
  color: var(--corp-texto);
  letter-spacing: -.005em;
  white-space: nowrap;
}
.lateral-marca .velas { width: 30px; height: 26px; flex: none; }
.lateral-nombre { flex: 1; min-width: 0; overflow: hidden; }

/* botón de plegar: vive en el lateral, no en el header */
.plegar {
  flex: none;
  border: 0; background: transparent; cursor: pointer;
  padding: 5px; border-radius: 6px; line-height: 0;
}
.plegar svg { width: 19px; height: 19px; fill: var(--corp-tenue); display: block; }
.plegar:hover { background: rgba(255, 255, 255, .14); }
.plegar:hover svg { fill: #fff; }
.shell.plegado .plegar svg { transform: rotate(180deg); }

.menu {
  flex: 1;
  padding: 12px 0 24px;
  overflow-y: auto;
  overflow-x: hidden;
}
/* misma tipografía que el título de las tarjetas */
.menu-grupo {
  margin: 16px 18px 6px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .01em;
  color: color-mix(in srgb, var(--corp-tenue) 80%, transparent);
  white-space: nowrap;
}
.menu-grupo:first-child { margin-top: 2px; }

.menu a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 18px;
  color: var(--corp-texto);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-decoration: none;
  border-left: 3px solid transparent;
  white-space: nowrap;
}
.menu a svg { width: 18px; height: 18px; fill: var(--corp-tenue); flex: none; }
.menu a > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.menu a:hover { background: rgba(255, 255, 255, .1); color: #fff; text-decoration: none; }
.menu a:hover svg { fill: #fff; }

.menu a[aria-current="page"] {
  background: var(--corp-claro);
  border-left-color: var(--vela-1);
  color: #fff;
  font-weight: 600;
}
.menu a[aria-current="page"] svg { fill: var(--vela-1); }

/* plegado: solo iconos, centrados, y el texto fuera */
.shell.plegado .lateral-nombre,
.shell.plegado .menu a > span { display: none; }
.shell.plegado .menu-grupo {
  margin: 14px 0 6px;
  font-size: 0;                    /* se conserva como separador visual */
  border-top: 1px solid var(--corp-borde);
  padding-top: 12px;
}
.shell.plegado .menu-grupo:first-child { border-top: 0; padding-top: 0; }
.shell.plegado .menu a { justify-content: center; padding: 11px 0; gap: 0; border-left-width: 0; }
.shell.plegado .lateral-marca { padding: 0; justify-content: center; gap: 0; }
.shell.plegado .lateral-marca .velas { display: none; }

.menu-pend {
  margin-left: auto;
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--corp-tenue);
  white-space: nowrap;
}
.shell.plegado .menu-pend { display: none; }

/* ------------------------------ superior -------------------------- */
.superior {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 24px;
  min-height: 58px;
  background: var(--tarjeta);
  color: var(--tinta);
  border-bottom: 1px solid var(--linea);
  position: sticky;
  top: 0;
  z-index: 20;
}
/* misma tipografía que el título de las tarjetas */
.superior-titulo {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.01em;
  margin: 0;
  flex: 1;
  min-width: 0;
  color: var(--corp);
}
.superior-acciones { display: flex; align-items: center; gap: 14px; }

/* el botón del header solo aparece en pantalla angosta, donde el
   lateral se muestra por encima en vez de plegarse */
.hamburguesa {
  display: none;
  border: 1px solid var(--linea-alta);
  background: transparent;
  border-radius: var(--radio);
  padding: 6px;
  cursor: pointer;
}
.hamburguesa:hover { background: var(--hundido); }
.hamburguesa svg { width: 20px; height: 20px; fill: var(--tinta-med); display: block; }

/* --------------------------- notificaciones ----------------------- */
.campanilla { position: relative; }
.campanilla > button {
  position: relative;
  border: 1px solid var(--linea-alta);
  background: transparent;
  border-radius: var(--radio);
  padding: 6px;
  cursor: pointer;
  display: block;
}
.campanilla > button:hover { background: var(--hundido); border-color: var(--corp); }
.campanilla > button svg { width: 19px; height: 19px; fill: var(--tinta-med); display: block; }
.campanilla > button:hover svg { fill: var(--corp); }

.insignia {
  position: absolute;
  top: -6px; right: -6px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--rojo);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.panel-avisos {
  position: absolute;
  right: 0; top: calc(100% + 7px);
  /* 380 y no 330: desde que la campana muestra oportunidades, los
     rótulos son nombres de hospitales y no slugs de tres palabras */
  width: 380px;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--tarjeta);
  border: 1px solid var(--linea-alta);
  border-radius: var(--radio);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .14);
  z-index: 30;
}
.panel-avisos-cab {
  margin: 0;
  padding: 11px 14px;
  border-bottom: 1px solid var(--linea);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--tinta-med);
}
.pa-item {
  display: grid;
  /* minmax(0, 1fr) y NO 1fr. `1fr` es en realidad `minmax(auto, 1fr)`,
     así que la columna nunca baja de su contenido mínimo: con títulos
     cortos no se notaba, y al pasar a mostrar nombres de hospitales el
     texto se salía del panel y quedaba cortado por la ventana. Sin este
     cero, ningún `text-overflow: ellipsis` de adentro funciona porque
     no hay contra qué recortar. */
  grid-template-columns: 3px minmax(0, 1fr);
  gap: 11px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--linea);
}
/* el título es largo y puede ocupar dos líneas; los casos de abajo se
   recortan con puntos suspensivos, que para una lista es más legible */
.pa-item b { overflow-wrap: anywhere; }
.pa-item:last-child { border-bottom: 0; }
.pa-marca { border-radius: 2px; }
.pa-item.grave .pa-marca { background: var(--rojo); }
.pa-item.atencion .pa-marca { background: var(--ambar); }
.pa-item b { display: block; font-size: 15.5px; font-weight: 700; }
.pa-item span { font-size: 14.5px; color: var(--tinta-med); }
.pa-vacio { margin: 0; padding: 16px 14px; color: var(--tinta-baja); font-size: 15px; }

/* ------------------------------ usuario --------------------------- */
.usuario { display: flex; align-items: center; gap: 9px; }
/* el header ahora es blanco: la inicial va en disco azul con texto claro */
.inicial {
  width: 31px; height: 31px;
  flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--corp);
  color: #fff;
  font-weight: 700;
  font-size: 13.5px;
}
.usuario-datos { display: grid; line-height: 1.25; }
.usuario-datos b {
  font-size: 14px; font-weight: 600;
  letter-spacing: 0;
  color: var(--tinta);
  white-space: nowrap;
}
.usuario-datos em {
  font-style: normal;
  font-size: 12.5px;
  letter-spacing: 0;
  color: var(--tinta-baja);
  white-space: nowrap;
}

.superior .boton-fantasma {
  color: var(--corp);
  border-color: var(--linea-alta);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
}
.superior .boton-fantasma:hover {
  color: #fff;
  border-color: var(--corp);
  background: var(--corp);
}

/* ------------------------------ contenido ------------------------- */
.contenido {
  grid-column: 2;
  padding: 26px 30px 70px;
  min-width: 0;
}
.contenido .grupo:first-child { margin-top: 0; }
.tab { min-width: 0; }

.vacio-tab {
  background: var(--tarjeta);
  border: 1px solid var(--linea);
  padding: 30px 32px;
  max-width: 68ch;
}
.vacio-tab h2 { font-size: 25px; font-weight: 500; margin: 0 0 10px; }
.vacio-tab p { margin: 0 0 12px; font-size: 16.5px; color: var(--tinta-med); }
.vacio-tab p:last-child { margin-bottom: 0; }
.vacio-tab .vacio-nota {
  padding-top: 12px;
  border-top: 1px solid var(--linea);
  font-size: 15.5px;
  color: var(--tinta-baja);
}

/* --------------------------- buscador ----------------------------- */
.barra-busqueda {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.barra-busqueda input {
  flex: 1;
  max-width: 420px;
  font: inherit;
  font-size: 16px;
  color: var(--tinta);
  background: var(--tarjeta);
  border: 1px solid var(--linea-alta);
  border-radius: var(--radio);
  padding: 9px 12px;
}
.barra-busqueda input:focus {
  outline: none;
  border-color: var(--azul);
  box-shadow: inset 0 0 0 1px var(--azul);
}
.barra-busqueda span {
  font-size: 15px;
  color: var(--tinta-baja);
  font-variant-numeric: tabular-nums;
}

/* --------------------------- responsive --------------------------- */
@media (max-width: 900px) {
  /* en angosto el lateral no se pliega: se muestra por encima */
  .shell, .shell.plegado { grid-template-columns: minmax(0, 1fr); }
  .lateral {
    position: fixed;
    inset: 0 auto 0 0;
    width: 250px;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform .2s ease;
  }
  .lateral.abierto { transform: translateX(0); }
  /* acá el texto vuelve, aunque el shell quedara marcado como plegado */
  .shell.plegado .lateral-nombre,
  .shell.plegado .menu a > span { display: initial; }
  .shell.plegado .menu a { justify-content: flex-start; padding: 9px 18px; gap: 12px; border-left-width: 3px; }
  .shell.plegado .lateral-marca { padding: 0 12px 0 18px; justify-content: flex-start; gap: 11px; }
  .shell.plegado .lateral-marca .velas { display: block; }
  .shell.plegado .menu-grupo { margin: 16px 18px 6px; font-size: 10.5px; border-top: 0; padding-top: 0; }
  .plegar { display: none; }
  .superior, .contenido { grid-column: 1; }
  .hamburguesa { display: block; }
  .contenido { padding: 22px 18px 60px; }
  .superior { padding: 0 16px; }
  .usuario-datos { display: none; }
  .panel-avisos { width: min(330px, calc(100vw - 32px)); }
}
@media (prefers-reduced-motion: reduce) {
  .lateral { transition: none; }
}

/* ==================================================================
   HERRAMIENTAS, TABLAS Y DIALOGO
   ================================================================== */
.herramientas {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 18px;
}
.herramientas input[type="search"] {
  flex: 1; max-width: 380px;
  font: inherit; font-size: 15.5px;
  color: var(--tinta); background: var(--tarjeta);
  border: 1px solid var(--linea-alta); border-radius: var(--radio);
  padding: 8px 12px;
}
.herramientas input[type="search"]:focus {
  outline: none; border-color: var(--azul); box-shadow: inset 0 0 0 1px var(--azul);
}
.sel { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--tinta-med); }
.sel select, .filtros select, .filtros input {
  font: inherit; font-size: 15px; color: var(--tinta);
  background: var(--tarjeta); border: 1px solid var(--linea-alta);
  border-radius: var(--radio); padding: 7px 10px;
}
.conteo { font-size: 15px; color: var(--tinta-baja); font-variant-numeric: tabular-nums; }
.boton-chico { font-size: 15px; padding: 8px 15px; }
.boton-mini { font-size: 13.5px; padding: 4px 10px; }
.boton-fantasma.peligro:hover { color: var(--rojo); border-color: var(--rojo); }
.acciones { display: flex; gap: 7px; white-space: nowrap; }
.mono { font-family: Consolas, "Cascadia Mono", "SF Mono", ui-monospace, monospace; font-size: 13.5px; }
.sin { color: var(--tinta-baja); font-style: italic; }
.nota-pie { margin-top: 16px; font-size: 14px; color: var(--tinta-baja); max-width: 90ch; }
.bien { color: var(--verde); }
.mal  { color: var(--rojo); }

.etiqueta {
  display: inline-block; font-size: 12.5px;
  padding: 2px 7px; margin: 1px 0;
  background: var(--hundido); border: 1px solid var(--linea);
  border-radius: 2px; color: var(--tinta-med); white-space: nowrap;
}

.filtros {
  display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end;
  margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--linea);
}
.filtros label { display: grid; gap: 4px; font-size: 13.5px; color: var(--tinta-med); }
.filtros .filtro-ancho { flex: 1; min-width: 220px; }
.filtros .filtro-ancho input { width: 100%; }

.fila-total td { font-weight: 700; border-top: 2px solid var(--tinta); background: var(--hundido); }

/* ------------------------------ dialogo --------------------------- */
.dialogo {
  border: 1px solid var(--linea-alta); border-radius: var(--radio);
  padding: 0; width: min(520px, calc(100vw - 32px));
  background: var(--tarjeta); color: var(--tinta);
  box-shadow: 0 12px 40px rgba(0,0,0,.24);
}
.dialogo::backdrop { background: rgba(20, 30, 38, .45); }
.dialogo header { padding: 18px 24px 0; }
.dialogo header h2 { margin: 0; font-size: 22px; font-weight: 600; }
.dlg-cuerpo { padding: 18px 24px; display: grid; gap: 15px; }
.dialogo footer {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 15px 24px; border-top: 1px solid var(--linea); background: var(--hundido);
}
.campo-par { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.dlg-cuerpo select {
  font: inherit; font-size: 16px; color: var(--tinta);
  background: var(--tarjeta); border: 1px solid var(--linea-alta);
  border-radius: var(--radio); padding: 10px 12px;
}
.ayuda { font-size: 13.5px; color: var(--tinta-baja); }
.permisos { border: 1px solid var(--linea); border-radius: var(--radio); padding: 12px 14px; margin: 0; }
.permisos legend { font-size: 14px; font-weight: 600; color: var(--tinta-med); padding: 0 6px; }
.permisos > div { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 14px; }
.permiso { display: flex; align-items: center; gap: 8px; font-size: 15px; cursor: pointer; }
.permiso input { width: 16px; height: 16px; accent-color: var(--azul); cursor: pointer; }

/* ==================================================================
   TRES TARJETAS DE META: Total, YTD y Mes.
   La barra replica el patrón de Bootstrap (rayada y animada) sin
   cargar el framework, que chocaría con el resto de la hoja.
   ================================================================== */
/* Excepción de diseño autorizada por Daniel el 2026-09-04: solo en
   estas tarjetas se permiten degradé, esquinas redondeadas con sombra
   y el badge de cumplimiento en píldora. Ver PLAN.md. */
.kpis { display: block; background: transparent; border: 0; margin-bottom: 22px; }

.tm-fila {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 13px;
}
.tm-fila + .tm-fila { margin-top: 13px; }

.tm {
  --tono: var(--corp);
  position: relative;
  border: 1px solid color-mix(in srgb, var(--tono) 26%, var(--linea));
  border-radius: 14px;
  padding: 14px 16px 13px;
  background:
    linear-gradient(152deg,
      color-mix(in srgb, var(--tono) 15%, var(--tarjeta)) 0%,
      color-mix(in srgb, var(--tono) 5%, var(--tarjeta)) 52%,
      var(--tarjeta) 100%);
  box-shadow: 0 2px 10px -4px color-mix(in srgb, var(--tono) 40%, transparent);
}

.tm-cab {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px; margin-bottom: 8px;
}
.tm-tit { min-width: 0; }
.tm-cab h3 {
  margin: 0; font-size: 14.5px; font-weight: 600;
  letter-spacing: -.005em;
  color: color-mix(in srgb, var(--tono) 72%, var(--tinta));
}
.tm-sub { margin: 2px 0 0; font-size: 12px; color: var(--tinta-baja); }

/* el badge en píldora, con el distintivo de meta superada adentro */
.tm-pct {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 15px; font-weight: 700; line-height: 1;
  letter-spacing: -.01em; font-variant-numeric: tabular-nums;
  padding: 5px 11px; border-radius: 100px; white-space: nowrap;
  background: color-mix(in srgb, var(--tono) 16%, var(--tarjeta));
  border: 1px solid color-mix(in srgb, var(--tono) 35%, transparent);
  color: color-mix(in srgb, var(--tono) 88%, var(--tinta));
}
.podio { width: 15px; height: 15px; flex: none; }

/* la cifra grande */
.tm-cifra {
  margin: 0 0 5px; font-size: 25px; font-weight: 700; line-height: 1.1;
  letter-spacing: -.025em; font-variant-numeric: tabular-nums;
  color: var(--tinta);
}
.tm-cifra small { font-size: 15px; font-weight: 600; color: var(--tinta-baja); }

/* meta y brecha, en una sola línea */
.tm-linea {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
  margin: 0 0 9px; font-size: 12.5px; color: var(--tinta-med);
  font-variant-numeric: tabular-nums;
}
.tm-linea .bien { color: var(--verde); font-weight: 700; }
.tm-linea .mal  { color: var(--rojo);  font-weight: 700; }

.tm-pie {
  margin: 8px 0 0; font-size: 11.5px; line-height: 1.35;
  color: var(--tinta-baja); font-variant-numeric: tabular-nums;
}

/* meta superada: se refuerza el borde para que se note de lejos */
.tm-podio { border-color: color-mix(in srgb, var(--verde) 55%, transparent); }
.tm-podio .tm-pct {
  background: color-mix(in srgb, var(--verde) 20%, var(--tarjeta));
  border-color: color-mix(in srgb, var(--verde) 50%, transparent);
}

/* ==================================================================
   BARRA DEL MES EN CURSO, A TODO EL ANCHO
   Reemplaza a las tres tarjetas de abajo (2026-09-04). El punto de esta
   pieza es una sola cosa: ver si la facturación va adelantada o
   atrasada respecto al tiempo transcurrido del mes. Por eso la barra
   lleva el relleno (lo facturado) y una línea vertical (los días
   hábiles corridos). Si el relleno pasa la línea, se va adelantado.
   ================================================================== */
.ma {
  --tono: var(--corp);
  margin-top: 13px;
  border: 1px solid color-mix(in srgb, var(--tono) 26%, var(--linea));
  border-radius: 14px;
  padding: 16px 20px 18px;
  background:
    linear-gradient(152deg,
      color-mix(in srgb, var(--tono) 13%, var(--tarjeta)) 0%,
      color-mix(in srgb, var(--tono) 4%, var(--tarjeta)) 55%,
      var(--tarjeta) 100%);
  box-shadow: 0 2px 10px -4px color-mix(in srgb, var(--tono) 40%, transparent);
}
.ma.sem-rojo   { --tono: var(--rojo); }
.ma.sem-ambar  { --tono: var(--ambar); }
.ma.sem-verde  { --tono: var(--verde); }
.ma.sem-neutro { --tono: var(--tinta-baja); }

.ma-cab {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 14px; flex-wrap: wrap;
}
.ma-cab h3 {
  margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -.01em;
  color: color-mix(in srgb, var(--tono) 70%, var(--tinta));
}
.ma-sub { margin: 3px 0 0; font-size: 13px; color: var(--tinta-baja); }

.ma-marcador { text-align: right; flex: none; }
.ma-pct {
  display: block;
  font-size: 30px; font-weight: 700; line-height: 1;
  letter-spacing: -.025em; font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--tono) 88%, var(--tinta));
}
.ma-pct-rot { font-size: 12px; color: var(--tinta-baja); }

/* la barra: alta, para que la marca del día se lea bien */
.ma-barra {
  position: relative;
  height: 26px;
  background: color-mix(in srgb, var(--tinta) 8%, transparent);
  border-radius: 100px;
  margin: 0 0 34px;   /* espacio para el rótulo "hoy" que va debajo */
}
.ma-relleno {
  height: 100%;
  border-radius: 100px;
  background: var(--tono);
  transition: width 1.2s cubic-bezier(.22, .68, .36, 1);
}
.ma-relleno.sem-rojo   { background: var(--rojo); }
.ma-relleno.sem-ambar  { background: var(--ambar); }
.ma-relleno.sem-verde  { background: var(--verde); }
.ma-relleno.sem-neutro { background: color-mix(in srgb, var(--tinta) 20%, transparent); }

/* la línea del día de hoy: la referencia contra la que se compara */
.ma-hoy {
  position: absolute; top: -5px; bottom: -5px; width: 2px;
  background: var(--tinta); border-radius: 2px;
}
.ma-hoy em {
  position: absolute; top: calc(100% + 5px); left: 50%;
  transform: translateX(-50%);
  font-style: normal; font-size: 11.5px; font-weight: 600;
  color: var(--tinta-med); white-space: nowrap;
}

/* los datos, en una fila que se parte sola si no cabe */
.ma-datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px 22px;
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--linea);
}
.ma-datos dt { font-size: 12px; color: var(--tinta-baja); margin-bottom: 2px; }
.ma-datos dd {
  margin: 0; font-size: 17px; font-weight: 600;
  font-variant-numeric: tabular-nums; letter-spacing: -.015em;
  color: var(--tinta);
}
.ma-datos dd small {
  display: block;
  font-size: 11.5px; font-weight: 400; letter-spacing: 0;
  color: var(--tinta-baja);
}
.ma-datos dd.ma-fuerte { color: color-mix(in srgb, var(--tono) 80%, var(--tinta)); }
.ma-datos dd.bien { color: var(--verde); }
.ma-datos dd.mal  { color: var(--rojo); }

.ma-aviso {
  margin: 13px 0 0; font-size: 12.5px; line-height: 1.45;
  color: var(--tinta-baja);
}

@media (prefers-reduced-motion: reduce) {
  .ma-relleno { transition: none; }
}
@media (max-width: 560px) {
  .ma-pct { font-size: 24px; }
  .ma-datos { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
}

/* ==================================================================
   PANEL DE ZONAS
   Misma receta visual que las tarjetas y la barra del mes: esquinas de
   14px, degradé suave, borde y sombra tenue, y el título adentro. Antes
   era un <h2> suelto sobre una tabla desnuda y rompía el lenguaje del
   resto de la pantalla.
   ================================================================== */
.pz {
  --tono: var(--corp);
  margin-top: 13px;
  border: 1px solid color-mix(in srgb, var(--tono) 26%, var(--linea));
  border-radius: 14px;
  padding: 16px 20px 14px;
  background:
    linear-gradient(152deg,
      color-mix(in srgb, var(--tono) 11%, var(--tarjeta)) 0%,
      color-mix(in srgb, var(--tono) 3%, var(--tarjeta)) 55%,
      var(--tarjeta) 100%);
  box-shadow: 0 2px 10px -4px color-mix(in srgb, var(--tono) 40%, transparent);
}

.pz-cab {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 14px; flex-wrap: wrap;
}
.pz-tit { min-width: 0; }
.pz-cab h3 {
  margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -.01em;
  color: color-mix(in srgb, var(--tono) 70%, var(--tinta));
}

/* mismo badge en píldora que usan las tarjetas */
.pz-badge {
  flex: none;
  font-size: 13px; font-weight: 600; line-height: 1;
  padding: 6px 12px; border-radius: 100px; white-space: nowrap;
  background: color-mix(in srgb, var(--tono) 14%, var(--tarjeta));
  border: 1px solid color-mix(in srgb, var(--tono) 32%, transparent);
  color: color-mix(in srgb, var(--tono) 85%, var(--tinta));
}

/* No hay pie de nota en este panel a propósito: Daniel pidió el
   2026-09-04 no poner textos explicativos salvo que los pida. */

/* la tabla adentro no lleva su propio marco: el panel ya lo pone */
.pz .tabla-scroll { border: 0; background: transparent; border-radius: 0; }

/* ==================================================================
   TABLA DE ZONAS
   Tres bloques de columnas —mes en curso, acumulado, año— separados
   por una regla vertical, para que se lea qué pertenece a qué sin
   tener que seguir el encabezado con el dedo.
   ================================================================== */
.tabla-zona { width: 100%; border-collapse: collapse; font-size: 14px; }

.tabla-zona thead th {
  text-align: left;
  padding: 7px 12px;
  border-bottom: 1px solid var(--linea-alta);
  font-size: 12.5px; font-weight: 600;
  color: var(--tinta-med);
  white-space: nowrap;
}
.tabla-zona thead th.num { text-align: right; }

/* la fila de grupos: centra el rótulo sobre sus columnas */
.tz-grupos th {
  text-align: center !important;
  padding: 5px 12px 4px;
  border-bottom: 1px solid var(--linea);
  font-size: 11.5px;
  color: var(--tinta-med);
  background: color-mix(in srgb, var(--tono) 12%, transparent);
}
.tz-grupos th:empty { background: transparent; border-bottom: 0; }

/* separación entre bloques: columnas 3, 6 y 9 abren bloque */
.tabla-zona th:nth-child(3), .tabla-zona td:nth-child(3),
.tabla-zona th:nth-child(6), .tabla-zona td:nth-child(6),
.tabla-zona th:nth-child(9), .tabla-zona td:nth-child(9) {
  border-left: 1px solid var(--linea);
}
.tz-grupos th:nth-child(2), .tz-grupos th:nth-child(3), .tz-grupos th:nth-child(4) {
  border-left: 1px solid var(--linea);
}

.tabla-zona tbody td {
  padding: 9px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--tinta) 8%, transparent);
  font-variant-numeric: tabular-nums;
}
.tabla-zona tbody td.num { text-align: right; white-space: nowrap; }
.tabla-zona tbody tr:hover td { background: color-mix(in srgb, var(--tono) 7%, transparent); }

.tz-cod {
  font-family: Consolas, "Cascadia Mono", ui-monospace, monospace;
  font-size: 13px; font-weight: 600;
  color: var(--corp);
}

/* Barrita de cumplimiento dentro de la celda del porcentaje. Lleva dos
   marcas, igual que la barra del mes: el relleno es lo cumplido y la
   raya es la línea del tiempo. Por eso ya no clipea el contenido. */
.zp {
  position: relative;
  display: inline-block;
  width: 52px; height: 6px;
  margin-right: 9px;
  vertical-align: middle;
  background: color-mix(in srgb, var(--tinta) 10%, transparent);
  border-radius: 100px;
}
.zp i { display: block; height: 100%; background: currentColor; border-radius: 100px; }
/* la raya sobresale arriba y abajo: si no, cuando el relleno la alcanza
   se confunde con el borde del relleno y deja de leerse */
.zp b {
  position: absolute; top: -3px; bottom: -3px; width: 2px;
  margin-left: -1px;
  background: color-mix(in srgb, var(--tinta) 62%, transparent);
  border-radius: 2px;
}

.tabla-zona .fila-total td {
  border-top: 2px solid color-mix(in srgb, var(--tono) 45%, var(--linea-alta));
  border-bottom: 0;
  font-weight: 700;
  background: color-mix(in srgb, var(--tono) 10%, transparent);
}

@media (max-width: 900px) {
  .tabla-zona { font-size: 13px; }
  .tabla-zona tbody td, .tabla-zona thead th { padding: 7px 9px; }
  .zp { display: none; }
}

/* ==================================================================
   DRILL-DOWN DE ZONA
   La fila se abre y debajo aparece un panel hundido con la venta de
   esa zona abierta por canal, familia o cliente.

   Va como lista de barras y no como tabla anidada: una tabla dentro de
   otra obliga a leer dos grillas distintas a la vez y se ve apretada.
   Las barras dicen el peso de cada canal sin leer un número.
   ================================================================== */
.tz-fila { cursor: pointer; }
.tz-fila:focus-visible { outline: 2px solid var(--corp); outline-offset: -2px; }

.tz-flecha {
  width: 13px; height: 13px;
  margin-right: 5px;
  vertical-align: -2px;
  color: var(--tinta-baja);
  transition: transform .18s ease, color .18s ease;
}
.tz-fila:hover .tz-flecha { color: var(--corp); }
.tz-fila.abierta .tz-flecha { transform: rotate(90deg); color: var(--corp); }

.tz-fila.abierta td {
  background: color-mix(in srgb, var(--tono, var(--corp)) 12%, transparent);
  border-bottom-color: transparent;
  font-weight: 600;
}

.tz-detalle > td {
  padding: 0 0 14px;
  background: color-mix(in srgb, var(--tono, var(--corp)) 12%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--corp) 30%, transparent);
}
.tz-cargando {
  margin: 0; padding: 16px 14px;
  font-size: 13.5px; color: var(--tinta-baja);
}

.dz {
  margin: 0 14px;
  background: var(--tarjeta);
  border: 1px solid color-mix(in srgb, var(--corp) 22%, var(--linea));
  border-radius: 10px;
  padding: 14px 16px 10px;
}

.dz-cab {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  margin-bottom: 12px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--linea);
}
.dz-tit { min-width: 0; }
/* el mes en curso puede no tener facturacion todavia: se dice, en vez
   de mostrar una lista vacia que parece un error */
.dz-vacio {
  margin: 0; padding: 22px 4px;
  font-size: 13.5px; line-height: 1.5;
  color: var(--tinta-baja);
}
.dz-cab h4 {
  margin: 0; font-size: 15.5px; font-weight: 600; letter-spacing: -.01em;
  color: color-mix(in srgb, var(--corp) 70%, var(--tinta));
}
.dz-per { margin: 2px 0 0; font-size: 12px; color: var(--tinta-baja); }

/* dos controles: período arriba, dimensión abajo. Separados en dos
   filas para que no se lean como una sola lista de seis opciones. */
.dz-filtros {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 7px; flex: none;
}
/* el de período va más apagado: es el contexto, no la dimensión */
.dz-per-tabs button.activo {
  background: color-mix(in srgb, var(--corp) 16%, var(--tarjeta));
  color: color-mix(in srgb, var(--corp) 88%, var(--tinta));
}
.dz-per-tabs button.activo:hover {
  background: color-mix(in srgb, var(--corp) 16%, var(--tarjeta));
}

/* Control segmentado. Antes eran textos con subrayado y se leían como
   títulos agrupados a la derecha, no como algo que se puede tocar. Con
   caja, divisiones y el activo relleno queda claro que es un filtro. */
.dz-tabs {
  display: inline-flex; flex: none;
  border: 1px solid var(--linea-alta);
  border-radius: 7px;
  overflow: hidden;
  background: var(--hundido);
}
.dz-tabs button {
  font: inherit; font-size: 13px; line-height: 1;
  border: 0; border-right: 1px solid var(--linea-alta);
  background: transparent; cursor: pointer;
  padding: 7px 15px;
  color: var(--tinta-med);
  white-space: nowrap;
  transition: background .12s ease, color .12s ease;
}
.dz-tabs button:last-child { border-right: 0; }
.dz-tabs button:hover { background: color-mix(in srgb, var(--corp) 10%, transparent); color: var(--tinta); }
.dz-tabs button.activo {
  background: var(--corp);
  color: #fff;
  font-weight: 600;
}
.dz-tabs button.activo:hover { background: var(--corp); }

/* La lista, en grilla fija.

   Orden de las columnas: punto de color, rótulo, monto, participación,
   barra, variación, dato secundario. El monto va pegado al rótulo
   porque es lo que se lee primero; la barra queda después, como apoyo
   visual y no como protagonista.

   La barra mide 150px fijos y no un porcentaje del ancho: cuando
   ocupaba 2,4fr se estiraba hasta media pantalla, los valores chicos
   se veían vacíos y los números quedaban lejos del rótulo. */
.dz-lista { list-style: none; margin: 0; padding: 0; }
.dz-lista li {
  display: grid;
  grid-template-columns: 9px minmax(130px, 1fr) 132px 82px 150px 74px minmax(78px, auto);
  align-items: center;
  gap: 0 14px;
  padding: 7px 0;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}
.dz-lista li + li { border-top: 1px solid color-mix(in srgb, var(--tinta) 6%, transparent); }

/* encabezado de la lista: mismo grid, texto chico y apagado */
.dz-encabezado {
  padding: 0 0 8px !important;
  font-size: 12px;
  font-weight: 600;
  color: var(--tinta-baja);
  border-bottom: 1px solid var(--linea);
}
.dz-encabezado span { white-space: nowrap; }
.dz-encabezado .dz-monto,
.dz-encabezado .dz-share,
.dz-encabezado .dz-cre { font-weight: 600; color: var(--tinta-baja); }
.dz-encabezado .dz-sec { font-size: 12px; }
/* la primera fila de datos no repite la regla: ya la puso el encabezado */
.dz-encabezado + li { border-top: 0 !important; }

/* el punto lleva el color de la fila: identifica sin depender de la barra */
.dz-punto {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--c, var(--corp));
}

.dz-rot {
  font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dz-barra {
  height: 7px;
  background: color-mix(in srgb, var(--tinta) 7%, transparent);
  border-radius: 100px;
  overflow: hidden;
}
.dz-barra i {
  display: block; height: 100%;
  min-width: 3px;                  /* que un 0,1% igual se vea */
  background: var(--c, var(--corp));
  border-radius: 100px;
}
.dz-monto { text-align: right; font-weight: 600; }
.dz-share { text-align: right; color: var(--tinta-med); }
.dz-cre   { text-align: right; }
.dz-cre.bien { color: var(--verde); font-weight: 600; }
.dz-cre.mal  { color: var(--rojo);  font-weight: 600; }
.dz-sec   { color: var(--tinta-baja); font-size: 12px; white-space: nowrap; text-align: right; }

.dz-total {
  border-top: 2px solid var(--linea-alta) !important;
  margin-top: 3px;
  padding-top: 9px !important;
  font-weight: 700;
}
.dz-total .dz-punto { background: transparent; }
/* la barra vacía del total se veía como un error: no se dibuja */
.dz-total .dz-barra { background: transparent; }
.dz-total .dz-share { color: var(--tinta); }

@media (max-width: 1200px) {
  .dz-lista li { grid-template-columns: 9px minmax(110px, 1fr) 124px 78px 96px 70px; }
  .dz-sec { display: none; }
}
@media (max-width: 900px) {
  .dz { margin: 0 8px; padding: 12px 12px 8px; }
  .dz-lista li { grid-template-columns: 9px minmax(84px, 1fr) 114px 72px 66px; gap: 0 10px; }
  .dz-barra { display: none; }
}

/* ------------------------------ barra ----------------------------- */
.progress {
  position: relative;
  height: 9px;
  background: color-mix(in srgb, var(--tinta) 9%, transparent);
  border-radius: 100px;
}
.progress-bar {
  height: 100%;
  border-radius: 100px;
  background: var(--tono);
  transition: width 1.2s cubic-bezier(.22, .68, .36, 1);
}

/* la marca del 100%: deja ver de un vistazo si se pasó la meta */
.marca-100 {
  position: absolute; top: -4px; bottom: -4px; right: 0; width: 2px;
  background: color-mix(in srgb, var(--tinta) 55%, transparent);
  border-radius: 2px;
}
/* marca del avance esperado a esta altura del año */
.marca-esperado {
  position: absolute; top: -4px; bottom: -4px; width: 2px;
  background: var(--tinta); opacity: .45; border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .progress-bar { transition: none; }
}
@media (max-width: 460px) {
  .tm-cifra { font-size: 21px; }
  .tm-pct { font-size: 13.5px; }
}

/* ==================================================================
   SEMÁFORO DE CUMPLIMIENTO
   Acordado: rojo bajo 80%, ámbar de 80 a 98%, verde desde 99%.
   El porcentaje siempre se muestra junto al color, así que la
   identidad nunca depende solo del tono.
   ================================================================== */
.sem-rojo  { color: var(--rojo); }
.sem-ambar { color: var(--ambar); }
.sem-verde { color: var(--verde); }

/* La tarjeta toma su color del semáforo en una sola variable, y de ahí
   salen el degradé del fondo, el borde, el badge y la barra. */
.tm.sem-rojo   { --tono: var(--rojo); }
.tm.sem-ambar  { --tono: var(--ambar); }
.tm.sem-verde  { --tono: var(--verde); }
/* neutro: cuando el 0% es falta de datos y no un mal resultado.
   Pintarlo de rojo haría leer un problema donde no lo hay. */
.tm.sem-neutro { --tono: var(--tinta-baja); }
.tm.sem-neutro .tm-cifra { color: var(--tinta-med); font-size: 21px; }

/* barra de progreso: relleno sólido */
.progress-bar.sem-rojo   { background: var(--rojo); }
.progress-bar.sem-ambar  { background: var(--ambar); }
.progress-bar.sem-verde  { background: var(--verde); }
.progress-bar.sem-neutro { background: color-mix(in srgb, var(--tinta) 22%, transparent); }

/* barras del gráfico mensual */
.b-venta.sem-rojo  { background: var(--rojo); }
.b-venta.sem-ambar { background: var(--ambar); }
.b-venta.sem-verde { background: var(--verde); }

/* la celda de cumplimiento en las tablas */
td.sem-rojo  { color: var(--rojo);  font-weight: 700; }
td.sem-ambar { color: var(--ambar); font-weight: 700; }
td.sem-verde { color: var(--verde); font-weight: 700; }

/* La leyenda del semáforo se quitó el 2026-09-04: Daniel pidió sacarla
   porque el color de la barra ya comunica el estado sin explicarlo. */

/* ==================================================================
   VENTA POR TIPO Y SECTOR
   ================================================================== */
.dos-columnas {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  margin-bottom: 8px;
}
.bloque { min-width: 0; }
.bloque .grupo { margin-top: 0; }

/* ------------------------- tabla por canal ------------------------ */
.tabla-canal { font-size: 14.5px; }
.tabla-canal td, .tabla-canal th { padding: 8px 12px; }
.tabla-canal td:first-child b { font-family: Consolas, "Cascadia Mono", "SF Mono", ui-monospace, monospace; font-size: 13.5px; }


}
@media (max-width: 900px) {
  .dos-columnas { grid-template-columns: minmax(0, 1fr); }
}

/* ==================================================================
   LIENZOS DE ECHARTS
   La librería necesita altura explícita en el contenedor.
   ================================================================== */
.lienzo-g {
  width: 100%;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--tarjeta);
  padding: 6px;
}
.lienzo-mes   { height: 320px; }
.lienzo-dona  { height: 300px; }

@media (max-width: 700px) {
  .lienzo-mes { height: 260px; }
  .lienzo-dona { height: 270px; }
}

/* ==================================================================
   ANCHO COMPLETO
   El panel deja de estar centrado en 1080px: las tablas de datos
   necesitan todo el ancho disponible.
   ================================================================== */
.contenido { max-width: none; }
.superior  { max-width: none; }

/* la dona ocupa menos que el gráfico de canales, para que la fila
   quede equilibrada */
.dos-columnas { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); }
.lienzo-dona  { height: 250px; }

/* las tablas usan todo el ancho y no se estrechan */
#m-canales .tabla-scroll,
#m-tabla .tabla-scroll { width: 100%; }
#m-canales table, #m-tabla table { min-width: 100%; }

@media (max-width: 900px) {
  .dos-columnas { grid-template-columns: minmax(0, 1fr); }
}

/* ==================================================================
   ALINEACIÓN DE CIFRAS EN TABLAS
   Los números van a la derecha, encabezado incluido, para que las
   unidades queden alineadas entre filas.
   ================================================================== */
.tabla-scroll th.num,
.tabla-scroll td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.tabla-scroll td:first-child,
.tabla-scroll th:first-child { text-align: left; }

/* ==================================================================
   CLIENTES QUE MÁS CRECIERON Y QUE MÁS CAYERON

   Reusa el panel .pz —misma receta que las tarjetas: esquinas de
   14px, degradé suave, borde y sombra tenue, título adentro— y solo
   cambia el tono, para que un cuadro se distinga del otro sin tener
   que leer el título. El tono entra al 11% en el degradé, así que
   tiñe sin volverse un semáforo gigante.
   ================================================================== */
.pv-par { display: grid; gap: 18px; }
.pv-suben { --tono: var(--verde); }
.pv-bajan { --tono: var(--rojo); }

/* el nombre del cliente es largo: se recorta con puntos suspensivos y
   el nombre completo queda en el title */
.tabla-var { table-layout: fixed; width: 100%; }
.tabla-var th:first-child { width: auto; }
.tabla-var th:nth-child(2) { width: 88px; }
.tabla-var th:nth-child(3),
.tabla-var th:nth-child(4) { width: 140px; }
.tabla-var th:nth-child(5) { width: 210px; }
.tabla-var th:nth-child(6) { width: 84px; }

.tv-cli { max-width: 0; }
.tv-cli span {
  display: inline-block; vertical-align: middle;
  max-width: calc(100% - 22px);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 600;
}
.tv-fila { cursor: pointer; }
.tv-fila .tz-flecha {
  width: 15px; height: 15px; vertical-align: middle;
  margin-right: 5px; color: var(--tinta-baja);
  transition: transform .18s ease;
}
.tv-fila.abierta .tz-flecha { transform: rotate(90deg); color: var(--tono); }
.tv-fila:hover td { background: color-mix(in srgb, var(--tono) 8%, transparent); }
.tv-fila.abierta td { background: color-mix(in srgb, var(--tono) 11%, transparent); }

/* la barra de la diferencia: verde si sumó, roja si restó, y las dos
   tablas comparten escala para poder compararlas entre sí */
.zp-var i.sube { background: var(--verde); }
.zp-var i.baja { background: var(--rojo); }

/* --------- el detalle: por qué creció o por qué cayó --------- */
.dv-lista li {
  grid-template-columns: minmax(150px, 1fr) 128px 128px minmax(140px, 1fr) 132px;
}
.dv-lista .dz-rot { font-weight: 600; }

/* pista con eje al centro: a la derecha lo que sumó, a la izquierda
   lo que restó. La raya del medio es la que da la lectura. */
.dv-eje {
  position: relative;
  height: 9px;
  background: color-mix(in srgb, var(--tinta) 7%, transparent);
  border-radius: 3px;
}
.dv-eje::before {
  content: ''; position: absolute; left: 50%; top: -3px; bottom: -3px;
  width: 1px; background: color-mix(in srgb, var(--tinta) 45%, transparent);
}
.dv-eje i {
  position: absolute; top: 0; bottom: 0;
  border-radius: 2px;
  transition: width .5s cubic-bezier(.22, .68, .36, 1);
}
.dv-eje i.sube { background: var(--verde); }
.dv-eje i.baja { background: var(--rojo); }
/* en el encabezado y el total la pista no lleva fondo ni eje */
.dz-encabezado .dv-eje,
.dz-total .dv-eje { background: none; }
.dz-encabezado .dv-eje::before,
.dz-total .dv-eje::before { display: none; }

@media (max-width: 1200px) {
  .tabla-var th:nth-child(5) { width: 165px; }
  .dv-lista li { grid-template-columns: minmax(120px, 1fr) 116px 116px 110px 120px; }
}
@media (max-width: 900px) {
  .tabla-var { table-layout: auto; }
  .dv-lista li { grid-template-columns: minmax(90px, 1fr) 108px 108px 112px; gap: 0 10px; }
  .dv-lista .dv-eje { display: none; }
}

/* La píldora del resumen: el monto va completo y grande porque es lo
   primero que se mira del cuadro. Abreviado a millones y en 13px no se
   leía. El número de clientes queda de contexto, en chico y al lado. */
.pv-badge {
  display: inline-flex; align-items: baseline; gap: 10px;
  font-size: 19px; padding: 9px 16px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.pv-badge small {
  font-size: 12.5px; font-weight: 600;
  color: color-mix(in srgb, var(--tono) 60%, var(--tinta-med));
}
@media (max-width: 900px) {
  .pv-badge { font-size: 16px; padding: 7px 13px; }
}

/* ==================================================================
   COMISIONES POR CURVA DE PRECIOS
   Matriz vendedor × tramo. Cada celda lleva el monto arriba y el peso
   dentro del vendedor abajo, en chico: los dos números juntos son los
   que dicen si alguien vende caro o con descuento.
   ================================================================== */
.tabla-com th:first-child { width: 210px; }
.tabla-com td, .tabla-com th { vertical-align: middle; }

.cx-vend { font-weight: 600; white-space: nowrap; }
.cx-zona {
  display: inline-block; margin-left: 8px;
  font-family: Consolas, "Cascadia Mono", ui-monospace, monospace;
  font-size: 11.5px; font-weight: 600;
  color: var(--tinta-baja);
}

/* la celda es un botón: tiene que verse que se puede abrir */
.cx-celda { cursor: pointer; }
.cx-celda b { display: block; font-weight: 600; }
.cx-celda small {
  display: block; margin-top: 2px;
  font-size: 11.5px; font-weight: 600;
  color: var(--tinta-baja);
}
.cx-celda:hover { background: color-mix(in srgb, var(--corp) 10%, transparent); }
.cx-celda:focus-visible { outline: 2px solid var(--corp); outline-offset: -2px; }
.cx-celda.abierta {
  background: color-mix(in srgb, var(--corp) 15%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--corp) 40%, transparent);
}
.cx-vacia { color: var(--tinta-baja); }
.cx-com { font-weight: 700; color: color-mix(in srgb, var(--corp) 80%, var(--tinta)); }

.cx-detalle > td { padding: 0 !important; background: none !important; }

/* la lista del detalle: mismo grid que el drill-down de zona, pero la
   última columna es comisión en pesos y no un porcentaje */
.dc-lista li {
  grid-template-columns: 9px minmax(160px, 1fr) 132px 74px 130px 124px;
}

@media (max-width: 1200px) {
  .dc-lista li { grid-template-columns: 9px minmax(120px, 1fr) 124px 70px 90px 118px; }
}
@media (max-width: 900px) {
  .tabla-com th:first-child { width: auto; }
  .cx-celda small { display: none; }
  .dc-lista li { grid-template-columns: 9px minmax(90px, 1fr) 112px 108px; gap: 0 10px; }
  .dc-lista .dz-share, .dc-lista .dz-barra { display: none; }
}

/* ==================================================================
   PÚBLICO CONTRA PRIVADO
   Dos fichas con la misma receta que las tarjetas: esquinas redondas,
   degradé suave del tono, borde y sombra tenue. Antes eran dos rótulos
   de 12px que no pertenecían a ninguna parte de la pantalla.
   Nada de torta: para dos valores obliga a comparar ángulos, y con el
   porcentaje escrito al lado la torta no aporta.
   ================================================================== */
.mix {
  margin-left: auto;
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
}

.mix-ficha {
  --tono: var(--corp);
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 15px 8px 11px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--tono) 30%, var(--linea));
  background: linear-gradient(150deg,
      color-mix(in srgb, var(--tono) 15%, var(--tarjeta)) 0%,
      color-mix(in srgb, var(--tono) 5%, var(--tarjeta)) 60%,
      var(--tarjeta) 100%);
  box-shadow: 0 2px 8px -4px color-mix(in srgb, var(--tono) 45%, transparent);
}
.mix-ficha svg {
  width: 24px; height: 24px; flex: none;
  fill: color-mix(in srgb, var(--tono) 82%, var(--tinta));
}
.mix-txt { display: flex; flex-direction: column; line-height: 1.16; }
.mix-txt small {
  font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
  color: var(--tinta-med);
}
.mix-txt b {
  font-size: 19px; font-weight: 700; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--tono) 78%, var(--tinta));
}

/* Tonos de la paleta categórica, no los del semáforo: acá no hay nada
   bueno ni malo, son dos mercados. Medidos sobre la tarjeta clara dan
   5,5:1 y 5,3:1 de contraste. */
.mix-pub { --tono: #2f6fb0; }
.mix-pri { --tono: #b8641a; }
.mix-otr { --tono: #6b7079; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mix-pub { --tono: #6ea8dd; }
  :root:not([data-theme="light"]) .mix-pri { --tono: #e09a4e; }
  :root:not([data-theme="light"]) .mix-otr { --tono: #9aa0a8; }
}
:root[data-theme="dark"] .mix-pub { --tono: #6ea8dd; }
:root[data-theme="dark"] .mix-pri { --tono: #e09a4e; }
:root[data-theme="dark"] .mix-otr { --tono: #9aa0a8; }

@media (max-width: 700px) {
  .mix { margin-left: 0; width: 100%; }
}

/* ==================================================================
   OPORTUNIDADES DE CONVENIO MARCO
   Nueve columnas, así que las celdas apilan el dato principal arriba y
   el secundario abajo en chico, en vez de sumar columnas. Es la misma
   idea de las celdas de la matriz de comisiones.
   ================================================================== */
.tabla-opo { width: 100%; }
.tabla-opo td, .tabla-opo th { vertical-align: middle; }
.tabla-opo td small {
  display: block; margin-top: 2px;
  font-size: 11.5px; font-weight: 600; color: var(--tinta-baja);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.to-fila { cursor: pointer; }
.to-fila .tz-flecha {
  width: 15px; height: 15px; vertical-align: middle;
  margin-right: 5px; color: var(--tinta-baja);
  transition: transform .18s ease;
}
.to-fila.abierta .tz-flecha { transform: rotate(90deg); color: var(--corp); }
.to-fila:hover td { background: color-mix(in srgb, var(--corp) 7%, transparent); }
.to-fila.abierta td { background: color-mix(in srgb, var(--corp) 11%, transparent); }

.to-comp { max-width: 230px; }
.to-comp span {
  display: inline-block; vertical-align: middle;
  max-width: calc(100% - 22px);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 600;
}
.to-prod b {
  font-family: Consolas, "Cascadia Mono", ui-monospace, monospace;
  font-size: 13px; color: var(--corp);
}
.to-prov { max-width: 190px; }
.to-prov b {
  display: block; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.to-cad { white-space: nowrap; }

/* la fecha estimada es la columna que se mira para salir a vender */
.to-prox {
  white-space: nowrap;
  font-weight: 700;
  color: color-mix(in srgb, var(--corp) 82%, var(--tinta));
}
.to-nuestro { font-weight: 700; color: var(--verde); }
.to-brecha { font-weight: 700; }

.to-detalle > td { padding: 0 !important; background: none !important; }
.do-lista li {
  grid-template-columns: 9px minmax(150px, 1.4fr) minmax(90px, 1fr) 108px 108px 118px 100px;
}

/* la ficha del resumen: mismo lenguaje que público/privado */
.mix-opo { --tono: #7d4f9c; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mix-opo { --tono: #b18ccd; }
}
:root[data-theme="dark"] .mix-opo { --tono: #b18ccd; }

@media (max-width: 1200px) {
  .to-comp { max-width: 170px; }
  .to-prov { max-width: 140px; }
  .do-lista li { grid-template-columns: 9px minmax(120px, 1.3fr) 90px 100px 100px 110px; }
  .do-lista .dz-barra { display: none; }
}
@media (max-width: 900px) {
  .tabla-opo td small { display: none; }
  .do-lista li { grid-template-columns: 9px minmax(100px, 1fr) 100px 100px; gap: 0 10px; }
  .do-lista .dz-rot:nth-of-type(2), .do-lista .dz-monto:nth-of-type(3) { display: none; }
}

/* ==================================================================
   CIERRE DEL DETALLE
   La fila ya cerraba al volver a hacerle clic, pero con un panel de
   media pantalla eso no se descubre. La X lo hace explícito.
   ================================================================== */
.dz-cerrar {
  flex: none;
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-size: 20px; line-height: 1;
  color: var(--tinta-med);
  background: var(--tarjeta);
  border: 1px solid var(--linea-alta);
  border-radius: 8px;
  cursor: pointer;
}
.dz-cerrar:hover {
  color: var(--tinta);
  background: color-mix(in srgb, var(--tinta) 7%, var(--tarjeta));
}
.dz-cerrar:focus-visible { outline: 2px solid var(--corp); outline-offset: 2px; }
.dz-filtros { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ------------------ oportunidades: OC, urgente ------------------ */
.to-oc a {
  font-family: Consolas, "Cascadia Mono", ui-monospace, monospace;
  font-size: 12.5px; font-weight: 600;
  color: var(--corp);
  text-decoration: none;
  border-bottom: 1px dotted color-mix(in srgb, var(--corp) 55%, transparent);
  white-space: nowrap;
}
.to-oc a:hover { border-bottom-style: solid; }

/* Gestionar urgente: ya les tocaba comprar y no lo hicieron. La fila
   lleva una banda a la izquierda, no un fondo rojo entero: con 149
   filas un fondo rojo deja la tabla ilegible. */
.to-urge > td:first-child { box-shadow: inset 3px 0 0 0 var(--rojo); }
/* El badge va en su propia línea, alineado a la derecha bajo la
   fecha. En la misma línea apretaba la fecha y se leía mal. */
.to-badge {
  display: block !important;
  width: -moz-fit-content; width: fit-content;
  margin: 4px 0 0 auto !important;
  padding: 2px 8px;
  border-radius: 100px;
  font-size: 11px !important; font-weight: 700 !important;
  letter-spacing: .01em;
  color: var(--rojo) !important;
  background: color-mix(in srgb, var(--rojo) 14%, var(--tarjeta));
  border: 1px solid color-mix(in srgb, var(--rojo) 34%, transparent);
  overflow: visible !important;
}
/* la fecha con más aire, que es el dato que se lee primero */
.to-prox { padding-top: 9px !important; padding-bottom: 9px !important; }
.mix-urge { --tono: #a83c30; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mix-urge { --tono: #e08a7e; }
}
:root[data-theme="dark"] .mix-urge { --tono: #e08a7e; }

/* las OC del detalle, todas juntas para validar */
.do-ocs {
  margin: 12px 0 4px;
  display: flex; flex-wrap: wrap; gap: 6px 8px;
}
.do-ocs a {
  font-family: Consolas, "Cascadia Mono", ui-monospace, monospace;
  font-size: 12px; font-weight: 600;
  padding: 3px 9px; border-radius: 100px;
  color: var(--corp); text-decoration: none;
  background: color-mix(in srgb, var(--corp) 9%, var(--tarjeta));
  border: 1px solid color-mix(in srgb, var(--corp) 26%, transparent);
}
.do-ocs a:hover { background: color-mix(in srgb, var(--corp) 18%, var(--tarjeta)); }

/* ==================================================================
   TENDENCIA Y PODIO DE COMISIONES
   ================================================================== */
.ct-lienzo { width: 100%; height: 330px; }

/* --------------------------- el podio ---------------------------
   Cinco columnas en una banda: la tasa efectiva y los cuatro tramos.
   La primera versión apilaba el general arriba y los tramos abajo, y
   ocupaba media pantalla; Daniel pidió que no ocupe tanto y que vaya
   al principio del tab. Todo apretado a propósito: tres líneas por
   columna, sin bordes internos.
   ================================================================== */
.cp-grilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 14px 20px;
}
.cp-col { min-width: 0; }
/* la tasa efectiva es el resumen, así que lleva un fondo tenue */
.cp-destacada {
  background: color-mix(in srgb, var(--corp) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--corp) 18%, transparent);
  border-radius: 10px;
  padding: 8px 11px 6px;
  margin: -8px -11px -6px;
}

.cp-rot {
  margin: 0 0 6px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tinta-baja);
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
}
.cp-nota {
  text-transform: none; letter-spacing: 0;
  font-size: 10.5px; font-weight: 600;
  /* la nota ahora dice el tramo, no una advertencia */
  color: var(--tinta-baja);
}

.cp-lista { list-style: none; margin: 0; padding: 0; }
.cp-lugar {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center; gap: 8px;
  padding: 3px 0;
  font-variant-numeric: tabular-nums;
}
.cp-quien {
  min-width: 0; font-size: 13px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cp-valor {
  font-size: 14px; font-weight: 700;
  color: color-mix(in srgb, var(--corp) 80%, var(--tinta));
}
.cp-inv .cp-valor { color: color-mix(in srgb, var(--verde) 82%, var(--tinta)); }

/* oro, plata y cobre. El color va en currentColor y el dígito en negro
   al 62%: blanco sobre el oro da 2,2:1 y no se lee. */
.cp-moneda { width: 20px; height: 20px; display: block; }
.cp-m1 { color: #c9a227; }
.cp-m2 { color: #9aa3ab; }
.cp-m3 { color: #b06c3a; }

@media (max-width: 700px) {
  .ct-lienzo { height: 280px; }
  .cp-destacada { margin: 0 0 4px; }
}

/* --- las tres categorías de producto, al lado de público/privado --- */
.mix-com { --tono: #2f8f6b; }
.mix-fab { --tono: #7d4f9c; }
.mix-ins { --tono: #8a6f22; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mix-com { --tono: #6cc3a0; }
  :root:not([data-theme="light"]) .mix-fab { --tono: #b18ccd; }
  :root:not([data-theme="light"]) .mix-ins { --tono: #cfae55; }
}
:root[data-theme="dark"] .mix-com { --tono: #6cc3a0; }
:root[data-theme="dark"] .mix-fab { --tono: #b18ccd; }
:root[data-theme="dark"] .mix-ins { --tono: #cfae55; }

/* separador entre los dos cortes: uno es por cliente y el otro por
   producto, y sin la raya se leen como una sola tira de cinco fichas */
.mix-corte {
  width: 1px; align-self: stretch;
  margin: 2px 4px;
  background: var(--linea-alta);
}
@media (max-width: 1100px) {
  .mix-corte { display: none; }
}

/* ==================================================================
   GESTIÓN EN TERRENO — controles de la app en el escritorio

   Reutiliza lo que ya existe: .pz para las secciones, .tabla-zona para
   las tablas, .tarjetas para las cifras de auditoría, .mix-ficha para
   el resumen y los semáforos sem-verde/ambar/rojo. Acá van solo las
   piezas nuevas, y el calendario es la única de verdad.

   Regla de Daniel del 2026-09-08: TODO DEBE QUEDAR ALINEADO. Las
   columnas numéricas llevan tabular-nums para que las cifras caigan
   una sobre otra, y el punto de color mide siempre lo mismo para que
   los nombres arranquen en la misma x aunque a uno le falte el punto.
   ================================================================== */

.ter-punto {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-right: 8px; vertical-align: baseline; flex: none;
}
.ter-nombre { font-weight: 500; }
.ter-tabla { font-variant-numeric: tabular-nums; }
.ter-tabla td.num, .ter-tabla th.num { text-align: right; }
.ter-cli { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ter-nunca { color: var(--rojo); font-weight: 600; }
.ter-tipo {
  font-size: 12px; padding: 2px 8px; border-radius: 999px;
  background: var(--hundido); border: 1px solid var(--linea);
  color: var(--tinta-med);
}
.ter-motivo { font-size: 12.5px; font-weight: 600; }
.ter-m-sin   { color: var(--ambar); }
.ter-m-lejos { color: var(--rojo); }
.ter-m-sincronizada { color: var(--tinta-med); }

/* buscador dentro de una sección, no en la barra de herramientas */
.herramientas-int { margin: 0 0 10px; padding: 0; border: 0; background: transparent; }

/* ---------------------------- el calendario ---------------------- *
   Rejilla simple: una columna de horas y cinco de días. Los bloques se
   apilan dentro de su celda. Se prefirió esto antes que posicionar por
   minutos con position:absolute —que da un calendario más "real" y se
   rompe con cualquier solapamiento— porque con cuatro o cinco visitas
   al día no hace falta esa precisión y sí hace falta que nunca se
   monten dos bloques uno encima del otro.
   ------------------------------------------------------------------ */
.ter-nav { display: inline-flex; gap: 6px; align-items: center; }
.ter-nav button {
  font: inherit; font-size: 13px; line-height: 1;
  padding: 7px 12px; cursor: pointer;
  border: 1px solid var(--linea-alta); border-radius: 7px;
  background: var(--papel); color: var(--tinta-med);
}
.ter-nav button:hover { background: var(--hundido); color: var(--tinta); }

.ter-leyenda { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.ter-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--tinta-med);
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--c, var(--corp)) 34%, var(--linea));
  background: color-mix(in srgb, var(--c, var(--corp)) 7%, var(--papel));
}
.ter-chip small { color: var(--tinta-baja); }
.ter-chip b { font-size: 12px; }

.ter-cal-scroll { overflow-x: auto; }
.ter-cal {
  display: grid;
  /* la columna de horas fija, y los cinco días iguales entre sí: si se
     dejan en 1fr sueltos, un día con nombres largos se come a los otros */
  grid-template-columns: 62px repeat(5, minmax(150px, 1fr));
  border: 1px solid var(--linea);
  border-radius: 10px;
  overflow: hidden;
  min-width: 820px;
  background: var(--papel);
}
.ter-cal-cab {
  background: var(--hundido);
  border-bottom: 1px solid var(--linea-alta);
  border-left: 1px solid var(--linea);
  padding: 9px 10px;
  font-size: 13px; font-weight: 600; color: var(--tinta);
  display: flex; flex-direction: column; gap: 2px;
}
.ter-cal-cab:first-child { border-left: 0; }
.ter-cal-cab small { font-weight: 400; font-size: 11.5px; color: var(--tinta-baja); }
.ter-cal-hora {
  border-top: 1px solid var(--linea);
  padding: 7px 10px;
  font-size: 12px; color: var(--tinta-baja);
  font-variant-numeric: tabular-nums;
  background: var(--hundido);
}
.ter-cal-celda {
  border-top: 1px solid var(--linea);
  border-left: 1px solid var(--linea);
  padding: 4px;
  min-height: 40px;
  display: flex; flex-direction: column; gap: 3px;
}
.ter-bloque {
  border-radius: 6px;
  padding: 4px 7px;
  font-size: 12px;
  line-height: 1.25;
  border-left: 3px solid var(--c, var(--corp));
  background: color-mix(in srgb, var(--c, var(--corp)) 12%, var(--papel));
  color: var(--tinta);
  overflow: hidden;
}
.ter-bloque b {
  display: block; font-size: 11px; font-weight: 700;
  color: color-mix(in srgb, var(--c, var(--corp)) 75%, var(--tinta));
  font-variant-numeric: tabular-nums;
}
.ter-bloque span {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Cumplida va sólida; planificada va rayada porque todavía no ocurrió;
   la que no tenía plan va con borde cortado, que se lee como "esto no
   estaba en el programa". */
.ter-cumplida { background: color-mix(in srgb, var(--c) 18%, var(--papel)); }
.ter-planificada {
  background: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--c) 11%, var(--papel)) 0 6px,
    var(--papel) 6px 12px);
}
.ter-sinPlan {
  border-left-style: dashed;
  background: var(--hundido);
}

.ter-pie {
  margin: 12px 0 0; font-size: 12.5px; color: var(--tinta-baja);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.ter-muestra {
  display: inline-block; width: 22px; height: 12px; border-radius: 4px;
  --c: var(--corp);
  border-left: 3px solid var(--c);
  margin-left: 10px;
}
.ter-muestra:first-child { margin-left: 0; }
.ter-plazo { margin-left: auto; color: var(--tinta-med); }

/* ==================================================================
   PANEL LATERAL CON EL PDF DE LA ORDEN DE COMPRA

   Daniel, 2026-09-09: "cuando pincho la OC puede abrirse una modal por
   la derecha y mostrar la OC?".

   Entra por la derecha y no tapa la tabla completa: la idea es
   comparar el análisis con la orden, así que la fila que se pinchó
   tiene que seguir a la vista. De ahí el ancho del 54% con tope, y no
   una modal centrada.
   ================================================================== */

.oc-velo {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(20, 26, 32, .38);
}
.oc-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 61;
  width: min(54vw, 940px);
  min-width: 380px;
  display: flex; flex-direction: column;
  background: var(--papel);
  border-left: 1px solid var(--linea-alta);
  box-shadow: -18px 0 46px rgba(20, 26, 32, .18);
}
/* [hidden] pierde contra cualquier clase que fije display, y este panel
   es flex. Sin esto queda visible siempre: la misma lección que costó
   una tarde en la app de terreno. */
.oc-panel[hidden], .oc-velo[hidden] { display: none !important; }

/* mientras está abierto, el fondo no se desplaza por debajo */
body.oc-abierto { overflow: hidden; }

.oc-cab {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; padding: 15px 18px 13px;
  border-bottom: 1px solid var(--linea);
  background: var(--corp-fondo);
  color: var(--corp-texto);
}
.oc-tit { min-width: 0; }
.oc-cab h3 {
  margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.oc-cab p {
  margin: 3px 0 0; font-size: 13px; color: var(--corp-tenue);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.oc-acciones { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.oc-acciones a {
  font-size: 12.5px; text-decoration: none; white-space: nowrap;
  padding: 6px 11px; border-radius: 7px;
  color: var(--corp-texto);
  border: 1px solid var(--corp-borde);
}
.oc-acciones a:hover { background: rgba(255, 255, 255, .12); }
#oc-cerrar {
  border: 1px solid var(--corp-borde); border-radius: 7px;
  background: transparent; cursor: pointer;
  padding: 6px; line-height: 0; color: var(--corp-texto);
}
#oc-cerrar:hover { background: rgba(255, 255, 255, .12); }
#oc-cerrar svg { width: 15px; height: 15px; fill: currentColor; }

.oc-cuerpo { flex: 1; min-height: 0; position: relative; background: var(--hundido); }
.oc-marco { width: 100%; height: 100%; border: 0; display: block; }
.oc-cargando {
  position: absolute; inset: 0; margin: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: var(--tinta-baja);
}
.oc-falla { padding: 26px 22px; font-size: 14.5px; color: var(--tinta-med); }
.oc-falla a { color: var(--azul); }

/* En pantallas angostas ocupa todo: media pantalla de un notebook chico
   no alcanza para leer una orden de compra. */
@media (max-width: 1100px) {
  .oc-panel { width: 100%; min-width: 0; }
}

/* los casos concretos dentro de un aviso de la campana */
.pa-casos {
  margin: 6px 0 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 3px;
}
.pa-casos li {
  font-size: 13px; color: var(--tinta-med);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding-left: 9px; border-left: 2px solid var(--linea-alta);
}
.pa-ir { cursor: pointer; }
.pa-ir:hover { background: var(--hundido); }