:root{
  --acento:#C2410C;--acento-2:#9A3412;--acento-suave:#FFF1E8;
  --fondo:#F4F1EC;--panel:#FFFFFF;--panel-2:#FAF8F5;--linea:#E7E1D8;
  --tinta:#1C1917;--tenue:#78716C;--chat:#EFEAE2;
  --entrada:#FFFFFF;--bot:#E6F4EA;--humano:#DCEBFF;--sistema:#FFF4DB;
  --ok:#15803D;--alerta:#B45309;--error:#B91C1C;--info:#1D4ED8;
  --radio:12px;--sombra:0 1px 2px rgba(0,0,0,.06),0 4px 16px rgba(0,0,0,.05);
}
@media (prefers-color-scheme:dark){
  :root{
    --acento:#F97316;--acento-2:#FB923C;--acento-suave:#3A2214;
    --fondo:#0F0E0D;--panel:#1A1817;--panel-2:#211F1D;--linea:#2E2B28;
    --tinta:#F5F5F4;--tenue:#A8A29E;--chat:#141312;
    --entrada:#26231F;--bot:#16301F;--humano:#172A45;--sistema:#36290F;
    --ok:#4ADE80;--alerta:#FBBF24;--error:#F87171;--info:#93C5FD;
  }
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--fondo);color:var(--tinta);font:15px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-text-size-adjust:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--info)}
#raiz{height:100%;height:100dvh}
.cargando{display:grid;place-items:center}
.spinner{width:28px;height:28px;border:3px solid var(--linea);border-top-color:var(--acento);border-radius:50%;animation:gira 1s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}

