/* AnyLink — estilos compartidos. Tema oscuro (agentes) por defecto; .claro para cliente. */
:root {
    --bg: #0b0d12; --bg-2: #11141b; --panel: #151922; --panel-2: #1b202b; --borde: #262c38; --borde-2: #323a49;
    --txt: #e8ebf1; --txt-2: #a9b1c1; --txt-3: #6f7889;
    --acento: #6366f1; --acento-2: #818cf8; --acento-bg: rgba(99,102,241,.14);
    --ok: #22c55e; --ok-bg: rgba(34,197,94,.14); --aviso: #f59e0b; --aviso-bg: rgba(245,158,11,.14);
    --error: #ef4444; --error-bg: rgba(239,68,68,.14); --info: #38bdf8; --info-bg: rgba(56,189,248,.14);
    --radio: 12px; --sombra: 0 18px 50px rgba(0,0,0,.45);
    --fuente: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.claro {
    --bg: #f4f6fb; --bg-2: #eef1f7; --panel: #ffffff; --panel-2: #f7f8fc; --borde: #e3e7ef; --borde-2: #d3d9e4;
    --txt: #0f172a; --txt-2: #475569; --txt-3: #8190a5;
    --acento: #4f46e5; --acento-2: #6366f1; --acento-bg: rgba(79,70,229,.09);
    --ok-bg: rgba(34,197,94,.12); --aviso-bg: rgba(245,158,11,.14); --error-bg: rgba(239,68,68,.1);
    --sombra: 0 18px 50px rgba(15,23,42,.12);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--fuente); background: var(--bg); color: var(--txt); font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
a { color: var(--acento-2); text-decoration: none; }
a:hover { text-decoration: underline; }
[hidden] { display: none !important; }
.mut { color: var(--txt-2); } .mut-3 { color: var(--txt-3); }
.peq { font-size: 12px; } .mono { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; }
.fila { display: flex; align-items: center; gap: 8px; } .fila.sep { justify-content: space-between; } .fila.wrap { flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: 8px; }
.crece { flex: 1; min-width: 0; }
.elip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--borde-2); background: var(--panel-2); color: var(--txt);
    padding: 8px 14px; border-radius: 10px; font: 600 13px var(--fuente); cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, opacity .15s; text-decoration: none; }
