/* ============================================================================
   Sistema visual de la plataforma.

   IDEA QUE ORDENA TODO: el único color saturado en pantalla es EL DEL CLIENTE.
   Todo lo demás es neutro cálido. Así el espacio de Ciruderm se siente de
   Ciruderm, y no "nuestro producto con su logo encima".

   El JS calcula dos versiones del color de marca (ver ponColores en app.js):
   un color oscuro es invisible en modo oscuro, y uno claro lo es en el claro.

   Modo claro es el caso para el que se diseña: esto se usa de día, en oficina,
   y en el celular a media tarde. El oscuro existe porque la gente lo pide.
   ========================================================================= */

:root{
  --marca-luz:#0A0A0A;  --marca-sobre-luz:#FFFFFF;
  --marca-osc:#E8E6E0;  --marca-sobre-osc:#151513;
  --marca-primario:var(--marca-luz);
  --marca-sobre-primario:var(--marca-sobre-luz);

  /* Neutros cálidos. Ninguno es negro ni blanco puro: tienen que convivir con
     CUALQUIER color de marca, del verde de Ciruderm al naranja de Galu. */
  --fondo:      oklch(0.982 0.004 85);
  --superficie: oklch(0.998 0.002 85);
  --hundido:    oklch(0.958 0.005 85);
  --texto:      oklch(0.235 0.008 75);
  --texto-2:    oklch(0.505 0.008 75);
  --texto-3:    oklch(0.645 0.007 75);
  --borde:      oklch(0.235 0.008 75 / 0.11);
  --borde-2:    oklch(0.235 0.008 75 / 0.20);

  /* Estados. Croma baja a propósito: informan, no gritan. */
  --ok:oklch(0.48 0.10 160);      --ok-piso:oklch(0.955 0.030 160);
  --espera:oklch(0.55 0.12 70);   --espera-piso:oklch(0.960 0.045 78);
  --alto:oklch(0.52 0.15 25);     --alto-piso:oklch(0.960 0.030 25);
  --frio:oklch(0.50 0.10 250);    --frio-piso:oklch(0.958 0.030 250);

  --r:9px; --r-g:14px;
  --sombra:0 1px 2px oklch(0.235 0.008 75/.05), 0 6px 20px oklch(0.235 0.008 75/.06);
  --sombra-alta:0 2px 6px oklch(0.235 0.008 75/.07), 0 24px 60px oklch(0.235 0.008 75/.12);
  --curva:cubic-bezier(.22,1,.36,1);
}

@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]){
    --marca-primario:var(--marca-osc); --marca-sobre-primario:var(--marca-sobre-osc);
    --fondo:oklch(0.175 0.005 75); --superficie:oklch(0.213 0.006 75); --hundido:oklch(0.252 0.007 75);
    --texto:oklch(0.955 0.004 85); --texto-2:oklch(0.725 0.006 80); --texto-3:oklch(0.565 0.006 80);
    --borde:oklch(0.98 0.004 85/0.11); --borde-2:oklch(0.98 0.004 85/0.22);
    --ok:oklch(0.78 0.13 160); --ok-piso:oklch(0.30 0.055 160);
    --espera:oklch(0.80 0.13 78); --espera-piso:oklch(0.31 0.060 70);
    --alto:oklch(0.75 0.14 25); --alto-piso:oklch(0.31 0.065 25);
    --frio:oklch(0.78 0.11 250); --frio-piso:oklch(0.30 0.050 250);
    --sombra:0 1px 2px oklch(0 0 0/.30), 0 6px 20px oklch(0 0 0/.35);
    --sombra-alta:0 2px 6px oklch(0 0 0/.35), 0 24px 60px oklch(0 0 0/.50);
    color-scheme:dark;
  }
}
:root[data-tema="oscuro"]{
  --marca-primario:var(--marca-osc); --marca-sobre-primario:var(--marca-sobre-osc);
  --fondo:oklch(0.175 0.005 75); --superficie:oklch(0.213 0.006 75); --hundido:oklch(0.252 0.007 75);
  --texto:oklch(0.955 0.004 85); --texto-2:oklch(0.725 0.006 80); --texto-3:oklch(0.565 0.006 80);
  --borde:oklch(0.98 0.004 85/0.11); --borde-2:oklch(0.98 0.004 85/0.22);
  --ok:oklch(0.78 0.13 160); --ok-piso:oklch(0.30 0.055 160);
  --espera:oklch(0.80 0.13 78); --espera-piso:oklch(0.31 0.060 70);
  --alto:oklch(0.75 0.14 25); --alto-piso:oklch(0.31 0.065 25);
  --frio:oklch(0.78 0.11 250); --frio-piso:oklch(0.30 0.050 250);
  --sombra:0 1px 2px oklch(0 0 0/.30), 0 6px 20px oklch(0 0 0/.35);
  --sombra-alta:0 2px 6px oklch(0 0 0/.35), 0 24px 60px oklch(0 0 0/.50);
  color-scheme:dark;
}
:root[data-tema="claro"]{color-scheme:light}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--fondo); color:var(--texto);
  font:400 15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.oculto{display:none !important}

