/* ============================================================================
   PANEL DE CLIENTE — Piri AI · hoja de estilos
   Antes iba incrustada en index.html junto con el JS y el logo en base64
   (260 KB por carga). Ahora cada cosa es un fichero que el navegador cachea.
   ============================================================================ */

:root{
  --azul:#008CF8; --azul-osc:#0066c4;
  --fondo:#0A0E14; --panel:#111821; --panel2:#171f2b; --borde:#1f2a38; --borde2:#2a3646;
  --texto:#e8eef5; --suave:#8b98a8; --tenue:#76859a;   /* tenue: 4,7:1 sobre los paneles (AA) */
  --ok:#22c55e; --alerta:#f59e0b; --mal:#ef4444;
  --acento:#008CF8;              /* lo sobrescribe el color de cada cliente */
  --radio:14px; --radio-s:10px;
  --sombra:0 1px 0 rgba(255,255,255,.03) inset, 0 8px 30px rgba(0,0,0,.28);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--fondo);color:var(--texto);
     font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
     font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--acento);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none !important;transition:none !important} }

/* ================= ACCESO ================= */
#acceso{min-height:100vh;display:flex;align-items:center;justify-content:center;
        padding:24px;position:relative;overflow:hidden}
#acceso::before{content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(0,140,248,.06) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(0,140,248,.06) 1px,transparent 1px);
  background-size:52px 52px;mask-image:radial-gradient(ellipse 70% 60% at 50% 45%,#000 40%,transparent 100%)}
#acceso::after{content:'';position:absolute;top:50%;left:50%;
  width:min(620px,120vw);height:min(620px,120vw);margin:-310px 0 0 -310px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,140,248,.16) 0%,transparent 68%);
  filter:blur(38px);pointer-events:none}
.tarjeta{position:relative;z-index:2;width:100%;max-width:400px;
  background:linear-gradient(165deg,rgba(22,30,42,.94),rgba(12,17,24,.97));
  border:1px solid var(--borde);border-radius:20px;padding:42px 34px 34px;
  box-shadow:0 24px 70px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05);
  animation:sube .6s cubic-bezier(.2,.8,.2,1)}
