/* ============================================================
   VOX · consola telefónica nocturna · v1.0.0
   Paleta: grafito azulado + ámbar de central telefónica
   Tipos: Archivo (display) · sistema (cuerpo) · IBM Plex Mono (datos)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;700;800&family=IBM+Plex+Mono:wght@400;600&display=swap');

:root{
  --fondo:#0C0F14; --panel:#131822; --panel2:#0F141D;
  --linea:#223047; --texto:#E8EDF4; --mut:#8CA0B8;
  --ambar:#FFB224; --ambar-osc:#8a5f10;
  --verde:#34D399; --rojo:#F87171; --azul:#60A5FA;
  --radio:10px;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --display:'Archivo',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--fondo);color:var(--texto);
  font:15px/1.55 system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:var(--ambar);text-decoration:none}
a:hover{text-decoration:underline}
code{font-family:var(--mono);font-size:.85em;background:var(--panel2);
  border:1px solid var(--linea);border-radius:4px;padding:1px 5px}
h1,h2,h3{font-family:var(--display);letter-spacing:-.01em;margin:0 0 .5em}
.mut{color:var(--mut)}
:focus-visible{outline:2px solid var(--ambar);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* --- marca --- */
.marca{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:.04em}
.marca span{font-family:var(--mono);font-weight:400;font-size:11px;color:var(--mut);
  display:block;letter-spacing:.08em;text-transform:uppercase;margin-top:2px}

/* --- pantallas centradas (login/setup) --- */
.pantalla-centro{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px}
.tarjeta-auth{width:100%;max-width:380px;background:var(--panel);border:1px solid var(--linea);
  border-radius:var(--radio);padding:28px}
.tarjeta-auth h1{font-size:20px;margin-top:14px}

/* --- app con rail --- */
.app{display:flex;min-height:100vh}
.rail{width:210px;flex:0 0 210px;background:var(--panel2);border-right:1px solid var(--linea);
  padding:22px 14px;display:flex;flex-direction:column;gap:18px}
.rail nav{display:flex;flex-direction:column;gap:2px;flex:1}
.rail nav a{color:var(--mut);padding:9px 12px;border-radius:7px;font-weight:500}
.rail nav a:hover{color:var(--texto);text-decoration:none;background:rgba(255,178,36,.06)}
.rail nav a.act{color:var(--texto);background:rgba(255,178,36,.1);
  box-shadow:inset 3px 0 0 var(--ambar)}
.rail-sep{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mut);margin:14px 12px 4px}
.rail-pie{font-size:12px;border-top:1px solid var(--linea);padding-top:12px}
.lienzo{flex:1;padding:26px 30px;max-width:1080px}
.lienzo-cab h1{font-size:24px}
@media(max-width:760px){
  .app{flex-direction:column}
  .rail{width:auto;flex-direction:row;align-items:center;padding:12px;overflow-x:auto}
  .rail nav{flex-direction:row}
  .rail-pie{border:0;padding:0;margin-left:auto;white-space:nowrap}
  .rail-sep{display:none}
  .lienzo{padding:18px 14px}
}

/* --- controles --- */
label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mut);margin:14px 0 5px}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=url],
select,textarea{width:100%;background:var(--panel2);border:1px solid var(--linea);
  color:var(--texto);border-radius:7px;padding:9px 11px;font:inherit}
textarea{min-height:96px;resize:vertical;line-height:1.5}
input:focus,select:focus,textarea:focus{border-color:var(--ambar);outline:none}
input[type=range]{width:100%;accent-color:var(--ambar)}
.btn{display:inline-block;border:1px solid var(--linea);background:var(--panel);
  color:var(--texto);border-radius:8px;padding:9px 16px;font:inherit;font-weight:600;
  cursor:pointer;text-decoration:none!important}
.btn:hover{border-color:var(--ambar)}
.btn-ambar{background:var(--ambar);border-color:var(--ambar);color:#1a1204;width:auto;margin-top:16px}
.btn-ambar:hover{filter:brightness(1.06)}
.btn-mini{padding:4px 10px;font-size:12.5px;border-radius:6px}
.btn-rojo{border-color:rgba(248,113,113,.4);color:var(--rojo)}

/* --- avisos --- */
.aviso{border-radius:7px;padding:10px 13px;margin:10px 0;font-size:14px;border:1px solid}
.aviso.ok{border-color:rgba(52,211,153,.35);background:rgba(52,211,153,.07);color:var(--verde)}
.aviso.err{border-color:rgba(248,113,113,.35);background:rgba(248,113,113,.07);color:var(--rojo)}
.aviso.info{border-color:rgba(96,165,250,.35);background:rgba(96,165,250,.07);color:var(--azul)}

/* --- tarjetas / tablas --- */
.tarjeta{background:var(--panel);border:1px solid var(--linea);border-radius:var(--radio);
  padding:20px;margin-bottom:18px}
.grid-kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:18px}
.kpi{background:var(--panel);border:1px solid var(--linea);border-radius:var(--radio);padding:16px}
.kpi b{display:block;font-family:var(--mono);font-size:26px;font-weight:600;color:var(--ambar)}
.kpi span{font-size:12px;color:var(--mut)}
table{width:100%;border-collapse:collapse;font-size:14px}
th{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mut);text-align:left;padding:8px 10px;border-bottom:1px solid var(--linea)}
td{padding:10px;border-bottom:1px solid rgba(34,48,71,.55);vertical-align:top}
tr:hover td{background:rgba(255,178,36,.03)}
.pill{display:inline-block;font-family:var(--mono);font-size:11px;padding:2px 9px;
  border-radius:99px;border:1px solid}