/* Escala 1.2, fija. En UI densa el tamaño fluido estorba más de lo que ayuda. */
h1{font-size:25px;font-weight:560;letter-spacing:-.022em;margin:0;line-height:1.2}
h2{font-size:20px;font-weight:560;letter-spacing:-.017em;margin:0;line-height:1.25}
h3{font-size:16px;font-weight:560;letter-spacing:-.009em;margin:0;line-height:1.3}
.sub{color:var(--texto-2);font-size:13.5px;margin:3px 0 0;line-height:1.5}
.etiqueta{font-size:11px;font-weight:560;letter-spacing:.07em;text-transform:uppercase;color:var(--texto-3)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;color:inherit}
a{color:var(--marca-primario)}

/* ───────────────────────────── controles ──────────────────────────────── */
.btn{
  background:var(--superficie);color:var(--texto);
  border:1px solid var(--borde-2);border-radius:var(--r);
  padding:8px 15px;font-size:14px;font-weight:480;
  transition:background .16s var(--curva),border-color .16s var(--curva),transform .1s var(--curva);
}
.btn:hover{background:var(--hundido);border-color:var(--texto-3)}
.btn:active{transform:translateY(.5px)}
.btn-primario{background:var(--marca-primario);color:var(--marca-sobre-primario);border-color:transparent;font-weight:520}
.btn-primario:hover{background:var(--marca-primario);border-color:transparent;filter:brightness(1.14)}
.btn-fantasma{background:transparent;border-color:transparent;color:var(--texto-2)}
.btn-fantasma:hover{background:var(--hundido);color:var(--texto);border-color:transparent}
.btn-alto,.btn-peligro{border-color:color-mix(in oklch,var(--alto) 45%,transparent);color:var(--alto);background:transparent}
.btn-alto:hover,.btn-peligro:hover{background:var(--alto-piso);border-color:var(--alto)}
.btn:disabled{opacity:.42;cursor:not-allowed}
.btn-g{padding:11px 20px;font-size:15px}

.icono{
  background:transparent;border:1px solid transparent;color:var(--texto-3);
  border-radius:var(--r);width:32px;height:32px;font-size:14px;
  display:grid;place-items:center;transition:background .16s var(--curva),color .16s var(--curva);
}
.icono:hover{background:var(--hundido);color:var(--texto)}

.campo{display:block;margin-bottom:15px}
.campo>span{display:block;font-size:13px;font-weight:480;color:var(--texto-2);margin-bottom:6px}
.campo input,.campo select,.campo textarea{
  width:100%;height:40px;padding:0 12px;background:var(--fondo);
  border:1px solid var(--borde-2);border-radius:var(--r);
  transition:border-color .16s var(--curva),box-shadow .16s var(--curva);
}
.campo textarea{height:auto;min-height:92px;padding:10px 12px;resize:vertical;line-height:1.55}
.campo input:focus,.campo textarea:focus,.campo select:focus{
  outline:none;border-color:var(--marca-primario);
  box-shadow:0 0 0 3.5px color-mix(in oklch,var(--marca-primario) 16%,transparent);
}
.campo input[type=color]{padding:3px;cursor:pointer}
.campo small{display:block;font-size:12px;color:var(--texto-3);margin-top:5px;line-height:1.45}