@keyframes sube{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.tarjeta::before{content:'';position:absolute;top:-1px;left:16%;right:16%;height:1px;
  background:linear-gradient(90deg,transparent,var(--azul),transparent)}
.logo{display:block;margin:0 auto 26px;width:158px;height:auto;
      filter:drop-shadow(0 0 22px rgba(0,140,248,.35))}
.tarjeta h1{margin:0 0 6px;font-size:17px;font-weight:600;text-align:center;letter-spacing:-.2px}
.tarjeta .lead{margin:0 0 28px;text-align:center;color:var(--suave);font-size:13.5px}
.recordar{display:flex;align-items:flex-start;gap:9px;margin:4px 0 10px;cursor:pointer;
          color:var(--suave);font-size:13px;line-height:1.45}
.recordar input{margin-top:1px;accent-color:var(--acento);width:16px;height:16px;flex-shrink:0}
.rec-dias{width:100%;margin-bottom:10px;padding:9px 12px;background:var(--panel);
          border:1px solid var(--borde);border-radius:10px;color:var(--texto);
          font-family:inherit;font-size:13px}
.rec-aviso{background:rgba(245,158,11,.09);border:1px solid rgba(245,158,11,.25);
           border-radius:10px;padding:9px 12px;margin-bottom:12px;color:#fbbf24;font-size:12px;line-height:1.5}
.olvido{display:block;width:100%;margin-top:14px;padding:4px;background:none;border:0;
        color:var(--suave);font:inherit;font-size:13px;cursor:pointer;
        text-decoration:underline;text-underline-offset:3px}
.olvido:hover{color:var(--acento)}
.campo{margin-bottom:14px}
.campo label{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.8px;
             color:var(--tenue);margin-bottom:7px;font-weight:600}
.campo input{width:100%;padding:13px 15px;background:rgba(255,255,255,.035);
  border:1px solid var(--borde);border-radius:11px;color:var(--texto);font-size:15px;
  font-family:inherit;transition:border-color .2s, box-shadow .2s}
.campo input:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px rgba(0,140,248,.14)}
.campo input::placeholder{color:#5f6d80}
.btn{width:100%;margin-top:10px;padding:14px;border:0;border-radius:11px;cursor:pointer;
  background:linear-gradient(135deg,var(--azul),var(--azul-osc));color:#fff;
  font-size:15px;font-weight:600;font-family:inherit;
  box-shadow:0 6px 20px rgba(0,140,248,.28);transition:transform .15s, box-shadow .2s}
.btn:hover{transform:translateY(-1px);box-shadow:0 9px 26px rgba(0,140,248,.4)}
.btn:active{transform:none}
.btn[disabled]{opacity:.6;cursor:default;transform:none}
.aviso{color:#ff8a8a;font-size:13px;margin-top:14px;min-height:18px;text-align:center;line-height:1.5}
.aviso.bien{color:var(--ok)}
.pie-acceso{margin-top:26px;text-align:center;color:var(--tenue);font-size:11px;line-height:1.7}

/* ================= CABECERA ================= */
header{background:rgba(13,18,26,.86);border-bottom:1px solid var(--borde);
       position:sticky;top:0;z-index:20;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.head{max-width:1120px;margin:0 auto;padding:0 20px;height:62px;display:flex;
      justify-content:space-between;align-items:center;gap:14px}
.marca{display:flex;align-items:center;gap:14px;min-width:0}
.marca img{width:78px;height:auto;opacity:.95;flex-shrink:0}
/* El logo del negocio, sobre una placa clara: casi todos están pensados para
   fondo blanco y sobre el panel oscuro desaparecerían. */
.marca img.cliente{width:auto;max-width:150px;max-height:40px;opacity:1;
  background:#fff;padding:5px 9px;border-radius:9px;object-fit:contain}
/* La vista previa del logo, en la misma placa blanca que la cabecera */
.logo-caja{display:flex;align-items:center;justify-content:center;min-height:96px;margin:4px 0 18px;
  background:#fff;border-radius:12px;padding:14px}
.logo-caja img{max-width:260px;max-height:70px;object-fit:contain}
.logo-caja span{color:#6b7684;font-size:13px}
.marca .sep{width:1px;height:28px;background:var(--borde2);flex-shrink:0}
.marca .quien{font-size:14.5px;font-weight:600;min-width:0;line-height:1.25}
.marca .quien span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.marca .quien small{display:block;color:var(--suave);font-size:12px;font-weight:400;margin-top:1px;
                    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* La cuenta: un solo botón con las iniciales del negocio, y dentro todo lo que
   antes eran tres botones sueltos peleándose por el sitio en el móvil. */
.cuenta{position:relative;flex-shrink:0}
.cuenta > button{display:flex;align-items:center;gap:9px;background:var(--panel);
  border:1px solid var(--borde);border-radius:999px;padding:4px 10px 4px 4px;cursor:pointer;
  color:var(--suave);font-size:13px;transition:border-color .15s}
.cuenta > button:hover,.cuenta.abierta > button{border-color:var(--borde2);color:var(--texto)}
.cuenta .ini{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--acento),rgba(255,255,255,.25));color:#fff;
  font-size:12px;font-weight:700;letter-spacing:.3px}
.cuenta .chev{width:9px;height:9px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .15s}
.cuenta.abierta .chev{transform:rotate(225deg) translateY(-2px)}
.menu{position:absolute;right:0;top:calc(100% + 8px);min-width:230px;background:var(--panel);
  border:1px solid var(--borde2);border-radius:var(--radio);padding:6px;box-shadow:var(--sombra);
  display:none;z-index:30}
.cuenta.abierta .menu{display:block;animation:cae .14s ease-out}
@keyframes cae{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.menu .m-cab{padding:9px 11px 10px;border-bottom:1px solid var(--borde);margin-bottom:6px}
.menu .m-cab b{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menu .m-cab small{color:var(--suave);font-size:12px}
.menu button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:0;
  color:var(--texto);font-size:13.5px;padding:9px 11px;border-radius:9px;cursor:pointer}
.menu button:hover{background:var(--panel2)}
.menu button .ic{width:16px;text-align:center;color:var(--suave);font-size:13px}
.menu .m-sep{height:1px;background:var(--borde);margin:6px 0}
.menu .m-salir{color:#ff9d9d}

.wrap{max-width:1120px;margin:0 auto;padding:22px 20px 60px}

/* ================= BARRA DE HERRAMIENTAS ================= */
/* Periodo, asistente y descargas en UNA fila. En el móvil se desliza en
   horizontal en vez de apilarse en cuatro pisos de botones. */
.herr{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.segmento{display:inline-flex;gap:2px;background:var(--panel);border:1px solid var(--borde);
  border-radius:999px;padding:3px;overflow-x:auto;scrollbar-width:none;max-width:100%}
.segmento::-webkit-scrollbar{display:none}
.chip{background:transparent;border:1px solid transparent;border-radius:999px;
      padding:7px 14px;font-size:13px;cursor:pointer;color:var(--suave);font-weight:500;white-space:nowrap;
      transition:color .12s,background .12s}
.chip:hover{color:var(--texto)}
.chip.on{background:var(--acento);color:#fff;font-weight:600;box-shadow:0 2px 10px rgba(0,0,0,.25)}
#filtros-agente .chip{font-size:12.5px;padding:6px 12px}
#filtros-agente .chip.on{background:transparent;border-color:var(--acento);color:var(--acento);box-shadow:none}
.herr .hueco{flex:1}
.btn-exp{background:var(--panel);border:1px solid var(--borde);color:var(--suave);
         border-radius:var(--radio-s);padding:9px 14px;font-size:12.5px;font-weight:600;
         cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:7px}
.btn-exp:hover:not(:disabled){border-color:var(--acento);color:var(--acento)}
.btn-exp:disabled{opacity:.55;cursor:default}
.periodo{color:var(--tenue);font-size:12.5px;margin:2px 0 18px;min-height:16px}

nav{display:flex;gap:2px;border-bottom:1px solid var(--borde);margin-bottom:22px;
    overflow-x:auto;scrollbar-width:none}
nav::-webkit-scrollbar{display:none}
nav button{background:none;color:var(--suave);border:0;border-bottom:2px solid transparent;
  padding:11px 16px;font-size:14px;font-weight:600;cursor:pointer;margin-bottom:-1px;white-space:nowrap}
nav button:hover{color:var(--texto)}
nav button.on{color:var(--acento);border-bottom-color:var(--acento)}

/* ================= CIFRAS ================= */
.panel{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:26px}
.t{background:var(--panel);border:1px solid var(--borde);border-radius:var(--radio);padding:18px 20px 16px;
   position:relative;overflow:hidden;display:flex;flex-direction:column;gap:6px;min-height:118px}
.t.destacada{background:linear-gradient(150deg,var(--acento) 0%,rgba(10,14,20,.55) 115%);border-color:transparent}
.t .n{font-size:34px;font-weight:700;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.t .n small{font-size:15px;opacity:.7;font-weight:600;letter-spacing:0;margin-left:1px}
.t .l{font-size:12.5px;color:var(--suave);line-height:1.35}
.t.destacada .l{color:rgba(255,255,255,.88)}
.t .d{font-size:11.5px;font-weight:600;margin-top:auto;padding-top:6px}
.sube{color:var(--ok)} .baja{color:#ff8a8a} .plano{color:var(--tenue)}
.t.destacada .sube,.t.destacada .baja,.t.destacada .plano{color:rgba(255,255,255,.85)}

h2{font-size:12px;margin:26px 0 12px;color:var(--suave);font-weight:700;text-transform:uppercase;letter-spacing:.9px}
h2 small{font-weight:400;color:var(--tenue);font-size:12px;text-transform:none;letter-spacing:0;margin-left:6px}
.caja{background:var(--panel);border:1px solid var(--borde);border-radius:var(--radio);padding:20px}

/* barras horizontales (motivos, horas) */
.barra{display:flex;align-items:center;gap:12px;margin-bottom:10px;font-size:13px}
.barra:last-child{margin-bottom:0}
.barra .et{width:62px;flex-shrink:0;color:var(--suave)}
.barra .et-ancha{width:190px}
@media(max-width:560px){ .barra .et-ancha{width:130px;font-size:12px} }
.barra .pista{flex:1;background:var(--panel2);border-radius:20px;height:14px;overflow:hidden}
.barra .rell{display:block;height:100%;border-radius:20px;min-width:3px;
  background:linear-gradient(90deg,var(--acento),rgba(255,255,255,.35));transition:width .6s ease}
.barra .v{width:30px;text-align:right;font-weight:700;color:var(--texto);font-variant-numeric:tabular-nums}

/* ---------- gráfico de evolución ---------- */
/* Tres líneas de referencia detrás de las barras y el máximo a la derecha:
   así se lee la escala sin mirar cada número. */
.g-marco{position:relative;padding-right:34px}
.g-marco::before{content:'';position:absolute;left:0;right:34px;top:18px;bottom:0;
  background-image:linear-gradient(var(--borde) 1px,transparent 1px);
  background-size:100% 33.33%;background-position:0 0;opacity:.9;pointer-events:none}
.g-max{position:absolute;right:0;top:12px;font-size:10.5px;color:var(--tenue);font-variant-numeric:tabular-nums}
.grafico{display:flex;align-items:flex-end;gap:4px;height:170px;padding-top:18px;position:relative}
.g-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
       height:100%;min-width:0;position:relative}
.g-b{width:100%;max-width:44px;background:linear-gradient(180deg,var(--acento),transparent 320%);
     border-radius:5px 5px 2px 2px;transition:height .35s ease;opacity:.85}
.g-col:hover .g-b{opacity:1}
.g-col.ultima .g-b{opacity:1;box-shadow:0 0 0 1px var(--acento) inset}
.g-col.parcial .g-b{background:repeating-linear-gradient(135deg,var(--acento) 0 5px, transparent 5px 10px);opacity:.55}
.g-col.parcial .g-n{color:var(--tenue)}
.g-nota{display:block;margin-top:5px;color:var(--tenue);font-size:11.5px}
.g-n{font-size:11px;font-weight:700;color:var(--suave);margin-bottom:5px;line-height:1;font-variant-numeric:tabular-nums}
.g-col.ultima .g-n{color:var(--texto)}
.g-x{position:absolute;bottom:-20px;font-size:10.5px;color:var(--tenue);white-space:nowrap;line-height:1}
.g-pie{margin-top:30px;padding-top:14px;border-top:1px solid var(--borde);color:var(--suave);font-size:12.5px;text-align:center}
.g-pie b{color:var(--texto)}
@media(max-width:520px){ .grafico{height:140px;gap:2px} .g-n{font-size:10px} .g-x{font-size:9.5px} }

/* ================= LISTAS ================= */
.buscador{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.buscador input{flex:1;min-width:0;padding:11px 15px;background:var(--panel);border:1px solid var(--borde);
  border-radius:11px;color:var(--texto);font-size:14px;font-family:inherit}
.buscador input:focus{outline:none;border-color:var(--acento)}
.buscador input::placeholder{color:var(--tenue)}
.buscador .cuantas{color:var(--tenue);font-size:12.5px;white-space:nowrap;font-variant-numeric:tabular-nums}

.llam{background:var(--panel);border:1px solid var(--borde);border-radius:13px;margin-bottom:10px;overflow:hidden}
.llam-c{padding:13px 16px 11px;cursor:pointer;border-radius:13px}
.llam-c:hover{background:var(--panel2)}
.llam-c:focus-visible{outline-offset:-2px}
.llam-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.llam-c .meta{color:var(--suave);font-size:12.5px;flex:1;font-variant-numeric:tabular-nums}
.llam-c .tel{color:var(--acento);font-weight:600}
.resumen{color:var(--texto);font-size:13.5px;line-height:1.5;margin:9px 0 0;padding-left:11px;border-left:2px solid var(--acento)}
.motivos{display:flex;gap:5px;flex-wrap:wrap;margin-top:9px}
.mot{background:var(--panel2);border:1px solid var(--borde);border-radius:20px;padding:2px 9px;font-size:10.5px;color:var(--suave)}
.abrir{display:inline-block;margin-top:10px;font-size:11.5px;color:var(--tenue)}
.llam-c:hover .abrir{color:var(--acento)}
.et-est{padding:3px 10px;border-radius:20px;font-size:10.5px;font-weight:700;white-space:nowrap;letter-spacing:.3px}
.e-ok{background:rgba(34,197,94,.14);color:#4ade80}
.e-pasada{background:rgba(0,140,248,.14);color:#60b8ff}
.e-resc{background:rgba(245,158,11,.15);color:#fbbf24}
.chat{padding:4px 16px 16px;border-top:1px solid var(--borde)}
.msg{max-width:82%;padding:9px 13px;border-radius:13px;margin:9px 0;font-size:13.5px;line-height:1.5}
.msg b{display:block;font-size:9.5px;text-transform:uppercase;letter-spacing:.6px;margin-bottom:3px;opacity:.65;font-weight:700}
.m-ia{background:var(--acento);color:#fff;border-bottom-left-radius:4px}
.m-cli{background:var(--panel2);margin-left:auto;border-bottom-right-radius:4px;border:1px solid var(--borde)}

.rec{background:var(--panel);border:1px solid var(--borde);border-left:3px solid var(--acento);
     border-radius:12px;padding:15px 17px;margin-bottom:10px}
/* El borde izquierdo dice en qué estado está: de un vistazo se ve qué falta. */
.rec.est-pendiente{border-left-color:var(--alerta)}
.rec.est-en_curso{border-left-color:#60b8ff}
.rec.est-atendido{border-left-color:var(--ok)}
.rec.est-descartado{border-left-color:var(--tenue)}
.rec.est-descartado .q,.rec.archivado .q{color:var(--suave)}
.rec.urgente.est-pendiente,.rec.urgente.est-en_curso{border-left-color:var(--mal);background:rgba(239,68,68,.06)}
.rec .top{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:5px}
.rec .q{font-weight:600;font-size:14.5px;margin:0;line-height:1.4}
.rec .cuando{color:var(--tenue);font-size:12px;white-space:nowrap;font-variant-numeric:tabular-nums}
.rec .quien{color:var(--suave);font-size:12.5px}
.rec .abrir{display:inline-block;margin-top:11px;cursor:pointer;background:none;border:0;padding:2px 0;font:inherit;font-size:11.5px;color:var(--tenue)}
.rec .abrir:hover{color:var(--acento)}
.rec .chat{margin-top:12px;padding:12px 0 0;border-top:1px solid var(--borde)}
.rec .nota{margin-top:10px;padding:9px 12px;background:rgba(245,158,11,.09);border-radius:9px;font-size:12.5px;color:#fbbf24}

/* ---------- recados: gestión (igual para todos los negocios) ---------- */
.rec-barra{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.rec-barra input[type=search]{flex:1;min-width:190px;padding:10px 14px;background:var(--panel);border:1px solid var(--borde);
  border-radius:11px;color:var(--texto);font-size:13.5px;font-family:inherit}
.rec-barra input[type=search]:focus{outline:none;border-color:var(--acento)}
.chip .cnt{display:inline-block;min-width:18px;padding:0 5px;margin-left:6px;border-radius:9px;background:rgba(255,255,255,.08);
  font-size:11px;font-weight:700;text-align:center;font-variant-numeric:tabular-nums}
.chip.on .cnt{background:rgba(255,255,255,.24)}
.badge{display:inline-block;min-width:18px;padding:0 6px;margin-left:6px;border-radius:9px;background:var(--alerta);color:#1a1205;
  font-size:11px;font-weight:800;line-height:17px;text-align:center;vertical-align:1px;font-variant-numeric:tabular-nums}
.rec .quien .tel{color:var(--acento);font-weight:600;text-decoration:none}
.rec .quien .tel:hover{text-decoration:underline}
.rec .urg{color:#ff8a8a;font-weight:700}
.datos{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.dato{background:var(--panel2);border:1px solid var(--borde);border-radius:8px;padding:3px 9px;font-size:12px;color:var(--texto)}
.dato i{font-style:normal;color:var(--suave);margin-right:6px}
.gestion{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px;padding-top:12px;border-top:1px solid var(--borde)}
.estados{display:inline-flex;background:var(--panel2);border:1px solid var(--borde);border-radius:10px;padding:2px;gap:2px}
.est{background:transparent;border:0;color:var(--suave);font-size:12.5px;font-weight:600;padding:6px 11px;border-radius:8px;cursor:pointer;white-space:nowrap}
.est:hover{color:var(--texto)}
.est.on.e-pendiente{background:rgba(245,158,11,.18);color:#fbbf24}
.est.on.e-en_curso{background:rgba(0,140,248,.2);color:#7cc4ff}
.est.on.e-atendido{background:rgba(34,197,94,.18);color:#4ade80}
.est.on.e-descartado{background:rgba(139,152,168,.2);color:var(--texto)}
.gestion .por{flex:1;min-width:150px;padding:8px 11px;background:rgba(255,255,255,.035);border:1px solid var(--borde);
  border-radius:9px;color:var(--texto);font-size:13px;font-family:inherit}
.gestion .por:focus{outline:none;border-color:var(--acento)}
.gestion .por.falta{border-color:var(--alerta);box-shadow:0 0 0 3px rgba(245,158,11,.15)}
.btn-arch{background:transparent;border:1px solid var(--borde);color:var(--suave);border-radius:9px;padding:8px 12px;
  font-size:12.5px;cursor:pointer;font-family:inherit}
.btn-arch:hover{border-color:var(--acento);color:var(--texto)}
.nota-int{display:block;width:100%;margin-top:8px;padding:8px 11px;background:transparent;border:1px dashed var(--borde);
  border-radius:9px;color:var(--texto);font:inherit;font-size:12.5px;resize:vertical;min-height:34px}
.nota-int:focus{outline:none;border-style:solid;border-color:var(--acento)}
.nota-int::placeholder{color:var(--tenue)}
.gest-pie{margin-top:8px;font-size:12px;color:var(--suave)}
.gest-pie b{color:var(--texto);font-weight:600}
.de-hoja{margin-left:8px;padding:1px 7px;border-radius:7px;background:var(--panel2);color:var(--tenue);font-size:11px}
.aviso-rec{display:flex;align-items:center;gap:8px;width:100%;margin-bottom:16px;padding:12px 16px;
  background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.28);border-radius:var(--radio);color:#fbd38d;
  font:inherit;font-size:13.5px;cursor:pointer;text-align:left}
.aviso-rec b{color:#fff}
.aviso-rec .ir{margin-left:auto;color:#fbbf24;font-weight:600}
#toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom, 0px));transform:translate(-50%,20px);opacity:0;
  pointer-events:none;background:#1b2431;border:1px solid var(--borde2);color:var(--texto);border-radius:12px;padding:11px 14px;
  display:flex;gap:14px;align-items:center;font-size:13.5px;box-shadow:var(--sombra);transition:opacity .18s,transform .18s;
  z-index:80;max-width:calc(100vw - 32px)}
#toast.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
#toast button{background:none;border:0;color:var(--acento);font-weight:700;cursor:pointer;font-size:13.5px;font-family:inherit}
@media(max-width:640px){
  .rec-barra .segmento{flex:1 1 100%}
  .gestion .por{flex-basis:100%}
  .estados{width:100%}
  .est{flex:1;padding:11px 2px}             /* más alto en el móvil: se pulsa con el dedo */
  .btn-arch{padding:10px 14px}
}

/* ================= ESQUELETOS DE CARGA ================= */
/* Mientras el servidor pregunta a Vapi (puede tardar unos segundos) se enseña
   la forma de lo que va a venir, no un "Cargando…" que parece un fallo. */
.esq{background:var(--panel);border:1px solid var(--borde);border-radius:var(--radio);position:relative;overflow:hidden}
.esq::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.045) 50%,transparent 100%);
  transform:translateX(-100%);animation:brillo 1.4s infinite}
@keyframes brillo{to{transform:translateX(100%)}}
.esq-linea{height:10px;border-radius:6px;background:var(--panel2);margin:8px 0}
.esq-t{min-height:118px;padding:18px 20px}
.esq-t .esq-linea:first-child{width:38%;height:30px;margin:0 0 12px}
.esq-t .esq-linea:nth-child(2){width:70%}
.esq-t .esq-linea:nth-child(3){width:50%}
.esq-caja{height:170px;margin-bottom:26px}
.esq-fila{height:74px;margin-bottom:10px;padding:14px 16px}
.esq-fila .esq-linea:first-child{width:45%;margin-top:0}
.esq-fila .esq-linea:nth-child(2){width:85%}

/* ================= VARIOS ================= */
.capa{position:fixed;inset:0;background:rgba(4,7,11,.88);z-index:60;display:flex;align-items:center;justify-content:center;padding:20px}
.modalc{background:var(--panel);border:1px solid var(--borde2);border-radius:18px;padding:28px;max-width:400px;width:100%;box-shadow:var(--sombra)}
.modalc h3{margin:0 0 8px;font-size:17px}
.modalc p{margin:0 0 18px;color:var(--suave);font-size:13.5px;line-height:1.5}
.modalc .campo{margin-bottom:12px}
.modalc label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.8px;color:var(--tenue);margin-bottom:6px;font-weight:600}
.modalc input{width:100%;padding:11px 13px;background:rgba(255,255,255,.035);border:1px solid var(--borde);border-radius:10px;color:var(--texto);font-size:14px;font-family:inherit}
.modalc input:focus{outline:none;border-color:var(--azul)}
.pie-modal{display:flex;gap:9px;justify-content:flex-end;margin-top:18px}
.legal{max-height:60vh;overflow-y:auto}
.legal p{color:var(--suave);font-size:13px;line-height:1.65;margin:0 0 14px}
.legal b{color:var(--texto);font-weight:600}
.btn2{background:transparent;border:1px solid var(--borde);color:var(--suave);border-radius:10px;padding:11px 18px;font-size:14px;cursor:pointer;font-family:inherit}
.vacio{color:var(--tenue);text-align:center;padding:46px 20px;font-size:14px}
.pie{color:var(--tenue);font-size:11.5px;text-align:center;margin-top:44px;display:flex;gap:16px;justify-content:center;align-items:center;flex-wrap:wrap}
.pie-marca{opacity:.75}
.pie a,.enlace{color:var(--tenue);text-decoration:none;border:0;border-bottom:1px solid transparent;background:none;
  padding:0;font:inherit;cursor:pointer}
.pie a:hover,.enlace:hover{color:var(--suave);border-bottom-color:var(--borde)}
.sin-datos{text-align:center;padding:52px 24px;background:var(--panel);border:1px solid var(--borde);border-radius:16px}
.sin-datos .icono{font-size:34px;opacity:.55;margin-bottom:14px}
.sin-datos h3{margin:0 0 8px;font-size:16.5px;color:var(--texto);font-weight:600}
.sin-datos p{margin:0 auto;max-width:420px;color:var(--suave);font-size:13.5px;line-height:1.65}
.sin-datos b{color:var(--texto)}
.pie-informe{display:none}
.oculto,[hidden]{display:none !important}

/* ---------- 1-oct-2026: accesibilidad y estados ---------- */
.sin-js{margin:40px auto;max-width:420px;padding:18px 20px;border:1px solid var(--borde);border-radius:12px;
  background:var(--panel);color:var(--texto);text-align:center;font-size:14px}
/* «Saltar al contenido»: invisible hasta que se llega a él con el teclado */
.saltar{position:absolute;left:12px;top:-60px;z-index:90;background:var(--acento);color:#fff;padding:9px 14px;
  border-radius:9px;font-weight:600;text-decoration:none;transition:top .15s}
.saltar:focus{top:10px}
#contenido:focus{outline:none}
/* el ojo para ver la contraseña que se está escribiendo */
.con-ojo{position:relative}
.con-ojo input{padding-right:48px}
.ojo{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:38px;height:38px;border:0;border-radius:8px;
  background:transparent;cursor:pointer;color:var(--suave)}
.ojo::before{content:'';display:block;width:20px;height:12px;margin:auto;border:1.6px solid currentColor;
  border-radius:60% / 100%}
.ojo::after{content:'';position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:currentColor}
.ojo[aria-pressed="true"]{color:var(--acento)}
.ojo:hover{color:var(--texto)}
.btn-auto{width:auto;margin:0;padding:12px 20px}
.btn.peligro{background:linear-gradient(135deg,#d93a3a,#a8232a);box-shadow:0 6px 20px rgba(217,58,58,.25)}
.pista{font-size:12px;color:var(--tenue);margin-top:6px;line-height:1.5}
.modalc .aviso{text-align:left;margin-top:4px}
/* aviso suave: algo no está al día, pero no es un error tuyo */
.aviso-suave{display:flex;gap:8px;align-items:flex-start;margin-bottom:16px;padding:11px 14px;border-radius:var(--radio-s);
  background:rgba(96,184,255,.07);border:1px solid rgba(96,184,255,.22);color:#a9d4ff;font-size:13px;line-height:1.5}
.sin-datos.error .icono{opacity:.8}
.sin-datos.error .btn2{margin-top:16px}
.vacio-pista{font-size:12.5px;color:var(--tenue)}
.vacio-pista a{color:var(--acento)}
.mas{display:block;width:100%;margin:6px 0 0;padding:12px;background:var(--panel);border:1px dashed var(--borde2);
  border-radius:12px;color:var(--suave);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.mas:hover{color:var(--texto);border-color:var(--acento)}
.mas span{font-weight:400;color:var(--tenue)}
.btn2:hover{border-color:var(--borde2);color:var(--texto)}

/* ================= MÓVIL ================= */
@media(max-width:640px){
  .head{height:56px;padding:0 14px;gap:10px}
  .marca{gap:10px}
  .marca img{width:64px}
  .marca img.cliente{width:auto;max-width:120px;max-height:34px}
  .marca .quien{font-size:13.5px}
  .marca .quien small{font-size:11.5px}
  .cuenta > button{padding:3px 8px 3px 3px}
  .cuenta .ini{width:28px;height:28px;font-size:11px}
  .cuenta > button .txt{display:none}
  .wrap{padding:16px 14px 48px}
  /* el periodo ocupa su fila entera y se desliza; el informe baja a la derecha */
  .herr{gap:8px;margin-bottom:8px}
  #filtros{flex:1 1 100%}
  #filtros-agente{flex:1 1 100%}
  .herr .hueco{display:none}
  .herr .btn-exp{margin-left:auto}
  .panel{grid-template-columns:repeat(2,1fr);gap:10px}
  .t{padding:15px 16px 13px;min-height:106px}
  .t .n{font-size:28px}
  .msg{max-width:92%}
  .buscador{flex-wrap:wrap}
  .buscador input{flex-basis:100%}
}
@media(max-width:340px){ .panel{grid-template-columns:1fr} }

/* ==================== IMPRESIÓN / PDF ==================== */
@media print{
  @page{ margin:14mm 12mm; }
  html,body{background:#fff !important;color:#111 !important}
  body{font-size:11pt}
  #acceso, #nav, .herr, .capa, .pie, .btn-exp, .cuenta, .saltar, .aviso-rec, #toast,
  #p-recados, #p-llamadas, .abrir{ display:none !important }
  header{position:static !important;background:#0A0E14 !important;border:0 !important;margin:0 0 16pt;padding:10pt 12pt;
         border-radius:6pt;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .head{max-width:none;padding:0;height:auto}
  .marca img.cliente{background:#fff !important;padding:4pt 6pt;max-height:34pt}
  .marca .quien span{color:#fff !important;font-size:15pt}
  .marca .quien small{color:#8b98a8 !important}
  .wrap{max-width:none;padding:0}
  .periodo{color:#555 !important;font-size:10pt;margin-bottom:10pt}
  .panel{display:grid !important;grid-template-columns:repeat(3,1fr) !important;gap:8pt}
  .t, .caja{background:#fff !important;border:1px solid #d5dbe2 !important;box-shadow:none !important;border-radius:5pt;padding:9pt;min-height:0}
  .t.destacada{background:#f4f8fb !important}
  .t .n, .t .n small{color:#111 !important}
  .t .l{color:#444 !important}
  .t .d, .t .d span{color:#666 !important}
  h2{color:#111 !important;font-size:11.5pt;margin:14pt 0 6pt}
  h2 small{color:#777 !important}
  .g-marco::before{display:none}
  .g-max{display:none}
  .g-b{-webkit-print-color-adjust:exact;print-color-adjust:exact;opacity:1 !important}
  .g-n{color:#333 !important} .g-x{color:#666 !important}
  .g-pie, .g-pie b{color:#444 !important}
  .barra .rell{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .barra .et{color:#444 !important} .barra .v{color:#111 !important}
  .barra .pista{background:#eef1f4 !important}
  .caja, .t, .grafico{break-inside:avoid;page-break-inside:avoid}
  .pie-informe{display:block !important;margin-top:18pt;padding-top:8pt;border-top:1px solid #d5dbe2;color:#333;font-size:8.5pt;line-height:1.5}
  .pie-informe .legalillo{color:#777;font-size:7.5pt;margin:5pt 0 0}
}