.pill.ok{color:var(--verde);border-color:rgba(52,211,153,.4)}
.pill.err{color:var(--rojo);border-color:rgba(248,113,113,.4)}
.pill.neutro{color:var(--mut);border-color:var(--linea)}
.mono{font-family:var(--mono);font-size:.92em}

/* --- pestañas (experiencia) --- */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.tabs button{border:1px solid var(--linea);background:var(--panel2);color:var(--mut);
  border-radius:99px;padding:7px 15px;font:inherit;font-size:13.5px;cursor:pointer}
.tabs button.act{color:#1a1204;background:var(--ambar);border-color:var(--ambar);font-weight:600}
.tab-panel{display:none}
.tab-panel.act{display:block}
.fila-2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
@media(max-width:680px){.fila-2{grid-template-columns:1fr}}

/* ============================================================
   LA LÍNEA DE LLAMADA — firma visual de VOX
   Vúmetro de ticks ámbar estilo central telefónica
   ============================================================ */
.linea-llamada{display:flex;align-items:flex-end;gap:3px;height:46px}
.linea-llamada i{flex:1;min-width:2px;max-width:6px;background:var(--ambar-osc);
  border-radius:2px;height:18%;transition:height .12s ease, background .12s ease}
.linea-llamada.viva i{background:var(--ambar)}
.linea-llamada.viva i{animation:tick 1.1s ease-in-out infinite}
.linea-llamada.viva i:nth-child(3n){animation-duration:.8s}
.linea-llamada.viva i:nth-child(4n){animation-duration:1.4s}
.linea-llamada.escucha i{background:var(--azul);animation-duration:2.2s}
@keyframes tick{0%,100%{height:14%}50%{height:88%}}
.linea-mini{height:18px;opacity:.55}

/* --- demo público --- */
.demo{max-width:1060px;margin:0 auto;padding:26px 18px 60px}
.demo-cab{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-bottom:22px}
.demo-cab .cliente{font-family:var(--mono);color:var(--mut);font-size:13px}
.demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:840px){.demo-grid{grid-template-columns:1fr}}
.cabina{background:var(--panel);border:1px solid var(--linea);border-radius:14px;
  padding:26px;display:flex;flex-direction:column;align-items:center;gap:18px;min-height:380px}
.cabina .estado{font-family:var(--mono);font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mut)}
.cabina .estado.viva{color:var(--verde)}
.cabina .timer{font-family:var(--mono);font-size:34px;font-weight:600}
#btnLlamar{width:120px;height:120px;border-radius:50%;border:2px solid var(--ambar);
  background:radial-gradient(circle at 35% 30%,rgba(255,178,36,.25),rgba(255,178,36,.06));
  color:var(--ambar);font-family:var(--display);font-weight:700;font-size:16px;cursor:pointer;
  transition:transform .15s ease, box-shadow .3s ease}
#btnLlamar:hover{transform:scale(1.04);box-shadow:0 0 34px rgba(255,178,36,.28)}
#btnLlamar.colgar{border-color:var(--rojo);color:var(--rojo);
  background:radial-gradient(circle at 35% 30%,rgba(248,113,113,.25),rgba(248,113,113,.06))}
.panel-crm h2{font-size:15px;font-family:var(--mono);font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mut)}
.transcript{background:var(--panel2);border:1px solid var(--linea);border-radius:10px;
  padding:14px;height:230px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;font-size:14px}
.burbuja{max-width:88%;padding:8px 12px;border-radius:10px;line-height:1.45}
.burbuja.user{align-self:flex-start;background:rgba(96,165,250,.12);border:1px solid rgba(96,165,250,.25)}
.burbuja.agent{align-self:flex-end;background:rgba(255,178,36,.1);border:1px solid rgba(255,178,36,.25)}
.ficha{background:var(--panel);border:1px solid var(--linea);border-radius:10px;padding:16px;margin-top:14px}
.ficha .campo{display:flex;justify-content:space-between;gap:10px;padding:7px 0;
  border-bottom:1px dashed rgba(34,48,71,.7);font-size:14px}
.ficha .campo:last-child{border-bottom:0}
.ficha .campo b{font-family:var(--mono);font-weight:600}
.tarjeta-cita{border:1px solid rgba(52,211,153,.45);background:rgba(52,211,153,.07);
  border-radius:10px;padding:16px;margin-top:14px;animation:aparece .5s ease}
.tarjeta-cita .folio{font-family:var(--mono);font-size:20px;color:var(--verde);font-weight:600}
@keyframes aparece{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.pie-demo{margin-top:26px;font-size:12.5px;color:var(--mut);text-align:center}

/* barras de gráfica (portal) */
.grafica{display:flex;align-items:flex-end;gap:6px;height:120px;margin-top:8px}
.grafica .barra{flex:1;background:var(--ambar-osc);border-radius:4px 4px 0 0;position:relative;min-height:3px}
.grafica .barra:hover{background:var(--ambar)}
.grafica .barra em{position:absolute;bottom:-20px;left:0;right:0;text-align:center;
  font-style:normal;font-family:var(--mono);font-size:9px;color:var(--mut)}