:root{--carbon:#23262B;--carbon2:#2E3238;--naranja:#F75D34;--naranja-suave:#FDE9E3;--texto:#1E2023;--tenue:#6B7078;
--borde:#E4E6EA;--fondo:#F5F6F8;--ok:#1F8A4C;--ok-suave:#E3F4EA;--mal:#C0392B;--mal-suave:#FBE6E3;--aviso:#B7791F}
*{box-sizing:border-box}
body{margin:0;font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;color:var(--texto);background:var(--fondo);font-size:15px}
a{color:var(--naranja)}
.app{display:flex;min-height:100vh}
.lateral{width:232px;background:var(--carbon);color:#fff;padding:20px 14px;flex-shrink:0;display:flex;flex-direction:column}
.marca{display:flex;align-items:center;gap:10px;margin:0 6px 26px;font-weight:600;font-size:16px}
.marca img{width:38px;height:38px;border-radius:10px}
.marca small{display:block;color:#9AA0A8;font-weight:400;font-size:12px}
.lateral nav a{display:block;color:#D5D8DD;text-decoration:none;padding:9px 12px;border-radius:8px;margin-bottom:2px}
.lateral nav a:hover{background:var(--carbon2);color:#fff}
.lateral nav a.activo{background:var(--naranja);color:#fff}
.lateral .pie{margin-top:auto;font-size:13px;color:#9AA0A8;padding:0 8px}
.lateral .pie a{color:#D5D8DD}
main{flex:1;padding:28px 34px;max-width:1180px}
h1{font-size:24px;margin:0 0 4px}.sub{color:var(--tenue);margin:0 0 22px}
h2{font-size:17px;margin:0 0 12px}
.tarjeta{background:#fff;border:1px solid var(--borde);border-radius:12px;padding:20px 22px;margin-bottom:18px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:18px}
.kpi{background:#fff;border:1px solid var(--borde);border-radius:12px;padding:16px 18px}
.kpi .etq{color:var(--tenue);font-size:13px}.kpi .val{font-size:26px;font-weight:600;margin:4px 0}
.barra{height:8px;background:#EDEEF1;border-radius:6px;overflow:hidden}.barra i{display:block;height:100%;background:var(--naranja)}
.barra.alto i{background:var(--mal)}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;color:var(--tenue);font-weight:600;font-size:12.5px;text-transform:uppercase;letter-spacing:.3px;border-bottom:1px solid var(--borde);padding:8px 10px}
td{border-bottom:1px solid #F0F1F3;padding:9px 10px;vertical-align:top}
.num{text-align:right;font-variant-numeric:tabular-nums}
form.fila{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
label{display:block;font-size:13px;color:var(--tenue);margin-bottom:4px}
input[type=text],input[type=email],input[type=password],input[type=number],select,textarea{width:100%;padding:9px 11px;border:1px solid #CFD3D9;border-radius:8px;font:inherit;background:#fff}
input:focus,select:focus{outline:2px solid var(--naranja-suave);border-color:var(--naranja)}
.campo{flex:1;min-width:170px}
.grilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.check{display:flex;align-items:center;gap:8px;color:var(--texto);font-size:14px;margin:0}
button,.boton{background:var(--naranja);color:#fff;border:0;border-radius:8px;padding:10px 16px;font:inherit;font-weight:600;cursor:pointer;text-decoration:none;display:inline-block}
button.sec,.boton.sec{background:#fff;color:var(--texto);border:1px solid #CFD3D9}
button.min{padding:5px 10px;font-size:13px;font-weight:500}
.msg{padding:11px 14px;border-radius:8px;margin-bottom:16px}
.msg.ok{background:var(--ok-suave);color:var(--ok)}.msg.mal{background:var(--mal-suave);color:var(--mal)}
.chip{display:inline-block;padding:2px 9px;border-radius:20px;font-size:12px;background:#EEF0F3;color:#454A52;margin:1px 2px}
.chip.n{background:var(--naranja-suave);color:#B5401F}.chip.ok{background:var(--ok-suave);color:var(--ok)}.chip.mal{background:var(--mal-suave);color:var(--mal)}
.chip.aviso{background:#FDF3E1;color:var(--aviso)}
.tenue{color:var(--tenue)}.ayuda{color:var(--tenue);font-size:13px;margin:6px 0 0}
.inactivo td{opacity:.5}
.login{max-width:380px;margin:9vh auto;background:#fff;border:1px solid var(--borde);border-radius:14px;padding:30px}
.login .marca{color:var(--texto);justify-content:center;margin-bottom:22px}
@media(max-width:820px){.app{flex-direction:column}.lateral{width:auto;flex-direction:row;flex-wrap:wrap;align-items:center;padding:10px}
.marca{margin:0 10px 0 0}.lateral nav{display:flex;flex-wrap:wrap}.lateral .pie{margin:0 0 0 auto}main{padding:18px 16px}}
/* chat de prueba */
.chat{display:flex;flex-direction:column;gap:10px;background:#ECE5DD}
.burbuja{max-width:78%;padding:9px 12px 6px;border-radius:12px;box-shadow:0 1px 1px #0001;white-space:pre-wrap;line-height:1.4}
.burbuja.yo{align-self:flex-end;background:#DCF8C6}
.burbuja.agente{align-self:flex-start;background:#fff}
.burbuja .meta{font-size:11.5px;color:#7A7F86;text-align:right;margin-top:3px}
.burbuja .tools{margin-top:5px}