/* acceso */
.acceso{min-height:100%;display:grid;place-items:center;padding:24px 16px}
.tarjeta{background:var(--panel);border:1px solid var(--linea);border-radius:16px;box-shadow:var(--sombra);padding:28px 24px;width:100%;max-width:380px}
.marca{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.marca img{width:36px;height:36px;border-radius:9px}
.marca b{font-size:18px}.marca small{display:block;color:var(--tenue);font-size:13px}
.campo{display:block;margin:12px 0}
.campo span{display:block;font-size:13px;color:var(--tenue);margin-bottom:5px}
.campo input,.campo select{width:100%;padding:11px 12px;border:1px solid var(--linea);border-radius:10px;background:var(--panel-2);outline:none}
.campo input:focus,.campo select:focus,textarea:focus{border-color:var(--acento);box-shadow:0 0 0 3px color-mix(in srgb,var(--acento) 20%,transparent)}
.btn{border:1px solid var(--linea);background:var(--panel);border-radius:10px;padding:9px 14px;font-weight:500;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.btn:hover{background:var(--panel-2)}
.btn.primario{background:var(--acento);border-color:var(--acento);color:#fff}
.btn.primario:hover{background:var(--acento-2)}
.btn.chico{padding:5px 10px;font-size:13px;border-radius:8px}
.btn.ancho{width:100%;justify-content:center;padding:12px}
.btn:disabled{opacity:.55;cursor:not-allowed}
.msg-error{color:var(--error);font-size:14px;min-height:20px;margin:8px 0 0}
.nota{color:var(--tenue);font-size:13px}

/* app */
.app{display:grid;grid-template-columns:340px 1fr 320px;grid-template-rows:minmax(0,1fr);height:100%;height:100dvh}
.app.sin-ficha{grid-template-columns:340px 1fr}
.col{min-width:0;min-height:0;height:100%;display:flex;flex-direction:column;background:var(--panel);border-right:1px solid var(--linea)}
.col.chat{background:var(--chat)}
.cabeza{display:flex;align-items:center;gap:10px;padding:10px 12px;min-height:58px;border-bottom:1px solid var(--linea);background:var(--panel)}
.cabeza .titulo{flex:1;min-width:0}
.cabeza .titulo b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cabeza .titulo small{color:var(--tenue);font-size:12.5px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.icono{border:0;background:transparent;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none;color:var(--tenue)}
.icono:hover{background:var(--panel-2);color:var(--tinta)}
.icono svg{width:20px;height:20px}
.buscar{padding:8px 12px;border-bottom:1px solid var(--linea)}
.buscar input{width:100%;padding:9px 12px;border-radius:10px;border:1px solid var(--linea);background:var(--panel-2);outline:none}
.filtros{display:flex;gap:6px;padding:8px 12px;border-bottom:1px solid var(--linea);overflow-x:auto;scrollbar-width:none}
.chip{border:1px solid var(--linea);background:var(--panel);border-radius:999px;padding:4px 11px;font-size:13px;white-space:nowrap}
.chip.activo{background:var(--acento-suave);border-color:var(--acento);color:var(--acento)}
.lista{flex:1;overflow-y:auto}
.item{display:flex;gap:10px;padding:11px 12px;border-bottom:1px solid var(--linea);cursor:pointer;align-items:flex-start}
.item:hover{background:var(--panel-2)}
.item.sel{background:var(--acento-suave)}
.avatar{width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:600;color:#fff;font-size:15px}
.item .medio{flex:1;min-width:0}
.fila{display:flex;align-items:center;gap:6px}
.fila b{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.fila time{color:var(--tenue);font-size:12px;flex:none}
.previa{color:var(--tenue);font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.item.nuevo .previa{color:var(--tinta);font-weight:500}
.burbuja-n{background:var(--acento);color:#fff;border-radius:999px;font-size:11.5px;font-weight:700;min-width:20px;height:20px;padding:0 6px;display:grid;place-items:center;flex:none}
.etiquetas{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.tag{font-size:11.5px;padding:1px 7px;border-radius:6px;background:var(--panel-2);border:1px solid var(--linea);color:var(--tenue);white-space:nowrap}
.tag.naranja{background:var(--acento-suave);border-color:transparent;color:var(--acento)}
.tag.verde{color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,transparent);border-color:transparent}
.tag.amarillo{color:var(--alerta);background:color-mix(in srgb,var(--alerta) 14%,transparent);border-color:transparent}
.tag.rojo{color:var(--error);background:color-mix(in srgb,var(--error) 12%,transparent);border-color:transparent}
.tag.azul{color:var(--info);background:color-mix(in srgb,var(--info) 12%,transparent);border-color:transparent}
.vacio{padding:40px 20px;text-align:center;color:var(--tenue)}

.mensajes{flex:1;overflow-y:auto;padding:14px 4% 8px;display:flex;flex-direction:column;gap:4px}
.dia{align-self:center;background:var(--panel);color:var(--tenue);font-size:12px;padding:3px 10px;border-radius:8px;margin:10px 0 6px;box-shadow:var(--sombra)}
.m{max-width:min(78%,560px);padding:7px 10px 6px;border-radius:10px;box-shadow:0 1px 1px rgba(0,0,0,.08);white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;font-size:14.5px}
.m.entrada{align-self:flex-start;background:var(--entrada);border-top-left-radius:3px}
.m.salida{align-self:flex-end;border-top-right-radius:3px}
.m.bot{background:var(--bot)}.m.humano{background:var(--humano)}.m.sistema{background:var(--sistema)}
.m .pie{display:flex;justify-content:flex-end;gap:6px;font-size:11px;color:var(--tenue);margin-top:3px;white-space:normal}
.m .quien{font-size:11.5px;font-weight:600;margin-bottom:2px;color:var(--tenue)}
.m.error-envio{outline:2px solid var(--error)}
.m .err{color:var(--error);font-size:12px;margin-top:4px}
.mas{align-self:center;margin:6px 0}
.aviso{margin:8px 12px 0;padding:9px 12px;border-radius:10px;font-size:13.5px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.aviso.amarillo{background:color-mix(in srgb,var(--alerta) 14%,var(--panel));color:var(--tinta)}
.aviso.rojo{background:color-mix(in srgb,var(--error) 12%,var(--panel))}
.aviso .txt{flex:1;min-width:180px}
.redactar{display:flex;gap:8px;align-items:flex-end;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:var(--panel);border-top:1px solid var(--linea)}
.redactar textarea{flex:1;resize:none;border:1px solid var(--linea);border-radius:20px;padding:10px 14px;max-height:160px;min-height:42px;background:var(--panel-2);outline:none;line-height:1.35}
.enviar{width:42px;height:42px;border-radius:50%;border:0;background:var(--acento);color:#fff;display:grid;place-items:center;flex:none}
.enviar:disabled{opacity:.5}
.enviar svg{width:20px;height:20px}
.opciones-envio{display:flex;align-items:center;gap:8px;padding:6px 14px 0;background:var(--panel);font-size:12.5px;color:var(--tenue)}
.opciones-envio select{border:1px solid var(--linea);background:var(--panel-2);border-radius:8px;padding:3px 6px;font-size:12.5px}
.portada{flex:1;display:grid;place-items:center;text-align:center;color:var(--tenue);padding:24px}
.portada img{width:72px;height:72px;border-radius:18px;opacity:.9;margin-bottom:12px}

.ficha{overflow-y:auto;background:var(--panel);border-right:0}
.bloque{padding:14px 16px;border-bottom:1px solid var(--linea)}
.bloque h3{margin:0 0 10px;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--tenue);font-weight:600}
.dato{display:flex;justify-content:space-between;gap:12px;font-size:14px;padding:3px 0}
.dato span:first-child{color:var(--tenue)}
.dato span:last-child{text-align:right;overflow-wrap:anywhere}
.reserva{border:1px solid var(--linea);border-radius:var(--radio);padding:10px 12px;margin-bottom:10px;background:var(--panel-2)}
.reserva .tope{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.reserva .tope b{flex:1}
.total{font-weight:700;font-size:15px}
.deriv{border-left:3px solid var(--alerta);padding:6px 10px;margin-bottom:8px;background:var(--panel-2);border-radius:0 8px 8px 0;font-size:13.5px}
.deriv.resuelta{border-color:var(--linea);color:var(--tenue)}
.plan{font-size:13.5px;white-space:pre-wrap;background:var(--panel-2);border-radius:8px;padding:8px 10px;margin:6px 0}
.acciones{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}

.modal-fondo{position:fixed;inset:0;background:rgba(0,0,0,.4);display:grid;place-items:center;padding:16px;z-index:20}
.modal{background:var(--panel);border-radius:16px;max-width:520px;width:100%;max-height:90vh;overflow:auto;padding:20px;box-shadow:var(--sombra)}
.modal h2{margin:0 0 6px;font-size:18px}
.tabla-u{width:100%;border-collapse:collapse;font-size:14px;margin:8px 0 14px}
.tabla-u td{padding:7px 4px;border-bottom:1px solid var(--linea);vertical-align:top}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--tinta);color:var(--panel);padding:10px 16px;border-radius:10px;font-size:14px;z-index:30;max-width:90vw;box-shadow:var(--sombra)}
.conexion{font-size:11px;color:var(--tenue);display:flex;align-items:center;gap:5px}
.conexion i{width:7px;height:7px;border-radius:50%;background:var(--ok);display:inline-block}
.conexion.off i{background:var(--error)}

.solo-movil{display:none}
.boton-ficha{display:none}
@media (max-width:1180px){
  .app{grid-template-columns:320px 1fr}
  .boton-ficha{display:grid}
  .ficha{position:fixed;top:0;right:0;bottom:0;width:min(360px,92vw);z-index:15;box-shadow:-8px 0 24px rgba(0,0,0,.15);transform:translateX(105%);transition:transform .2s}
  .app.ficha-abierta .ficha{transform:none}
}
@media (max-width:760px){
  .app,.app.sin-ficha{grid-template-columns:1fr}
  .col.lista-col{display:flex}
  .col.chat{display:none}
  .app.en-chat .col.lista-col{display:none}
  .app.en-chat .col.chat{display:flex}
  .solo-movil{display:grid}
  .mensajes{padding:12px 10px 8px}
  .m{max-width:86%}
}
.logo-chico{border-radius:8px;flex:none}