/* BaOSata - estilos / styles. Oscuro por defecto / dark by default. Sin dependencias / no dependencies. */
:root {
  --bg: #1e1e1e; --panel: #252526; --panel2: #2d2d30; --borde: #3c3c3c;
  --texto: #d4d4d4; --suave: #9da1a6; --acento: #4ec9b0; --acento2: #569cd6;
  --error: #f48771; --ok: #6a9955; --aviso: #dcdcaa; --sombra: 0 8px 28px rgba(0, 0, 0, .45);
  --brillo: 1; --radio: 14px;
  --panel-rgb: 37, 37, 38; --panel2-rgb: 45, 45, 48; --bg-rgb: 30, 30, 30; --linea: rgba(255, 255, 255, .11);
  --vidrio-blur: 22px; --vidrio-op: .62;
  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: dark;
}
:root[data-tema="claro"] {
  --bg: #f3f3f3; --panel: #ffffff; --panel2: #ececec; --borde: #cfcfcf;
  --texto: #1f1f1f; --suave: #5b5f66; --acento: #0a7f6c; --acento2: #1b5fa8;
  --error: #b3261e; --ok: #2e7d32; --aviso: #7a6400; --sombra: 0 8px 28px rgba(0, 0, 0, .18);
  --panel-rgb: 255, 255, 255; --panel2-rgb: 236, 236, 236; --bg-rgb: 243, 243, 243; --linea: rgba(0, 0, 0, .10);
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--bg); color: var(--texto); font: 15px/1.45 var(--fuente); -webkit-text-size-adjust: 100%; }
[hidden], .oculto { display: none !important; }
.fuera { position: fixed; left: -9999px; top: 0; opacity: 0; }
h1, h2, h3 { margin: 0 0 .5rem; line-height: 1.2; }
h2 { font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; color: var(--suave); }
a, .enlace { color: var(--acento2); }
.noscript { padding: 1rem; background: var(--error); color: #000; }

/* ---- controles ---- */
button, input, select, textarea { font: inherit; color: inherit; }
input:not([type=checkbox]):not([type=range]):not([type=file]), select, textarea {
  width: 100%; padding: .55rem .7rem; background: var(--bg); border: 1px solid var(--borde); border-radius: 8px;
}
input[type=search] { -webkit-appearance: none; appearance: none; }
textarea { resize: vertical; min-height: 5rem; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, [contenteditable]:focus-visible {
  outline: 2px solid var(--acento); outline-offset: 1px;
}
button { cursor: pointer; border: 1px solid var(--borde); background: var(--panel2); border-radius: 8px; padding: .5rem .8rem; }
button:hover { border-color: var(--acento); }
button:disabled { opacity: .5; cursor: not-allowed; }
button.primario { background: var(--acento); color: #04201b; border-color: var(--acento); font-weight: 600; }
button.secundario { background: var(--panel2); }
button.peligro { border-color: var(--error); color: var(--error); }
button.icono { min-width: 2.4rem; height: 2.4rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; }
button.icono.texto { font-size: .8rem; font-weight: 700; }
button.enlace { background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }
label { display: block; margin: .6rem 0; font-size: .9rem; color: var(--suave); }
label > input, label > select { margin-top: .25rem; color: var(--texto); }
label.check { display: flex; gap: .5rem; align-items: flex-start; color: var(--texto); }
label.check input { margin-top: .2rem; }
input[type=range] { width: 100%; accent-color: var(--acento); }
.error { color: var(--error); min-height: 1.2em; margin: .5rem 0 0; font-size: .9rem; }
.ayuda, .nota { color: var(--suave); font-size: .82rem; margin: .4rem 0; }
.insignia { display: inline-block; padding: .1rem .5rem; border-radius: 99px; background: var(--panel2); border: 1px solid var(--borde); font-size: .75rem; color: var(--suave); }
.insignia.ok { color: var(--acento); border-color: var(--acento); }
.fila { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.fila > * { flex: 1 1 auto; }

/* ---- banda beta ---- */
.banda { background: #3a3200; color: #ffe27a; padding: .35rem .8rem; font-size: .8rem; text-align: center; border-bottom: 1px solid #6b5b00; }
:root[data-tema="claro"] .banda { background: #fff4c2; color: #5b4a00; }

/* ---- acceso ---- */
.auth { min-height: calc(100vh - 2rem); display: grid; place-items: center; padding: 1rem; }
.auth-tarjeta { width: min(440px, 100%); background: var(--panel); border: 1px solid var(--borde); border-radius: 14px; padding: 1.4rem; box-shadow: var(--sombra); }
.auth-marca { display: flex; align-items: center; gap: .7rem; }
.auth-marca h1 { font-size: 1.7rem; color: var(--acento); margin: 0; }
.lema { color: var(--suave); margin: .4rem 0 1rem; }
.pestanas { display: flex; gap: .3rem; border-bottom: 1px solid var(--borde); margin-bottom: .6rem; }
.pestanas button { flex: 1; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; }
.pestanas button.activa { border-bottom-color: var(--acento); color: var(--acento); }
.enlaces, .auth-pie { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: .8rem; font-size: .85rem; }
.auth-pie { border-top: 1px solid var(--borde); padding-top: .8rem; }

/* ---- principal ---- */
.principal { padding: .6rem; width: 100%; }
.barra { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-bottom: .6rem; }
.perfil { display: flex; align-items: center; gap: .5rem; padding: .25rem .6rem .25rem .3rem; border-radius: 99px; }
.perfil canvas { width: 40px; height: 40px; border-radius: 50%; background: var(--bg); border: 1px solid var(--borde); }
.perfil-alias { font-weight: 600; max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.buscar { flex: 1 1 260px; display: flex; gap: .4rem; align-items: center; min-width: 200px; }
.buscar input { flex: 1; }
.animos { display: flex; gap: .15rem; }
.animos button { padding: .2rem .4rem; border-radius: 8px; background: none; border-color: transparent; font-size: 1.1rem; }
.animos button.activa { border-color: var(--acento); background: var(--panel2); }
.acciones { display: flex; gap: .3rem; margin-left: auto; }

.nav-movil { display: none; }
.rejilla { display: grid; gap: .6rem; grid-template-columns: minmax(260px, 1fr) minmax(340px, 1.5fr) minmax(260px, 1fr); align-items: start; }
.col { display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; align-items: flex-start; gap: .6rem; min-width: 0; min-height: 120px; }
.col > * { flex: 1 1 100%; min-width: 0; }
.tarjeta { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: .8rem; min-width: 0; }
#radar { width: 100%; height: auto; background: radial-gradient(circle at 50% 50%, #12302a 0%, var(--bg) 75%); border-radius: 8px; border: 1px solid var(--borde); cursor: pointer; touch-action: none; }
.radar-zoom { display: flex; align-items: center; justify-content: center; gap: .7rem; margin: .4rem 0; }
.radar-zoom button { min-width: 2.4rem; font-size: 1.1rem; line-height: 1; }
#radarEscala { min-width: 6.5rem; text-align: center; font-size: .85rem; font-variant-numeric: tabular-nums; }

.grilla-contactos { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: .4rem; }
.contacto { position: relative; }
.contacto button { width: 100%; display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .4rem .2rem; background: var(--bg); font-size: .75rem; }
.contacto.sel button { border-color: var(--acento); background: var(--panel2); }
.contacto canvas { width: 44px; height: 44px; border-radius: 50%; background: var(--panel); border: 1px solid var(--borde); }
.contacto .nombre { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contacto .via { color: var(--suave); font-size: .65rem; }
.contacto.fuera-de-linea { opacity: .5; }
.punto { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; background: var(--ok); margin-right: .25rem; }
.contacto.fuera-de-linea .punto { background: var(--suave); }
.verificado { color: var(--acento); }

/* ---- chat ---- */
.chat { display: flex; flex-direction: column; min-height: 560px; }
.chat-tabs { display: flex; gap: .25rem; margin-bottom: .5rem; flex-wrap: wrap; }
.chat-tabs button { flex: 1 1 auto; padding: .35rem .5rem; font-size: .85rem; }
.chat-tabs button.activa { background: var(--acento); color: #04201b; border-color: var(--acento); font-weight: 600; }
.chat-cab { display: flex; gap: .4rem; align-items: center; margin-bottom: .4rem; flex-wrap: wrap; }
.chat-titulo { font-weight: 600; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-cab select { width: auto; max-width: 11rem; }
.mensajes { flex: 1; min-height: 260px; height: clamp(260px, 52vh, 560px); overflow-y: auto; display: flex; flex-direction: column; gap: .4rem; padding: .4rem; background: var(--bg); border: 1px solid var(--borde); border-radius: 8px; }
.msg { max-width: 82%; padding: .45rem .7rem; border-radius: 12px; background: var(--panel2); overflow-wrap: anywhere; white-space: pre-wrap; }
.msg.mio { align-self: flex-end; background: #0e4d43; color: #e8fffa; }
:root[data-tema="claro"] .msg.mio { background: #cdeee7; color: #06251f; }
.msg.otro { align-self: flex-start; }
.msg.sistema { align-self: center; background: none; color: var(--suave); font-size: .8rem; text-align: center; max-width: 95%; }
.msg .meta { display: block; font-size: .7rem; color: var(--suave); margin-top: .15rem; white-space: normal; }
.msg .autor { display: block; font-size: .72rem; color: var(--acento); font-weight: 600; white-space: normal; }
.msg.mio .meta { color: inherit; opacity: .7; }
.envio { display: flex; gap: .4rem; margin-top: .5rem; }
.envio input { flex: 1; }

/* ---- suite / ajustes ---- */
.suite { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: .4rem; }
.app-b { display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: .6rem .3rem; font-size: .8rem; background: var(--bg); }
.app-b .ico { font-size: 1.6rem; line-height: 1; }
.ajustes-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.ajustes-lista label { margin: 0 0 .15rem; }
.paz button { width: 100%; margin-bottom: .4rem; }
.paz { border-color: #35595a; }

/* ---- brillo de la app ---- */
.velo { position: fixed; inset: 0; background: #000; opacity: calc(1 - var(--brillo)); pointer-events: none; z-index: 9000; }

/* ---- modales y avisos ---- */
.fondo-modal { position: fixed; inset: 0; background: rgba(0, 0, 0, .6); display: grid; place-items: center; padding: .6rem; z-index: 1000; overflow-y: auto; }
.modal { width: min(560px, 100%); max-height: calc(100vh - 1.2rem); display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--borde); border-radius: 14px; box-shadow: var(--sombra); }
.modal.grande { width: min(920px, 100%); }
.modal.ancho { width: min(720px, 100%); }
.modal-cab { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 1rem; border-bottom: 1px solid var(--borde); }
.modal-cab h2 { margin: 0; font-size: 1rem; text-transform: none; letter-spacing: 0; color: var(--texto); }
.modal-cuerpo { padding: 1rem; overflow-y: auto; }
.modal-pie { display: flex; justify-content: flex-end; gap: .5rem; flex-wrap: wrap; padding: .7rem 1rem; border-top: 1px solid var(--borde); }
.modal h3 { font-size: .95rem; margin-top: 1rem; color: var(--acento); }
.modal ul, .modal ol { padding-left: 1.2rem; }
.modal li { margin: .2rem 0; }
.aviso-legal { border: 1px solid var(--aviso); color: var(--aviso); border-radius: 8px; padding: .5rem .7rem; font-size: .85rem; margin-bottom: .8rem; }
.toasts { position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); display: flex; flex-direction: column; gap: .4rem; z-index: 2000; width: min(480px, calc(100% - 1.5rem)); pointer-events: none; }
.toast { background: var(--panel2); border: 1px solid var(--acento); border-radius: 10px; padding: .55rem .8rem; box-shadow: var(--sombra); }
.toast.error { border-color: var(--error); color: var(--error); }

/* ---- apps de la suite ---- */
.dos-paneles { display: grid; grid-template-columns: minmax(150px, 220px) 1fr; gap: .8rem; min-height: 340px; }
.lista-sel { list-style: none; margin: .4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; max-height: 340px; overflow-y: auto; }
.lista-sel button { width: 100%; text-align: left; background: var(--bg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista-sel button.activa { border-color: var(--acento); }
.calc { max-width: 340px; margin: 0 auto; }
.calc-pantalla { font-size: 1.4rem; text-align: right; font-family: var(--mono); }
.calc-res { text-align: right; min-height: 1.6em; color: var(--acento); font-family: var(--mono); font-size: 1.1rem; margin: .2rem 0 .5rem; }
.calc-teclas { display: grid; grid-template-columns: repeat(5, 1fr); gap: .35rem; }
.calc-teclas button { padding: .7rem 0; font-size: 1rem; }
.calc-teclas .op { color: var(--acento2); }
.calc-hist { margin: .6rem 0 0; font-family: var(--mono); font-size: .8rem; color: var(--suave); max-height: 7rem; overflow-y: auto; }
.barra-herr { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; margin-bottom: .5rem; }
.barra-herr input[type=color] { width: 2.6rem !important; height: 2.2rem; padding: 2px !important; border: 1px solid var(--borde); background: none; border-radius: 6px; }
.barra-herr input[type=range] { width: 7rem; }
.barra-herr button.activa { border-color: var(--acento); background: var(--panel2); color: var(--acento); }
canvas.lienzo { width: 100%; height: auto; background: #fff; border: 1px solid var(--borde); border-radius: 8px; touch-action: none; cursor: crosshair; display: block; }
.doc-editor { min-height: 300px; max-height: 55vh; overflow-y: auto; padding: 1rem; background: #fff; color: #111; border: 1px solid var(--borde); border-radius: 8px; }
.doc-editor h1, .doc-editor h2 { color: #111; text-transform: none; letter-spacing: 0; font-size: 1.4rem; }
.hoja-cont { overflow: auto; max-height: 55vh; border: 1px solid var(--borde); border-radius: 8px; }
table.hoja { border-collapse: collapse; width: max-content; min-width: 100%; background: var(--bg); }
.hoja th, .hoja td { border: 1px solid var(--borde); padding: 0; }
.hoja th { background: var(--panel2); color: var(--suave); font-weight: 500; font-size: .75rem; padding: .2rem .4rem; position: sticky; top: 0; }
.hoja input.celda { width: 6.5rem; border: 0; border-radius: 0; padding: .3rem .4rem; background: transparent; font-family: var(--mono); font-size: .85rem; }
.hoja input.celda.err { color: var(--error); }
.alarma-item { display: flex; gap: .6rem; align-items: center; justify-content: space-between; padding: .5rem .6rem; border: 1px solid var(--borde); border-radius: 8px; margin: .35rem 0; background: var(--bg); }
.alarma-item.hecha { opacity: .5; }
.codigo { font-family: var(--mono); font-size: .75rem; word-break: break-all; min-height: 7rem; }
.cron { font-family: var(--mono); font-size: 2.6rem; text-align: center; margin: .4rem 0; color: var(--acento); }
.paso { border-left: 3px solid var(--acento); padding-left: .7rem; margin: .8rem 0; }
.num-seguridad { font-family: var(--mono); font-size: 1.1rem; text-align: center; padding: .8rem; background: var(--bg); border: 1px dashed var(--acento); border-radius: 8px; word-spacing: .4rem; }
.avatar-previo { display: block; margin: 0 auto .6rem; width: 160px; height: 160px; background: var(--bg); border: 1px solid var(--borde); border-radius: 12px; }

/* ---- modo discreto: difumina contenido hasta pasar el cursor/foco ---- */
body.discreto .mensajes, body.discreto .grilla-contactos, body.discreto .perfil canvas, body.discreto #radar { filter: blur(7px); transition: filter .15s; }
body.discreto .mensajes:hover, body.discreto .mensajes:focus-within, body.discreto .grilla-contactos:hover,
body.discreto .grilla-contactos:focus-within, body.discreto #radar:hover { filter: none; }

/* ---- adaptable / responsive ---- */
@media (max-width: 920px) {
  .rejilla { grid-template-columns: 1fr; }
  .nav-movil { display: flex; gap: .3rem; margin-bottom: .6rem; position: sticky; top: 0; z-index: 50; background: var(--bg); padding: .3rem 0; }
  .nav-b { flex: 1; }
  .nav-b.activa { background: var(--acento); color: #04201b; border-color: var(--acento); font-weight: 600; }
  .col:not(.visible) { display: none; }
  .dos-paneles { grid-template-columns: 1fr; }
  .perfil-alias { max-width: 8ch; }
  .acciones { margin-left: 0; }
}
@media (min-width: 921px) { .col { display: flex !important; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media print { body * { visibility: hidden; } .doc-editor, .doc-editor * { visibility: visible; } .doc-editor { position: absolute; inset: 0; max-height: none; } }

.lista-acuerdos { padding-left: 1.2rem; }
.paz-msgs { min-height: 160px; height: 240px; }

:root[data-tema="claro"] #radar { background: radial-gradient(circle at 50% 50%, #d9f0ea 0%, var(--bg) 75%); }

/* ---- bienvenida y recursos ---- */
.acuerdos h3 { margin-top: 0; font-size: 1.05rem; color: var(--acento); }
.acuerdos-nav { margin-top: 1rem; justify-content: flex-end; align-items: center; }
.acuerdo-fila { display: flex; gap: .6rem; align-items: center; margin: .45rem 0; }
.acuerdo-fila .check { margin: 0; }
.doc-lectura { max-height: 60vh; overflow-y: auto; }
.recursos-cuerpo { max-height: 60vh; overflow-y: auto; padding-top: .4rem; }

/* ---- contactos, adjuntos y archivos ---- */
.solicitudes { list-style: none; margin: 0 0 .5rem; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.solicitud { border: 1px solid var(--aviso); border-radius: 10px; padding: .5rem .6rem; display: flex; flex-direction: column; gap: .4rem; }
.solicitud .nombre { font-weight: 600; }
.contacto .mas { position: absolute; top: 2px; right: 2px; width: 24px; height: 24px; padding: 0; background: transparent; border: none; font-size: 1rem; line-height: 1; color: var(--suave); }
.contacto .mas:hover, .contacto .mas:focus-visible { color: var(--acento); }
.oculto-contacto { opacity: .65; }
.mini-avatar { border-radius: 50%; flex: none; }
.contacto-fila, .archivo-fila { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .45rem 0; border-bottom: 1px solid var(--borde); }
.contacto-datos, .archivo-datos { flex: 1; min-width: 140px; display: flex; flex-direction: column; }
.gestor-cuerpo, .archivos-lista { display: flex; flex-direction: column; }
.archivos-lista { max-height: 360px; overflow-y: auto; }
.pestanas button[data-tab] { font-size: .85rem; }
.foto-sala { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; float: left; margin-right: .4rem; }
.foto-previa { width: 144px; height: 144px; border-radius: 50%; object-fit: cover; display: block; margin: .5rem auto; border: 2px solid var(--acento); }
.adjunto { display: flex; flex-direction: column; gap: .35rem; }
.adjunto-img, .adjunto-video, .vista-previa { max-width: 100%; max-height: 260px; border-radius: 8px; object-fit: contain; }
.vista-previa { max-height: 60vh; display: block; margin: 0 auto; }
.adjunto-img.borrosa { filter: blur(18px); }
.vista-texto { max-height: 50vh; overflow: auto; white-space: pre-wrap; background: var(--bg); padding: .6rem; border-radius: 8px; }
.menu-adjuntar { display: flex; flex-direction: column; gap: .5rem; }
.lienzo-edit { max-width: 100%; display: block; margin: .5rem auto; border-radius: 8px; }
.barra-herr { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
@media (max-width: 640px) { .dos-paneles { grid-template-columns: 1fr; } }


/* ================= Vidrio estilo macOS (ajustable) / macOS-style glass (adjustable) ================= */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body { letter-spacing: -.005em; background-attachment: fixed; background-size: cover; }
html[data-fondo="aurora"] body { background-image: radial-gradient(60% 50% at 15% 10%, #1b6f65 0%, transparent 70%), radial-gradient(55% 55% at 90% 15%, #3b3f9e 0%, transparent 70%), radial-gradient(70% 60% at 60% 100%, #7a2f6b 0%, transparent 70%); }
html[data-fondo="oceano"] body { background-image: radial-gradient(70% 60% at 20% 0%, #0f5c8c 0%, transparent 70%), radial-gradient(60% 60% at 100% 80%, #0c8a8a 0%, transparent 70%); }
html[data-fondo="atardecer"] body { background-image: radial-gradient(70% 55% at 10% 0%, #b4472f 0%, transparent 70%), radial-gradient(60% 60% at 95% 40%, #8a3a8f 0%, transparent 70%), radial-gradient(60% 50% at 50% 100%, #c28a22 0%, transparent 70%); }
html[data-fondo="grafito"] body { background-image: radial-gradient(70% 60% at 30% 0%, #3a3f47 0%, transparent 70%), radial-gradient(60% 60% at 100% 100%, #2a2d33 0%, transparent 70%); }
:root[data-tema="claro"][data-fondo] body { background-blend-mode: soft-light; }

.tarjeta, .auth-tarjeta, .modal {
  background: rgba(var(--panel-rgb), var(--vidrio-op));
  -webkit-backdrop-filter: blur(var(--vidrio-blur)) saturate(1.6);
  backdrop-filter: blur(var(--vidrio-blur)) saturate(1.6);
  border: 1px solid var(--linea);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 12px 36px rgba(0, 0, 0, .32);
}
.barra .perfil, .barra .buscar input, .barra .acciones button {
  background: rgba(var(--panel-rgb), var(--vidrio-op));
  -webkit-backdrop-filter: blur(var(--vidrio-blur)) saturate(1.6);
  backdrop-filter: blur(var(--vidrio-blur)) saturate(1.6);
  border: 1px solid var(--linea);
}
.fondo-modal { background: rgba(0, 0, 0, .35); -webkit-backdrop-filter: blur(calc(var(--vidrio-blur) / 3)); backdrop-filter: blur(calc(var(--vidrio-blur) / 3)); }
.modal-cab, .modal-pie { border-color: var(--linea); }
input:not([type=checkbox]):not([type=range]):not([type=file]), select, textarea { background: rgba(var(--bg-rgb), .55); border-color: var(--linea); border-radius: 10px; }
button { background: rgba(var(--panel2-rgb), .75); border-color: var(--linea); border-radius: 10px; font-weight: 500; transition: border-color .12s, transform .06s; }
button:active:not(:disabled) { transform: scale(.98); }
button.primario { background: var(--acento); border-color: var(--acento); }
.mensajes, #radar { border-color: var(--linea); }
.msg { border-radius: 14px; }
html[data-vidrio="off"] .tarjeta, html[data-vidrio="off"] .auth-tarjeta, html[data-vidrio="off"] .modal { box-shadow: var(--sombra); }
@media (prefers-reduced-transparency: reduce) { :root { --vidrio-blur: 0px !important; --vidrio-op: 1 !important; } }

/* ---- editor de avatar ---- */
.avatar-previo { width: 120px; height: 120px; border-radius: 50%; display: block; margin: .4rem auto; background: rgba(var(--bg-rgb), .5); border: 1px solid var(--linea); }
.editor-avatar { display: grid; grid-template-columns: 150px 1fr; gap: 1rem; align-items: start; }
.avatar-matriz { width: 100%; max-width: 312px; height: auto; aspect-ratio: 1; border-radius: 10px; border: 1px solid var(--linea); cursor: crosshair; touch-action: none; display: block; }
.paleta-nivel { display: flex; gap: .25rem; flex-wrap: wrap; margin: .5rem 0; }
.paleta-nivel .nivel { min-width: 2rem; padding: .25rem 0; }
.paleta-nivel .nivel.activa { border-color: var(--acento); color: var(--acento); }
.galeria-avatar { display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: .4rem; margin: .4rem 0 .8rem; }
.preset { padding: 2px; border-radius: 50%; line-height: 0; }
.preset canvas { width: 100%; height: auto; border-radius: 50%; }
@media (max-width: 640px) { .editor-avatar { grid-template-columns: 1fr; } }
.rasgos-avatar { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .5rem .9rem; }
.rasgo { display: grid; gap: .2rem; font-size: .85rem; }
.muestras { display: flex; flex-wrap: wrap; gap: .3rem; }
.muestra { width: 1.6rem; height: 1.6rem; min-width: 0; padding: 0; border-radius: 50%; background: var(--muestra, transparent); border: 2px solid var(--borde); }
.muestra.activa { outline: 2px solid var(--acento); outline-offset: 2px; }
.muestra-natural { background: linear-gradient(135deg, #f1c9a5 0 50%, #6e3b1e 50% 100%); }

/* ---- busqueda: asistente y guiada ---- */
.buscar > .icono { flex: none; }
.chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: .4rem 0; }
.chip { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .65rem; border-radius: 999px; border: 1px solid var(--borde); background: var(--panel2); cursor: pointer; font-size: .85rem; }
.chip.activa { border-color: var(--acento); background: rgba(78, 201, 176, .16); }
#filtroActivo { margin: 0 0 .5rem; cursor: default; justify-content: space-between; }
.animos-grandes { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0; }
.animo-g { font-size: 1.6rem; padding: .3rem .6rem; border-radius: 12px; background: var(--panel2); border: 1px solid var(--borde); }
.animo-g.activa, .op.activa { border-color: var(--acento); background: rgba(78, 201, 176, .16); }
.busq h3 { margin-top: .2rem; }
.busq-nav { justify-content: space-between; margin-top: .8rem; }
.asis-log { max-height: 46vh; overflow-y: auto; display: flex; flex-direction: column; gap: .5rem; padding: .3rem; margin: .5rem 0; }
.asis-msg { max-width: 88%; padding: .5rem .75rem; border-radius: 12px; border: 1px solid var(--borde); white-space: pre-wrap; }
.asis-msg.yo { align-self: flex-end; background: rgba(78, 201, 176, .16); }
.asis-msg.bot { align-self: flex-start; background: var(--panel2); }
.asis-extra { margin-top: .4rem; flex-wrap: wrap; }
.asis-form { display: flex; gap: .4rem; }
/* ---- teclado en pantalla ---- */
.teclado-panel { border-top: 1px solid var(--borde); padding: .5rem; display: flex; flex-direction: column; gap: .3rem; }
.tec-cab { display: flex; gap: .4rem; align-items: center; }
.tec-fila { display: flex; gap: .25rem; justify-content: center; }
.tec { min-width: 2rem; padding: .5rem .35rem; border-radius: 7px; background: var(--panel2); border: 1px solid var(--borde); flex: 1 1 0; max-width: 3.2rem; touch-action: manipulation; }
.tec.ancha { max-width: 5rem; flex: 1.6 1 0; }
.tec.espacio { max-width: none; flex: 5 1 0; }
.tec.activa { background: var(--acento); color: #000; }
.tec-nota { margin: 0; }
/* ---- personalizar ---- */
.pers-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.pers-fila { display: flex; align-items: center; gap: .4rem; padding: .3rem .5rem; border: 1px solid var(--borde); border-radius: 8px; background: var(--panel2); }
.pers-nombre { flex: 1; }
.pers-ver { white-space: nowrap; font-size: .85rem; }
/* ---- clima ---- */
.clima-cuerpo { margin-bottom: .5rem; font-size: .9rem; }
.clima-lugar { font-weight: 600; margin: 0 0 .3rem; }
.clima-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.clima-lista li { padding: .3rem .5rem; border-radius: 8px; background: var(--panel2); }
/* ---- humano / despedida ---- */
.hum-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .3rem; margin: .5rem 0; font-size: 1.8rem; text-align: center; user-select: none; }
.hum-celda { padding: .3rem; border-radius: 8px; background: var(--panel2); }
.hum-preg { font-weight: 600; }
.despedida { text-align: center; padding: 3rem 1rem; }

/* ---- esquina: Google / Spotify ---- */
.dock-ext { position: fixed; right: 12px; bottom: 12px; z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: .4rem; max-width: min(340px, calc(100vw - 24px)); }
.enl-botones { display: flex; gap: .4rem; }
.enl-botones .icono { width: 2.6rem; height: 2.6rem; border-radius: 50%; background: rgba(var(--panel-rgb), var(--vidrio-op)); -webkit-backdrop-filter: blur(var(--vidrio-blur)); backdrop-filter: blur(var(--vidrio-blur)); border: 1px solid var(--linea); box-shadow: var(--sombra); font-weight: 700; }
.enl-botones .icono[aria-pressed="true"] { border-color: var(--acento); }
.enl-panel { width: 100%; padding: .7rem; border-radius: var(--radio); border: 1px solid var(--linea); background: rgba(var(--panel-rgb), var(--vidrio-op)); -webkit-backdrop-filter: blur(var(--vidrio-blur)); backdrop-filter: blur(var(--vidrio-blur)); box-shadow: var(--sombra); }
.enl-aviso { margin: 0 0 .5rem; padding: .35rem .5rem; border-radius: 8px; border: 1px solid var(--aviso); font-size: .82rem; }
.enl-player { position: relative; }
.enl-player iframe { border: 0; border-radius: 12px; max-width: 100%; }
.enl-player .icono { position: absolute; top: -.5rem; right: -.5rem; background: var(--panel); border-radius: 50%; width: 1.6rem; height: 1.6rem; padding: 0; }
@media (max-width: 760px) { .dock-ext { bottom: 64px; } }

/* ---- fondo propio ---- */
html[data-fondo="color"] body { background-image: linear-gradient(var(--fondo-ang, 135deg), var(--fondo-c1, #1b6f65), var(--fondo-c2, #7a2f6b)); }
html[data-fondo="imagen"] body { background-image: var(--fondo-img); background-size: cover; background-position: center; }

/* ---- login: escena ilustrada (original, local) ---- */
.auth { position: relative; overflow: hidden; background: #0b1030 url("../img/login-fondo.webp") center / cover no-repeat; }
.auth::before { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse at center, rgba(8, 10, 30, .55), rgba(8, 10, 30, .15) 70%); pointer-events: none; }
.auth-tarjeta { position: relative; z-index: 2; background: rgba(var(--panel-rgb), .82); -webkit-backdrop-filter: blur(var(--vidrio-blur)) saturate(1.2); backdrop-filter: blur(var(--vidrio-blur)) saturate(1.2); }
@media (max-width: 640px) { .auth { place-items: start center; } }

/* ---- claves y nota de acceso ---- */
.clave-tools { display: grid; gap: .4rem; margin: .3rem 0 .6rem; }
.clave-tools .fila select { flex: 1 1 9rem; }
.clave-largo { width: 4.5rem !important; flex: 0 0 auto; }
.clave-fuerza { margin: 0; font-size: .85rem; min-height: 1.2em; }
.clave-fuerza[data-nivel="debil"] { color: var(--error); }
.clave-fuerza[data-nivel="media"] { color: var(--aviso); }
.clave-fuerza[data-nivel="fuerte"] { color: var(--ok); }
.codigo-rescate { font-family: var(--mono); font-size: 1.15rem; letter-spacing: .08em; padding: .5rem .7rem; border: 1px dashed var(--acento); border-radius: 8px; user-select: all; word-break: break-all; }
label.check input[type=radio] { width: 1.1rem !important; padding: 0 !important; margin-top: .25rem; flex: none; }

/* ---- Visitas (contador público estilo bolsa) ---- */
.dock-vis { position: fixed; right: 12px; bottom: 12px; z-index: 55; display: flex; flex-direction: column-reverse; align-items: flex-end; gap: .4rem; max-width: min(340px, calc(100vw - 24px)); }
@media (max-width: 760px) { .dock-vis { bottom: 64px; } }
.vis-icono { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .7rem; border-radius: 999px; border: 1px solid var(--borde, rgba(255,255,255,.18)); background: rgba(20,22,30,.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--texto); cursor: pointer; font: 600 .85rem/1 system-ui, sans-serif; }
.vis-icono .vis-n { font-variant-numeric: tabular-nums; }
.vis-icono[data-tend="sube"] .vis-n { color: #3ddc97; }
.vis-icono[data-tend="baja"] .vis-n { color: #ff6b6b; }
.vis-panel { width: min(320px, calc(100vw - 24px)); padding: .8rem; border-radius: 14px; border: 1px solid rgba(255,255,255,.16); background: rgba(14,16,24,.86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: var(--texto); box-shadow: 0 10px 30px rgba(0,0,0,.45); }
.vis-cab { display: flex; justify-content: space-between; align-items: flex-start; }
.vis-simbolo { font: 700 .8rem/1 ui-monospace, monospace; letter-spacing: .08em; color: #8fd3ff; }
.vis-origen { display: block; opacity: .7; margin-top: .2rem; }
.vis-cerrar { background: none; border: 0; color: inherit; font-size: 1.3rem; cursor: pointer; line-height: 1; }
.vis-precio { display: flex; align-items: baseline; gap: .6rem; margin: .5rem 0; flex-wrap: wrap; }
.vis-grande { font: 700 2rem/1 ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.vis-cambio { font: 600 .85rem/1 ui-monospace, monospace; }
.vis-precio[data-tend="sube"] { color: #3ddc97; }
.vis-precio[data-tend="baja"] { color: #ff6b6b; }
.vis-precio[data-tend="igual"] { color: #b6bccb; }
.vis-tabs { display: flex; gap: .25rem; margin: .4rem 0; }
.vis-tab { flex: 1; padding: .3rem 0; border-radius: 8px; border: 1px solid rgba(255,255,255,.14); background: transparent; color: inherit; cursor: pointer; font-size: .78rem; }
.vis-tab[aria-selected="true"] { background: rgba(143,211,255,.2); border-color: #8fd3ff; }
.vis-anio { display: flex; justify-content: center; align-items: center; gap: .8rem; margin: .2rem 0; }
.vis-anio button { background: none; border: 0; color: inherit; cursor: pointer; }
.vis-anio button:disabled { opacity: .3; cursor: default; }
.vis-grafico { width: 100%; height: 90px; display: block; margin-top: .3rem; background: rgba(255,255,255,.03); border-radius: 8px; }
.vis-grafico .vis-linea { stroke: #3ddc97; stroke-width: 2; vector-effect: non-scaling-stroke; }
.vis-grafico .vis-area { fill: rgba(61,220,151,.15); }
.vis-grafico .vis-punto { fill: #3ddc97; }
.vis-grafico[data-tend="baja"] .vis-linea { stroke: #ff6b6b; }
.vis-grafico[data-tend="baja"] .vis-area { fill: rgba(255,107,107,.15); }
.vis-grafico[data-tend="baja"] .vis-punto { fill: #ff6b6b; }
.vis-grafico[data-tend="igual"] .vis-linea { stroke: #b6bccb; }
.vis-grafico[data-tend="igual"] .vis-area { fill: rgba(182,188,203,.12); }
.vis-grafico[data-tend="igual"] .vis-punto { fill: #b6bccb; }
.vis-rango { display: flex; justify-content: space-between; font: .65rem ui-monospace, monospace; opacity: .6; margin-bottom: .4rem; }
.vis-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: .4rem; }
.vis-celda { display: flex; flex-direction: column; gap: .15rem; padding: .35rem .45rem; border-radius: 8px; background: rgba(255,255,255,.05); }
.vis-etq { font-size: .65rem; opacity: .7; text-transform: uppercase; letter-spacing: .04em; }
.vis-val { font: 700 .95rem/1 ui-monospace, monospace; }
.vis-contar { margin-top: .6rem; font-size: .75rem; }
.vis-nota { margin: .4rem 0 0; font-size: .68rem; opacity: .65; line-height: 1.35; }

/* ---- Ventanas: botones redondos arriba a la derecha, estilo Debian, tonos suaves ---- */
.ventana-ctl { display: flex; gap: .4rem; align-items: center; flex: none; margin-left: auto; }
.vc { width: 20px; height: 20px; min-height: 0; padding: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.12); font: 600 13px/1 system-ui, sans-serif; color: rgba(255,255,255,.88); cursor: pointer; display: inline-grid; place-items: center; background: rgba(255,255,255,.10); transition: background .15s; }
.vc-min { background: #6e6a4f; } .vc-max { background: #4d6b58; } .vc-cerrar { background: #7a4f4c; }
.vc:hover { filter: brightness(1.25); }
.vc:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.modal-cab { justify-content: space-between; }
.modal.ampliada { width: 100%; max-height: calc(100vh - 1.2rem); height: calc(100vh - 1.2rem); }
.modal.ampliada .modal-cuerpo { flex: 1; }
.fondo-modal[hidden] { display: none; }
.bandeja-ventanas { position: fixed; left: 50%; transform: translateX(-50%); bottom: 10px; z-index: 1100; display: flex; gap: .4rem; max-width: calc(100vw - 24px); overflow-x: auto; }
.chip-ventana { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: 999px; padding: .3rem .8rem; font-size: .8rem; }
@media (max-width: 760px) { .bandeja-ventanas { bottom: 62px; } .modal { max-height: calc(100dvh - 1.2rem); } }

/* ---- Entrada: táctil/lápiz = objetivos grandes; teclado = foco visible ---- */
html[data-entrada="tactil"] button, html[data-entrada="tactil"] select, html[data-entrada="tactil"] input:not([type=checkbox]):not([type=radio]):not([type=range]) { min-height: 44px; }
html[data-entrada="tactil"] .vc, html[data-entrada="lapiz"] .vc { width: 26px; height: 26px; }
html[data-entrada="lapiz"] button { min-height: 40px; }
html[data-entrada="tactil"] .vc { min-height: 0; }
html:not([data-teclado-uso]) :focus:not(:focus-visible) { outline: none; }
html[data-teclado-uso] :focus { outline: 2px solid var(--acento); outline-offset: 2px; }
.ent-lista { list-style: none; padding: 0; margin: .4rem 0; font-size: .85rem; }

/* ---- Aviso de contenido en el login ---- */
.aviso-login { margin: .8rem 0 .2rem; padding: .6rem .75rem; border-radius: 10px; border: 1px solid rgba(255,200,80,.35); background: rgba(255,200,80,.08); font-size: .74rem; line-height: 1.4; color: var(--texto); }
.aviso-login strong { display: block; margin-bottom: .2rem; color: #ffd27a; text-transform: uppercase; letter-spacing: .04em; font-size: .7rem; }
.aviso-login p { margin: 0 0 .3rem; }
/* ---- Frase de recuperación ---- */
.frase-rejilla { list-style: none; counter-reset: fr; display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; padding: 0; margin: .6rem 0; }
.frase-rejilla li { counter-increment: fr; display: flex; gap: .45rem; align-items: baseline; padding: .4rem .6rem; border-radius: 8px; background: rgba(255,255,255,.06); border: 1px solid var(--borde); }
.frase-rejilla li::before { content: counter(fr); font: 600 .7rem ui-monospace, monospace; opacity: .55; min-width: 1.2rem; }
.frase-w { font: 700 1.05rem ui-monospace, monospace; letter-spacing: .04em; user-select: all; }
.frase-confirma { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
@media (max-width: 520px) { .frase-rejilla, .frase-confirma { grid-template-columns: repeat(2, 1fr); } }

/* ---- Cuidado en el chat: ligero, sin interrumpir ---- */
.aviso-chat { margin: .4rem 0; padding: .45rem .65rem; border-radius: 10px; border: 1px solid rgba(120,200,255,.28); background: rgba(120,200,255,.07); font-size: .78rem; line-height: 1.35; animation: cuid-entra .25s ease-out; }
.aviso-chat[hidden] { display: none; }
.cuid-fila { display: flex; align-items: center; gap: .55rem; }
.cuid-icono { font-size: 1rem; flex: none; }
.cuid-texto { flex: 1; min-width: 0; }
.cuid-texto strong { color: #9fd8ff; }
.cuid-mas { flex: none; font-size: .74rem; }
.cuid-ok { flex: none; width: 1.6rem; min-height: 0; height: 1.6rem; padding: 0; font-size: .75rem; opacity: .7; }
.cuid-lista { margin: .45rem 0 .1rem 1.5rem; padding: 0; display: grid; gap: .3rem; font-size: .74rem; opacity: .92; }
.envio-aviso { margin: .25rem .2rem 0; font-size: .7rem; line-height: 1.3; color: var(--texto); opacity: 0; max-height: 0; overflow: hidden; transition: opacity .25s ease, max-height .25s ease; }
.envio-aviso.visible { opacity: .6; max-height: 3em; }
@keyframes cuid-entra { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .aviso-chat { animation: none; } .envio-aviso { transition: none; } }

/* ---- Fondo negro por defecto (solo el login lleva la foto) ---- */
html[data-fondo="negro"] body { background-image: none; background-color: #000; }
:root[data-tema="claro"][data-fondo="negro"] body { background-color: var(--fondo, #f4f6f8); }

/* ---- Barra de Menú Global ---- */
.menu-global { position: sticky; top: 0; z-index: 70; margin: -.6rem -.6rem .5rem; padding: 0 .6rem; background: rgba(10,12,16,.82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--borde); }
.mg-barra { display: flex; align-items: center; gap: .1rem; min-height: 34px; overflow-x: auto; scrollbar-width: none; }
.mg-marca { font-size: .82rem; padding: 0 .7rem 0 .2rem; white-space: nowrap; color: var(--texto); }
.mg-app { opacity: .8; font-weight: 500; }
.mg-titulo, .mg-gear { background: none; border: 0; border-radius: 6px; padding: .25rem .65rem; font-size: .82rem; color: var(--texto); cursor: pointer; min-height: 0; white-space: nowrap; }
.mg-titulo:hover, .mg-titulo[aria-expanded="true"], .mg-gear:hover { background: rgba(255,255,255,.1); }
.mg-titulo:focus-visible, .mg-gear:focus-visible, .mg-item:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }
.mg-espacio { flex: 1; }
.mg-gear { font-size: 1.45rem; line-height: 1; padding: .1rem .5rem; opacity: .95; } /* ES: más grande y visible | EN: bigger, easier to see */
.mg-menu { position: absolute; top: 36px; z-index: 80; min-width: 230px; max-height: calc(100dvh - 48px); overflow-y: auto; max-width: calc(100vw - 8px); padding: .3rem; border-radius: 10px; background: rgba(18,20,26,.96); border: 1px solid var(--borde); box-shadow: 0 12px 32px rgba(0,0,0,.5); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.mg-item { display: flex; align-items: center; gap: .5rem; width: 100%; text-align: left; background: none; border: 0; border-radius: 6px; padding: .4rem .6rem; font-size: .84rem; color: var(--texto); cursor: pointer; min-height: 0; }
.mg-item:hover:not(:disabled), .mg-item:focus:not(:disabled) { background: rgba(255,255,255,.1); }
.mg-item:disabled { opacity: .4; cursor: default; }
.mg-chk { width: 1rem; flex: none; color: var(--acento); font-weight: 700; }
.mg-sep { height: 1px; margin: .25rem .3rem; background: var(--borde); }
:root[data-tema="claro"] .menu-global { background: rgba(255,255,255,.85); }
:root[data-tema="claro"] .mg-menu { background: rgba(255,255,255,.97); }
@media (max-width: 760px) { .mg-marca { display: none; } }

/* ---- Centro de Configuración ---- */
.cfg-nota { margin: 0 0 .8rem; font-size: .85rem; opacity: .85; }
.cfg-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .6rem; }
.cfg-tarjeta { display: grid; grid-template-columns: 2rem 1fr; grid-template-areas: "i t" "i d"; gap: .1rem .6rem; text-align: left; padding: .7rem; border-radius: 12px; align-items: center; }
.cfg-ico { grid-area: i; font-size: 1.5rem; }
.cfg-tit { grid-area: t; font-weight: 600; }
.cfg-desc { grid-area: d; font-size: .74rem; opacity: .7; }
/* ---- Preguntas de seguridad ---- */
.aviso-debil { margin: .4rem 0; padding: .5rem .7rem; border-radius: 10px; border: 1px solid rgba(255,160,80,.4); background: rgba(255,160,80,.08); font-size: .8rem; }
.pre-fila { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: .5rem 0; }
@media (max-width: 600px) { .pre-fila { grid-template-columns: 1fr; } }
.pre-sel { width: 100%; margin-bottom: .3rem; }
#btnUsarPreguntas { margin: .4rem 0; }

/* ---- Barra de chat ampliada ---- */
.envio { align-items: center; position: relative; flex-wrap: nowrap; }
.envio #btnTeclado, .envio #btnCompartirMsg { opacity: .75; }
.envio .grab-barra { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; background: var(--panel, #14161a); border-radius: 12px; padding: 0 .4rem; }
.envio.grabando > *:not(.grab-barra):not(#btnMic) { visibility: hidden; }
.envio.grab-fija > #btnMic { visibility: hidden; }
.grab-fila { display: flex; align-items: center; gap: .6rem; width: 100%; }
.grab-fila .grab-t { font-variant-numeric: tabular-nums; min-width: 3.2em; }
.grab-fila .grab-guia { flex: 1; font-size: .78rem; opacity: .7; text-align: left; }
.grab-fila #btnGrabPausa { margin-left: auto; }
.grab-punto { color: #c0504d; animation: grabPulso 1s ease-in-out infinite; }
@keyframes grabPulso { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .grab-punto { animation: none; } }
#btnMic { touch-action: none; user-select: none; -webkit-user-select: none; }
.emoji-panel .emoji-tabs { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: .5rem; }
.emoji-tab { padding: .25rem .6rem; font-size: .8rem; min-height: 0; }
.emoji-tab[aria-selected="true"] { border-color: var(--acento); }
.emoji-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(2.4rem, 1fr)); gap: .2rem; }
.emoji-b { font-size: 1.4rem; padding: .2rem; min-height: 0; background: none; border: 0; border-radius: 8px; cursor: pointer; }
.emoji-b:hover, .emoji-b:focus-visible { background: rgba(255,255,255,.12); }
.cam-video { width: 100%; max-height: 55vh; border-radius: 12px; background: #000; }
.vp-medio { display: grid; place-items: center; margin-bottom: .5rem; }
.vp-medio img, .vp-medio video { max-width: 100%; max-height: 50vh; border-radius: 10px; }
.vp-leyenda { width: 100%; margin: .3rem 0 .5rem; }
.adjunto-audio { width: 100%; max-width: 260px; }
.perm-fila { align-items: flex-start; margin: .5rem 0; }
.enc-op { width: 100%; margin: .15rem 0; }
@media (max-width: 520px) { .envio #btnTeclado, .envio #btnCompartirMsg { display: none; } }
.envio .grab-barra[hidden] { display: none; }
.ins-pasos { padding: .6rem .8rem; border-radius: 10px; background: rgba(255,255,255,.06); }
.vis-enlinea { display: block; color: var(--acento); font-size: .7rem; }

/* ---- Conexión humana ---- */
.cx-guia { display: flex; gap: .7rem; align-items: flex-start; margin: .5rem 0 .8rem; }
.cx-avatar { font-size: 1.8rem; flex: none; }
.cx-burbuja { padding: .6rem .8rem; border-radius: 14px 14px 14px 4px; background: rgba(78,201,176,.12); border: 1px solid var(--acento); }
.cx-emojis { font-size: 1.4rem; margin-top: .3rem; }
.cx-fila { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0; }
.cx-emoji { font-size: 1.6rem; min-width: 3rem; min-height: 3rem; padding: 0; border-radius: 50%; }
.cx-emoji.activa, .cx-chip.activa, .cfg-tarjeta.activa { border-color: var(--acento); background: rgba(78,201,176,.18); }
.cx-opciones { display: grid; gap: .5rem; }
.cx-opcion { text-align: left; padding: .7rem .9rem; border-radius: 12px; }
.cx-codigo { font-size: 1.6rem; letter-spacing: .25em; margin: .6rem 0; font-variant-numeric: tabular-nums; }
.cx-codigo small { font-size: .8rem; letter-spacing: 0; opacity: .7; }
.afin { color: var(--acento); font-weight: 700; }
/* publicidad pasiva: discreta, abajo a la izquierda, sin tapar controles */
.publicidad { position: fixed; left: .75rem; bottom: .75rem; z-index: 1500; max-width: min(320px, calc(100% - 1.5rem)); display: flex; flex-direction: column; gap: .25rem; background: var(--panel2); border: 1px solid var(--borde, #444); border-radius: 12px; padding: .6rem .75rem; box-shadow: var(--sombra); font-size: .9rem; }
.publicidad .pub-tag { opacity: .65; }
.publicidad .fila { display: flex; gap: .4rem; align-items: center; }
.publicidad .pub-x { margin-left: auto; }

/* Mapa con ubicación exacta (opcional) */
.mapa-lienzo { width: 100%; max-width: 520px; height: auto; display: block; margin: .5rem auto; background: var(--panel); border: 1px solid var(--borde); border-radius: 12px; touch-action: manipulation; }
.aviso-mapa { border: 1px solid var(--aviso); border-radius: 10px; padding: .6rem .8rem; }
.mapa-lista { list-style: none; margin: .5rem 0; padding: 0; display: grid; gap: .35rem; }
.mapa-fila { width: 100%; text-align: left; }
.mapa-lista li.activa .mapa-fila { border-color: var(--acento); }
.mapa-acciones { flex-wrap: wrap; }

/* Filtro local de mensajes */
.ft-oculto { display: inline-flex; flex-wrap: wrap; gap: .4rem; align-items: center; opacity: .85; font-style: italic; }
.ft-etiqueta, .ft-apoyo { color: var(--aviso); font-size: .85em; }
.ft-ajustes { border-top: 1px solid var(--borde); padding-top: .6rem; margin-top: .6rem; }

/* ---- autotexto (sugerencias estilo iOS) y traducción ---- */
.auto-barra { display: flex; gap: .25rem; padding: .2rem .5rem; border-top: 1px solid var(--borde, #444); background: var(--panel, transparent); overflow-x: auto; }
.auto-barra[hidden] { display: none; }
.auto-sug { flex: 1 1 0; min-width: 4rem; border-radius: .5rem; padding: .25rem .5rem; font-size: .95rem; }
.auto-lista { list-style: none; padding: 0; margin: .25rem 0; }
.auto-lista li { display: flex; gap: .4rem; align-items: center; padding: .15rem 0; }
.trad-btn { font-size: .78rem; padding: .05rem .4rem; margin-left: .35rem; border-radius: .4rem; opacity: .85; }
.trad-caja { display: block; margin-top: .25rem; padding: .25rem .4rem; border-left: 3px solid var(--acento, #4aa3ff); }
.trad-sello { font-size: .72rem; opacity: .7; }
.trad-resultado { white-space: pre-wrap; word-break: break-word; max-height: 50vh; overflow: auto; }
[dir="rtl"] .trad-caja { border-left: 0; border-right: 3px solid var(--acento, #4aa3ff); }

/* ---- Mercado y bloqueo Premium ---- */
.bloqueo { position: relative; min-height: 14rem; overflow: hidden; border: 1px dashed var(--borde, #555); border-radius: .6rem; }
.bloqueo-base { opacity: .35; padding: 2rem; filter: blur(1.5px); }
.bloqueo-nombre { font-size: 1.6rem; font-weight: 700; }
.marca-agua { position: absolute; inset: 0; display: flex; flex-wrap: wrap; align-content: space-around; justify-content: space-around; gap: 1.2rem; pointer-events: auto; user-select: none; overflow: hidden; z-index: 2; }
.marca-agua span { transform: rotate(-24deg); font-weight: 800; letter-spacing: .08em; font-size: 1.05rem; opacity: .22; white-space: nowrap; color: var(--texto, #ddd); }
.bloqueo-acciones { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; text-align: center; padding: .8rem; background: linear-gradient(transparent, rgba(0,0,0,.55)); }
.producto .precio { font-weight: 700; }

/* ---- Modelador 3D ---- */
.m3d-cuerpo { display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-start; }
.canvas3d { max-width: 100%; height: auto; touch-action: none; border-radius: .5rem; border: 1px solid var(--borde, #444); background: #222; cursor: grab; }
.panel3d { flex: 1 1 14rem; min-width: 12rem; }
.m3d-fila { display: flex; gap: .4rem; align-items: center; justify-content: space-between; font-size: .85rem; }
.m3d-fila input[type=range] { flex: 1; }
.barra3d { flex-wrap: wrap; }

/* resaltador guiado del asistente */
.guia-resalta { outline: 3px solid var(--acento, #f5a524); outline-offset: 3px; border-radius: 6px; animation: guia-pulso 1.2s ease-in-out 4; }
@keyframes guia-pulso { 50% { outline-color: transparent; } }
@media (prefers-reduced-motion: reduce) { .guia-resalta { animation: none; } }

/* tipos de cuenta: 3 barras en el acceso */
.tipos-cuenta { display: grid; gap: .4rem; margin-block: .6rem; }
.tipos-barra { display: grid; gap: .25rem; padding: .35rem; border: 1px solid var(--borde, #444); border-radius: 10px; }
.tipos-rotulo { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; opacity: .75; }
.tipos-opciones { display: flex; flex-wrap: wrap; gap: .3rem; }
.tipo-chip { flex: 1 1 auto; min-width: 0; padding: .4rem .6rem; font-size: .85rem; border-radius: 999px; }
.tipo-chip.activa { background: var(--acento, #4ec9b0); color: #04201a; font-weight: 600; }
.panel-trabajo { display: grid; gap: .5rem; padding: .6rem; border: 1px dashed var(--borde, #444); border-radius: 10px; }
.perfil-tipo { display: grid; gap: .5rem; }
.perfil-tipo textarea { width: 100%; resize: vertical; }
.diag-salida { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 50vh; overflow: auto; font-size: .8rem; }

/* simplicidad: acceso con una línea de tipo y Ajustes plegable */
.tipo-resumen { justify-self: start; font-size: .85rem; opacity: .85; padding: .2rem 0; margin-top: .6rem; }
details.plegable { border-bottom: 1px solid var(--borde, #444); padding-block: .35rem; }
details.plegable > summary { cursor: pointer; font-weight: 600; list-style: none; padding-block: .45rem; display: flex; justify-content: space-between; align-items: center; }
details.plegable > summary::-webkit-details-marker { display: none; }
details.plegable > summary::after { content: '\25BE'; opacity: .7; transition: transform .15s; }
details.plegable[open] > summary::after { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { details.plegable > summary::after { transition: none; } }

/* =====================================================================
   Identidad visual «Jade y latón»: lujo moderado, cálido y exótico.
   Jade profundo de fondo, marfil en el texto, latón como único acento
   cálido y una celosía fina (tipo jali) como detalle. Solo tokens y clases.
   ===================================================================== */
@font-face { font-family: "Lora BaO"; src: url("../fonts/lora-var.woff") format("woff"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Lora BaO"; src: url("../fonts/lora-italic-var.woff") format("woff"); font-weight: 400 700; font-style: italic; font-display: swap; }
:root {
  --bg: #07120f; --panel: #0e1c18; --panel2: #15281f; --borde: #264238;
  --texto: #ece6d6; --suave: #9db3a8; --acento: #d9b36b; --acento2: #54d1b2;
  --error: #f08a7a; --ok: #6fcf97; --aviso: #e6c97a; --sombra: 0 14px 40px rgba(0, 0, 0, .5);
  --bg-rgb: 7, 18, 15; --panel-rgb: 14, 28, 24; --panel2-rgb: 21, 40, 31; --linea: rgba(217, 179, 107, .17);
  --latón-claro: #ebca83; --latón-hondo: #b98d3f; --jade: #54d1b2; --tinta-latón: #1c1405;
  --display: "Lora BaO", Georgia, "Times New Roman", serif;
  --radio: 16px;
}
:root[data-tema="claro"] {
  --bg: #edf2ee; --panel: #fbfcfa; --panel2: #e3ebe6; --borde: #bfd0c6;
  --texto: #11201b; --suave: #4d625a; --acento: #0d6b5b; --acento2: #8a6a22;
  --error: #b3261e; --ok: #2e7d32; --aviso: #7a5f12; --sombra: 0 10px 30px rgba(17, 32, 27, .16);
  --bg-rgb: 237, 242, 238; --panel-rgb: 251, 252, 250; --panel2-rgb: 227, 235, 230; --linea: rgba(138, 106, 34, .22);
  --latón-claro: #b98d3f; --latón-hondo: #8a6a22; --jade: #0d6b5b; --tinta-latón: #fffaf0;
}
::selection { background: rgba(217, 179, 107, .35); color: inherit; }
body { font-family: var(--fuente); letter-spacing: .005em; }

/* Títulos: serif con carácter; las etiquetas pequeñas siguen en sans con espaciado */
h1, h3, .modal-cab h2, .auth-marca h1 { font-family: var(--display); font-weight: 600; }
h3 { letter-spacing: .01em; }
h2 { color: var(--suave); }
.modal h3, .paso > summary, details.plegable > summary { font-family: var(--display); }

/* Acceso: jade profundo, celosía de latón y marca con un filete */
.auth { background: #04100d url("../img/login-fondo.webp") center / cover no-repeat; }
.auth::before { background: radial-gradient(ellipse at 50% 30%, rgba(8, 40, 33, .45), rgba(3, 12, 10, .78) 78%); }
.auth-tarjeta { border: 1px solid var(--linea); border-radius: 20px; box-shadow: var(--sombra), inset 0 1px 0 rgba(236, 202, 131, .18); animation: magia .9s cubic-bezier(.2, .9, .25, 1.12) 1s both; overflow: hidden; }
.auth-tarjeta::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 92px; pointer-events: none; opacity: .7;
  background-image: repeating-linear-gradient(45deg, rgba(217, 179, 107, .16) 0 1px, transparent 1px 11px), repeating-linear-gradient(-45deg, rgba(217, 179, 107, .16) 0 1px, transparent 1px 11px);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent); mask-image: linear-gradient(180deg, #000, transparent); }
.auth-tarjeta > * { position: relative; }
.auth-marca h1 { font-size: 2rem; letter-spacing: .03em; color: var(--texto); }
.auth-marca h1::after { content: ""; display: block; width: 2.4rem; height: 2px; margin-top: .25rem; background: linear-gradient(90deg, var(--latón-claro), transparent); }
.lema { font-family: var(--display); font-style: italic; font-size: 1rem; color: var(--suave); }
@keyframes entrada { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* Login: primero solo el fondo; al segundo la tarjeta brota del centro. / Background first; after 1 s the card grows from the centre. */
@keyframes magia {
  0% { opacity: 0; transform: scale(.04); filter: blur(14px) brightness(2); }
  55% { opacity: 1; transform: scale(1.03); filter: blur(0) brightness(1.15); }
  100% { opacity: 1; transform: none; filter: none; }
}

/* Controles: filos finos, latón en lo importante */
input:not([type=checkbox]):not([type=range]):not([type=file]), select, textarea { background: rgba(var(--bg-rgb), .7); border-color: var(--borde); border-radius: 10px; transition: border-color .15s, box-shadow .15s; }
input:not([type=checkbox]):not([type=range]):not([type=file]):focus, select:focus, textarea:focus { border-color: var(--acento); box-shadow: 0 0 0 3px rgba(217, 179, 107, .18); outline: none; }
button { border-radius: 10px; transition: border-color .15s, background .15s, transform .08s, box-shadow .15s; }
button:hover:not(:disabled) { border-color: var(--acento); }
button:active:not(:disabled) { transform: translateY(1px); }
button.primario { background: linear-gradient(180deg, var(--latón-claro), var(--latón-hondo)); border-color: var(--latón-hondo); color: var(--tinta-latón); font-weight: 650; letter-spacing: .02em; box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 6px 16px rgba(185, 141, 63, .22); }
button.primario:hover:not(:disabled) { filter: brightness(1.06); border-color: var(--latón-claro); }
:root[data-tema="claro"] button.primario { background: linear-gradient(180deg, #11806d, #0b5c4e); border-color: #0b5c4e; color: #f3fffb; box-shadow: 0 6px 16px rgba(11, 92, 78, .25); }
button:focus-visible, a:focus-visible { outline: 2px solid var(--latón-claro); outline-offset: 2px; }
.pestanas { border-bottom-color: var(--linea); }
.pestanas button { font-family: var(--display); font-size: 1rem; }
.pestanas button.activa { border-bottom-color: var(--acento); color: var(--acento); }
.tipo-chip.activa { background: linear-gradient(180deg, var(--latón-claro), var(--latón-hondo)); color: var(--tinta-latón); border-color: var(--latón-hondo); }
.tipos-barra, .panel-trabajo { border-color: var(--linea); border-radius: 14px; background: rgba(var(--bg-rgb), .35); }
.insignia { border-color: var(--linea); }
.insignia.ok { color: var(--acento); border-color: var(--acento); }

/* Tarjetas, ventanas y la Suite */
.tarjeta, .modal { border-color: var(--linea); border-radius: var(--radio); }
.modal { box-shadow: var(--sombra), inset 0 1px 0 rgba(236, 202, 131, .12); }
.modal-cab { border-bottom-color: var(--linea); }
.modal h3 { color: var(--acento); }
.app-b { border-color: var(--linea); border-radius: 14px; background: linear-gradient(180deg, rgba(var(--panel2-rgb), .9), rgba(var(--panel-rgb), .9)); }
.app-b:hover:not(:disabled) { border-color: var(--acento); box-shadow: 0 6px 18px rgba(0, 0, 0, .28); }
details.plegable { border-bottom-color: var(--linea); }
details.plegable > summary { letter-spacing: .01em; }

/* Banda beta: sobria, en latón, sin el amarillo chillón */
.banda { background: linear-gradient(90deg, rgba(185, 141, 63, .22), rgba(185, 141, 63, .1)); color: var(--latón-claro); border-bottom: 1px solid var(--linea); letter-spacing: .02em; }
:root[data-tema="claro"] .banda { color: #6b5115; background: rgba(185, 141, 63, .18); }

/* Premium: la marca de agua y el bloqueo con aire de sello */
.bloqueo { border: 1px solid var(--linea); border-radius: 16px; background: linear-gradient(160deg, rgba(var(--panel2-rgb), .95), rgba(var(--panel-rgb), .95)); }
.bloqueo h3, .marca-agua { font-family: var(--display); letter-spacing: .08em; }

/* Barras de desplazamiento finas */
* { scrollbar-width: thin; scrollbar-color: rgba(217, 179, 107, .35) transparent; }

@media (prefers-reduced-motion: reduce) { .auth-tarjeta { animation: none; } button { transition: none; } }

/* contraste del aviso de contenido en ambos temas */
.aviso-login { border-color: var(--linea); background: rgba(217, 179, 107, .08); border-radius: 12px; }
.aviso-login strong { color: var(--latón-claro); }
:root[data-tema="claro"] .aviso-login { background: rgba(138, 106, 34, .09); }
:root[data-tema="claro"] .aviso-login strong { color: #6b5115; }

/* ventanas con muchas pestañas: se desplazan en vez de ensanchar la ventana en móvil */
.modal, .modal-cuerpo { min-width: 0; max-width: 100%; }
.modal .pestanas { overflow-x: auto; scrollbar-width: none; }
.modal .pestanas::-webkit-scrollbar { display: none; }
.modal .pestanas button { flex: 1 0 auto; white-space: nowrap; padding-inline: .8rem; }

/* Donación, comentarios públicos y encuestas */
.montos { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0; }
.chip-monto { min-width: 3.2rem; border-radius: 999px; }
.chip-monto[aria-pressed="true"] { background: var(--acento, #c9a24a); color: #07120f; border-color: transparent; font-weight: 700; }
.com-item, .enc-item { margin: .6rem 0; }
.com-item p { margin: 0 0 .2rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.enc-fila { margin: .35rem 0; }
.enc-fila progress { width: 100%; height: .6rem; display: block; }
.enc-op { flex: 1 1 8rem; }

/* IA: caja con barra de acciones, comparación e impresión / AI box with action bar, comparison and printing */
.ia-cajabarra { margin: .6rem 0; } .ia-caja { width: 100%; box-sizing: border-box; font: inherit; min-height: 6rem; resize: vertical; }
.ia-barra { flex-wrap: wrap; gap: .35rem; } .ia-comp { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.ia-aviso { border-left: .3rem solid currentColor; padding: .4rem .6rem; margin: .5rem 0; }
.ia-imprimir { display: none; } .imprimiendo-ia .ia-imprimir { display: block; }
@media print { body.imprimiendo-ia > *:not(.ia-imprimir) { display: none !important; } body.imprimiendo-ia .ia-imprimir pre { white-space: pre-wrap; font: 12pt/1.4 serif; } }
.estado-barra { display: inline-flex; gap: .3rem; align-items: center; font: inherit; padding: .2rem .5rem; border-radius: 1rem; cursor: pointer; }
.est-i { font-size: .8rem; white-space: nowrap; } .est-aviso { color: #b45309; } .est-alto { color: #b91c1c; font-weight: 700; } .est-na { opacity: .55; } .est-ok { color: inherit; }
.est-fila { border-bottom: 1px solid rgba(128,128,128,.3); padding: .35rem 0; } .est-cab { display: flex; justify-content: space-between; gap: .5rem; }
.aviso-seg { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .5rem .75rem; margin: .25rem; border-left: .35rem solid #b45309; background: rgba(180,83,9,.12); }
.aviso-seg.seg-alto { border-left-color: #b91c1c; background: rgba(185,28,28,.14); } .aviso-seg[hidden] { display: none; }
/* ⓘ de ayuda (se dibuja en la esquina; no ocupa espacio) y modo banco / help ⓘ and bank mode */
body.info-on [data-info="1"] { position: relative; }
body.info-on [data-info="1"]::after { content: "i"; position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; font: italic 700 7px/10px Georgia, serif; text-align: center; border-radius: 50%; background: rgba(150, 156, 166, .35); border: 1px solid rgba(255, 255, 255, .22); color: rgba(255, 255, 255, .78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-sizing: border-box; pointer-events: none; user-select: none; }
:root[data-tema="claro"] body.info-on [data-info="1"]::after { background: rgba(120, 126, 136, .3); border-color: rgba(0, 0, 0, .12); color: rgba(30, 34, 40, .7); }
.info-burbuja { position: fixed; z-index: 99999; padding: .5rem .7rem; border-radius: .5rem; background: #111827; color: #fff; font-size: .85rem; line-height: 1.3; box-shadow: 0 4px 16px rgba(0,0,0,.35); user-select: none; -webkit-user-select: none; pointer-events: none; }
body.priv-on, body.priv-on * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body.priv-on :is(input, textarea, [contenteditable="true"], .codigo, [data-copiable]) { -webkit-user-select: text; user-select: text; }
body.priv-borroso > * { filter: blur(22px) saturate(.6); transition: filter .05s; }
body.priv-borroso > .info-burbuja { filter: none; }
@media print { body.priv-on:not(.imprimiendo-ia) > * { display: none !important; } body.priv-on:not(.imprimiendo-ia)::before { content: "Impresión bloqueada / Printing blocked"; display: block; padding: 2rem; font: 700 1.2rem sans-serif; } }

/* ---- Pantallas grandes: la app ocupa todo el navegador / Large screens: the app fills the whole browser ---- */
.principal { min-height: 100vh; min-height: 100dvh; box-sizing: border-box; }
@media (min-width: 921px) { .mensajes { height: max(460px, calc(100dvh - 300px)); } } /* el chat crece hacia abajo por defecto */
@media (min-width: 1800px) { body { font-size: 16px; } }
@media (min-width: 2400px) { body { font-size: 18px; } }
.atras { align-self: flex-start; margin-bottom: .4rem; }

/* ---- Google y Spotify independientes; Spotify estilo reloj inteligente / independent Google & Spotify; smartwatch-style Spotify ---- */
.dock-ext .enl-panel { width: min(320px, calc(100vw - 24px)); }
.enl-hist { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .2rem; max-height: 180px; overflow-y: auto; }
.enl-hist li { display: flex; gap: .3rem; align-items: center; }
.enl-hist-q { flex: 1; min-width: 0; text-align: left; background: none; border: 0; padding: .3rem .4rem; border-radius: 6px; color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.enl-hist-q:hover { background: rgba(255,255,255,.08); }
.enl-hist-x { background: none; border: 0; color: var(--suave); padding: 0 .4rem; cursor: pointer; min-height: 0; }
.enl-fila { justify-content: space-between; align-items: center; margin-top: .4rem; }
.reloj { display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: .6rem .5rem .4rem; border-radius: 28px; background: radial-gradient(120% 90% at 50% 0%, rgba(30, 215, 96, .16), rgba(0, 0, 0, .55)); border: 1px solid rgba(255,255,255,.12); }
.reloj.reloj-config { align-items: stretch; border-radius: 18px; }
.reloj-pantalla { width: 100%; min-height: 230px; max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .3rem; }
.reloj-portada { width: 118px; height: 118px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,.15); box-shadow: 0 6px 18px rgba(0,0,0,.4); }
.reloj-portada.vacia { display: grid; place-items: center; font-size: 2.4rem; background: rgba(255,255,255,.06); }
.reloj-titulo { margin: .2rem 0 0; font-weight: 700; font-size: .95rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reloj-sub, .reloj-disp, .reloj-cargando { margin: 0; font-size: .78rem; color: var(--suave); }
.reloj-controles, .reloj-vol { display: flex; align-items: center; justify-content: center; gap: .6rem; }
.reloj-b { width: 2.4rem; height: 2.4rem; min-height: 0; padding: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.08); color: var(--texto); font-size: 1rem; cursor: pointer; }
.reloj-b.grande { width: 3.1rem; height: 3.1rem; font-size: 1.3rem; background: #1ed760; color: #06120a; border-color: transparent; }
.reloj-b.chico { width: 1.9rem; height: 1.9rem; font-size: .95rem; }
.reloj-nav { display: flex; gap: .35rem; justify-content: center; }
.reloj-tab { width: 2.1rem; height: 2.1rem; min-height: 0; padding: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); color: var(--texto); cursor: pointer; }
.reloj-tab[aria-pressed="true"] { background: rgba(30, 215, 96, .25); border-color: #1ed760; }
.reloj-lista { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: .25rem; }
.reloj-item { display: flex; align-items: center; gap: .5rem; width: 100%; text-align: left; padding: .3rem .45rem; border-radius: 14px; background: rgba(255,255,255,.05); border: 0; color: var(--texto); cursor: pointer; min-height: 0; }
.reloj-item:hover { background: rgba(255,255,255,.1); }
.reloj-item img, .reloj-mini { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; display: grid; place-items: center; background: rgba(255,255,255,.08); }
.reloj-item-t { display: flex; flex-direction: column; min-width: 0; }
.reloj-item-t strong, .reloj-item-t small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reloj-item-t small { color: var(--suave); }
.reloj-buscar { width: 100%; }
.reloj-q { width: 100%; border-radius: 999px; }
.reloj-msg { margin: 0; font-size: .75rem; color: var(--aviso); text-align: center; }
.reloj-msg:empty { display: none; }
.reloj-pasos { margin: .2rem 0; padding-left: 1.1rem; font-size: .8rem; display: flex; flex-direction: column; gap: .3rem; }
.reloj-code { font-size: .75rem; word-break: break-all; background: rgba(255,255,255,.08); padding: .05rem .3rem; border-radius: 4px; }
.reloj-alt { margin-top: .4rem; font-size: .8rem; }

/* ---- Barra superior: Descargar (junto a Seguridad), Google y Spotify con su propio panel ---- */
.mg-descargar { font-weight: 600; }
.mg-serv { width: 1.9rem; height: 1.9rem; min-height: 0; padding: 0; margin: 0 .1rem; border-radius: 50%; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: var(--texto); font: 700 .9rem/1 system-ui, sans-serif; cursor: pointer; flex: none; }
.mg-serv:hover, .mg-serv[aria-expanded="true"] { background: rgba(255,255,255,.14); }
.mg-google { color: #8ab4f8; }
.mg-spotify { color: #1ed760; }
.enl-pop { position: fixed; z-index: 900; max-height: calc(100dvh - 60px); overflow-y: auto; padding: .7rem; border-radius: var(--radio); border: 1px solid var(--linea); background: rgba(var(--panel-rgb), .96); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 12px 32px rgba(0,0,0,.45); }
.enl-cab { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin-bottom: .45rem; }
.enl-logo-g { font-size: 1.1rem; letter-spacing: -.01em; color: #8ab4f8; }
.enl-logo-s { font-size: 1.1rem; color: #1ed760; }
.enl-cab small { color: var(--suave); }
.enl-barra { display: flex; gap: .35rem; }
.enl-barra input { flex: 1; border-radius: 999px; padding-left: .9rem; }
.enl-barra button { border-radius: 999px; min-width: 2.6rem; }
.enl-pop .enl-aviso { margin-top: .5rem; }
.reloj-disp { background: none; border: 0; color: var(--suave); font-size: .78rem; cursor: pointer; min-height: 0; }
.reloj-disp:hover { color: var(--texto); }
.reloj-item.activo { outline: 1px solid #1ed760; }
#enlaces:empty { display: none; }
/* Google: barra de búsqueda extendida / wide search bar */
.enl-pop.enl-google { padding: .9rem 1rem; }
.enl-google .enl-barra input { font-size: 1.05rem; padding: .7rem 1.1rem; min-height: 2.9rem; }
.enl-google .enl-barra button { min-width: 3.2rem; font-size: 1.15rem; }
.enl-google .enl-hist { max-height: 260px; }
.reloj-entrar { background: #1ed760; color: #06120a; border-color: transparent; border-radius: 999px; font-weight: 700; padding: .65rem 1rem; }

/* ---- Ventanas movibles y redimensionables / movable, resizable windows ---- */
.modal { position: relative; }
.modal-cab { cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; }
.arrastrando-ventana, .arrastrando-ventana * { cursor: grabbing !important; user-select: none !important; -webkit-user-select: none !important; }
.modal.flotante { position: fixed; margin: 0; max-width: none; max-height: none; min-width: 280px; min-height: 160px; }
.modal.flotante .modal-cuerpo { flex: 1; min-height: 0; overflow: auto; }
.modal.ampliada .modal-cab { cursor: default; }
.modal-asa { position: absolute; right: 2px; bottom: 2px; width: 16px; height: 16px; cursor: nwse-resize; touch-action: none; opacity: .55; background: linear-gradient(135deg, transparent 0 50%, var(--suave) 50% 58%, transparent 58% 70%, var(--suave) 70% 78%, transparent 78%); border-bottom-right-radius: 12px; }
.modal-asa:hover { opacity: 1; }
.modal.ampliada .modal-asa { display: none; }
.menu-ctx { position: fixed; z-index: 100000; min-width: 200px; padding: .3rem; border-radius: 10px; background: rgba(18, 20, 26, .97); border: 1px solid var(--borde); box-shadow: 0 12px 32px rgba(0, 0, 0, .5); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.menu-ctx-item { display: block; width: 100%; text-align: left; background: none; border: 0; border-radius: 6px; padding: .4rem .65rem; font-size: .85rem; color: var(--texto); cursor: pointer; min-height: 0; }
.menu-ctx-item:hover:not(:disabled), .menu-ctx-item:focus:not(:disabled) { background: rgba(255, 255, 255, .1); outline: none; }
.menu-ctx-item:disabled { opacity: .4; cursor: default; }
.menu-ctx-item.peligro { color: #f08b84; }
.menu-ctx-sep { height: 1px; margin: .25rem .3rem; background: var(--borde); }
:root[data-tema="claro"] .menu-ctx { background: rgba(255, 255, 255, .98); }
/* ---- Iconos acomodables / arrangeable icons ---- */
.suite .app-b, .barra .acciones button { user-select: none; -webkit-user-select: none; }
.icono-quitado { display: none !important; }
.icono-arrastrando { opacity: .55; transform: scale(1.06); outline: 2px dashed var(--acento); outline-offset: 2px; cursor: grabbing; }
.iconos-moviendo { cursor: grabbing; }
.iconos-grupo { margin: .6rem 0 .3rem; font-size: .85rem; color: var(--suave); }
.iconos-lista { list-style: none; margin: 0 0 .4rem; padding: 0; display: flex; flex-direction: column; gap: .15rem; }
.iconos-lista li { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .15rem .3rem; border-radius: 6px; }
.iconos-lista li:hover { background: rgba(255,255,255,.05); }
.iconos-lista li.oculto-ico span { opacity: .55; }
.iconos-mover { display: flex; gap: .2rem; }
.iconos-mover .icono { width: 1.7rem; height: 1.7rem; min-height: 0; padding: 0; }
/* ---- Punto «volver a su lugar» / back-to-place dot ---- */
.icono-movido { position: relative; }
.icono-movido::before { content: ""; position: absolute; top: 3px; left: 3px; width: 7px; height: 7px; border-radius: 50%; background: var(--acento); box-shadow: 0 0 0 2px rgba(0, 0, 0, .35); cursor: pointer; z-index: 1; }
.vc-punto { background: rgba(255, 255, 255, .08); color: var(--acento); font-size: 1.1rem; }
.modal:not(.flotante):not(.ampliada) .vc-punto { display: none; }
.iconos-punto { color: var(--acento); font-size: 1.2rem; }
.mg-grupo { display: flex; align-items: center; gap: .1rem; }
.mg-barra .mg-titulo.icono-movido::before { top: 1px; left: 1px; width: 6px; height: 6px; }
.est-svg { vertical-align: -.15em; flex: none; }

/* ---- Facebook y YouTube encima del chat / Facebook & YouTube above the chat ---- */
.medios { display: flex; flex-direction: column; gap: .5rem; }
.medios-barra { display: flex; gap: .4rem; flex-wrap: wrap; }
.medio-chip { border-radius: 999px; padding: .25rem .8rem; font-size: .82rem; min-height: 0; opacity: .7; }
.medio-chip[aria-pressed="true"] { opacity: 1; border-color: var(--acento); }
.medio-chip-facebook[aria-pressed="true"] { border-color: #1877f2; }
.medio-chip-youtube[aria-pressed="true"] { border-color: #ff3d3d; }
.medios-rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.medios-rejilla.uno { grid-template-columns: 1fr; }
.medio { display: flex; flex-direction: column; padding: .55rem; min-width: 0; }
.medio-cab { display: flex; align-items: center; justify-content: space-between; gap: .4rem; margin-bottom: .4rem; }
.medio-acc { display: flex; gap: .25rem; }
.medio-acc .icono { width: 1.8rem; height: 1.8rem; min-height: 0; padding: 0; }
.medio-ico { display: inline-grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 4px; color: #fff; font: 700 .8rem/1 system-ui, sans-serif; }
.medio-facebook .medio-ico { background: #1877f2; }
.medio-youtube .medio-ico { background: #ff0000; font-size: .6rem; }
.medio-cuerpo { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .4rem; }
.medio-cuerpo iframe { width: 100%; height: clamp(220px, 34vh, 520px); border: 0; border-radius: 10px; background: #000; }
.medio-youtube .medio-cuerpo iframe { height: auto; aspect-ratio: 16 / 9; max-height: clamp(220px, 34vh, 520px); }
.medio-facebook .medio-cuerpo iframe { background: #fff; }
.medio-buscar { margin-top: .2rem; }
@media (max-width: 760px) { .medios-rejilla { grid-template-columns: 1fr; } }
/* con las ventanas abiertas, el chat baja y se acorta para que todo quepa en pantalla */

.medio-priv { font-size: .74rem; opacity: .8; }
/* tarjetas ordenables: se agarran del título / cards are dragged by their title */
.col > .tarjeta > h2, .medios-barra, .chat-tabs { cursor: grab; }
.col > .tarjeta.icono-arrastrando, .col > .medios.icono-arrastrando { transform: none; }
.col > .tarjeta.icono-movido::before { top: 6px; left: 6px; width: 9px; height: 9px; }
.medio-login.activo { border-color: var(--acento); background: rgba(var(--panel2-rgb), .9); }
/* ---- Tarjetas que se estiran (asa del navegador abajo a la derecha) / resizable cards ---- */
.col > .redimensionable { resize: both; overflow: auto; min-height: 120px; min-width: 220px; max-width: 100%; }
.col > .con-ancho { flex: 0 1 auto; }
.col > .redimensionable.con-tam { display: flex; flex-direction: column; }
.col > .tarjeta.chat.con-tam .mensajes { flex: 1; height: auto; min-height: 120px; }
.col > .medios.con-tam .medios-rejilla { flex: 1; min-height: 0; }
.col > .medios.con-tam .medio { height: 100%; }
.col > .medios.con-tam .medio-cuerpo iframe, .col > .medios.con-tam .medio-youtube .medio-cuerpo iframe { flex: 1; height: auto; max-height: none; aspect-ratio: auto; min-height: 120px; }
/* alineado por defecto: todas las tarjetas a lo ancho de su columna, mismo espacio entre ellas */
.col > .tarjeta, .col > .medios { box-sizing: border-box; margin: 0; }
/* Facebook, YouTube y X: media fila por defecto (dos lado a lado si caben) */
.col > .medio-tarjeta { flex: 1 1 100%; min-width: min(100%, 300px); } /* mismo ancho que el chat, alineadas */
.col > .medio-tarjeta:not(.medios-abiertos) { flex-basis: auto; flex-grow: 0; }
.col:empty::after { content: ''; display: block; width: 100%; min-height: 120px; border: 1px dashed var(--borde); border-radius: var(--radio); }

/* ---- Calendario de la Suite / Suite calendar ---- */
.cal-nav { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.cal-mes { margin: 0; flex: 1; text-align: center; font-size: 1.05rem; }
.cal-hoy { border-radius: 999px; padding: .25rem .8rem; min-height: 0; }
.cal-cuerpo { display: grid; grid-template-columns: minmax(280px, 1.4fr) minmax(220px, 1fr); gap: .8rem; align-items: start; }
@media (max-width: 640px) { .cal-cuerpo { grid-template-columns: 1fr; } }
.cal-rejilla { display: flex; flex-direction: column; gap: .2rem; }
.cal-fila { display: grid; grid-template-columns: repeat(7, 1fr); gap: .2rem; }
.cal-cab span { text-align: center; font-size: .72rem; color: var(--suave); text-transform: capitalize; }
.cal-celda { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: .15rem; min-height: 2.8rem; padding: .3rem 0; border-radius: 8px; background: rgba(255,255,255,.03); border: 1px solid transparent; cursor: pointer; }
.cal-celda.fuera { opacity: .4; }
.cal-celda.hoy .cal-num { background: var(--acento); color: #04201b; border-radius: 999px; padding: 0 .4rem; font-weight: 700; }
.cal-celda.elegido { border-color: var(--acento); }
.cal-celda:hover { background: rgba(255,255,255,.08); }
.cal-num { font-size: .85rem; }
.cal-puntos { display: flex; gap: 2px; }
.cal-puntos i { width: 5px; height: 5px; border-radius: 50%; display: block; }
.cal-dia h4 { margin: 0 0 .4rem; font-size: .9rem; }
.cal-evento { display: flex; justify-content: space-between; gap: .4rem; align-items: flex-start; padding: .4rem .5rem; margin-bottom: .35rem; border-radius: 8px; background: rgba(255,255,255,.05); border-left: 4px solid currentColor; }
.cal-evento > div:first-child { color: var(--texto); }
.cal-c-verde { background-color: #3ccf91; color: #3ccf91; } .cal-c-azul { background-color: #5aa8ff; color: #5aa8ff; } .cal-c-ambar { background-color: #f0b44c; color: #f0b44c; }
.cal-c-rojo { background-color: #f07167; color: #f07167; } .cal-c-morado { background-color: #b48cff; color: #b48cff; }
.cal-evento.cal-c-verde, .cal-evento.cal-c-azul, .cal-evento.cal-c-ambar, .cal-evento.cal-c-rojo, .cal-evento.cal-c-morado { background-color: rgba(255,255,255,.05); }
/* asa visible ⠿ para agarrar cada tarjeta / visible grip */
.col > .tarjeta > h2::before, .col > .medios > .medios-barra::before { content: "⠿"; display: inline-block; margin-right: .4rem; opacity: .45; font-weight: 400; letter-spacing: 0; }
.col > .tarjeta > h2:hover::before, .col > .medios > .medios-barra:hover::before { opacity: .9; color: var(--acento); }
.col > .medios > .medios-barra { align-items: center; padding: .2rem .1rem; }
.chat-h2 { margin: 0 0 .35rem; }

/* ---- Galería estilo Fotos de macOS / macOS Photos-style gallery ---- */
.modal.gal-ventana { width: min(1180px, 100%); }
.gal { display: grid; grid-template-columns: 200px 1fr; gap: 0; min-height: 60vh; border: 1px solid var(--borde); border-radius: 12px; overflow: hidden; }
@media (max-width: 640px) { .gal { grid-template-columns: 1fr; } .gal-lateral { flex-direction: row; overflow-x: auto; } .gal-tit { display: none; } }
.gal-lateral { display: flex; flex-direction: column; gap: .1rem; padding: .6rem .45rem; background: rgba(255,255,255,.035); border-right: 1px solid var(--borde); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.gal-tit { margin: .55rem .5rem .2rem; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--suave); }
.gal-sec { display: flex; align-items: center; gap: .5rem; width: 100%; text-align: left; padding: .35rem .55rem; border-radius: 7px; background: none; border: 0; color: var(--texto); font-size: .86rem; cursor: pointer; min-height: 0; white-space: nowrap; }
.gal-sec:hover { background: rgba(255,255,255,.07); }
.gal-sec.activa { background: rgba(var(--panel2-rgb), .9); box-shadow: inset 0 0 0 1px var(--linea); }
.gal-ico { width: 1.1rem; text-align: center; color: var(--acento); }
.gal-nom { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.gal-n { font-size: .72rem; color: var(--suave); }
.gal-principal { display: flex; flex-direction: column; min-width: 0; }
.gal-barra { display: flex; align-items: center; gap: .6rem; padding: .5rem .8rem; border-bottom: 1px solid var(--borde); }
.gal-titulo { margin: 0; font-size: 1.05rem; }
.gal-espacio { flex: 1; }
.gal-zoom { display: flex; align-items: center; gap: .35rem; font-size: .8rem; color: var(--suave); }
.gal-zoom input { width: 110px; }
.gal-zona { --gal-tam: 150px; flex: 1; overflow-y: auto; max-height: 64vh; padding: .4rem .8rem .9rem; }
.gal-mes { margin: .7rem 0 .4rem; font-size: .95rem; font-weight: 700; }
.gal-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--gal-tam), 1fr)); gap: 3px; }
.gal-mini { position: relative; padding: 0; border: 0; aspect-ratio: 1; overflow: hidden; background: rgba(255,255,255,.05); border-radius: 3px; cursor: zoom-in; min-height: 0; }
.gal-mini:focus-visible { outline: 3px solid var(--acento); outline-offset: -3px; }
.gal-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; }
.gal-mini:hover .gal-img { transform: scale(1.04); }
.gal-mini.rota::after { content: "⚠"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--suave); }
.gal-badge, .gal-fav { position: absolute; bottom: 4px; font-size: .75rem; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.gal-badge { left: 6px; } .gal-fav { right: 6px; color: #ff6b8a; }
.gal-vacio { display: grid; place-items: center; text-align: center; min-height: 40vh; color: var(--suave); }
.gal-vacio-ico { font-size: 3rem; margin: 0; }
.modal.gal-visor { width: min(1280px, 100%); background: #0b0c0f; }
.gal-visor-barra { display: flex; align-items: center; gap: .4rem; margin-bottom: .5rem; }
.gal-visor-media { display: grid; place-items: center; min-height: 55vh; background: #000; border-radius: 10px; overflow: hidden; }
.gal-grande { max-width: 100%; max-height: 72vh; object-fit: contain; display: block; }
.gal-visor-pie { display: flex; justify-content: space-between; gap: .6rem; margin-top: .5rem; font-size: .8rem; color: var(--suave); flex-wrap: wrap; }

/* ---- Servicios (Pandora, iHeart, Amazon Music, Instagram, eBay, Amazon) ---- */
.serv-grupo { margin: .55rem 0 .25rem; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--suave); }
.serv-lista { display: flex; flex-direction: column; gap: .3rem; }
.serv-fila { display: flex; align-items: center; gap: .5rem; padding: .3rem .4rem; border-radius: 10px; background: rgba(255,255,255,.04); }
.serv-logo { width: 2rem; height: 2rem; flex: none; display: grid; place-items: center; border-radius: 9px; color: #fff; font: 800 .78rem/1 system-ui, sans-serif; letter-spacing: -.02em; }
.serv-pandora { background: #3668ff; } .serv-iheart { background: #c6002b; } .serv-amazonmusic { background: linear-gradient(135deg, #25d1da, #4c5fe7); }
.serv-instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.serv-ebay { background: #fff; color: #e53238; border: 1px solid #ddd; } .serv-amazon { background: #232f3e; color: #ff9900; }
.serv-nom { flex: 1; font-size: .88rem; font-weight: 600; }
.serv-b { min-height: 0; padding: .25rem .6rem; font-size: .78rem; border-radius: 999px; }
.mg-servicios { font-size: 1rem; }

/* Facebook, YouTube y X: misma altura, alineadas / same height, aligned */
.col > .medio-tarjeta .medio { min-height: 0; }
.col > .medio-tarjeta .medio-cuerpo iframe, .col > .medio-tarjeta .medio-youtube .medio-cuerpo iframe { height: clamp(230px, 32vh, 460px); aspect-ratio: auto; max-height: none; } /* un poco más bajas: el chat sube */
.col > .medio-tarjeta .medio-cuerpo { min-height: clamp(230px, 32vh, 460px); }
/* YouTube: barra con búsqueda, «YouTube completo» (al lado, opcional) y 📋 */
.yt-barra { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: .45rem; }
.yt-barra .medio-buscar { flex: 1 1 260px; margin: 0; }
.yt-completo { border-radius: 999px; padding: .3rem .8rem; min-height: 0; font-size: .8rem; border-color: #ff3d3d; }
.yt-aviso { flex: 1 1 100%; margin: 0; font-size: .72rem; color: var(--aviso); }

/* ---- Sonido y micrófono / sound & microphone ---- */
.snd-boton { width: 100%; }
.snd-sec { padding: .2rem 0 .6rem; border-bottom: 1px solid var(--borde); margin-bottom: .6rem; }
.snd-sec h3 { margin: .2rem 0 .5rem; }
.snd-vol { align-items: flex-end; }
.snd-vol label { flex: 1; }
.snd-pct { min-width: 3rem; text-align: right; font-variant-numeric: tabular-nums; color: var(--suave); }
.snd-modo { margin: .4rem 0; font-size: .85rem; }
.snd-sala { position: relative; height: 210px; margin: .4rem 0 .5rem; border-radius: 14px; border: 1px solid var(--borde); background: radial-gradient(circle at 50% 60%, rgba(255,255,255,.07), transparent 65%); }
.snd-oyente { position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%); font-size: 2rem; }
.snd-parlante { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .35rem .45rem; min-height: 0; border-radius: 12px; font-size: 1.3rem; line-height: 1; }
.snd-parlante small { font-size: .62rem; white-space: nowrap; }
.snd-parlante.sonando { border-color: var(--acento); box-shadow: 0 0 0 4px rgba(60, 207, 145, .25); }
.snd-p-L { left: 18%; top: 22%; } .snd-p-R { left: 82%; top: 22%; } .snd-p-C { left: 50%; top: 16%; } .snd-p-LFE { left: 68%; top: 44%; }
.snd-p-SL { left: 8%; top: 78%; } .snd-p-SR { left: 92%; top: 78%; } .snd-p-BL { left: 30%; top: 90%; } .snd-p-BR { left: 70%; top: 90%; }
.snd-cuad .snd-p-SL { left: 18%; top: 84%; } .snd-cuad .snd-p-SR { left: 82%; top: 84%; }
.snd-mono .snd-p-C { top: 25%; }
.snd-nivel { height: 12px; margin: .5rem 0 .3rem; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.snd-nivel i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #3ccf91, #f0b44c 75%, #f07167); transition: width .06s linear; }
.snd-info { font-size: .74rem; }
/* chat alineado con Contactos: los mensajes llenan el alto disponible */
.tarjeta.chat.chat-alineado { display: flex; flex-direction: column; }
.tarjeta.chat.chat-alineado .mensajes { flex: 1 1 auto; height: auto; min-height: 200px; }
.app-b .ico-svg { width: 1.75rem; height: 1.75rem; display: block; color: var(--acento); }

/* contador de visitas a la derecha: el mini reproductor de Spotify (si lo hay) sube encima de él */
body:has(#visitas:not([hidden])) .dock-ext { bottom: 86px; }
/* YouTube · Mis canales y directos */
.yt-canales { margin-top: .5rem; border-top: 1px solid var(--borde); padding-top: .45rem; display: flex; flex-direction: column; gap: .35rem; }
.yt-canales-cab { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.yt-canales-cab .enl-barra { flex: 1 1 240px; margin: 0; }
.yt-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.yt-chip { display: inline-flex; align-items: center; gap: .2rem; padding: .15rem .2rem .15rem .6rem; border-radius: 999px; background: rgba(255,255,255,.07); font-size: .78rem; }
.yt-chip-x { background: none; border: 0; min-height: 0; padding: 0 .35rem; color: var(--suave); cursor: pointer; }
.yt-vivos { display: flex; flex-wrap: wrap; gap: .35rem; }
.yt-envivo { border-radius: 999px; padding: .3rem .8rem; min-height: 0; font-size: .8rem; font-weight: 700; background: #c4161c; color: #fff; border-color: transparent; animation: yt-latido 1.6s ease-in-out infinite; }
@keyframes yt-latido { 50% { box-shadow: 0 0 0 5px rgba(196, 22, 28, .25); } }
.yt-videos { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(160px, 200px); gap: .45rem; overflow-x: auto; padding-bottom: .3rem; scroll-snap-type: x mandatory; }
.yt-video { display: flex; flex-direction: column; gap: .2rem; text-align: left; padding: 0; border: 0; background: none; color: var(--texto); cursor: pointer; min-height: 0; scroll-snap-align: start; }
.yt-video img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; background: #000; }
.yt-video:hover img { outline: 2px solid var(--acento); }
.yt-v-tit { font-size: .78rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.yt-video small { font-size: .7rem; color: var(--suave); }
.yt-nota { margin: 0; font-size: .72rem; }
.yt-tira { display: flex; align-items: center; gap: .3rem; }
.yt-tira .yt-videos { flex: 1; min-width: 0; scrollbar-width: thin; }
.yt-flecha { flex: none; width: 2rem; height: 2rem; min-height: 0; padding: 0; border-radius: 50%; font-size: 1.3rem; line-height: 1; align-self: center; margin-top: -1.4rem; }
.yt-flecha:disabled { opacity: .3; }
.yt-resultados { flex: 1 1 100%; display: flex; flex-direction: column; gap: .3rem; }
.yt-resultados:empty { display: none; }
.medio-guardados { align-items: center; margin-bottom: .4rem; }
.medio-guardados-tit { font-size: .8rem; margin-right: .2rem; }
.yt-chip.activo { background: rgba(var(--panel2-rgb), .95); box-shadow: inset 0 0 0 1px var(--acento); }
.yt-chip-ir { background: none; border: 0; min-height: 0; padding: 0; color: var(--texto); font-size: .78rem; cursor: pointer; }
.yt-chip-guardar { padding: .2rem .7rem; border: 1px dashed var(--borde); cursor: pointer; min-height: 0; font-size: .78rem; }
.serv-facebook { background: #1877f2; } .serv-x { background: #000; border: 1px solid #333; font-size: .95rem; }

/* Accesos directos / Shortcuts card */
.acc-ico { display: inline-flex; align-items: center; justify-content: center; min-width: 2.2rem; height: 2.2rem; border-radius: 10px; font-weight: 700; font-size: 1.1rem; color: var(--acento); background: rgba(var(--panel2-rgb), .9); border: 1px solid var(--linea); }
.acc-mas .ico { color: var(--suave); }
.accesos-lista + .nota { margin: .5rem 0 0; }
.accesos .fila { margin-top: .5rem; }
.acc-plantillas { display: flex; flex-wrap: wrap; gap: .3rem .6rem; align-items: center; margin-bottom: .6rem; }
.acc-gestor h3 { margin: .8rem 0 .3rem; font-size: 1rem; }
.acc-gestor .fila input[type=number] { width: 6.5rem; }

/* Respaldo de sistema y telemetría / System backup and telemetry */
.nube h3 { margin: 1rem 0 .3rem; font-size: 1.05rem; }
.nube-intro { font-weight: 600; }
.nube-lista { margin: .2rem 0 .5rem; padding-left: 1.1rem; }
.nube-no { color: var(--suave); }
.nube-botones { flex-wrap: wrap; gap: .4rem; }
.nube-muestra { background: var(--bg); border: 1px solid var(--linea); border-radius: 8px; padding: .5rem .7rem; font-size: .8rem; overflow-x: auto; }
.nube-codigo { font-family: ui-monospace, monospace; font-size: 1.05rem; line-height: 1.6; padding: .6rem .8rem; border: 1px dashed var(--acento); border-radius: 8px; user-select: all; word-spacing: .3rem; }
.info-lista dt { font-weight: 600; margin-top: .6rem; }
.info-lista dd { margin: .15rem 0 0; }
/* Chat: borrar por mensaje, cuenta regresiva y temporizador / per-message delete, countdown and timer */
.msg .meta { display: inline-flex; align-items: center; gap: .3rem; }
.msg-borrar { min-width: 0; padding: 0 .3rem; font-size: .9rem; line-height: 1; background: none; border: 0; opacity: .45; cursor: pointer; }
.msg-borrar:hover, .msg-borrar:focus-visible { opacity: 1; }
.msg .cuenta { font-variant-numeric: tabular-nums; }
#btnTemporizador.activa { color: var(--acento); }
.lista-opciones { display: grid; gap: .4rem; }
.aviso-obras { margin-top: .4rem; border-color: rgba(255, 150, 60, .5); background: rgba(255, 150, 60, .1); }
/* Estado de presencia / presence status */
.sel-estado { width: auto; max-width: 11rem; font-size: .85rem; padding: .25rem .4rem; }
.contacto.est-ausente .punto { background: #e6b422; }
.contacto.est-ocupado .punto { background: #d9534f; }
/* Sitios con la plantilla vacía / empty-template sites */
.sitio-cab { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .6rem 1rem; }
.sitio-nombre { font-size: 1.2rem; }
.sitio-contenido { max-width: 960px; margin: 1rem auto; padding: 0 1rem; }
.sitio-pie { display: flex; flex-wrap: wrap; gap: .4rem 1rem; justify-content: center; align-items: center; padding: 1.2rem 1rem; font-size: .85rem; }
.sitio-pie nav { display: flex; flex-wrap: wrap; gap: .4rem 1rem; }
.sitio-cab select { width: auto; max-width: 14rem; }
.idioma-auth { display: inline-flex; align-items: center; gap: .3rem; }
.idioma-auth select { width: auto; max-width: 12rem; font-size: .85rem; padding: .2rem .4rem; }
/* Barra para traducir la página al idioma de la persona / bar to translate the page */
.barra-traducir { position: fixed; z-index: 60; top: .6rem; left: 50%; transform: translateX(-50%); display: flex; gap: .4rem; align-items: center; padding: .35rem; border-radius: 12px; background: var(--panel); border: 1px solid var(--borde); box-shadow: var(--sombra); max-width: calc(100% - 1.2rem); }
.barra-traducir .primario { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Alias únicos: estado y sugerencias / unique aliases */
#crAliasEstado.ok { color: var(--ok); } #crAliasEstado.error { color: var(--error, #e5534b); }
.sugerencias-alias { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin: .2rem 0 .4rem; }
.chip-alias { padding: .2rem .6rem; border-radius: 999px; font-size: .85rem; }
.regla-alias { margin-top: .4rem; }
.info-visitas .vis-panel { position: static; max-width: none; box-shadow: none; }
.info-visitas .vis-icono, .info-visitas .vis-cerrar { display: none; }
/* Contactos se estira desde debajo del radar hasta el final de la columna (pantallas grandes). / Contacts fill the left column. */
@media (min-width: 921px) {
  .rejilla { align-items: stretch; }
  #colIzq { flex-direction: column; flex-wrap: nowrap; }
  #colIzq > .tarjeta, #colIzq > .medios { width: 100%; flex: 0 0 auto; }
  #colIzq > [data-card="contactos"] { flex: 1 1 auto; display: flex; flex-direction: column; }
  #colIzq > [data-card="contactos"] .grilla-contactos { flex: 1 1 auto; }
}