/* =============================================================================
   panel.css  —  App del mago (dashboard oscuro, legible, tipo aplicación).
   Fuente común del sistema. Alto contraste. Pestañas + subpestañas.
   No afecta al espejo del espectador (index.php usa estilos.css).
   ========================================================================== */

:root {
    --bg:        #0e0f13;
    --surface:   #161922;
    --surface-2: #1c202b;
    --elev:      #232838;
    --border:    #2a2f3c;
    --border-2:  #1e2230;

    --text:  #eef1f6;
    --muted: #a3aab6;
    --faint: #6b7280;

    --accent:     #7c6cff;
    --accent-2:   #9a8dff;
    --accent-dim: rgba(124, 108, 255, .14);
    --on:         #34d399;
    --on-dim:     rgba(52, 211, 153, .14);
    --danger:     #ff6b6b;
    --danger-dim: rgba(255, 107, 107, .12);

    --font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, Helvetica, sans-serif;
    --radius:   14px;
    --radius-s: 10px;
    --shadow:   0 12px 30px -14px rgba(0, 0, 0, .6);
}

* { box-sizing: border-box; }
html, body { margin: 0; }

body.app {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.5;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

/* ── App bar ────────────────────────────────────────────────────────────── */
.appbar {
    position: sticky; top: 0; z-index: 50;
    background: rgba(14, 15, 19, .85);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-2);
}
.appbar-inner {
    max-width: 1080px; margin: 0 auto; padding: 12px 18px;
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-badge {
    width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-size: 19px;
    background: var(--elev); border: 1px solid var(--border);
}
.brand-name { font-weight: 700; font-size: 1.05rem; letter-spacing: .2px; }
.brand-sub { font-size: .7rem; color: var(--faint); letter-spacing: 1.5px; text-transform: uppercase; }

.appbar-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.who { font-size: .85rem; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.who b { color: var(--text); font-weight: 600; }

/* ── Pestañas principales (segmentado) ──────────────────────────────────── */
.tabs { max-width: 1080px; margin: 0 auto; padding: 12px 18px 0; }
.tabset {
    display: inline-flex; gap: 4px; padding: 4px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
}
.tab {
    border: 0; background: transparent; color: var(--muted); cursor: pointer;
    font-family: var(--font); font-size: .9rem; font-weight: 600;
    padding: 9px 20px; border-radius: 999px; transition: .15s; text-decoration: none; display: inline-block;
}
.tab:hover { color: var(--text); }
.tab.is-active { background: var(--accent); color: #fff; }

/* ── Contenedor ─────────────────────────────────────────────────────────── */
.appmain { max-width: 1080px; margin: 0 auto; padding: 18px; }
.tabpane { display: none; }
.tabpane.is-active { display: block; animation: fade .2s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; } }

/* ── Subpestañas (subrayado) ────────────────────────────────────────────── */
.subtabs { display: flex; gap: 22px; border-bottom: 1px solid var(--border); margin-bottom: 18px; }
.subtab {
    border: 0; background: transparent; color: var(--muted); cursor: pointer;
    font-family: var(--font); font-size: .92rem; font-weight: 600;
    padding: 12px 2px; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: .15s;
}
.subtab:hover { color: var(--text); }
.subtab.is-active { color: var(--text); border-bottom-color: var(--accent); }
.subpane { display: none; }
.subpane.is-active { display: block; animation: fade .2s ease; }

/* ── Tarjetas ───────────────────────────────────────────────────────────── */
.card {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 20px; margin-bottom: 16px;
}
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.card-title { font-size: 1.05rem; font-weight: 700; margin: 0; }
.card-sub { font-size: .86rem; color: var(--muted); margin: 2px 0 16px; }
.eyebrow { font-size: .7rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--faint); margin-bottom: 8px; font-weight: 600; }
.hr { height: 1px; background: var(--border); border: 0; margin: 16px 0; }

/* ── Botones ────────────────────────────────────────────────────────────── */
.btn {
    font-family: var(--font); font-weight: 600; font-size: .88rem;
    border: 1px solid transparent; border-radius: var(--radius-s);
    padding: 10px 18px; cursor: pointer; line-height: 1; display: inline-flex; align-items: center; gap: 8px;
    justify-content: center; text-decoration: none; white-space: nowrap; transition: .15s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-2); }