.btn:hover { background: var(--borde); text-decoration: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.pri { background: var(--acento); border-color: var(--acento); color: #fff; }
.btn.pri:hover { background: var(--acento-2); border-color: var(--acento-2); }
.btn.ok { background: var(--ok); border-color: var(--ok); color: #04210f; }
.btn.peligro { background: var(--error-bg); border-color: rgba(239,68,68,.35); color: #fca5a5; }
.claro .btn.peligro { color: #b91c1c; }
.btn.fantasma { background: transparent; border-color: transparent; color: var(--txt-2); }
.btn.fantasma:hover { background: var(--panel-2); color: var(--txt); }
.btn.sm { padding: 5px 10px; font-size: 12px; border-radius: 8px; }
.btn.grande { padding: 15px 22px; font-size: 16px; border-radius: 14px; width: 100%; }
.btn.icono { padding: 7px; width: 34px; height: 34px; }
.btn.activo { background: var(--acento-bg); border-color: var(--acento); color: var(--acento-2); }
.btn.rojo-on { background: var(--error); border-color: var(--error); color: #fff; }

/* ---------- formularios ---------- */
.campo { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.campo label { font-size: 12px; font-weight: 600; color: var(--txt-2); }
.input, select.input, textarea.input { width: 100%; background: var(--bg-2); border: 1px solid var(--borde-2); color: var(--txt); border-radius: 10px;
    padding: 9px 12px; font: 14px var(--fuente); outline: none; transition: border-color .15s, box-shadow .15s; }
.input:focus { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-bg); }
textarea.input { resize: vertical; min-height: 70px; }
.rejilla-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
@media (max-width: 560px) { .rejilla-2 { grid-template-columns: 1fr; } }

/* ---------- tarjetas, chips ---------- */
.card { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); }
.card-cab { padding: 14px 16px; border-bottom: 1px solid var(--borde); font-weight: 700; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.card-cuerpo { padding: 16px; }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 600; white-space: nowrap;
    background: var(--panel-2); color: var(--txt-2); border: 1px solid var(--borde); }
.chip.ok { background: var(--ok-bg); color: var(--ok); border-color: transparent; }
.chip.aviso { background: var(--aviso-bg); color: var(--aviso); border-color: transparent; }
.chip.error { background: var(--error-bg); color: var(--error); border-color: transparent; }
.chip.info { background: var(--info-bg); color: var(--info); border-color: transparent; }
.chip.acento { background: var(--acento-bg); color: var(--acento-2); border-color: transparent; }
.punto { width: 8px; height: 8px; border-radius: 50%; background: currentColor; display: inline-block; flex-shrink: 0; }
.punto.late { animation: late 1.4s infinite; }
@keyframes late { 50% { opacity: .25; } }

/* ---------- barra superior ---------- */
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 16px; padding: 10px 20px; background: rgba(11,13,18,.85);
    backdrop-filter: blur(10px); border-bottom: 1px solid var(--borde); }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 16px; color: var(--txt); letter-spacing: -.01em; }
.logo:hover { text-decoration: none; }
.logo-marca { width: 32px; height: 32px; border-radius: 10px; background: linear-gradient(135deg, #6366f1, #8b5cf6); display: grid; place-items: center; color: #fff; font-size: 16px;
    box-shadow: 0 6px 20px rgba(99,102,241,.35); flex-shrink: 0; }
.tabs { display: flex; gap: 4px; }
.tab { padding: 7px 12px; border-radius: 9px; color: var(--txt-2); font-weight: 600; font-size: 13px; cursor: pointer; background: none; border: none; font-family: var(--fuente); }
.tab:hover { background: var(--panel-2); color: var(--txt); }
.tab.on { background: var(--acento-bg); color: var(--acento-2); }
.contenedor { max-width: 1320px; margin: 0 auto; padding: 20px; }

/* ---------- KPIs ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 18px; }
.kpi { padding: 14px 16px; }
.kpi .v { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.kpi .l { font-size: 12px; color: var(--txt-3); font-weight: 600; margin-top: 2px; }

/* ---------- sesiones en vivo ---------- */
.grid-ses { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.ses { overflow: hidden; display: flex; flex-direction: column; transition: border-color .2s, transform .2s; }
.ses.nueva { animation: resalta 2.4s ease-out; }
@keyframes resalta { 0% { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-bg); } 100% { box-shadow: none; } }
.ses-thumb { position: relative; aspect-ratio: 16/9; background: #06080c center/cover no-repeat; border-bottom: 1px solid var(--borde); display: grid; place-items: center;
    color: var(--txt-3); font-size: 12px; cursor: pointer; overflow: hidden; }
.ses-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.ses-thumb .chip { position: absolute; top: 8px; left: 8px; background: rgba(5,6,10,.82); backdrop-filter: blur(4px); }
.ses-thumb .ico-grande { font-size: 30px; opacity: .35; display: block; text-align: center; margin-bottom: 4px; }
.ses-cuerpo { padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.ses-nombre { font-weight: 700; font-size: 14.5px; }
.ses-meta { font-size: 12px; color: var(--txt-2); display: flex; gap: 10px; flex-wrap: wrap; }
.ses-acc { display: flex; gap: 6px; padding: 10px 14px; border-top: 1px solid var(--borde); }
.vacio { padding: 44px 20px; text-align: center; color: var(--txt-3); }
.vacio i { font-size: 34px; display: block; margin-bottom: 8px; opacity: .5; }

/* ---------- tablas ---------- */
.tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabla th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--txt-3); padding: 10px 12px; font-weight: 700; border-bottom: 1px solid var(--borde); }
.tabla td { padding: 10px 12px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.tabla tr:hover td { background: var(--panel-2); }
.tabla-scroll { overflow-x: auto; }
.estrellas { color: #fbbf24; letter-spacing: 1px; white-space: nowrap; }

/* ---------- modal ---------- */
.modal-fondo { position: fixed; inset: 0; background: rgba(3,5,10,.7); backdrop-filter: blur(3px); z-index: 100; display: flex; align-items: flex-start; justify-content: center;
    padding: 6vh 16px 16px; overflow-y: auto; }
.modal { width: 100%; max-width: 560px; background: var(--panel); border: 1px solid var(--borde-2); border-radius: 16px; box-shadow: var(--sombra); animation: sube .18s ease-out; }
.modal.ancho { max-width: 900px; }
.modal-cab { padding: 16px 18px; border-bottom: 1px solid var(--borde); display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: 15px; }
.modal-cuerpo { padding: 18px; }
.modal-pie { padding: 14px 18px; border-top: 1px solid var(--borde); display: flex; justify-content: flex-end; gap: 8px; }
@keyframes sube { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.link-box { display: flex; gap: 8px; align-items: center; background: var(--bg-2); border: 1px dashed var(--borde-2); border-radius: 12px; padding: 10px 12px; }
.link-box .mono { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.codigo-grande { font: 800 26px ui-monospace, Menlo, Consolas, monospace; letter-spacing: .12em; text-align: center; padding: 8px 0 2px; }

/* ---------- toasts ---------- */
#toasts { position: fixed; right: 16px; bottom: 16px; z-index: 300; display: flex; flex-direction: column; gap: 8px; max-width: min(380px, calc(100vw - 32px)); }
.toast { background: var(--panel-2); border: 1px solid var(--borde-2); border-left: 4px solid var(--acento); color: var(--txt); padding: 11px 14px; border-radius: 10px;
    box-shadow: var(--sombra); font-size: 13px; animation: sube .2s ease-out; cursor: pointer; }
.toast.ok { border-left-color: var(--ok); } .toast.error { border-left-color: var(--error); } .toast.aviso { border-left-color: var(--aviso); }

/* ---------- chat ---------- */
.chat { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.chat-lista { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.msg { max-width: 86%; padding: 8px 11px; border-radius: 12px; font-size: 13.5px; word-wrap: break-word; white-space: pre-wrap; }
.msg .quien { font-size: 11px; font-weight: 700; opacity: .75; margin-bottom: 2px; }
.msg .hora { font-size: 10.5px; opacity: .55; margin-top: 3px; text-align: right; }
.msg.yo { align-self: flex-end; background: var(--acento); color: #fff; border-bottom-right-radius: 4px; }
.msg.otro { align-self: flex-start; background: var(--panel-2); border: 1px solid var(--borde); border-bottom-left-radius: 4px; }
.msg.sis { align-self: center; background: none; color: var(--txt-3); font-size: 12px; padding: 2px; }
.chat-form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--borde); }
.chat-form .input { resize: none; min-height: 40px; max-height: 120px; }
.rapidas { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 10px 0; }
.rapidas button { font: 12px var(--fuente); background: var(--panel-2); color: var(--txt-2); border: 1px solid var(--borde); border-radius: 99px; padding: 3px 10px; cursor: pointer; }
.rapidas button:hover { color: var(--txt); border-color: var(--borde-2); }

/* ---------- visor del agente ---------- */
.visor { position: fixed; inset: 0; display: flex; background: #000; }
.escenario { position: relative; flex: 1; min-width: 0; overflow: hidden; background: #05060a; }
.escenario.zoom { overflow: auto; cursor: grab; }
.escenario.zoom.arrastrando { cursor: grabbing; }
.lienzo { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.escenario.zoom .lienzo { position: relative; inset: auto; display: block; width: max-content; min-width: 100%; min-height: 100%; }
.medio { display: block; max-width: 100%; max-height: 100%; width: 100%; height: 100%; object-fit: contain; background: #000; }
.escenario.zoom .medio { max-width: none; max-height: none; object-fit: fill; margin: auto; }
.velo { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: #cbd5e1; text-align: center;
    padding: 24px; background: radial-gradient(circle at 50% 40%, rgba(99,102,241,.12), transparent 60%), #05060a; z-index: 2; }
.velo.traslucido { background: rgba(5,6,10,.72); backdrop-filter: blur(6px); }
.velo h2 { margin: 0; font-size: 20px; color: #f1f5f9; }
.velo p { margin: 0; max-width: 460px; color: #94a3b8; font-size: 14px; }
.velo .icono-velo { font-size: 44px; color: var(--acento-2); }
.spinner { width: 34px; height: 34px; border: 3px solid rgba(255,255,255,.15); border-top-color: var(--acento-2); border-radius: 50%; animation: gira .9s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

.barra { position: absolute; top: 0; left: 0; right: 0; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 10px 12px;
    background: linear-gradient(180deg, rgba(5,6,10,.92), rgba(5,6,10,.55) 70%, transparent); transition: opacity .25s, transform .25s; }
.visor.ocultar-ui .barra { opacity: 0; transform: translateY(-100%); pointer-events: none; }
.visor.ocultar-ui .escenario { cursor: none; }
.barra .grupo { display: flex; align-items: center; gap: 4px; background: rgba(21,25,34,.85); border: 1px solid var(--borde); border-radius: 12px; padding: 3px; }
.barra .btn.icono { background: transparent; border-color: transparent; color: #cbd5e1; font-size: 16px; }
.barra .btn.icono:hover { background: var(--panel-2); color: #fff; }
.barra .btn.icono.activo { background: var(--acento-bg); color: var(--acento-2); }
.barra .btn.icono.rojo-on { background: var(--error); color: #fff; }
.barra .zoom-v { min-width: 44px; text-align: center; font-size: 12px; font-weight: 700; color: #cbd5e1; }
.barra-info { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
.barra-info .n { font-weight: 700; font-size: 14px; color: #f1f5f9; }
.barra-info .d { font-size: 11.5px; color: #94a3b8; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.stats { position: absolute; left: 12px; bottom: 12px; z-index: 4; display: flex; gap: 6px; flex-wrap: wrap; pointer-events: none; }
.stats .chip { background: rgba(5,6,10,.75); border-color: var(--borde); backdrop-filter: blur(4px); }
.visor.ocultar-ui .stats { opacity: .35; }
.aviso-sup { position: absolute; top: 64px; left: 50%; transform: translateX(-50%); z-index: 4; background: rgba(245,158,11,.95); color: #1c1102; padding: 7px 14px;
    border-radius: 10px; font-size: 12.5px; font-weight: 600; box-shadow: var(--sombra); max-width: calc(100% - 32px); }
.menu { position: absolute; z-index: 30; background: var(--panel); border: 1px solid var(--borde-2); border-radius: 12px; box-shadow: var(--sombra); padding: 5px; min-width: 230px; }
.menu button { display: flex; width: 100%; gap: 10px; align-items: center; background: none; border: none; color: var(--txt); font: 13px var(--fuente); padding: 8px 10px; border-radius: 8px; cursor: pointer; text-align: left; }
.menu button:hover { background: var(--panel-2); }
.menu button .sub { font-size: 11.5px; color: var(--txt-3); display: block; }
.menu button.on { color: var(--acento-2); }
.menu hr { border: none; border-top: 1px solid var(--borde); margin: 4px 0; }

.cajon { width: 360px; flex-shrink: 0; background: var(--panel); border-left: 1px solid var(--borde); display: flex; flex-direction: column; min-height: 0; }
.cajon-tabs { display: flex; gap: 4px; padding: 8px; border-bottom: 1px solid var(--borde); }
.cajon-tabs .tab { flex: 1; position: relative; }
.cajon-tabs .badge-n { position: absolute; top: 2px; right: 6px; background: var(--error); color: #fff; font-size: 10px; border-radius: 99px; padding: 0 5px; line-height: 16px; }
.cajon-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cajon-scroll { flex: 1; overflow-y: auto; padding: 14px; }
.dl { display: grid; grid-template-columns: 110px 1fr; gap: 6px 10px; font-size: 13px; }
.dl dt { color: var(--txt-3); } .dl dd { margin: 0; word-break: break-word; }
.linea-tiempo { list-style: none; margin: 0; padding: 0; font-size: 12.5px; }
.linea-tiempo li { display: grid; grid-template-columns: 58px 1fr; gap: 8px; padding: 6px 0; border-bottom: 1px dashed var(--borde); }
.linea-tiempo .t { color: var(--txt-3); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .cajon { position: absolute; right: 0; top: 0; bottom: 0; z-index: 10; width: min(360px, 92vw); box-shadow: var(--sombra); } }

/* ---------- página del cliente ---------- */
.cl-fondo { min-height: 100vh; display: flex; flex-direction: column; }
.cl-top { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; }
.cl-main { flex: 1; display: flex; align-items: flex-start; justify-content: center; padding: 10px 16px 40px; gap: 18px; }
.cl-card { width: 100%; max-width: 560px; background: var(--panel); border: 1px solid var(--borde); border-radius: 20px; box-shadow: var(--sombra); padding: 30px; }
.cl-card h1 { font-size: 22px; margin: 0 0 6px; letter-spacing: -.01em; }
.cl-card .intro { color: var(--txt-2); margin: 0 0 20px; font-size: 15px; }
.agente-box { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--acento-bg); border-radius: 14px; margin-bottom: 20px; }
.avatar { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; font-weight: 800; display: grid; place-items: center; flex-shrink: 0; }
.pasos { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-direction: column; gap: 12px; }
.pasos li { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--txt-2); }
.pasos .n { width: 26px; height: 26px; border-radius: 50%; background: var(--panel-2); border: 1px solid var(--borde-2); display: grid; place-items: center; font-weight: 800; font-size: 12.5px; color: var(--txt); flex-shrink: 0; }
.pasos b { color: var(--txt); }
.seguridad { display: flex; gap: 10px; font-size: 12.5px; color: var(--txt-2); background: var(--panel-2); border: 1px solid var(--borde); border-radius: 12px; padding: 11px 13px; margin-top: 18px; }
.seguridad i { color: var(--ok); font-size: 16px; flex-shrink: 0; }
.estado-grande { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 16px; background: var(--ok-bg); margin-bottom: 16px; }
.estado-grande.pausa { background: var(--aviso-bg); }
.estado-grande.espera { background: var(--acento-bg); }
.estado-grande .ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; background: var(--ok); color: #fff; flex-shrink: 0; }
.estado-grande.pausa .ico { background: var(--aviso); }
.estado-grande.espera .ico { background: var(--acento); }
.estado-grande .t1 { font-weight: 800; font-size: 16px; }
.estado-grande .t2 { font-size: 13px; color: var(--txt-2); }
.previa { width: 100%; aspect-ratio: 16/9; background: #0b0d12; border-radius: 12px; object-fit: contain; border: 1px solid var(--borde); display: block; }
.acciones-cl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 14px; }
.alerta { display: flex; gap: 10px; align-items: flex-start; padding: 11px 13px; border-radius: 12px; font-size: 13px; margin-bottom: 14px; }
.alerta.aviso { background: var(--aviso-bg); color: #92400e; } .alerta.error { background: var(--error-bg); color: #991b1b; } .alerta.info { background: var(--acento-bg); color: var(--acento); }
.alerta i { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.cl-chat { width: 360px; height: min(640px, calc(100vh - 110px)); position: sticky; top: 16px; background: var(--panel); border: 1px solid var(--borde); border-radius: 20px; box-shadow: var(--sombra);
    display: flex; flex-direction: column; overflow: hidden; }
.cl-chat .cab { padding: 14px 16px; border-bottom: 1px solid var(--borde); font-weight: 700; display: flex; align-items: center; gap: 8px; }
@media (max-width: 960px) { .cl-main { flex-direction: column; align-items: center; } .cl-chat { width: 100%; max-width: 560px; height: 460px; position: static; } }
@media (max-width: 480px) { .cl-card { padding: 20px; border-radius: 16px; } .acciones-cl { grid-template-columns: 1fr; } }
.rec { display: inline-flex; align-items: center; gap: 6px; background: var(--error); color: #fff; padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 700; }
.rating { display: flex; gap: 6px; justify-content: center; margin: 14px 0; }
.rating button { background: none; border: none; font-size: 34px; cursor: pointer; color: var(--borde-2); padding: 0 2px; transition: transform .1s; }
.rating button.on { color: #fbbf24; }
.rating button:hover { transform: scale(1.12); }
.banner-atencion { position: fixed; top: 0; left: 0; right: 0; z-index: 200; background: var(--acento); color: #fff; text-align: center; padding: 12px; font-weight: 700; animation: sube .2s; }

/* ---------- inicio / login ---------- */
.centro { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.caja-login { width: 100%; max-width: 400px; }
.caja-login .logo { justify-content: center; margin-bottom: 22px; font-size: 20px; }
.codigo-input { text-align: center; font: 700 22px ui-monospace, Menlo, Consolas, monospace !important; letter-spacing: .15em; text-transform: uppercase; }

/* ---------- ajustes: zoom del visor y ventana flotante del cliente ---------- */
.escenario.zoom .lienzo { display: flex; width: max-content; height: max-content; min-width: 100%; min-height: 100%; }
.escenario.zoom .medio { margin: auto; flex-shrink: 0; }
.cl-chat.en-pip { width: 100%; height: auto; flex: 1; position: static; border: none; border-radius: 0; box-shadow: none; }
.cl-chat.en-pip .cab { display: none; }

/* ---------- portada pública ---------- */
.inicio { max-width: 1040px; margin: 0 auto; padding: 8px 16px 48px; width: 100%; }
.hero { text-align: center; max-width: 680px; margin: 10px auto 28px; }
.hero h1 { font-size: clamp(24px, 4vw, 34px); letter-spacing: -.02em; margin: 0 0 10px; line-height: 1.15; }
.hero p { color: var(--txt-2); font-size: 16px; margin: 0; }
.inicio-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 18px; align-items: start; }
.inicio-grid .cl-card { max-width: none; }
.inicio-grid h2 { font-size: 18px; margin: 0 0 16px; display: flex; align-items: center; gap: 8px; }
.inicio-grid h2 i { color: var(--acento); }
.pasos-inicio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 26px; }
.pasos-inicio > div { display: flex; flex-direction: column; gap: 2px; padding: 16px; background: var(--panel); border: 1px solid var(--borde); border-radius: 16px; }
.pasos-inicio .n { width: 28px; height: 28px; border-radius: 50%; background: var(--acento-bg); color: var(--acento); font-weight: 800; display: grid; place-items: center; margin-bottom: 6px; }
.pasos-inicio span:last-child { color: var(--txt-2); font-size: 13px; }
@media (max-width: 820px) { .inicio-grid, .pasos-inicio { grid-template-columns: 1fr; } }

/* ---------- portada estilo buscador ---------- */
body.g { background: #fff; min-height: 100vh; display: flex; flex-direction: column; }
.g-centro { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 16px 80px; gap: 0; }
.g-logo { font: 600 clamp(64px, 14vw, 104px)/1 'Outfit', var(--fuente); letter-spacing: -.035em; margin: 0 0 34px; user-select: none; }
.g-logo span:nth-child(1) { color: #4f46e5; } .g-logo span:nth-child(2) { color: #0891b2; } .g-logo span:nth-child(3) { color: #f59e0b; }
.g-logo span:nth-child(4) { color: #4f46e5; } .g-logo span:nth-child(5) { color: #10b981; } .g-logo span:nth-child(6) { color: #e11d48; }
.g-logo span:nth-child(7) { color: #7c3aed; }
.g-pill { width: min(584px, 100%); height: 54px; display: flex; align-items: center; gap: 12px; padding: 0 8px 0 20px; background: #fff; color: #202124;
    border: 1px solid #dfe1e5; border-radius: 27px; font: 500 16px var(--fuente); cursor: pointer; text-align: left; transition: box-shadow .2s, border-color .2s; }
.g-pill:hover, .g-pill:focus-within, .g-pill:focus-visible { box-shadow: 0 1px 6px rgba(32,33,36,.28); border-color: rgba(223,225,229,0); outline: none; }
.g-pill:disabled { opacity: .7; cursor: progress; }
.g-ico { font-size: 22px; color: #6b7280; }
.g-ir { font-size: 30px; color: #4f46e5; transition: transform .15s; }
.g-pill:hover .g-ir { transform: translateX(2px); }
.g-input input { flex: 1; min-width: 0; border: none; outline: none; font: 600 18px ui-monospace, Menlo, Consolas, monospace; letter-spacing: .1em; text-transform: uppercase; background: transparent; color: #202124; }
.g-input input::placeholder { font: 400 16px var(--fuente); letter-spacing: 0; text-transform: none; color: #9aa0a6; }
.g-ir-btn { background: none; border: none; padding: 0; cursor: pointer; display: grid; place-items: center; }
.g-botones { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; justify-content: center; }
.g-btn { background: #f8f9fa; border: 1px solid #f8f9fa; border-radius: 6px; color: #3c4043; font: 14px var(--fuente); padding: 0 16px; height: 36px; cursor: pointer; }
.g-btn:hover { border-color: #dadce0; box-shadow: 0 1px 1px rgba(0,0,0,.1); color: #202124; }
.g-error { margin-top: 14px; color: #d93025; font-size: 14px; }
.g-como { max-width: 520px; text-align: center; color: #4d5156; font-size: 14px; line-height: 1.6; margin: 22px 0 0; }
.g-pie { background: #f2f2f2; color: #70757a; font-size: 14px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 15px 30px; }
.g-pie a { color: #70757a; }

.barra .btn.icono { position: relative; }
.barra .btn.icono.con-aviso::after { content: ''; position: absolute; top: 5px; right: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--error); }

.g-lema { color: #4d5156; font-size: 17px; margin: -14px 0 30px; text-align: center; }
.g-boton { display: inline-flex; align-items: center; gap: 10px; padding: 18px 44px; border: none; border-radius: 999px; cursor: pointer;
    background: #4f46e5; color: #fff; font: 600 19px var(--fuente); box-shadow: 0 8px 24px rgba(79,70,229,.32); transition: transform .12s, box-shadow .2s, background .2s; }
.g-boton i { font-size: 24px; }
.g-boton:hover { background: #4338ca; box-shadow: 0 10px 30px rgba(79,70,229,.42); transform: translateY(-1px); }
.g-boton:active { transform: translateY(0); }
.g-boton:disabled { opacity: .75; cursor: progress; transform: none; }
.g-link { margin-top: 30px; font-size: 14px; color: #70757a; }
.g-codigo { display: flex; gap: 8px; margin-top: 26px; width: min(360px, 100%); }

/* ---------- herramientas de soporte ---------- */
.capa-ver { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.escenario.h-puntero, .escenario.h-ping, .escenario.h-dibujar { cursor: crosshair; }
.escenario.h-puntero { cursor: none; }
.msg .copiar-caja { margin-top: 4px; background: rgba(0,0,0,.25); border-radius: 8px; padding: 8px 10px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; word-break: break-all; }
.claro .msg.otro .copiar-caja { background: #eef1f7; color: var(--txt); }
.msg .copiar-btn { margin-top: 6px; }
.msg img.captura-chat { display: block; max-width: 100%; border-radius: 8px; margin-top: 4px; cursor: zoom-in; }
.msg a { color: inherit; text-decoration: underline; }
.espejo { position: relative; }
.capa-cl { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.espejo.en-pip { flex-shrink: 0; }
.espejo.en-pip .previa { border-radius: 0; border: none; border-bottom: 1px solid var(--borde); }
/* En el visor los avisos van arriba al centro: abajo a la derecha tapaban el chat. */
body:has(.visor) #toasts { top: 64px; bottom: auto; right: auto; left: 50%; transform: translateX(-50%); align-items: center; }

/* ---------- dictar el código ---------- */
.dictado-pasos { margin: 0 0 16px; padding-left: 20px; color: var(--txt-2); display: flex; flex-direction: column; gap: 4px; }
.dictado-pasos b { color: var(--txt); }
.dictado { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.dictado-car { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 78px; padding: 14px 8px 10px; background: var(--bg-2);
    border: 1px solid var(--borde-2); border-radius: 14px; }
.dictado-car b { font: 800 36px/1 ui-monospace, Menlo, Consolas, monospace; color: var(--txt); }
.dictado-car span { font-size: 12px; color: var(--txt-2); white-space: nowrap; }
.dictado-frase { text-align: center; color: var(--txt-2); margin: 16px 0 0; font-size: 14px; }

/* ---------- archivos del chat ---------- */
.adjunto { display: flex; align-items: center; gap: 10px; min-width: 210px; white-space: normal; margin-top: 2px; }
.adjunto > i { font-size: 28px; flex-shrink: 0; opacity: .9; }
.adjunto-n { font-weight: 600; font-size: 13px; }
.adjunto-t { font-size: 11.5px; opacity: .7; }
.msg.yo .adjunto-b { background: rgba(255,255,255,.2); border-color: transparent; color: #fff; }
.adjunto-aviso { margin-top: 6px; font-size: 11.5px; color: var(--aviso); white-space: normal; }
.claro .adjunto-aviso { color: #92400e; }
.msg.subiendo { min-width: 210px; opacity: .85; }
.progreso { height: 4px; border-radius: 99px; background: rgba(255,255,255,.28); margin-top: 7px; overflow: hidden; }
.progreso i { display: block; height: 100%; width: 0; background: #fff; transition: width .2s; }
.soltando { outline: 3px dashed var(--acento-2); outline-offset: -6px; }

/* ---------- lo que envía el agente: su pantalla y su cámara ---------- */
.presenta { position: fixed; inset: 0; z-index: 150; display: flex; flex-direction: column; background: #05060a; animation: sube .18s ease-out; }
.presenta-cab { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #11141b; border-bottom: 1px solid #262c38; color: #e2e8f0; font-size: 14px; }
.presenta-cab > i { color: #818cf8; font-size: 18px; }
.presenta-cab .btn { background: #1b202b; border-color: #323a49; color: #e2e8f0; }
.presenta-cab .btn:hover { background: #262c38; }
.presenta-cuerpo { position: relative; flex: 1; min-height: 0; }
.presenta-cuerpo video, .presenta-cuerpo canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.presenta-espera { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 12px; color: #94a3b8; }
.presenta-pill { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 150; display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px; border: none; border-radius: 99px; background: var(--acento); color: #fff; font: 600 14px var(--fuente); cursor: pointer;
    box-shadow: 0 8px 24px rgba(79,70,229,.35); animation: sube .2s ease-out; }
.burbujas { position: fixed; left: 16px; bottom: 16px; z-index: 160; display: flex; gap: 10px; align-items: flex-end; }
.burbuja { position: relative; width: 124px; height: 124px; border-radius: 50%; overflow: hidden; border: 3px solid #fff; background: #0b0d12; cursor: pointer;
    box-shadow: 0 10px 30px rgba(15,23,42,.35); transition: width .2s, height .2s; animation: sube .2s ease-out; }
.burbuja.grande { width: 240px; height: 240px; }
.burbuja video { width: 100%; height: 100%; object-fit: cover; display: block; }
.burbuja span { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; font-size: 11.5px; font-weight: 700; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.85); }
.mi-cam { position: absolute; right: 12px; bottom: 12px; z-index: 4; width: 176px; aspect-ratio: 4/3; object-fit: cover; border-radius: 12px; background: #000;
    border: 2px solid rgba(255,255,255,.22); box-shadow: var(--sombra); transform: scaleX(-1); }
@media (max-width: 480px) { .burbuja { width: 92px; height: 92px; } .presenta-cab .btn span { display: none; } }

/* ---------- consentimiento ---------- */
.consentimiento { border: 1px solid var(--borde-2); border-radius: 14px; padding: 14px 16px; margin-bottom: 14px; background: var(--panel-2); }
.consentimiento.falta { border-color: var(--aviso); box-shadow: 0 0 0 3px var(--aviso-bg); animation: sacude .35s; }
@keyframes sacude { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.cons-cab { font-weight: 700; display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
.consentimiento p { margin: 0 0 10px; font-size: 13.5px; color: var(--txt-2); line-height: 1.5; }
.cons-acepto { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-weight: 600; cursor: pointer; user-select: none; }
.cons-acepto input { width: 18px; height: 18px; accent-color: var(--acento); }
.consentido { display: flex; align-items: center; gap: 8px; color: var(--ok); font-size: 13px; margin-bottom: 12px; }
.claro .consentido { color: #15803d; }
.constancia blockquote { margin: 0 0 16px; padding: 12px 14px; border-left: 4px solid var(--ok); background: var(--bg-2); border-radius: 8px; line-height: 1.55; }
@media print {
    body.imprimiendo > *:not(.a-imprimir) { display: none !important; }
    body.imprimiendo .a-imprimir { position: static; background: none; backdrop-filter: none; padding: 0; }
    body.imprimiendo .a-imprimir .modal { box-shadow: none; border: none; background: #fff; color: #000; max-width: none; animation: none; }
    body.imprimiendo .a-imprimir .modal-pie, body.imprimiendo .a-imprimir .modal-cab button { display: none; }
    body.imprimiendo .a-imprimir blockquote { background: #f3f4f6; color: #000; }
}

/* ---------- revisión del equipo ---------- */
.chequeo { margin-top: 16px; border: 1px solid var(--borde); border-radius: 14px; overflow: hidden; }
.chequeo-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 8px 8px 14px; font-weight: 700; font-size: 13px; background: var(--panel-2); border-bottom: 1px solid var(--borde); }
.chequeo-lista { list-style: none; margin: 0; padding: 4px 0; }
.chequeo-lista li { display: flex; gap: 10px; align-items: flex-start; padding: 7px 14px; font-size: 13px; }
.chequeo-lista li > i { font-size: 16px; margin-top: 1px; flex-shrink: 0; }
.chequeo-lista li div { display: flex; flex-direction: column; min-width: 0; }
.chequeo-lista li span { color: var(--txt-2); }
.chequeo-lista li.ok > i { color: var(--ok); } .chequeo-lista li.aviso > i { color: var(--aviso); } .chequeo-lista li.mal > i { color: var(--error); }
.chequeo-lista li.cargando > i { color: var(--txt-3); }
.gira { display: inline-block; animation: gira 1s linear infinite; }

/* ---------- 2.º monitor ---------- */
.lienzo.doble { gap: 6px; }
.lienzo.doble .medio { width: calc(50% - 3px); }
.barra .btn.icono.num { font: 800 13px var(--fuente); }
.espejo-n { position: absolute; top: 8px; left: 8px; z-index: 1; background: rgba(15,23,42,.75); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px; }
#espejo2 { margin-top: 8px; }

/* ---------- notas de voz ---------- */
.chat-form { position: relative; }
.voz-barra { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--panel); color: var(--error); }
.voz-barra .voz-t { color: var(--txt); font-variant-numeric: tabular-nums; }
.voz-barra .crece { color: var(--txt-2); }
.voz { display: flex; align-items: center; gap: 8px; min-width: 200px; white-space: normal; margin-top: 2px; }
.voz .voz-play { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; }
.msg.yo .voz .voz-play { background: rgba(255,255,255,.2); border-color: transparent; color: #fff; }
.voz-linea { flex: 1; height: 4px; border-radius: 99px; background: currentColor; opacity: .3; position: relative; overflow: hidden; }
.voz-linea i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: currentColor; }
.voz-dur { font-size: 11.5px; opacity: .8; font-variant-numeric: tabular-nums; min-width: 32px; text-align: right; }