/* ───────────────────────────── entrada ────────────────────────────────── */
.entrada{min-height:100vh;display:grid;place-items:center;padding:24px;position:relative}
.entrada-fondo{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.22;pointer-events:none}
.entrada-caja{
  position:relative;width:100%;max-width:376px;background:var(--superficie);
  border:1px solid var(--borde);border-radius:var(--r-g);padding:32px 30px;box-shadow:var(--sombra-alta);
}
.entrada-marca{text-align:center;margin-bottom:26px}
.entrada-marca img{max-height:54px;max-width:190px;margin-bottom:12px}
.entrada-nombre{font-size:21px;font-weight:560;letter-spacing:-.018em}
.entrada-saludo{color:var(--texto-2);font-size:13.5px;margin-top:4px}
.entrada-caja .btn{width:100%;margin-top:6px}
.error{color:var(--alto);font-size:13px;min-height:17px;margin:11px 0 0;text-align:center}
.pie{color:var(--texto-3);font-size:12px;text-align:center;margin:16px 0 0}

/* ──────────────────────────── selector ────────────────────────────────── */
.selector{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px}
.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:14px;width:100%;max-width:940px;margin-top:24px}

/* ────────────────────────────── barra ─────────────────────────────────── */
.app{min-height:100vh;display:flex;flex-direction:column}
.barra{
  display:flex;align-items:center;gap:18px;padding:0 20px;height:56px;
  background:var(--superficie);border-bottom:1px solid var(--borde);
  position:sticky;top:0;z-index:20;
}
.barra-marca{display:flex;align-items:center;gap:11px;min-width:0;flex:0 0 auto}
.barra-marca img{max-height:26px;max-width:112px}
.barra-nombre{font-weight:560;font-size:14.5px;line-height:1.15;letter-spacing:-.012em;white-space:nowrap}
.barra-sub{font-size:11.5px;color:var(--texto-3);line-height:1.2;white-space:nowrap}

/* El menú separa lo del GRUPO de lo del CLIENTE actual. Sin esa división,
   "Clientes" y "Entregas" parecen del mismo nivel, y no lo son. */
.menu{display:flex;gap:1px;flex:1;align-items:center;overflow-x:auto;scrollbar-width:none}
.menu::-webkit-scrollbar{display:none}
.menu button{
  background:transparent;border:0;color:var(--texto-2);border-radius:7px;
  padding:6px 11px;font-size:13.5px;font-weight:450;white-space:nowrap;
  transition:background .14s var(--curva),color .14s var(--curva);
}
.menu button:hover{background:var(--hundido);color:var(--texto)}
.menu button.activo{background:var(--hundido);color:var(--texto);font-weight:520}
.menu-sep{flex:0 0 1px;height:18px;background:var(--borde-2);margin:0 10px}
.menu-marca{
  font-size:10.5px;font-weight:560;letter-spacing:.07em;text-transform:uppercase;
  color:var(--texto-3);padding-right:8px;white-space:nowrap;
}
.barra-der{display:flex;align-items:center;gap:4px;flex:0 0 auto}
.quien{
  width:29px;height:29px;border-radius:50%;background:var(--marca-primario);
  color:var(--marca-sobre-primario);display:grid;place-items:center;font-size:11.5px;font-weight:560;
  cursor:pointer;transition:transform .16s var(--curva);
}
.quien:hover{transform:scale(1.06)}
.chip{font-size:11px;font-weight:500;padding:3px 9px;border-radius:20px;white-space:nowrap}
.chip-piloto{background:var(--espera-piso);color:var(--espera)}