.btn-ghost { background: transparent; border-color: var(--border); color: var(--text); }
.btn-ghost:hover { background: var(--elev); }
.btn-danger { background: var(--danger-dim); border-color: rgba(255,107,107,.4); color: #ffb0b0; }
.btn-danger:hover { background: rgba(255,107,107,.2); color: #fff; }
.btn-on { background: var(--on-dim); border-color: rgba(52,211,153,.4); color: #8ff0cf; }
.btn-sm { padding: 8px 13px; font-size: .82rem; }
.btn-block { width: 100%; }

/* ── Formularios ────────────────────────────────────────────────────────── */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: .8rem; color: var(--muted); margin-bottom: 6px; font-weight: 600; }
.input, select.input {
    width: 100%; font-family: var(--font); font-size: .95rem; color: var(--text);
    background: #0f1218; border: 1px solid var(--border); border-radius: var(--radius-s); padding: 11px 13px; outline: none;
    transition: .15s;
}
.input::placeholder { color: var(--faint); }
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--muted); cursor: pointer; }
.check input { accent-color: var(--accent); width: 16px; height: 16px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }

/* ── Alertas / estado ───────────────────────────────────────────────────── */
.alert { border-radius: var(--radius-s); padding: 11px 14px; font-size: .9rem; margin-bottom: 14px; border: 1px solid transparent; }
.alert-ok { background: var(--on-dim); border-color: rgba(52,211,153,.35); color: #a9f0d6; }
.alert-err { background: var(--danger-dim); border-color: rgba(255,107,107,.4); color: #ffbcbc; }
.status { font-size: .88rem; min-height: 1.2em; margin-top: 10px; }
.status.ok { color: var(--on); } .status.err { color: var(--danger); }

/* ── Badges ─────────────────────────────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; font-weight: 600;
    padding: 4px 10px; border-radius: 999px; border: 1px solid transparent; }
.badge-owner { color: #ffe9b0; background: rgba(230,180,90,.16); border-color: rgba(230,180,90,.35); }
.badge-admin { color: #c9beff; background: var(--accent-dim); border-color: rgba(124,108,255,.4); }
.badge-mago  { color: var(--muted); background: rgba(255,255,255,.05); border-color: var(--border); }
.badge-on    { color: #a9f0d6; background: var(--on-dim); border-color: rgba(52,211,153,.35); }
.badge-off   { color: var(--faint); background: rgba(255,255,255,.04); border-color: var(--border); }
.badge-count { color: #fff; background: var(--accent); border-color: transparent; font-variant-numeric: tabular-nums; min-width: 26px; justify-content: center; }

/* ── Interruptor Escuchador ─────────────────────────────────────────────── */
.listen { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.listen-info { display: flex; align-items: center; gap: 14px; }
.listen-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--faint); transition: .3s; }
.listen.on .listen-dot { background: var(--on); box-shadow: 0 0 0 4px var(--on-dim), 0 0 14px 2px rgba(52,211,153,.5); }
.listen-label { font-size: .82rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.listen.on .listen-label { color: var(--on); }

.switch { position: relative; width: 116px; height: 42px; border-radius: 999px; border: 1px solid var(--border);
    background: #0f1218; cursor: pointer; flex: 0 0 auto; transition: .2s; }
.switch-track { position: absolute; inset: 0; display: flex; align-items: center; }
.switch-txt { flex: 1; text-align: center; font-size: .72rem; letter-spacing: 1px; font-weight: 700; z-index: 2; transition: .2s; }
.switch-txt.off-lbl { color: var(--text); } .switch-txt.on-lbl { color: var(--faint); }
.switch-knob { position: absolute; top: 3px; left: 3px; width: 56px; height: 34px; border-radius: 999px;
    background: var(--elev); border: 1px solid var(--border); transition: .25s cubic-bezier(.4,1.2,.5,1); z-index: 1; }
.listen.on .switch { border-color: rgba(52,211,153,.45); background: var(--on-dim); }
.listen.on .switch-knob { left: 57px; background: var(--on); border-color: transparent; }
.listen.on .switch-txt.off-lbl { color: var(--faint); }
.listen.on .switch-txt.on-lbl { color: #0e2a20; }

/* ── Revelación ─────────────────────────────────────────────────────────── */
.reveal { text-align: center; padding: 26px 16px; }
.reveal-eyebrow { font-size: .72rem; letter-spacing: 2px; text-transform: uppercase; color: var(--faint); margin-bottom: 12px; font-weight: 600; }
.reveal-word { font-weight: 800; font-size: clamp(2rem, 7vw, 3.6rem); line-height: 1.1; color: #fff; word-break: break-word;
    transition: opacity .3s, transform .3s; }
.reveal-word.dim { color: var(--faint); font-weight: 600; }
.reveal-word.flash { animation: reveal .45s ease; }
@keyframes reveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; } }
.reveal-time { margin-top: 10px; font-size: .82rem; color: var(--faint); font-variant-numeric: tabular-nums; }

/* Peek de palabra (palabra resaltada por el espectador) */
.reveal-peek { margin-top: 12px; font-size: 1.15rem; color: var(--on); font-weight: 700;
    opacity: 0; transform: translateY(4px); transition: .3s; }
.reveal-peek.show { opacity: 1; transform: none; }
.reveal-peek.flash { animation: reveal .45s ease; }
.reveal-peek b { color: #fff; background: var(--on-dim); padding: 3px 12px; border-radius: 9px;
    border: 1px solid rgba(52,211,153,.45); margin-left: 4px; }
.peek-word { margin-top: 5px; font-size: .9rem; color: var(--on); font-weight: 700; }

/* ── Tablas ─────────────────────────────────────────────────────────────── */
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; }
.tbl thead th { text-align: left; font-size: .72rem; letter-spacing: .5px; text-transform: uppercase; color: var(--faint);
    font-weight: 600; padding: 9px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.tbl tbody td { padding: 12px 10px; border-bottom: 1px solid var(--border-2); vertical-align: middle; }
.tbl tbody tr:last-child td { border-bottom: none; }
.col-n { color: var(--faint); font-variant-numeric: tabular-nums; width: 42px; }
.col-word { font-size: 1.02rem; font-weight: 600; color: #fff; word-break: break-word; }
.col-time { color: var(--faint); font-size: .82rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tbl-empty td { color: var(--faint); text-align: center; padding: 22px 10px; }
.row-flash { animation: rowFlash 1s ease; }
@keyframes rowFlash { 0% { background: var(--accent-dim); } 100% { background: transparent; } }

/* ── Historial (log) ────────────────────────────────────────────────────── */
.log { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow-y: auto; }
.log li { display: flex; align-items: baseline; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--border-2); }
.log li:last-child { border-bottom: none; }
.log-time { font-size: .76rem; color: var(--faint); font-variant-numeric: tabular-nums; flex: 0 0 auto; width: 66px; }
.log-datos { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
/* Arriba lo escrito (es el dato grande, el que el espectador tecleó). */
.log-typed { font-size: 1rem; color: var(--text); font-weight: 700; word-break: break-word; }
/* Abajo, en una línea: resultado elegido · palabra marcada. */
.log-abajo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.log-art { font-size: .86rem; color: var(--muted); word-break: break-word; }
.log-flecha { color: var(--faint); font-size: .8rem; }
.log-peek { font-size: .86rem; color: var(--on); font-weight: 700; }
/* Fila de la tabla en vivo: el resultado elegido, bajo lo tecleado. */
.row-art { font-size: .82rem; color: var(--muted); margin-top: 2px; }
.log-empty { color: var(--faint); padding: 16px 4px; }

/* ── Emparejar (QR + enlace) ────────────────────────────────────────────── */
.pair { display: grid; grid-template-columns: 156px 1fr; gap: 20px; align-items: center; }
.qr-frame { width: 156px; height: 156px; border-radius: var(--radius-s); padding: 11px; background: #fff; display: grid; place-items: center; }
.qr-frame img, .qr-frame canvas { width: 100% !important; height: 100% !important; }
.link-row { display: flex; gap: 8px; margin: 12px 0; }

/* ── Rejillas / utilidades ──────────────────────────────────────────────── */
.grid { display: grid; gap: 16px; }
@media (min-width: 820px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
.stack { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.stat { display: flex; align-items: center; justify-content: space-between; }
.stat-num { font-size: 2rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); } .code { color: var(--accent-2); font-weight: 600; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 620px) {
    .appmain { padding: 14px; }
    .card { padding: 16px; }
    .pair { grid-template-columns: 1fr; justify-items: center; text-align: center; }
    .qr-frame { width: 180px; height: 180px; }
    .link-row { width: 100%; }
    .tabset { display: flex; width: 100%; }
    .tab { flex: 1; text-align: center; padding: 9px 8px; }
    .subtabs { gap: 14px; }
}

/* ── Botón "ver contraseña" ─────────────────────────────────────────────── */
.pass-wrap { position: relative; display: block; }
.pass-wrap .input { width: 100%; padding-right: 44px; }
.pass-toggle {
    position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; padding: 0;
    background: none; border: 0; border-radius: 8px; cursor: pointer;
    color: var(--faint); transition: color .15s ease, background .15s ease;
}
.pass-toggle:hover  { color: var(--text); background: var(--surface-2, rgba(255,255,255,.06)); }
.pass-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* El isotipo ya trae fondo y esquinas propias: el contenedor no debe duplicarlos. */
.brand-badge.is-logo, .brand-mark.is-logo { background: none; border: 0; padding: 0; }
.brand-badge.is-logo img, .brand-mark.is-logo img { display: block; border-radius: 10px; }

/* ── Revelación en tres zonas ───────────────────────────────────────────────
   Arriba lo que ESCRIBE (grande, es lo que cambia en vivo); abajo, lado a
   lado, el resultado que ELIGIÓ y la palabra que MARCÓ en el artículo.
   El orden refleja la secuencia real del efecto.                          */
.reveal-par {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch;
    gap: 18px; margin-top: 22px; padding-top: 20px;
    border-top: 1px solid var(--border-2);
}
.reveal-col { min-width: 0; display: flex; flex-direction: column; justify-content: flex-start; }
.reveal-col .reveal-eyebrow { margin-bottom: 8px; }
.reveal-sep { width: 1px; background: var(--border); align-self: stretch; }
.reveal-sub {
    font-weight: 750; font-size: clamp(1.05rem, 2.6vw, 1.6rem); line-height: 1.25;
    color: #fff; word-break: break-word;
}
.reveal-sub.dim { color: var(--faint); font-weight: 600; }
.reveal-sub.flash { animation: reveal .45s ease; }
.reveal-sub.is-peek:not(.dim) {
    color: #fff; background: var(--on-dim); border-radius: 10px;
    padding: 5px 12px; display: inline-block; align-self: center;
}

/* En móvil se apilan y la línea divisoria pasa a ser horizontal. */
@media (max-width: 560px) {
    .reveal-par { grid-template-columns: 1fr; gap: 14px; }
    .reveal-sep { width: auto; height: 1px; }
}

/* ── Salida de emergencia y laboratorio ─────────────────────────────────── */
.btn-panico { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.42); color: #fca5a5; }
.btn-panico:hover:not(:disabled) { background: rgba(239,68,68,.2); color: #fecaca; }
.btn-panico:disabled { opacity: .65; cursor: default; }

.tag-exp {
    display: inline-block; vertical-align: middle; margin-left: 8px;
    font-size: .62rem; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 700;
    color: #fbbf24; background: rgba(251,191,36,.13); border: 1px solid rgba(251,191,36,.34);
    padding: 3px 8px; border-radius: 999px;
}
.cfg-fila { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
.cfg-texto { flex: 1 1 200px; min-width: 0; }
.cfg-estado { font-weight: 700; color: var(--faint); font-size: .92rem; }
.cfg-estado.ok { color: var(--on); }
.cfg-aviso:empty { display: none; }
.cfg-aviso { margin-top: 12px; font-size: .84rem; color: var(--faint); }
.cfg-aviso.warn { color: #fbbf24; }
.is-off { opacity: .45; pointer-events: none; }

/* ── Barra de las páginas públicas (comprar / activar / gracias) ─────────── */
.nav-pub {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    max-width: 980px; margin: 0 auto; padding: 14px 18px;
    border-bottom: 1px solid var(--border-2);
}
.nav-pub-marca { display: flex; align-items: center; gap: 11px; text-decoration: none; min-width: 0; }
.nav-pub-marca img { display: block; border-radius: 9px; flex: 0 0 auto; }
.nav-pub-nombre { display: block; font-weight: 700; font-size: 1rem; color: var(--text); line-height: 1.2; }
.nav-pub-sub {
    display: block; font-size: .66rem; letter-spacing: 1.6px; text-transform: uppercase;
    color: var(--faint); line-height: 1.4;
}
.nav-pub-marca:hover .nav-pub-nombre { color: #fff; }
.nav-pub-acciones { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

/* En pantallas chicas se cae el enlace secundario para que no se apriete. */
@media (max-width: 460px) {
    .nav-pub { padding: 12px 14px; }
    .nav-pub-acciones .btn-ghost { display: none; }
    .nav-pub-sub { display: none; }
}

/* ── Indicador de modo de Stripe (solo admin) ───────────────────────────── */
.modo-stripe { margin: 14px 0 4px; padding: 11px 14px; border-radius: 10px;
    font-size: .88rem; line-height: 1.5; border: 1px solid; }
.modo-stripe.es-prueba { background: rgba(251,191,36,.10); border-color: rgba(251,191,36,.34); color: #fcd34d; }
.modo-stripe.es-live   { background: rgba(52,211,153,.10); border-color: rgba(52,211,153,.34); color: #6ee7b7; }

/* ── Eliminar mago (acción irreversible) ────────────────────────────────── */
.btn-borrar { background: rgba(239,68,68,.14); border-color: rgba(239,68,68,.5); color: #fca5a5; }
.btn-borrar:hover { background: rgba(239,68,68,.26); color: #fecaca; }
.input-xs {
    display: inline-block; width: 210px; padding: 6px 10px; font-size: .8rem;
    vertical-align: middle; margin-right: 6px;
}
@media (max-width: 900px) { .input-xs { width: 100%; margin: 6px 0; } }

/* ── Enlace mostrado al activar la cuenta ───────────────────────────────── */
.enlace-nuevo {
    margin: 4px 0 18px; padding: 11px 14px; border-radius: 10px;
    background: var(--surface-2); border: 1px solid var(--border);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .92rem; color: var(--accent-2); word-break: break-all;
}

/* ── Pago por transferencia (tarjeta en /comprar) ───────────────────────── */
.card-transfer { margin-top: 18px; }
.precio-transfer { color: var(--on); font-size: 1.05rem; }

.datos-banco { margin: 16px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 9px 16px; align-items: baseline; }
.datos-banco dt { color: var(--faint); font-size: .78rem; text-transform: uppercase; letter-spacing: 1px; white-space: nowrap; }
.datos-banco dd { margin: 0; color: var(--text); font-size: .95rem; word-break: break-word; }
.datos-banco .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .5px; }
.datos-banco .nota-dato { display: block; color: var(--faint); font-size: .76rem; margin-top: 2px; }

.btn-copiar {
    margin-left: 8px; padding: 3px 9px; font-size: .72rem; font-weight: 600; cursor: pointer;
    color: var(--accent-2); background: var(--accent-dim);
    border: 1px solid rgba(124,108,255,.4); border-radius: 6px;
    transition: background .15s ease, color .15s ease;
}
.btn-copiar:hover { background: rgba(124,108,255,.24); color: #fff; }
.btn-copiar.ok { color: var(--on); background: var(--on-dim); border-color: rgba(52,211,153,.45); }

.pasos-transfer { margin: 18px 0 14px; color: var(--muted); font-size: .92rem; line-height: 1.65; }

/* Verde de WhatsApp: el usuario reconoce el destino antes de leer el botón. */
.btn-wa { background: #25d366; border-color: #25d366; color: #06301a; font-weight: 700; }
.btn-wa:hover { background: #1fbb59; border-color: #1fbb59; color: #04240f; }

@media (max-width: 520px) {
    .datos-banco { grid-template-columns: 1fr; gap: 3px 0; }
    .datos-banco dt { margin-top: 10px; }
}

/* ── /comprar: las dos formas de pago, lado a lado ──────────────────────── */
.compra-wrap { max-width: 900px; margin: 0 auto; padding: 7vh 18px 40px; }
.compra-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
    align-items: stretch; /* las dos columnas al mismo alto */
}
.compra-grid .card { margin: 0; }
.card-transfer { margin-top: 0; }

/* Apiladas en pantallas donde dos columnas no caben con dignidad. */
@media (max-width: 860px) {
    .compra-grid { grid-template-columns: 1fr; gap: 16px; }
    .compra-wrap { max-width: 460px; padding-top: 5vh; }
}

/* -- Paginas legales ----------------------------------------------------- */
.legal-wrap { max-width: 780px; margin: 0 auto; padding: 6vh 20px 60px; }
.legal-h1 { font-size: clamp(1.7rem, 4vw, 2.2rem); font-weight: 800; margin: 0 0 6px; color: #fff; }
.legal-fecha { color: var(--faint); font-size: .86rem; margin: 0 0 30px; }
.legal { color: var(--muted); line-height: 1.75; font-size: .97rem; }
.legal h2 {
    color: #fff; font-size: 1.05rem; font-weight: 700; margin: 32px 0 10px;
    padding-top: 20px; border-top: 1px solid var(--border-2);
}
.legal h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal p { margin: 0 0 13px; }
.legal b { color: var(--text); }
.legal ul { margin: 0 0 14px; padding-left: 20px; }
.legal li { margin-bottom: 7px; }
.legal a { color: var(--accent-2); }
.legal code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em;
    background: var(--surface-2); padding: 2px 6px; border-radius: 5px;
}
.legal-cierre {
    margin-top: 30px; padding: 15px 17px; border-radius: 11px;
    background: var(--surface); border: 1px solid var(--border); color: var(--text);
}

/* Leyenda de aceptacion bajo cada forma de pago */
.acepta-legal {
    margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-2);
    font-size: .76rem; line-height: 1.6; color: var(--faint); text-align: center;
}
.acepta-legal a { color: var(--muted); text-decoration: underline; }
.acepta-legal a:hover { color: var(--accent-2); }

/* -- Switch del dictado -------------------------------------------------- */
/* El del escuchador se mueve con la clase .listen.on de un ancestro; este no
   tiene ese envoltorio, asi que se acciona con su propio aria-checked. Va por
   id para no interferir con el otro switch. */
/* Vale para CUALQUIER interruptor de configuracion, no solo el del dictado.
   Antes esto colgaba de #vozToggle y el siguiente que se anadiera nacia sin
   animacion: encendia por dentro y no se movia por fuera.

   Se acota a .cfg-fila para no pisar el interruptor del escuchador, que es
   verde y se gobierna desde .listen.on. */
.cfg-fila .switch[aria-checked="true"] { border-color: rgba(124,108,255,.5); background: var(--accent-dim); }
.cfg-fila .switch[aria-checked="true"] .switch-knob { left: 57px; background: var(--accent); border-color: transparent; }
.cfg-fila .switch[aria-checked="true"] .switch-txt.off-lbl { color: var(--faint); }
.cfg-fila .switch[aria-checked="true"] .switch-txt.on-lbl { color: #fff; }

/* ── Tablero de administración ──────────────────────────────────────────── */
@media (min-width: 700px)  { .grid-4 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }
.stat-ico { font-size: 1.8rem; opacity: .6; line-height: 1; }
.col-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.salud-grid {
    display: grid; gap: 12px; margin-top: 14px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.salud-item {
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: var(--radius-s); padding: 12px 14px;
}
.salud-val {
    font-size: 1.35rem; font-weight: 700; color: var(--text);
    font-variant-numeric: tabular-nums; margin-top: 2px;
}
.salud-val small { font-size: .8rem; font-weight: 600; color: var(--muted); }
.salud-val.alerta { color: var(--danger); }
.salud-sub { font-size: .74rem; color: var(--muted); margin-top: 3px; }
.salud-log {
    margin-top: 14px; padding: 10px 12px; font-size: .74rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--muted); background: var(--bg);
    border: 1px solid var(--border); border-radius: var(--radius-s);
    overflow-x: auto; white-space: pre;
}

.lic-nota { font-size: .7rem; color: var(--muted); margin-top: 4px; max-width: 190px; }

.salud-lista { margin: 12px 0 0; padding-left: 18px; font-size: .82rem; }
.salud-lista li { margin-bottom: 5px; }
.salud-lista .es-fallo { color: var(--danger); font-weight: 600; }
.salud-lista .es-aviso { color: var(--muted); }
.salud-nota { margin: 12px 0 0; font-size: .76rem; color: var(--muted); line-height: 1.5; }

/* Comprobacion previa: una frase, no un informe tecnico */
.prueba-zona { margin-top: 12px; }
.prueba-res {
    display: flex; align-items: flex-start; gap: 9px; flex-wrap: wrap;
    padding: 10px 13px; border-radius: var(--radius-s);
    border: 1px solid var(--border); background: var(--surface-2);
    font-size: .86rem; line-height: 1.45;
}
.prueba-res.es-ok    { border-color: rgba(52,211,153,.3); background: var(--on-dim); }
.prueba-res.es-aviso { border-color: rgba(245,190,90,.35); background: rgba(245,190,90,.10); }
.prueba-res.es-mal   { border-color: rgba(255,107,107,.4); background: var(--danger-dim); }
.prueba-icono { font-weight: 700; line-height: 1.4; }
.es-ok .prueba-icono    { color: var(--on); }
.es-aviso .prueba-icono { color: #f5be5a; }
.es-mal .prueba-icono   { color: var(--danger); }
.prueba-texto { flex: 1 1 200px; color: var(--text); }
.es-ok .prueba-texto { color: #a9f0d6; }
.prueba-cargando { color: var(--muted); font-style: italic; }
/* El enlace de repetir queda deliberadamente discreto: la comprobacion ya
   corre sola, esto es solo para reconfirmar despues de arreglar algo. */
.prueba-repetir {
    background: none; border: 0; padding: 0; cursor: pointer;
    color: var(--muted); font-size: .76rem; text-decoration: underline;
    font-family: inherit; align-self: center;
}
.prueba-repetir:hover { color: var(--text); }
.prueba-detalles { flex-basis: 100%; margin-top: 6px; font-size: .78rem; }
.prueba-detalles summary { color: var(--muted); cursor: pointer; }
.prueba-detalles ul { margin: 6px 0 0; padding-left: 4px; list-style: none; }
.prueba-detalles li.ok  { color: var(--muted); }
.prueba-detalles li.mal { color: var(--danger); font-weight: 600; }
.prueba-detalles i { font-style: normal; opacity: .6; }

.aviso-enlace { display: inline-block; margin-top: 6px; color: #ffbcbc; font-weight: 600; }

/* Reconocer un requisito pendiente es mas defendible que disimularlo. */
.legal-pendiente { background: rgba(245,190,90,.10); border-left: 3px solid rgba(245,190,90,.5); padding: 10px 14px; margin: 12px 0; font-size: .88rem; color: var(--muted); border-radius: 0 var(--radius-s) var(--radius-s) 0; }

/* ── Configuracion: una sola columna ─────────────────────────────────────── */
/* En dos columnas las tarjetas tenian alturas muy distintas y quedaba un hueco
   enorme debajo de la mas corta: parecia que algo se habia roto. Una columna
   centrada se lee en orden, cae bien en el telefono y no hay nada que cuadrar. */
.cfg-col { display:flex; flex-direction:column; gap:16px; max-width:680px; margin:0 auto; }

/* ── Sesion y accesos recientes ──────────────────────────────────────────── */
.disp-lista { display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.disp-fila {
    display:flex; align-items:center; gap:10px;
    padding:10px 12px;
    background:var(--surface-2);
    border:1px solid var(--border);
    border-radius:var(--radius-s);
}
/* El acceso que cerro OTRO aparato es el unico que hay que mirar dos veces. */
.disp-fila.disp-aviso { border-color:var(--danger); }
.disp-datos { flex:1 1 auto; min-width:0; }
.disp-nombre { font-weight:600; font-size:.92rem; }
/* La IPv6 es larga y en el telefono no cabe: que parta y no desborde. */
.disp-meta { color:var(--faint); font-size:.76rem; margin-top:2px; word-break:break-all; }
.disp-marca {
    flex:0 0 auto;
    background:var(--accent-dim); color:var(--accent);
    border-radius:999px; padding:2px 9px;
    font-size:.68rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
}
.disp-titulo {
    margin:20px 0 2px;
    font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
    color:var(--muted);
}
.disp-vacio { font-size:.86rem; margin:0; }

/* ── Instalar el acceso directo ──────────────────────────────────────────── */
/* display:inline-flex pisaria el [hidden] del navegador, asi que se repone a
   mano. Sin esto el boton se veria siempre, incluso donde no se puede instalar. */
.pwa-zona { display:inline-flex; align-items:center; gap:8px; }
.pwa-zona[hidden] { display:none; }
.pwa-nota { color:var(--faint); font-size:.8rem; margin:10px 0 0; }
.pwa-nota:empty { display:none; }

/* ── Panel aligerado ─────────────────────────────────────────────────────── */
/* El aviso de "todo listo" pasa a encabezar la tarjeta. */
.prueba-arriba { margin-bottom:14px; }
.prueba-arriba:empty { display:none; }
/* .badge es inline-flex y eso pisaria el [hidden] del navegador. */
.badge[hidden] { display:none; }

/* ── Cupo de lugares y desglose de precio ────────────────────────────────── */
.cupo {
    display:flex; align-items:center; gap:12px;
    margin:14px 0 18px; padding:12px 14px;
    background:var(--surface-2);
    border:1px solid var(--border);
    border-left:3px solid var(--accent);
    border-radius:var(--radius-s);
}
/* Cuando quedan pocos se subraya en ambar, y agotado en rojo. El color hace
   el trabajo sin tener que escribir letreros de urgencia. */
.cupo.cupo-poco  { border-left-color:#e0a020; }
.cupo.cupo-lleno { border-left-color:var(--danger); }
.cupo-num { font-size:2.1rem; font-weight:800; line-height:1; color:var(--accent); }
.cupo-poco  .cupo-num { color:#e0a020; }
.cupo-lleno .cupo-num { color:var(--danger); }
.cupo-txt { font-size:.86rem; color:var(--muted); line-height:1.35; }

.desglose { width:100%; border-collapse:collapse; font-size:.9rem; margin-top:4px; }
.desglose td { padding:7px 0; color:var(--muted); border-bottom:1px solid var(--border); }
.desglose td:last-child { text-align:right; color:var(--text); white-space:nowrap; }
.desglose .desglose-tit {
    padding:14px 0 6px; text-align:left;
    font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
    color:var(--faint); border-bottom:1px solid var(--border);
}
.desglose .cero { color:var(--on); }
.desglose tfoot td { padding-top:12px; border-bottom:none; font-size:1rem; }
.desglose-total { font-size:1.35rem !important; font-weight:800; color:var(--text) !important; }

/* ── Pistas de la revelacion ─────────────────────────────────────────────── */
/* Deliberadamente discretas: son material para hablar, no el dato del efecto.
   Si compitieran en tamano con la palabra, el ojo iria al sitio equivocado
   justo cuando hay publico delante. */
.reveal-pista {
    margin-top:8px;
    font-size:.8rem; line-height:1.4;
    color:var(--faint);
    max-width:34ch;
}
.reveal-pista:empty { display:none; }

/* La palabra marcada, dentro de su frase. */
.pista-marca {
    color:var(--on);
    background:var(--on-dim);
    border-radius:3px;
    padding:1px 3px;
    font-weight:600;
}

/* Ya se decidio: lleva 5 s sin cambiar. Es un borde, no un cartel — tiene que
   verse de reojo desde un metro sin robarle la atencion a la palabra. */
.reveal { border:1px solid transparent; border-radius:var(--radius); transition:border-color .5s ease; }
.reveal.listo { border-color:var(--on); }

/* ── Revelacion por capas ────────────────────────────────────────────────── */
/* La tarjeta entera es zona de toque cuando el modo esta activo: en escena hay
   que poder avanzar sin apuntar, incluso con el telefono medio tapado. */
.reveal.modo-capas { cursor: pointer; user-select: none; -webkit-user-select: none; }
.reveal.modo-capas:active { background: var(--surface-2); }

#revelaCapas { text-align: center; padding: 18px 10px 6px; min-height: 150px;
               display: flex; flex-direction: column; justify-content: center; }
.capa-eti { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
            color: var(--faint); margin-bottom: 10px; }
.capa-txt { font-size: 1.9rem; font-weight: 800; line-height: 1.2; }
/* Las capas de contexto son para leer, no para golpear: bajan de tamano. */
.capa-txt.chico { font-size: 1rem; font-weight: 500; color: var(--muted); line-height: 1.5;
                  max-width: 46ch; margin: 0 auto; }
.capa-txt.final { color: var(--accent); }
.capa-txt.final-peek { color: var(--on); }
.capa-txt.dim { color: var(--faint); font-size: 1.1rem; font-weight: 500; }
.capa-barra { display: flex; gap: 5px; justify-content: center; margin-top: 16px; }
.capa-punto { width: 7px; height: 7px; border-radius: 50%; background: var(--border); }
.capa-punto.on { background: var(--accent); }

/* La palabra marcada, resaltada dentro del contexto: el resto de la frase va en
   gris apagado y ella en verde, el mismo color con el que sale el remate. Se
   reconoce a un metro de distancia sin tener que leer la frase entera. */
.capa-marca {
    color: var(--on);
    background: var(--on-dim);
    font-weight: 700;
    border-radius: 3px;
    padding: 1px 4px;
}

/* Hueco entre el grupo del tema y el de la palabra marcada. */
.capa-corte { flex: 0 0 16px; }

/* ══════════════════ Predicción ══════════════════ */

/* En escena. Va encima de la lectura en vivo porque cuando el espectador pulsa
   la aleatoria esto es lo primero que hay que mirar. */
.pred-vivo { border-color: rgba(124,108,255,.35); }
.pred-pasos { display: flex; gap: 8px; margin: 4px 0 12px; flex-wrap: wrap; }
.pred-punto {
    width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .78rem; font-weight: 700;
    background: var(--surface-2); color: var(--faint);
    border: 1px solid var(--border);
}
.pred-punto.on { background: var(--accent); border-color: transparent; color: #fff; }
.pred-nota { font-size: .88rem; color: var(--muted); line-height: 1.45; }

/* Agotada: el mago tiene que enterarse sin leer. */
.pred-vivo.pred-quemada { border-color: rgba(248,113,113,.55); background: rgba(248,113,113,.06); }
.pred-quemada .pred-nota { color: #fca5a5; font-weight: 600; }
.pred-quemada .pred-punto.on { background: #f87171; }

/* En preparación. */
.pred-slot { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.pred-num {
    flex: 0 0 22px; height: 22px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--surface-2); border: 1px solid var(--border);
    font-size: .72rem; font-weight: 700; color: var(--faint);
}
.pred-in { flex: 1 1 auto; min-width: 0; }
.btn-mini { padding: 6px 10px; font-size: .78rem; white-space: nowrap; }
.pred-ver { flex: 0 0 auto; font-size: .78rem; color: var(--accent); text-decoration: none; }
.pred-ver:hover { text-decoration: underline; }
.pred-ver.off { color: var(--faint); pointer-events: none; }
.pred-acciones { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.cfg-aviso-err { color: #fca5a5; }

@media (max-width: 560px) {
    .pred-slot { flex-wrap: wrap; }
    .pred-in { flex: 1 1 100%; order: 3; }
}
/* La página que abrió el dado: es el dato del efecto, así que va grande. */
.pred-art { font-size: 1.5rem; font-weight: 800; line-height: 1.2; margin: 2px 0 6px; }
.pred-art:empty { display: none; }
.pred-res { font-size: .85rem; color: var(--muted); line-height: 1.45; margin-bottom: 10px; }
.pred-res:empty { display: none; }
.pred-quemada .pred-art { color: #fca5a5; }

/* En el historial, lo que salió del dado lleva su etiqueta. */
.log-eti {
    display: inline-block; margin-right: 8px; padding: 1px 7px; border-radius: 999px;
    background: var(--accent-dim); color: var(--accent);
    font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}

/* ── El [hidden] manda ────────────────────────────────────────────────────
   El navegador aplica display:none a [hidden] desde su hoja por defecto, y eso
   pierde contra CUALQUIER regla nuestra que fije display. Ya habia mordido a
   .pwa-zona, a .badge y a #revelaCapas —este ultimo dejaba un "Esperando"
   colgando debajo de la lectura en vivo con el modo por capas apagado—, asi
   que en vez de ir parcheando selectores sueltos se corta de raiz.

   Va al final del archivo y con !important porque tiene que ganarle tambien a
   los selectores de ID. */
[hidden] { display: none !important; }

/* Casilla con un título que no existe en Wikipedia. */
.pred-in.pred-mal { border-color: rgba(248,113,113,.65); background: rgba(248,113,113,.07); }