/* Los colores y la letra del panel de Recepción IA (panel/index.html), en claro y oscuro. */
:root{--fondo:#fff;--fondo-suave:#f8fafc;--fondo-hover:#f1f5f9;--borde:#e2e8f0;--borde-fuerte:#cbd5e1;--texto:#1e293b;--texto-suave:#64748b;--texto-tenue:#94a3b8;--acento:#1f93ff;--acento-fondo:#e8f4ff;--acento-texto:#0b6bcb;--verde:#16a34a;--verde-fondo:#dcfce7;--rojo:#dc2626;--rojo-fondo:#fee2e2;--ambar:#b45309;--ambar-fondo:#fef3c7;--gris-fondo:#f1f5f9;--bot:#6d28d9;--bot-fondo:#ede9fe;--sal:#dbeafe;--sombra:0 1px 2px rgba(15,23,42,.06),0 4px 16px rgba(15,23,42,.08)}
@media (prefers-color-scheme:dark){:root{--fondo:#151718;--fondo-suave:#1b1d1f;--fondo-hover:#232629;--borde:#2b2f33;--borde-fuerte:#3a3f44;--texto:#e8eaed;--texto-suave:#a1a7ae;--texto-tenue:#6b7178;--acento:#3ba1ff;--acento-fondo:#13283d;--acento-texto:#7cc0ff;--verde:#4ade80;--verde-fondo:#12301f;--rojo:#f87171;--rojo-fondo:#3a1a1a;--ambar:#fbbf24;--ambar-fondo:#3a2c10;--gris-fondo:#232629;--bot:#c4b5fd;--bot-fondo:#2a2340;--sal:#173052;--sombra:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.45)}}
*{box-sizing:border-box}html,body{height:100%}
body{margin:0;font:14px/1.45 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;color:var(--texto);background:var(--fondo-suave);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}
.app{height:100%;display:flex;background:var(--fondo)}
.lateral{width:56px;background:var(--fondo);border-right:1px solid var(--borde);display:flex;flex-direction:column;align-items:center;padding:10px 0;gap:6px}
.logo{width:34px;height:34px;border-radius:8px;background:var(--acento);color:#fff;display:grid;place-items:center;font-weight:700;margin-bottom:10px}
.logo.grande{width:48px;height:48px;font-size:20px;margin:0 auto 8px}
.nav{width:40px;height:40px;border-radius:8px;border:0;background:transparent;font-size:18px;cursor:pointer;position:relative;display:grid;place-items:center;text-decoration:none;color:inherit}
.nav:hover{background:var(--fondo-hover)}.nav.activa{background:var(--acento-fondo)}.nav.abajo{margin-top:auto}
.nav .n{position:absolute;top:2px;right:0;background:var(--rojo);color:#fff;font-size:10px;border-radius:9px;padding:0 5px;font-weight:700}
.col-lista{width:330px;border-right:1px solid var(--borde);display:flex;flex-direction:column;min-width:0}
.cab{padding:12px 14px;border-bottom:1px solid var(--borde)}.cab h2{margin:0 0 8px;font-size:16px}
.filtros{display:flex;gap:4px}.filtro{border:1px solid var(--borde);background:var(--fondo);border-radius:999px;padding:3px 10px;font-size:12.5px;cursor:pointer}
.filtro.on{background:var(--acento-fondo);border-color:var(--acento);color:var(--acento-texto);font-weight:600}
.buscar{width:100%;margin-top:8px;border:1px solid var(--borde);border-radius:7px;padding:6px 9px;background:var(--fondo-suave)}
.lista{overflow:auto;flex:1}
.item{display:flex;gap:10px;padding:10px 14px;border-bottom:1px solid var(--borde);cursor:pointer}
.item:hover{background:var(--fondo-hover)}.item.sel{background:var(--acento-fondo)}
.av{width:36px;height:36px;border-radius:50%;background:var(--gris-fondo);display:grid;place-items:center;font-weight:600;font-size:13px;color:var(--texto-suave);flex:none}
.item .cuerpo{min-width:0;flex:1}.fila{display:flex;justify-content:space-between;gap:6px;align-items:baseline}
.nom{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hora{font-size:11.5px;color:var(--texto-tenue);white-space:nowrap}
.prev{color:var(--texto-suave);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chips{display:flex;gap:4px;margin-top:3px;flex-wrap:wrap}
.chip{font-size:10.5px;border-radius:4px;padding:1px 6px;font-weight:600;background:var(--gris-fondo);color:var(--texto-suave)}
.chip.bot{background:var(--bot-fondo);color:var(--bot)}.chip.per{background:var(--acento-fondo);color:var(--acento-texto)}.chip.ad{background:var(--ambar-fondo);color:var(--ambar)}.chip.ok{background:var(--verde-fondo);color:var(--verde)}
.cartel-avisos{display:block;width:100%;margin-top:8px;border:1px solid var(--ambar);background:var(--ambar-fondo);color:var(--ambar);border-radius:7px;padding:6px 9px;font-size:12.5px;cursor:pointer;text-align:left}
.nl{background:var(--acento);color:#fff;border-radius:9px;font-size:11px;font-weight:700;padding:0 6px;margin-left:4px}
.col-chat{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--fondo-suave);position:relative}
.chat-cab{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--fondo);border-bottom:1px solid var(--borde)}
.chat-cab .nom{font-size:15px}.sub{font-size:12px;color:var(--texto-suave)}
.acciones{margin-left:auto;display:flex;gap:6px;position:relative;flex-wrap:wrap;justify-content:flex-end}
.btn{border:1px solid var(--borde-fuerte);background:var(--fondo);border-radius:7px;padding:5px 10px;cursor:pointer;font-size:13px;white-space:nowrap}
.btn:hover{background:var(--fondo-hover)}.btn.pri{background:var(--acento);border-color:var(--acento);color:#fff}.btn.ancho{width:100%;padding:9px}
.btn:disabled{opacity:.5;cursor:default}
.menu{position:absolute;top:36px;right:0;background:var(--fondo);border:1px solid var(--borde);border-radius:8px;box-shadow:var(--sombra);width:230px;padding:6px;z-index:5}
.menu .op{padding:7px 8px;border-radius:6px;cursor:pointer}.menu .op:hover{background:var(--fondo-hover)}
.mensajes{flex:1;overflow:auto;padding:16px 18px;display:flex;flex-direction:column;gap:6px}
.dia.actividad{font-size:11px;color:var(--texto-tenue);max-width:90%;text-align:center}
.m code{font-family:ui-monospace,Menlo,monospace;font-size:12.5px}
.dia{align-self:center;font-size:11.5px;color:var(--texto-suave);background:var(--fondo);border:1px solid var(--borde);border-radius:999px;padding:1px 10px;margin:8px 0}
.m{max-width:72%;padding:7px 10px;border-radius:10px;white-space:pre-wrap;word-wrap:break-word;box-shadow:0 1px 1px rgba(15,23,42,.05)}
.m.ent{align-self:flex-start;background:var(--fondo);border:1px solid var(--borde)}
.m.sal{align-self:flex-end;background:var(--sal)}.m.sal.bot{background:var(--bot-fondo)}
.m.nota{align-self:stretch;max-width:none;background:var(--ambar-fondo);border:1px dashed #f59e0b;font-size:13px}
.m.fallo{border:1px solid var(--rojo)}
.m .pie{font-size:10.5px;color:var(--texto-tenue);text-align:right;margin-top:2px}.m .quien{font-size:10.5px;font-weight:700;color:var(--texto-suave);margin-bottom:2px}
.m img{max-width:260px;max-height:320px;border-radius:7px;display:block;margin-bottom:4px}.m audio{max-width:260px;display:block;margin-bottom:4px}
.adj{display:inline-flex;gap:6px;align-items:center;background:rgba(255,255,255,.6);border:1px solid var(--borde);border-radius:7px;padding:6px 9px;margin-bottom:4px;color:inherit}
.tick.leido{color:var(--acento)}.tick.fallido,.error{color:var(--rojo)}
.componer{background:var(--fondo);border-top:1px solid var(--borde);padding:10px 14px}
.componer .caja{display:flex;gap:8px;align-items:flex-end}.componer textarea{flex:1;border:1px solid var(--borde-fuerte);border-radius:8px;padding:8px 10px;resize:none;height:42px;max-height:160px;background:var(--fondo)}
.ventana{display:flex;gap:8px;align-items:center;background:var(--ambar-fondo);color:var(--ambar);border-radius:7px;padding:7px 10px;font-size:12.5px;margin-bottom:8px}
.pestanas{display:flex;gap:4px;margin-bottom:8px}.pestana{font-size:12px;padding:3px 9px;border-radius:6px;cursor:pointer;color:var(--texto-suave);border:0;background:transparent}.pestana.on{background:var(--gris-fondo);color:var(--texto);font-weight:600}
.col-ficha{width:300px;border-left:1px solid var(--borde);overflow:auto;background:var(--fondo)}
.ficha-cab{padding:14px;border-bottom:1px solid var(--borde);text-align:center}.ficha-cab .av{width:56px;height:56px;margin:0 auto 6px;font-size:18px}
.bloque{padding:12px 14px;border-bottom:1px solid var(--borde)}.bloque h4{margin:0 0 8px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--texto-tenue)}
.dato{display:flex;justify-content:space-between;gap:8px;padding:3px 0;font-size:13px}.dato>span:first-child{color:var(--texto-suave)}
.dato input{border:0;border-bottom:1px dashed var(--borde-fuerte);text-align:right;width:160px;background:transparent;padding:1px 2px}
.dato .guardado{color:var(--verde);font-size:11px}
.turno{border:1px solid var(--borde);border-radius:8px;padding:8px 10px;margin-bottom:6px}.turno .t1{font-weight:600}.turno .t2{font-size:12px;color:var(--texto-suave)}
.vacio,.suave{color:var(--texto-tenue);font-size:12.5px}
.atras{border:0;background:transparent;font-size:22px;cursor:pointer;padding:0 4px;display:none}
.velo{position:fixed;inset:0;background:rgba(15,23,42,.45);display:grid;place-items:center;z-index:20;padding:16px}
.modal{background:var(--fondo);border-radius:12px;box-shadow:var(--sombra);width:min(440px,100%);max-height:90vh;overflow:auto;padding:18px}
.modal h3{margin:0 0 10px}.modal label{display:block;margin:8px 0;font-size:13px;color:var(--texto-suave)}
.modal input,.modal select{width:100%;border:1px solid var(--borde-fuerte);border-radius:7px;padding:7px 9px;margin-top:3px;background:var(--fondo)}
.modal .previa{background:var(--fondo-suave);border-radius:8px;padding:10px;white-space:pre-wrap;font-size:13px;margin:8px 0}
.modal .pie-modal{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}
.qr{display:grid;place-items:center;margin:10px 0}.qr svg{width:200px;height:200px;background:#fff;padding:8px;border-radius:8px}
.respaldo{font-family:ui-monospace,Menlo,monospace;display:grid;grid-template-columns:1fr 1fr;gap:6px;background:var(--fondo-suave);padding:10px;border-radius:8px}
.aviso{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);background:#0f172a;color:#fff;padding:8px 14px;border-radius:8px;font-size:13px;z-index:30}
/* Celular: una columna por vez; los botones debajo del nombre, a todo el ancho (aprobado en el boceto). */
@media (max-width:760px){
  .lateral{display:none}.col-lista,.col-chat,.col-ficha{width:100%;border:0}
  .app[data-pantalla="lista"] .col-chat,.app[data-pantalla="lista"] .col-ficha,
  .app[data-pantalla="chat"] .col-lista,.app[data-pantalla="chat"] .col-ficha,
  .app[data-pantalla="ficha"] .col-lista,.app[data-pantalla="ficha"] .col-chat{display:none}
  .atras{display:block}.chat-cab{flex-wrap:wrap}.acciones{margin-left:0;width:100%;justify-content:flex-start}.acciones .btn{flex:1}
  .m{max-width:88%}
}
@media (min-width:761px){.solo-cel{display:none!important}}
body.entrar{display:grid;place-items:center;padding:16px}
.tarjeta-entrar{background:var(--fondo);border-radius:12px;box-shadow:var(--sombra);padding:28px;width:min(360px,100%);text-align:center}
.tarjeta-entrar h1{font-size:18px;margin:0 0 16px}.tarjeta-entrar label{display:block;text-align:left;font-size:13px;color:var(--texto-suave);margin-bottom:10px}
.tarjeta-entrar input{width:100%;border:1px solid var(--borde-fuerte);border-radius:7px;padding:8px 10px;margin-top:3px;background:var(--fondo)}
a.btn{display:inline-block;box-sizing:border-box;text-decoration:none;color:inherit;text-align:center}
.tarjeta-entrar .btn.ancho+.btn.ancho{margin-top:8px}