/* ────────────────────────────── lienzo ────────────────────────────────── */
.lienzo{padding:28px 24px 64px;max-width:1240px;width:100%;margin:0 auto;flex:1}
.cabecera{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:22px;flex-wrap:wrap}
.acciones{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

.segmentado{display:flex;background:var(--hundido);border-radius:var(--r);padding:2.5px;gap:2px}
.segmentado button{
  background:transparent;border:0;padding:5px 13px;font-size:13px;color:var(--texto-2);
  border-radius:6.5px;font-weight:450;transition:background .16s var(--curva),color .16s var(--curva);
}
.segmentado button.activo{background:var(--superficie);color:var(--texto);font-weight:520;box-shadow:0 1px 2px oklch(0 0 0/.06)}

.filtros{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:20px}
.filtro{
  background:transparent;border:1px solid var(--borde);border-radius:20px;
  padding:5px 13px;font-size:13px;color:var(--texto-2);
  transition:background .14s var(--curva),border-color .14s var(--curva),color .14s var(--curva);
}
.filtro:hover{border-color:var(--borde-2);color:var(--texto)}
.filtro.activo{background:var(--texto);color:var(--fondo);border-color:var(--texto)}

/* ───────────────────── lo que importa ahora (agencia) ─────────────────── */
/* Responde "¿qué se está atorando?" antes que cualquier tabla. */
.pulso{
  display:flex;gap:30px;flex-wrap:wrap;align-items:baseline;
  padding-bottom:22px;margin-bottom:26px;border-bottom:1px solid var(--borde);
}
.pulso-dato{display:flex;flex-direction:column;gap:3px}
.pulso-n{font-size:27px;font-weight:560;letter-spacing:-.028em;line-height:1;font-variant-numeric:tabular-nums}
.pulso-n.urge{color:var(--alto)}
.pulso-n.espera{color:var(--espera)}
.pulso-t{font-size:12.5px;color:var(--texto-2)}
.pulso-calma{font-size:14.5px;color:var(--texto-2)}

/* ───────────────────────────── tarjetas ───────────────────────────────── */
.tarjeta{
  background:var(--superficie);border:1px solid var(--borde);border-radius:var(--r-g);
  padding:18px 19px;text-align:left;
  transition:border-color .16s var(--curva),box-shadow .16s var(--curva);
}
.tarjeta:hover{border-color:var(--borde-2)}
button.tarjeta:hover{box-shadow:var(--sombra)}
.tarjeta-punto{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:8px;vertical-align:1.5px}
.barra-uso{height:4px;background:var(--hundido);border-radius:3px;overflow:hidden;margin-top:7px}
.barra-uso i{display:block;height:100%;border-radius:3px;transition:width .5s var(--curva)}

/* ─────────────────────────── calendario ───────────────────────────────── */
.mes{margin-bottom:34px}
.mes-titulo{font-weight:560;margin-bottom:10px;font-size:14px;letter-spacing:-.008em}
.mes-rejilla{
  display:grid;grid-template-columns:repeat(7,1fr);gap:1px;
  background:var(--borde);border:1px solid var(--borde);border-radius:var(--r-g);overflow:hidden;
}
.dia-cab{background:var(--hundido);padding:7px 8px;font-size:10.5px;font-weight:560;letter-spacing:.06em;color:var(--texto-3);text-align:center}
.dia{background:var(--superficie);min-height:98px;padding:7px;display:flex;flex-direction:column;gap:3px}
.dia.fuera{background:var(--fondo)}
.dia-num{font-size:11px;color:var(--texto-3);font-variant-numeric:tabular-nums;margin-bottom:1px}
.dia.hoy .dia-num{
  color:var(--marca-sobre-primario);background:var(--marca-primario);border-radius:50%;
  width:19px;height:19px;display:grid;place-items:center;font-weight:560;
}
.pieza-mini{
  background:var(--hundido);border:0;border-radius:6px;padding:4px 7px 4px 14px;
  font-size:11.5px;line-height:1.35;text-align:left;width:100%;color:var(--texto);
  transition:background .14s var(--curva);position:relative;
}
.pieza-mini::before{
  content:"";position:absolute;left:6px;top:9px;
  width:4px;height:4px;border-radius:50%;background:var(--canal,var(--texto-3));
}
.pieza-mini:hover{background:var(--borde)}
.pieza-mini b{display:block;font-weight:560;font-size:9.5px;color:var(--texto-3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:1px}

.tablero{display:grid;grid-template-columns:repeat(auto-fit,minmax(216px,1fr));gap:14px}
.columna{background:var(--hundido);border-radius:var(--r-g);padding:12px;min-height:120px}
.columna h3{font-size:11px;font-weight:560;color:var(--texto-2);margin-bottom:11px;text-transform:uppercase;letter-spacing:.07em;display:flex;justify-content:space-between}
.columna .cuenta{color:var(--texto-3);font-weight:450;font-variant-numeric:tabular-nums}

.tabla{width:100%;border-collapse:collapse;font-size:14px}
.tabla th{
  text-align:left;font-weight:560;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--texto-3);padding:0 12px 9px;border-bottom:1px solid var(--borde);
}
.tabla td{padding:11px 12px;border-bottom:1px solid var(--borde)}
.tabla tbody tr{transition:background .13s var(--curva)}
.tabla tbody tr:hover{background:var(--hundido)}
.tabla .clic{cursor:pointer}

.pieza-fila{
  background:var(--superficie);border:1px solid var(--borde);border-radius:10px;
  padding:11px 13px;margin-bottom:8px;width:100%;text-align:left;display:block;color:var(--texto);
  transition:border-color .15s var(--curva),box-shadow .15s var(--curva);
}
.pieza-fila:hover{border-color:var(--borde-2);box-shadow:var(--sombra)}
.pieza-fila .t{font-size:13.5px;font-weight:500;line-height:1.35}
.pieza-fila .m{font-size:11.5px;color:var(--texto-3);margin-top:3px}

/* ───────────────────────────── estados ────────────────────────────────── */
.estado{font-size:11px;font-weight:520;padding:3px 9px;border-radius:20px;white-space:nowrap;display:inline-block}
.e-planeado{background:var(--hundido);color:var(--texto-2)}
.e-en_produccion{background:var(--frio-piso);color:var(--frio)}
.e-revision_interna{background:var(--espera-piso);color:var(--espera)}
.e-revision_cliente{background:var(--espera-piso);color:var(--espera);font-weight:600}
.e-cambios_solicitados{background:var(--alto-piso);color:var(--alto)}
.e-aprobado{background:var(--ok-piso);color:var(--ok)}
.e-publicado{background:var(--hundido);color:var(--texto-3)}

/* ────────────────────────── panel lateral ─────────────────────────────── */
.panel-fondo{
  position:fixed;inset:0;background:oklch(0.235 0.008 75/.40);z-index:60;
  display:flex;justify-content:flex-end;animation:aparece .18s var(--curva);
}
@keyframes aparece{from{opacity:0}to{opacity:1}}
.panel{
  background:var(--superficie);width:min(580px,100%);height:100%;overflow-y:auto;
  padding:28px 30px 56px;position:relative;box-shadow:var(--sombra-alta);
  animation:entra .26s var(--curva);
}
@keyframes entra{from{transform:translateX(22px)}to{transform:none}}
@media (prefers-reduced-motion:reduce){
  .panel,.panel-fondo,.aviso{animation:none}
  *{transition-duration:.01ms !important}
}
.panel-cerrar{
  position:absolute;top:16px;right:16px;background:transparent;border:0;color:var(--texto-3);
  font-size:16px;width:30px;height:30px;border-radius:var(--r);display:grid;place-items:center;
}
.panel-cerrar:hover{background:var(--hundido);color:var(--texto)}
.panel h2{padding-right:38px}

.arte{width:100%;border-radius:10px;border:1px solid var(--borde);margin:16px 0;display:block;background:var(--hundido)}
.datos{display:grid;grid-template-columns:112px 1fr;gap:9px 14px;font-size:13.5px;margin:0}
.datos dt{color:var(--texto-3);font-size:12.5px}
.datos dd{margin:0;line-height:1.5}
.seccion{border-top:1px solid var(--borde);margin-top:24px;padding-top:20px}

/* Los 18 campos no pueden ser un muro. Se abren si los buscas. */
.plegable{border-top:1px solid var(--borde);margin-top:20px}
.plegable summary{
  cursor:pointer;padding:13px 0;font-size:13.5px;color:var(--texto-2);
  list-style:none;display:flex;align-items:center;gap:7px;font-weight:480;
}
.plegable summary::-webkit-details-marker{display:none}
.plegable summary::before{content:"›";transition:transform .18s var(--curva);color:var(--texto-3);font-size:17px;line-height:1}
.plegable[open] summary::before{transform:rotate(90deg)}
.plegable summary:hover{color:var(--texto)}
.plegable .cuerpo{padding:2px 0 16px}

.hilo{display:flex;flex-direction:column;gap:10px;margin:12px 0}
.mensaje{background:var(--hundido);border-radius:10px;padding:11px 13px;font-size:13.5px;line-height:1.55}
.mensaje.interno{background:var(--espera-piso)}
.mensaje .quien-msg{font-size:11.5px;color:var(--texto-3);margin-bottom:4px}
.versiones{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0}
.vchip{
  border:1px solid var(--borde-2);border-radius:20px;padding:4px 12px;font-size:12px;
  background:transparent;color:var(--texto-2);font-variant-numeric:tabular-nums;
}
.vchip.activo{border-color:var(--marca-primario);color:var(--texto);background:var(--hundido);font-weight:520}

/* ─────────────────── lo que le toca al cliente ────────────────────────── */
/* Su pregunta es "¿qué me toca?" y se responde en 5 segundos.
   Una cosa a la vez, grande. El calendario completo es secundario para él. */
.turno{margin-bottom:40px}
.turno-lista{display:flex;flex-direction:column;gap:12px}
.turno-item{
  display:flex;gap:16px;align-items:center;width:100%;text-align:left;
  background:var(--superficie);border:1px solid var(--borde-2);border-radius:var(--r-g);
  padding:16px 18px;color:var(--texto);
  transition:border-color .16s var(--curva),box-shadow .16s var(--curva),transform .16s var(--curva);
}
.turno-item:hover{border-color:var(--marca-primario);box-shadow:var(--sombra);transform:translateY(-1px)}
.turno-mini{
  width:56px;height:56px;border-radius:9px;background:var(--hundido);flex:0 0 auto;
  display:grid;place-items:center;font-size:9.5px;color:var(--texto-3);overflow:hidden;text-align:center;
}
.turno-mini img{width:100%;height:100%;object-fit:cover}
.turno-cuerpo{flex:1;min-width:0}
.turno-titulo{font-size:15.5px;font-weight:520;line-height:1.35;letter-spacing:-.008em}
.turno-meta{font-size:12.5px;color:var(--texto-3);margin-top:3px}
.turno-flecha{color:var(--texto-3);font-size:17px;flex:0 0 auto}

/* ────────────────────── conexiones, no tabla cruda ────────────────────── */
.cx-grupo{margin-bottom:28px}
.cx-item{display:flex;align-items:center;gap:13px;padding:13px 0;border-bottom:1px solid var(--borde)}
.cx-punto{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.cx-punto.si{background:var(--ok)}
.cx-punto.no{background:var(--borde-2)}
.cx-cuerpo{flex:1;min-width:0}
.cx-nombre{font-size:14px;font-weight:480}
.cx-nota{font-size:12.5px;color:var(--texto-3);margin-top:2px}

/* ───────────────────────── estados vacíos ─────────────────────────────── */
/* Un vacío es una instrucción, no un encogimiento de hombros. */
.vacio{text-align:center;padding:54px 24px;max-width:430px;margin:0 auto}
.vacio h3{margin-bottom:8px}
.vacio p{color:var(--texto-2);font-size:14px;line-height:1.6;margin:0 0 18px}
.vacio .btn{margin:0 4px}
.vacio-suelto{color:var(--texto-3);font-size:13.5px;padding:30px 0;text-align:center}

.aviso{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:80;
  background:var(--texto);color:var(--fondo);padding:11px 20px;border-radius:22px;
  font-size:13.5px;box-shadow:var(--sombra-alta);max-width:88vw;text-align:center;
  animation:sube .22s var(--curva);
}
@keyframes sube{from{transform:translate(-50%,10px);opacity:0}to{transform:translate(-50%,0);opacity:1}}
.cargando{color:var(--texto-3);font-size:13.5px;padding:34px 0;text-align:center}

/* ───────────────────────────── responsive ─────────────────────────────── */
@media (max-width:760px){
  .lienzo{padding:20px 16px 56px}
  .barra{height:auto;flex-wrap:wrap;padding:10px 14px;gap:10px}
  .barra-marca{flex:1 1 auto;min-width:0}
  .barra-der{margin-left:auto}
  .menu{order:3;flex:0 0 100%;margin:0 -14px;padding:0 14px 2px}
  .mes-rejilla{font-size:10px}
  .dia{min-height:68px;padding:5px}
  .datos{grid-template-columns:1fr;gap:3px 0}
  .datos dt{margin-top:9px}
  .panel{padding:22px 18px 48px}
  .pulso{gap:20px}
  .pulso-n{font-size:23px}
  .tabla th,.tabla td{padding:9px 7px}
  .turno-item{padding:13px 14px;gap:12px}
  .turno-mini{width:46px;height:46px}
}

/* ─────────────────────────────── bandeja ──────────────────────────────── */
.conv{
  display:flex;gap:13px;align-items:flex-start;width:100%;text-align:left;
  background:var(--superficie);border:1px solid var(--borde);border-radius:11px;
  padding:13px 15px;margin-bottom:8px;color:var(--texto);
  transition:border-color .15s var(--curva),box-shadow .15s var(--curva);
}
.conv:hover{border-color:var(--borde-2);box-shadow:var(--sombra)}
.conv-punto{width:7px;height:7px;border-radius:50%;margin-top:7px;flex:0 0 auto;background:var(--borde-2)}
.conv-punto.humano{background:var(--alto)}
.conv-punto.tomada{background:var(--frio)}
.conv-punto.nico{background:var(--ok)}
.conv-cuerpo{flex:1;min-width:0}
.conv-arriba{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.conv-nombre{font-size:14.5px;font-weight:520;letter-spacing:-.006em}
.conv-hora{font-size:11.5px;color:var(--texto-3);flex:0 0 auto;font-variant-numeric:tabular-nums}
.conv-texto{
  font-size:13px;color:var(--texto-2);margin-top:3px;line-height:1.45;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;
}
.conv-meta{font-size:11.5px;color:var(--texto-3);margin-top:4px}
.conv-sinleer{
  background:var(--alto);color:var(--fondo);border-radius:20px;min-width:19px;height:19px;
  display:grid;place-items:center;font-size:10.5px;font-weight:600;padding:0 6px;flex:0 0 auto;
}
.burbujas{display:flex;flex-direction:column;gap:9px;margin:14px 0}
.burbuja{
  max-width:82%;padding:10px 13px;border-radius:13px;font-size:14px;line-height:1.5;
  background:var(--hundido);align-self:flex-start;
}
.burbuja.mia{background:var(--marca-primario);color:var(--marca-sobre-primario);align-self:flex-end}
.burbuja.privada{background:var(--espera-piso);color:var(--espera);align-self:stretch;max-width:100%;font-size:13px}
.burbuja-quien{font-size:11px;opacity:.72;margin-bottom:3px}
.aviso-24h{
  background:var(--espera-piso);color:var(--espera);border-radius:10px;
  padding:11px 13px;font-size:13px;line-height:1.5;margin:14px 0;
}

/* ══════════════════════════════ REPORTE ═════════════════════════════════
   La página que abre el cliente desde el correo. Sin barra, sin menú, sin
   nada que lo distraiga: es un documento, no una aplicación. */
.rep-body{background:var(--fondo)}
#rep{max-width:760px;margin:0 auto;padding:56px 28px 80px}

.rep-cab{border-bottom:1px solid var(--borde);padding-bottom:26px;margin-bottom:34px}
.rep-logo{max-height:42px;max-width:180px;margin-bottom:18px;display:block}
.rep-cliente{
  font-size:11px;font-weight:560;letter-spacing:.09em;text-transform:uppercase;
  color:var(--marca-primario);margin-bottom:12px;
}
.rep-cab h1{font-size:31px;letter-spacing:-.026em;line-height:1.15}
.rep-periodo{color:var(--texto-2);font-size:14.5px;margin:8px 0 0}

/* La nota va antes que los números: dice qué pasó, no solo cuánto. */
.rep-nota{
  background:var(--hundido);border-radius:var(--r-g);padding:20px 22px;margin-bottom:34px;
}
.rep-nota p{margin:0;font-size:15.5px;line-height:1.65;max-width:64ch}

.rep-bloque{margin-bottom:44px}
.rep-bloque h2{
  font-size:13px;font-weight:560;letter-spacing:.09em;text-transform:uppercase;
  color:var(--texto-3);padding-bottom:11px;border-bottom:1px solid var(--borde);margin-bottom:22px;
}
.rep-bloque h3{font-size:14px;margin:30px 0 12px;color:var(--texto-2)}

.rep-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:22px 28px}
.rep-kpi-n{
  font-size:29px;font-weight:560;letter-spacing:-.03em;line-height:1.05;
  font-variant-numeric:tabular-nums;
}
.rep-kpi-t{font-size:13px;color:var(--texto-2);margin-top:5px}
.rep-kpi-d{font-size:12px;color:var(--texto-3);margin-top:3px}

.rep-chips{display:flex;gap:7px;flex-wrap:wrap}
.rep-chip{
  border:1px solid var(--borde);border-radius:20px;padding:5px 13px;
  font-size:12.5px;color:var(--texto-2);
}
.rep-tabla{margin-top:6px}
.rep-tabla tbody tr:hover{background:transparent}
.rep-ojo{
  background:var(--espera-piso);color:var(--espera);border-radius:10px;
  padding:12px 14px;font-size:13.5px;line-height:1.55;margin:16px 0 0;
}

.rep-pie{border-top:1px solid var(--borde);padding-top:24px;margin-top:12px}
.rep-pie p{color:var(--texto-3);font-size:12.5px;line-height:1.6;margin:0 0 6px;max-width:62ch}
.rep-imprimir{margin-top:16px}

/* Impreso: quitar lo que no es el documento y forzar tinta legible. */
@media print{
  .rep-imprimir{display:none}
  #rep{padding:0;max-width:100%}
  .rep-bloque{page-break-inside:avoid}
  .rep-tabla{page-break-inside:auto}
  .rep-tabla tr{page-break-inside:avoid}
  body{background:#fff}
  :root{--fondo:#fff;--superficie:#fff;--hundido:#f4f2ee;
        --texto:#1a1a18;--texto-2:#4a4a46;--texto-3:#6a6a64;
        --borde:rgba(0,0,0,.14);--borde-2:rgba(0,0,0,.24)}
}

@media (max-width:640px){
  #rep{padding:34px 18px 60px}
  .rep-cab h1{font-size:25px}
  .rep-kpis{gap:18px 20px}
  .rep-kpi-n{font-size:25px}
}

/* Filtros en grupos: tres dimensiones que se combinan, no una lista plana.
   Es como estaba en el prototipo de CIRUBOAT, que ya se validó con cliente. */
.filtros{flex-direction:column;align-items:flex-start;gap:9px}
.fgrupo{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.fgrupo-t{
  font-size:10.5px;font-weight:560;letter-spacing:.07em;text-transform:uppercase;
  color:var(--texto-3);min-width:56px;
}
.filtro.vacio-f{opacity:.4}
.filtro.vacio-f:hover{opacity:.7}