/* ============================================================================
   app.css – Base, componentes y layouts (público, portal, panel).
   Sistema de Gimnasio. Depende de variables.css.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
/* El atributo HTML `hidden` SIEMPRE oculta, aunque la clase defina display
   (si no, .tk__overlay/.tv-start con display:grid tapaban la pantalla). */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    font-family: var(--font-sans);
    color: var(--text);
    background: var(--bg);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; }
a { color: var(--brand-link); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.15; font-weight: 700; color: var(--ink); }
h1 { font-size: clamp(2rem, 5vw, 3.2rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
h3 { font-size: 1.25rem; }
.ico { width: 20px; height: 20px; flex: none; }
.contenedor { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: 20px; }
.seccion { padding-block: clamp(48px, 8vw, 96px); }
.centro { text-align: center; }
.muted { color: var(--muted); }
.tag {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--primary); background: var(--red-50);
    padding: 6px 12px; border-radius: 999px;
}

/* ── Botones ───────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: var(--font-head); font-weight: 700; font-size: .98rem;
    padding: 13px 26px; border-radius: var(--r-sm); border: 2px solid transparent;
    cursor: pointer; transition: transform .12s ease, box-shadow .2s ease, background .2s;
    text-decoration: none; white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn--primary { background: var(--primary); color: #fff; box-shadow: 0 8px 22px rgba(230,57,70,.35); }
.btn--primary:hover { background: var(--primary-d); }
.btn--dark { background: var(--coal-800); color: #fff; }
.btn--dark:hover { background: var(--coal-900); }
.btn--ghost { background: transparent; border-color: var(--border); color: var(--ink); }
.btn--ghost:hover { border-color: var(--primary); color: var(--primary); }
.btn--accent { background: var(--accent); color: var(--coal-900); }
.btn--block { width: 100%; }
.btn--sm { padding: 8px 16px; font-size: .85rem; }

/* ── Navbar público ────────────────────────────────────────────────────── */
.nav {
    position: sticky; top: 0; z-index: 40;
    height: var(--nav-h); background: rgba(14,15,18,.92); backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.nav__in { height: 100%; display: flex; align-items: center; gap: 28px; }
.nav__logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 800; font-size: 1.2rem; color: #fff; }
.nav__logo:hover { text-decoration: none; }
.nav__logo b { color: var(--primary); }
.nav__links { display: flex; gap: 24px; margin-left: auto; align-items: center; }
.nav__links a { color: #cfd3da; font-weight: 600; font-size: .95rem; }
.nav__links a:hover { color: #fff; text-decoration: none; }
.nav__toggle { display: none; background: none; border: 0; color: #fff; cursor: pointer; }

/* ── Hero ──────────────────────────────────────────────────────────────── */
.hero {
    position: relative; color: #fff; overflow: hidden;
    background: radial-gradient(120% 120% at 80% 0%, var(--red-700) 0%, var(--coal-900) 55%);
}
.hero__in { display: grid; gap: 28px; padding-block: clamp(56px, 9vw, 120px); }
.hero h1 { color: #fff; max-width: 16ch; }
.hero h1 em { color: var(--primary); font-style: normal; }
.hero p { font-size: 1.15rem; color: #d6d9df; max-width: 52ch; }
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.hero__stats { display: flex; gap: 40px; margin-top: 26px; flex-wrap: wrap; }
.hero__stats b { font-family: var(--font-head); font-size: 2rem; color: var(--accent); display: block; }
.hero__stats span { color: #b9bdc6; font-size: .9rem; }

/* ── Tarjetas / grids ──────────────────────────────────────────────────── */
.grid { display: grid; gap: 22px; }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.card {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
    padding: 26px; box-shadow: var(--shadow-sm); transition: transform .15s, box-shadow .2s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.card__icon {
    width: 52px; height: 52px; border-radius: var(--r-md); display: grid; place-items: center;
    background: var(--red-50); color: var(--primary); margin-bottom: 14px; font-size: 1.5rem;
}

/* ── Planes (pricing) ──────────────────────────────────────────────────── */
.plan {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
    padding: 30px; display: flex; flex-direction: column; gap: 14px; position: relative;
    box-shadow: var(--shadow-sm);
}
.plan--top { border-color: var(--primary); box-shadow: 0 16px 40px rgba(230,57,70,.18); }
.plan__badge {
    position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
    background: var(--primary); color: #fff; font-size: .72rem; font-weight: 800;
    letter-spacing: .08em; text-transform: uppercase; padding: 6px 14px; border-radius: 999px;
}
.plan__price { font-family: var(--font-head); font-size: 2.6rem; font-weight: 800; color: var(--ink); }
.plan__price small { font-size: .9rem; font-weight: 600; color: var(--muted); }
.plan__list { list-style: none; padding: 0; display: grid; gap: 10px; margin-top: 4px; }
.plan__list li { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; color: var(--gray-700); }
.plan__list svg { color: var(--ok); margin-top: 2px; }
.plan__cta { margin-top: auto; }

/* ── Franja carbón / CTA ───────────────────────────────────────────────── */
.franja { background: var(--coal-900); color: #fff; }
.franja h2 { color: #fff; }
.franja p { color: #c5c9d1; }

/* ── Formularios ───────────────────────────────────────────────────────── */
.form { display: grid; gap: 16px; }
.campo { display: grid; gap: 6px; }
.campo label { font-weight: 600; font-size: .9rem; color: var(--gray-700); }
.campo input, .campo select, .campo textarea {
    width: 100%; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: var(--r-sm);
    font: inherit; color: var(--text); background: #fff; transition: border-color .15s, box-shadow .15s;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
    outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(230,57,70,.15);
}
.form__fila { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ── Alertas ───────────────────────────────────────────────────────────── */
.alerta { padding: 12px 16px; border-radius: var(--r-sm); font-size: .92rem; font-weight: 500; }
.alerta--error { background: var(--danger-soft); color: var(--danger-ink); }
.alerta--ok { background: var(--ok-soft); color: var(--ok-ink); }
.alerta--info { background: var(--info-soft); color: var(--info-ink); }

/* ── Footer ────────────────────────────────────────────────────────────── */
.footer { background: var(--coal-900); color: #b9bdc6; padding-block: 48px 28px;
    border-top: 1px solid var(--coal-600); }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; }
.footer h4 { color: #fff; font-size: 1rem; margin-bottom: 12px; }
.footer a { color: #b9bdc6; display: block; padding: 3px 0; }
.footer a:hover { color: #fff; text-decoration: none; }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: 32px; padding-top: 18px; font-size: .85rem; text-align: center; }

/* ── WhatsApp flotante ─────────────────────────────────────────────────── */
.wa-float {
    position: fixed; right: 20px; bottom: 20px; z-index: 50;
    width: 56px; height: 56px; border-radius: 50%; background: #25d366; color: #fff;
    display: grid; place-items: center; box-shadow: var(--shadow-md);
}
.wa-float:hover { text-decoration: none; transform: scale(1.06); }

/* ── Auth (login) ──────────────────────────────────────────────────────── */
.auth {
    min-height: 100vh; display: grid; place-items: center; padding: 24px;
    background: radial-gradient(120% 120% at 50% 0%, var(--red-700) 0%, var(--coal-900) 60%);
}
.auth__card {
    width: 100%; max-width: 410px; background: #fff; border-radius: var(--r-lg);
    padding: 36px; box-shadow: var(--shadow-lg);
}
.auth__logo { text-align: center; font-family: var(--font-head); font-weight: 800; font-size: 1.5rem; margin-bottom: 4px; }
.auth__logo b { color: var(--primary); }
.auth__sub { text-align: center; color: var(--muted); margin-bottom: 22px; font-size: .92rem; }
.auth__foot { text-align: center; margin-top: 18px; font-size: .88rem; }

/* ── Layout de panel (portal + admin) ──────────────────────────────────── */
.app { min-height: 100vh; display: grid; grid-template-columns: 250px 1fr; }
.side { background: var(--coal-900); color: #cfd3da; padding: 22px 16px; display: flex; flex-direction: column; }
.side__logo { color: #fff; font-family: var(--font-head); font-weight: 800; font-size: 1.15rem; padding: 6px 10px 20px; }
.side__logo b { color: var(--primary); }
.side__nav { display: grid; gap: 4px; }
.side__nav a {
    display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: var(--r-sm);
    color: #cfd3da; font-weight: 600; font-size: .94rem;
}
.side__nav a:hover { background: rgba(255,255,255,.06); color: #fff; text-decoration: none; }
.side__nav a.activo { background: var(--primary); color: #fff; }
.side__foot { margin-top: auto; padding-top: 16px; }
.side__badge { margin-left: auto; font-size: .7rem; }
.panel-flash { margin-bottom: var(--panel-section-gap); }
.main { padding: 26px clamp(18px, 3vw, 40px); overflow-x: auto; }
.topbar { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.topbar h1 { font-size: 1.6rem; }
.topbar__user { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: .9rem; }
.avatar-i {
    width: 40px; height: 40px; border-radius: 50%; background: var(--primary); color: #fff;
    display: grid; place-items: center; font-weight: 700; font-family: var(--font-head);
    text-decoration: none; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease;
}
a.avatar-i:hover { color: #fff; text-decoration: none; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(230,57,70,.35); }

/* ── KPIs ──────────────────────────────────────────────────────────────── */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px; margin-bottom: 26px; }
.kpi { background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); padding: 20px; box-shadow: var(--shadow-sm); transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.kpi:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--primary) 25%, var(--border)); box-shadow: 0 10px 22px rgba(230,57,70,.14); }
.kpi--accent:hover { box-shadow: 0 10px 22px rgba(230,57,70,.20); }
.kpi b { font-family: var(--font-head); font-size: 2rem; color: var(--ink); display: block; }
.kpi span { color: var(--muted); font-size: .85rem; font-weight: 600; }
.kpi--accent { border-left: 4px solid var(--primary); }

/* ── Tablas ────────────────────────────────────────────────────────────── */
.tabla-wrap { background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); overflow-x: auto; box-shadow: var(--shadow-sm); -webkit-overflow-scrolling: touch; }
table.tabla { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.tabla th, table.tabla td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border); }
table.tabla th { background: var(--gray-50); font-weight: 700; color: var(--gray-700); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
table.tabla tbody tr:hover { background: var(--red-50); }
table.tabla tr:last-child td { border-bottom: 0; }

/* ── Badges ────────────────────────────────────────────────────────────── */
.badge { display: inline-flex; padding: 4px 10px; border-radius: 999px; font-size: .76rem; font-weight: 700; }
.badge--ok { background: var(--ok-soft); color: var(--ok-ink); }
.badge--warn { background: var(--warn-soft); color: var(--warn-ink); }
.badge--danger { background: var(--danger-soft); color: var(--danger-ink); }
.badge--muted { background: var(--gray-100); color: var(--gray-500); }

/* ── Estado vacío ──────────────────────────────────────────────────────── */
.vacio { text-align: center; padding: 48px 20px; color: var(--muted); }
.vacio__icon { font-size: 2.5rem; margin-bottom: 8px; }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .footer__grid { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
    .nav__links { display: none; }
    .nav__toggle { display: block; }
    .app { grid-template-columns: 1fr; }
    .side { flex-direction: row; align-items: center; overflow-x: auto; padding: 12px; }
    .side__logo { padding: 6px 10px; white-space: nowrap; }
    .side__nav { grid-auto-flow: column; }
    .side__nav a { white-space: nowrap; }
    .side__foot { margin: 0 0 0 auto; padding: 0; }
    .form__fila { grid-template-columns: 1fr; }

    /* En móvil, todo apila a 1 columna (los grids del panel traen 2 col en su style). */
    .main { padding: 16px 14px; overflow-x: hidden; }
    .main .grid { grid-template-columns: 1fr !important; }
    /* Deja que las columnas se encojan al ancho real (si no, el contenido
       "empuja" la tarjeta más ancha que la pantalla y se corta). */
    .main .grid > * { min-width: 0; }
    .card { overflow-wrap: anywhere; }
    .topbar { flex-wrap: wrap; row-gap: 6px; }
    .topbar h1 { font-size: 1.3rem; }
    .topbar__user { margin-left: 0; width: 100%; justify-content: flex-start; }
    .kpis { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
    /* Solo las tablas de datos (dentro de .tabla-wrap) conservan ancho y el
       contenedor se desplaza en horizontal; las tablas chicas de tarjetas quedan fluidas. */
    .tabla-wrap table.tabla { min-width: 480px; }
    /* Cards y formularios con menos aire. */
    .card { padding: 18px; }
}

/* Pantallas muy chicas: cola/reportes en bloques cómodos. */
@media (max-width: 480px) {
    h1 { font-size: 1.7rem; }
    .btn { padding: 11px 18px; }
    .kpi b { font-size: 1.6rem; }
}

/* ── Estación de asistencia (cámara QR) ────────────────────────────────────── */
.asis-cam { position: relative; background: #000; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 4/3; }
.asis-cam video { width: 100%; height: 100%; object-fit: cover; display: block; }
.asis-mira {
    position: absolute; inset: 18% 22%; border: 3px solid var(--accent); border-radius: 12px;
    box-shadow: 0 0 0 2000px rgba(0,0,0,.28); pointer-events: none;
}
.asis-aviso { margin-top: 12px; padding: 12px 14px; border-radius: var(--r-sm); font-weight: 600; font-size: .92rem; }
.asis-aviso--info { background: var(--info-soft); color: var(--info-ink); }
.asis-aviso--ok { background: var(--ok-soft); color: var(--ok-ink); }
.asis-aviso--warn { background: var(--warn-soft); color: var(--warn-ink); }
.asis-aviso--error { background: var(--danger-soft); color: var(--danger-ink); }
.asis-lista { list-style: none; padding: 0; display: grid; gap: 8px; }
.asis-lista li {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    background: #fff; border: 1px solid var(--border); border-radius: var(--r-sm); padding: 10px 14px;
}
.asis-lista small { color: var(--muted); }

/* ── Calendario de asistencia ──────────────────────────────────────────────── */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal__dow { text-align: center; font-size: .72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; padding-bottom: 4px; }
.cal__cell {
    position: relative; aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--border); border-radius: 8px; font-size: .9rem; font-weight: 600; color: var(--gray-700);
}
.cal__cell--empty { border: 0; }
.cal__cell--fut { color: var(--gray-300); }
.cal__cell--hoy { outline: 2px solid var(--primary); outline-offset: -2px; }
.cal__cell--asis { background: var(--ok-soft); border-color: var(--ok); color: var(--ok-ink); }
.cal__dot { position: absolute; bottom: 2px; right: 2px; color: var(--ok); }
.cal__dot svg { width: 12px; height: 12px; }

/* ── Carné imprimible ──────────────────────────────────────────────────────── */
.carne {
    max-width: 460px; background: var(--coal-900); color: #fff; border-radius: var(--r-lg);
    overflow: hidden; box-shadow: var(--shadow-md);
}
.carne__head { display: flex; justify-content: space-between; align-items: center; padding: 16px 22px; background: var(--primary); }
.carne__logo { font-family: var(--font-head); font-weight: 800; display: inline-flex; align-items: center; gap: 8px; }
.carne__tag { font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; opacity: .9; }
.carne__body { display: flex; align-items: center; gap: 18px; padding: 22px; }
.carne__datos { flex: 1; }
.carne__datos h2 { color: #fff; font-size: 1.3rem; }
.carne__codigo { color: var(--accent); font-family: var(--font-head); font-weight: 700; letter-spacing: .04em; margin: 4px 0; }
.carne__datos .muted { color: #b9bdc6; }
.carne__qr { background: #fff; padding: 12px; border-radius: 12px; line-height: 0; }
.carne__qr svg { width: 210px; height: 210px; display: block; }
@media (max-width: 560px) { .carne__body { flex-direction: column; text-align: center; } .carne__qr svg { width: 240px; height: 240px; } }

/* ── Combobox con buscador (marcar asistencia a mano) ──────────────────────── */
.combo { position: relative; }
.combo__lista {
    position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px);
    max-height: 320px; overflow-y: auto; background: var(--surface, #fff);
    border: 1.5px solid var(--border); border-radius: var(--r-sm); box-shadow: var(--sombra, 0 10px 30px rgba(0,0,0,.12));
    list-style: none; margin: 0; padding: 4px;
}
.combo__op { padding: 9px 12px; border-radius: 8px; cursor: pointer; display: block; }
.combo__op:hover { background: var(--gris-100, #f1f3f7); }
.combo__op small { color: var(--muted, #8a90a0); }
.combo__op--vacio { color: var(--muted, #8a90a0); cursor: default; }
.combo__op--vacio:hover { background: transparent; }

/* ── Atención de cola: selector de módulo + acciones grandes ───────────────── */
.modulo-pick {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: var(--gris-100, #f1f3f7); border: 1.5px solid var(--border);
    border-radius: var(--r-sm); padding: 12px 14px; margin-bottom: 16px;
}
.modulo-pick label { font-weight: 700; }
.modulo-pick select {
    padding: 9px 12px; border: 1.5px solid var(--border); border-radius: var(--r-sm);
    font: inherit; font-weight: 600; min-width: 150px; background: #fff;
}
.cola-acciones { display: flex; gap: 10px; flex-wrap: wrap; }
.cola-acciones form { margin: 0; }
.btn--grande { padding: 14px 20px; font-size: 1.02rem; }
.btn--block { display: block; width: 100%; }

/* ── Colas: tarjetas ───────────────────────────────────────────────────────── */
.colas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.cola-card { background: var(--surface, #fff); border: 1.5px solid var(--border); border-radius: var(--r-md); padding: 16px; }
.cola-card__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cola-card__nombre { display: flex; gap: 6px; align-items: center; margin: 0; }
.cola-card__nombre input { padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; font: inherit; font-weight: 600; max-width: 150px; }
.cola-card__stats { display: flex; gap: 14px; margin-bottom: 12px; }
.cola-card__stats div { display: flex; flex-direction: column; }
.cola-card__stats b { font-size: 1.5rem; font-family: var(--font-head); line-height: 1; }
.cola-card__stats span { font-size: .76rem; color: var(--muted, #8a90a0); }
.cola-card__links { display: flex; gap: 6px; flex-wrap: wrap; }

/* ── Caja: detalle de pago (código/comprobante) ────────────────────────────── */
.pago-detalle { border-top: 1px dashed var(--border); margin-top: 6px; padding-top: 10px; }

/* ── Panel administrativo: componentes reutilizables ───────────────────────── */
.panel-toolbar { display: flex; align-items: center; gap: var(--panel-gap); margin-bottom: var(--panel-section-gap); }
.panel-toolbar--end { justify-content: flex-end; }
.panel-toolbar--compact { margin-top: -8px; margin-bottom: 14px; }
.panel-section { margin-top: var(--panel-section-gap); }
.panel-grid { display: grid; gap: var(--panel-gap); align-items: stretch; }
.panel-grid > * { min-width: 0; }
.panel-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.panel-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.panel-card {
    min-width: 0; height: 100%; display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--panel-card-radius);
    padding: var(--panel-card-padding); box-shadow: var(--panel-card-shadow); overflow: hidden;
    transition: box-shadow .3s ease, border-color .3s ease, transform .3s ease;
}
.panel-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(15,23,42,.12);
    border-color: color-mix(in srgb, var(--primary) 20%, var(--border));
}
.panel-card__head {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    min-height: 30px; margin-bottom: 12px;
}
.panel-card__title {
    display: inline-flex; align-items: center; gap: 8px; margin: 0;
    font-size: .98rem; line-height: 1.2; white-space: nowrap;
}
.panel-card__title svg { width: 18px; height: 18px; color: var(--ink); }
.panel-card__body { min-width: 0; }
.panel-card__body--fill { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.panel-card__action {
    min-height: 32px; display: inline-flex; align-items: center; justify-content: center;
    padding: 6px 11px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
    color: var(--ink); font-size: .72rem; font-weight: 700; line-height: 1; white-space: nowrap; text-decoration: none;
    transition: border-color .15s ease, background .15s ease, color .15s ease, transform .15s ease;
}
.panel-card__action:hover {
    border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
    background: var(--red-50); color: var(--primary); text-decoration: none; transform: translateY(-1px);
}

.panel-empty {
    flex: 1; min-height: 96px; display: grid; place-items: center; align-content: center;
    gap: 9px; color: var(--muted); text-align: center; font-size: .82rem;
}
.panel-empty--compact { min-height: 105px; }
.panel-empty--large { min-height: 160px; }
.panel-empty__icon {
    width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
    background: var(--gray-100); color: var(--gray-400);
}
.panel-empty__icon svg { width: 18px; height: 18px; }
.panel-empty__icon--large { width: 58px; height: 58px; background: transparent; border: 2px solid var(--gray-200); }
.panel-empty__icon--large svg { width: 28px; height: 28px; }

.panel-action-grid {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: minmax(62px, 1fr); gap: 10px; align-content: stretch; height: 100%;
}
.panel-action {
    min-height: 62px; display: flex; align-items: center; gap: 10px; padding: 13px 15px;
    border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
    color: var(--gray-700); font-weight: 600; font-size: .78rem; line-height: 1.2; text-decoration: none;
    transition: transform .15s ease, border-color .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}
.panel-action svg { width: 20px; height: 20px; color: var(--primary); flex: none; }
.panel-action:hover {
    transform: translateY(-1px); border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
    background: var(--red-50); color: var(--primary); box-shadow: 0 5px 14px rgba(230,57,70,.08); text-decoration: none;
}

.panel-list { list-style: none; margin: 0; padding: 0; }
.panel-list__item {
    min-width: 0; display: flex; align-items: center; gap: 10px;
    padding: 8px 0; border-bottom: 1px solid var(--border);
}
.panel-list__item:first-child { padding-top: 1px; }
.panel-list__item:last-child { border-bottom: 0; padding-bottom: 1px; }
.panel-list__item--person { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; }
.panel-list__avatar {
    width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
    background: var(--ok-soft); color: var(--ok-ink); font-size: .68rem; font-weight: 800;
}
.panel-list__content { min-width: 0; flex: 1; }
.panel-list__title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; line-height: 1.2; }
.panel-list__meta { display: block; margin-top: 2px; color: var(--muted); font-size: .68rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-list__value { justify-self: end; white-space: nowrap; font-size: .82rem; }
.panel-list--memberships .panel-list__item { padding-block: 10px; }
.panel-list--payments .panel-list__item { padding-block: 7px; }

.panel-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.panel-table { width: 100%; border-collapse: collapse; }
.panel-table th {
    padding: 5px 7px; border-bottom: 1px solid var(--border); color: var(--muted);
    font-size: .62rem; text-align: left; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
}
.panel-table td { padding: 7px; border-bottom: 1px solid var(--border); font-size: .74rem; vertical-align: middle; }
.panel-table tbody tr:last-child td { border-bottom: 0; }
.panel-table--dashboard .badge { padding: 3px 8px; font-size: .66rem; }

/* ── Cabecera del panel ────────────────────────────────────────────────────── */
.topbar { align-items: flex-start; margin-bottom: 18px; }
.topbar__heading { min-width: 0; }
.topbar__heading h1 { margin: 0; font-size: 1.45rem; line-height: 1.15; }
.topbar__subtitle { margin-top: 5px; color: var(--muted); font-size: .78rem; }
.topbar__account { margin-left: auto; display: grid; justify-items: end; gap: 8px; }
.topbar__user { margin-left: 0; padding-top: 0; font-size: .76rem; }
.topbar__controls { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.topbar__icon-actions { display: flex; align-items: center; gap: 7px; }
.topbar-icon-btn { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--gray-700); box-shadow: var(--panel-card-shadow); text-decoration: none; transition: border-color .15s ease, color .15s ease, background .15s ease, transform .15s ease; }
.topbar-icon-btn:hover { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); background: var(--red-50); transform: translateY(-1px); text-decoration: none; }
.topbar-icon-btn .ico { width: 17px; height: 17px; }
/* Badge de notificaciones sobre la campana */
.topbar-icon-btn--noti { position: relative; overflow: visible; }
.noti-badge {
    position: absolute; top: -6px; right: -6px; z-index: 2;
    min-width: 18px; height: 18px; padding: 0 5px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px; background: var(--primary); color: #fff;
    font-family: var(--font-body, inherit); font-size: 10px; font-weight: 800; line-height: 1;
    border: 2px solid var(--surface); box-shadow: 0 4px 10px rgba(230,57,70,.45);
}
.topbar-icon-btn--noti:hover .noti-badge { transform: scale(1.06); }
.avatar-i { width: 34px; height: 34px; font-size: .78rem; }

/* ── Tablero (dashboard) ───────────────────────────────────────────────────── */
.stat-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px; margin-bottom: var(--panel-section-gap);
}
.stat-grid--admin { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.stat {
    min-width: 0; min-height: 78px; display: flex; align-items: center; gap: 12px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
    padding: 13px 14px; box-shadow: var(--panel-card-shadow);
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.stat__content { min-width: 0; }
.stat__ic {
    width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
    background: var(--gray-100); color: var(--coal-900); flex: none;
}
.stat__ic svg { width: 21px; height: 21px; }
.stat b {
    display: block; font-size: 1.18rem; font-family: var(--font-head); line-height: 1.05;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stat span { display: block; margin-top: 4px; font-size: .69rem; color: var(--muted); line-height: 1.15; }
.stat--blue .stat__ic { background: #e8f0ff; color: #2563eb; }
.stat--green .stat__ic { background: #dcfce7; color: #16a34a; }
.stat--amber .stat__ic { background: #fff1df; color: #f28c18; }
.stat--violet .stat__ic { background: #eee9ff; color: #7c3aed; }
.stat--teal .stat__ic { background: #dcf8ef; color: #0aa875; }
.stat--rose .stat__ic { background: #ffe8eb; color: #ef3340; }
a.stat { color: inherit; text-decoration: none; cursor: pointer; }
/* Elevar + sombrear al pasar el mouse. La sombra toma el color de acento de la tarjeta. */
.stat:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
    box-shadow: 0 10px 22px rgba(230,57,70,.18);
}
a.stat:hover { text-decoration: none; }
.stat--blue:hover   { border-color: rgba(37,99,235,.30);  box-shadow: 0 10px 22px rgba(37,99,235,.20); }
.stat--green:hover  { border-color: rgba(22,163,74,.30);  box-shadow: 0 10px 22px rgba(22,163,74,.20); }
.stat--amber:hover  { border-color: rgba(242,140,24,.30); box-shadow: 0 10px 22px rgba(242,140,24,.22); }
.stat--violet:hover { border-color: rgba(124,58,237,.30); box-shadow: 0 10px 22px rgba(124,58,237,.20); }
.stat--teal:hover   { border-color: rgba(10,168,117,.30); box-shadow: 0 10px 22px rgba(10,168,117,.20); }
.stat--rose:hover   { border-color: rgba(239,51,64,.30);  box-shadow: 0 10px 22px rgba(239,51,64,.22); }

/* El patrón de la referencia: membresías ocupa dos filas; las columnas izquierda/centro conservan anchura. */
.dashboard-grid {
    display: grid; gap: var(--panel-gap); align-items: stretch;
    grid-template-columns: minmax(0, .96fr) minmax(0, 1.08fr) minmax(285px, .72fr);
    grid-template-areas:
        "system revenue memberships"
        "quick users memberships";
    grid-template-rows: 178px 218px;
}
.dashboard-card { padding: 16px; border-radius: 13px; }
.dashboard-card--system { grid-area: system; }
.dashboard-card--revenue { grid-area: revenue; }
.dashboard-card--memberships { grid-area: memberships; }
.dashboard-card--quick { grid-area: quick; }
.dashboard-card--users { grid-area: users; }
.dashboard-card--bottom { min-height: 235px; }
.dashboard-bottom-grid { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }

.estado-grid {
    flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
    align-items: stretch; border: 1px solid var(--border); border-radius: 9px; overflow: hidden;
}
.estado {
    min-width: 0; padding: 10px 8px; border: 0; border-right: 1px solid var(--border);
    display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto;
    column-gap: 6px; align-content: center; background: var(--surface);
}
.estado:last-child { border-right: 0; }
.estado__dot { width: 7px; height: 7px; border-radius: 50%; grid-row: 1 / span 2; align-self: center; background: var(--gray-400); }
.estado b { min-width: 0; font-size: .64rem; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.estado small { min-width: 0; grid-column: 2; margin-top: 3px; color: var(--muted); font-size: .58rem; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.estado--ok .estado__dot { background: #16a34a; }
.estado--off .estado__dot { background: #f28c18; }
.estado--bad .estado__dot { background: #e11d48; }

.barras { flex: 1; min-height: 108px; display: flex; align-items: stretch; gap: 8px; padding: 2px 4px 0; }
.barra { min-width: 0; flex: 1; display: grid; grid-template-rows: minmax(82px, 1fr) auto; align-items: end; justify-items: center; gap: 5px; }
.barra__grafico { display: block; width: min(100%, 34px); height: 100%; overflow: visible; }
.barra__col { fill: var(--accent); }
.barra__lbl { color: var(--muted); font-size: .59rem; line-height: 1; }

/* Compatibilidad con clases de dashboard ya usadas en otras vistas. */
.dash-card-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.dash-card-head h3 { margin: 0; }
.dash-link { font-size: .76rem; font-weight: 700; color: var(--primary); white-space: nowrap; }
.tabla-limpia { width: 100%; border-collapse: collapse; }
.tabla-limpia th { text-align: left; font-size: .68rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--border); }
.tabla-limpia td { padding: 8px; border-bottom: 1px solid var(--border); font-size: .8rem; }
.tabla-limpia tr:last-child td { border-bottom: 0; }
.lista-limpia { list-style: none; margin: 0; padding: 0; }
.lista-limpia li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.lista-limpia li:last-child { border-bottom: 0; }
.lista-limpia small { display: block; color: var(--muted); font-size: .74rem; }
.dash-quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.dash-quick a { display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 9px; color: var(--gray-700); font-weight: 600; font-size: .76rem; text-decoration: none; }
.dash-quick a:hover { border-color: var(--primary); background: var(--red-50); color: var(--primary); text-decoration: none; }
.dash-quick a svg { width: 18px; height: 18px; color: var(--primary); }

@media (max-width: 1380px) {
    .stat-grid--admin { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .dashboard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "system revenue"
            "quick users"
            "memberships memberships";
        grid-template-rows: auto;
    }
    .dashboard-card--memberships { min-height: 240px; }
}

@media (max-width: 980px) {
    .panel-grid--2, .panel-grid--3, .dashboard-bottom-grid { grid-template-columns: 1fr; }
    .dashboard-grid {
        grid-template-columns: 1fr;
        grid-template-areas: "system" "revenue" "memberships" "quick" "users";
    }
    .dashboard-card { min-height: auto; }
    .dashboard-card--system, .dashboard-card--revenue { min-height: 178px; }
    .dashboard-card--memberships { min-height: 240px; }
    .dashboard-card--quick, .dashboard-card--users { min-height: 218px; }
    .stat-grid--admin { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
    .topbar { flex-wrap: wrap; }
    .topbar__account { margin-left: 0; width: 100%; justify-items: start; }
    .topbar__user { width: 100%; justify-content: flex-start; }
    .topbar__controls { justify-content: flex-start; }
    .panel-action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .estado-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); border: 0; gap: 8px; overflow: visible; }
    .estado { border: 1px solid var(--border); border-radius: 8px; }
    .estado:last-child { border-right: 1px solid var(--border); }
    .panel-card__head { align-items: flex-start; }
    .panel-card__action { min-height: 30px; padding-inline: 8px; font-size: .68rem; }
}

@media (max-width: 430px) {
    .stat-grid, .stat-grid--admin { grid-template-columns: 1fr; }
    .panel-action-grid { grid-template-columns: 1fr; }
    .estado-grid { grid-template-columns: 1fr; }
    .panel-card__head { flex-wrap: wrap; }
    .panel-list__item--person { grid-template-columns: auto minmax(0, 1fr); }
    .panel-list__item--person .panel-list__value { grid-column: 2; justify-self: start; }
}

/* Selector de sede del administrador global (botón-icono + menú desplegable) */
.sede-menu { position: relative; display: inline-flex; }
.sede-menu__btn { cursor: pointer; font: inherit; }
.sede-menu[data-open] > .sede-menu__btn { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); background: var(--red-50); }
.sede-menu__panel {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 40;
    min-width: 210px; max-height: 320px; overflow-y: auto; padding: 6px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0,0,0,.14); -webkit-overflow-scrolling: touch;
}
.sede-menu__panel[hidden] { display: none; }
.sede-menu__title { margin: 4px 8px 6px; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.sede-menu__item {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 9px 11px; border-radius: 8px; font-size: .82rem; font-weight: 600;
    color: var(--ink); text-decoration: none; white-space: nowrap;
}
.sede-menu__item:hover { background: var(--gray-50); text-decoration: none; }
.sede-menu__item.is-active { color: var(--primary); background: var(--red-50); }
.sede-menu__item .ico { width: 15px; height: 15px; flex: none; }

/* Aviso "sin sede asignada" a pantalla completa (dispositivos de cola/TV). */
.sin-sede { max-width: 560px; margin: 8vh auto 0; text-align: center; background: #fff;
    border-radius: var(--r-lg, 20px); padding: 40px 30px; box-shadow: var(--shadow-md, 0 20px 50px rgba(0,0,0,.25)); }
.sin-sede__icon { font-size: 3.4rem; margin-bottom: 6px; }
.sin-sede h1 { font-size: 1.7rem; margin-bottom: 10px; }
.sin-sede p { color: var(--muted, #6b7280); margin-bottom: 22px; line-height: 1.5; }

/* ── Impresión ─────────────────────────────────────────────────────────────── */
/* ── Breadcrumb (ruta de navegación bajo el título) ─────────────────────────── */
.crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 5px; font-size: .75rem; font-weight: 600; color: var(--muted); }
.crumbs__link { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); text-decoration: none; transition: color .15s ease; }
.crumbs__link:hover { color: var(--primary); text-decoration: none; }
.crumbs__link svg { width: 14px; height: 14px; }
.crumbs__sep { color: var(--gray-300, #cbd2dc); font-weight: 700; }
.crumbs__cur { color: var(--primary); font-weight: 700; }

/* ── Caja de tabla (bandeja) con cabecera, acciones y tabla ─────────────────── */
.table-card {
    background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--primary);
    border-radius: var(--panel-card-radius, 16px); box-shadow: var(--panel-card-shadow); overflow: hidden;
}
.table-card__head {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    padding: 15px 18px; border-bottom: 1px solid var(--border);
}
.table-card__title { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 1.02rem; line-height: 1.2; }
.table-card__title svg { width: 20px; height: 20px; color: var(--primary); flex: none; }
.table-card__actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.table-card__body { padding: 16px 18px; }

/* Botones de la barra de acciones (paleta tipo reporte: rojo / verde / azul) */
.btn--pdf   { background: #e5342b; color: #fff; box-shadow: 0 6px 16px rgba(229,52,43,.28); }
.btn--pdf:hover   { background: #c72c24; }
.btn--excel { background: #1d9d5b; color: #fff; box-shadow: 0 6px 16px rgba(29,157,91,.28); }
.btn--excel:hover { background: #178049; }
.btn--info  { background: #2563eb; color: #fff; box-shadow: 0 6px 16px rgba(37,99,235,.28); }
.btn--info:hover  { background: #1d4fd0; }
.btn--danger { background: var(--danger); color: #fff; box-shadow: 0 6px 16px rgba(214,69,69,.28); }
.btn--danger:hover { background: var(--danger-ink); }
.table-card__actions .ico { width: 16px; height: 16px; }

/* Barra superior: buscador cliente */
.table-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.table-toolbar__search { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 700; color: var(--gray-700); text-transform: uppercase; letter-spacing: .03em; }
.table-toolbar__search input { min-width: 210px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 9px; font: inherit; font-size: .82rem; font-weight: 500; text-transform: none; letter-spacing: 0; }
.table-toolbar__search input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(230,57,70,.12); }

/* Tabla dentro de la caja: encabezado con color de marca y sin doble borde */
.table-card .tabla-wrap { border: 0; box-shadow: none; border-radius: 0; }
.table-card table.tabla th { background: var(--primary); color: #fff; border-bottom-color: transparent; }
.table-card table.tabla tbody tr:hover { background: var(--red-50); }

/* Estado vacío centrado (sin datos o sin coincidencias) */
.table-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px; padding: 56px 20px; text-align: center;
}
.table-empty__icon {
    width: 72px; height: 72px; display: grid; place-items: center; border-radius: 50%;
    background: var(--gray-100); color: var(--gray-400, #9aa4b2);
}
.table-empty__icon svg { width: 34px; height: 34px; }
.table-empty__text { margin: 0; font-size: 1.02rem; font-weight: 700; color: var(--gray-700); }
.table-empty__hint { margin: 0; font-size: .84rem; color: var(--muted); }

/* Pie de tabla: contador (izq.) + paginador (der.) */
.table-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.table-foot { margin: 0; font-size: .78rem; color: var(--muted); }
.pager { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pager__btn {
    min-width: 34px; height: 34px; padding: 0 11px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--ink);
    font-size: .82rem; font-weight: 700; cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.pager__btn:hover:not(:disabled):not(.is-active) { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); color: var(--primary); background: var(--red-50); }
.pager__btn.is-active { background: var(--primary); border-color: var(--primary); color: #fff; cursor: default; }
.pager__btn:disabled { opacity: .45; cursor: not-allowed; }
.pager__gap { padding: 0 2px; color: var(--muted); font-weight: 700; }

@media print {
    .side, .topbar, .no-print { display: none !important; }
    .app { display: block; }
    .main { padding: 0; }
    body { background: #fff; }
    .carne { box-shadow: none; max-width: 380px; }
    .table-card__actions, .table-toolbar, .table-toolbar__search, .pager, .no-export, [data-noexport] { display: none !important; }
    .table-card { border: 1px solid #ddd; box-shadow: none; border-top-width: 1px; }
    .table-card table.tabla th { background: #eee !important; color: #000 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .print-title { display: block !important; }
}
.print-title { display: none; }

/* ── Tótem / kiosco (pantalla completa) ────────────────────────────────────── */
body.kiosk { background: radial-gradient(130% 130% at 50% 0%, var(--red-700) 0%, var(--coal-900) 60%); min-height: 100vh; }
.kiosk__top { display: flex; align-items: center; justify-content: space-between; padding: 18px 26px; }
.kiosk__logo { color: #fff; font-family: var(--font-head); font-weight: 800; font-size: 1.4rem; display: inline-flex; align-items: center; gap: 10px; }
.kiosk__logo b { color: var(--accent); }
.kiosk__salir { color: rgba(255,255,255,.45); }
.kiosk__salir:hover { color: #fff; }
.kiosk__main { padding: 10px 20px 40px; }
.kiosk__head { text-align: center; color: #fff; margin-bottom: 20px; }
.kiosk__head h1 { color: #fff; font-size: clamp(1.8rem, 5vw, 2.8rem); }
.kiosk__head p { color: #e7e9ee; font-size: 1.05rem; margin-top: 6px; }
body.kiosk .asis-cam { aspect-ratio: 1/1; }
body.kiosk .asis-aviso { font-size: 1.1rem; text-align: center; }
body.kiosk .card { padding: 22px; }

/* ── Sticker de auto-registro (imprimible) ─────────────────────────────────── */
.sticker {
    max-width: 400px; background: #fff; border: 2px solid var(--coal-900); border-radius: var(--r-lg);
    padding: 28px; text-align: center; box-shadow: var(--shadow-md);
    margin-bottom: 20px; page-break-inside: avoid;
}
.sticker + .sticker { margin-top: 8px; }
@media print { .sticker { page-break-after: always; box-shadow: none; } }
.sticker__top { font-family: var(--font-head); font-weight: 800; color: var(--primary); display: inline-flex; align-items: center; gap: 8px; font-size: 1.1rem; }
.sticker h2 { margin: 14px 0 4px; }
.sticker p { color: var(--muted); font-size: .92rem; }
.sticker__qr { display: inline-block; padding: 12px; margin: 16px 0; line-height: 0; }
.sticker__qr svg { width: 200px; height: 200px; display: block; }
.sticker__url { font-family: var(--font-head); font-weight: 700; color: var(--ink); word-break: break-all; }
.sticker__hint { margin-top: 8px; }

/* ── Monitor en vivo ───────────────────────────────────────────────────────── */
.mon-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--gray-300); display: inline-block; }
.mon-dot--on { background: var(--ok); box-shadow: 0 0 0 0 rgba(31,157,85,.6); animation: monpulse 1.6s infinite; }
.mon-dot--off { background: var(--danger); }
@keyframes monpulse {
    0% { box-shadow: 0 0 0 0 rgba(31,157,85,.55); }
    70% { box-shadow: 0 0 0 10px rgba(31,157,85,0); }
    100% { box-shadow: 0 0 0 0 rgba(31,157,85,0); }
}
.mon-row--venc { background: var(--danger-soft) !important; }
.mon-row--rep { background: var(--warn-soft) !important; }
.mon-row--flash { animation: monflash 1.4s ease-out; }
@keyframes monflash {
    0% { background: var(--lime-300); }
    100% { background: transparent; }
}
/* ── Tablet de tickets (teclado + lector DNI) ──────────────────────────────── */
.tk { max-width: 460px; margin: 0 auto; text-align: center; color: #fff; }
.tk__head h1 { color: #fff; font-size: clamp(1.6rem, 5vw, 2.4rem); }
.tk__head p { color: #cfd3da; margin-top: 6px; }
.tk__display {
    margin: 22px auto; padding: 16px; background: rgba(255,255,255,.06); border: 2px solid rgba(255,255,255,.15);
    border-radius: var(--r-md); display: flex; justify-content: center; gap: 8px; min-height: 74px; align-items: center;
}
.tk__ph { color: rgba(255,255,255,.4); font-size: 2rem; letter-spacing: 6px; font-family: var(--font-head); }
.tk__dig { font-family: var(--font-head); font-size: 2.4rem; font-weight: 800; color: rgba(255,255,255,.3); width: 30px; }
.tk__dig--on { color: var(--accent); }
.tk__pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tk__key {
    font-family: var(--font-head); font-size: 1.8rem; font-weight: 700; padding: 20px 0;
    background: rgba(255,255,255,.10); color: #fff; border: 0; border-radius: var(--r-md); cursor: pointer;
    transition: background .12s, transform .06s; user-select: none;
}
.tk__key:active { transform: scale(.96); background: rgba(255,255,255,.2); }
.tk__key--fn { background: rgba(255,255,255,.06); font-size: 1.5rem; }
.tk__key--ok { background: var(--primary); font-size: 1.1rem; }
.tk__key--ok:active { background: var(--primary-d); }
.tk__aviso { margin-top: 16px; min-height: 24px; font-weight: 600; }
.tk__aviso--info { color: var(--accent); }
.tk__aviso--error { color: var(--red-300); }
.tk__overlay { position: fixed; inset: 0; background: rgba(14,15,18,.96); display: grid; place-items: center; z-index: 60; }
.tk__ticket { text-align: center; color: #fff; animation: tkpop .3s ease; }
.tk__ticket-l { display: block; color: #cfd3da; text-transform: uppercase; letter-spacing: .1em; font-size: .9rem; }
.tk__ticket-n { display: block; font-family: var(--font-head); font-weight: 800; font-size: clamp(4rem, 18vw, 8rem); color: var(--accent); line-height: 1; }
.tk__ticket-nom { display: block; font-size: 1.6rem; font-weight: 700; margin: 8px 0; }
.tk__ticket-pos { display: block; color: #cfd3da; }
@keyframes tkpop { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ── Pantalla de TV (sala de espera) ──────────────────────────────────────── */
body.tv { background: var(--coal-900); overflow: hidden; height: 100vh; }
.tv-start { position: fixed; inset: 0; background: radial-gradient(120% 120% at 50% 0%, var(--red-700), var(--coal-900)); display: grid; place-items: center; text-align: center; z-index: 80; }
.tv-grid { display: grid; grid-template-columns: 1fr 1fr; height: 100vh; }
.tv-cola { display: flex; flex-direction: column; padding: 2.2vh 2vw; color: #fff; background: var(--coal-900); }
.tv-cola__head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid rgba(255,255,255,.12); padding-bottom: 1.4vh; }
.tv-cola__titulo { font-family: var(--font-head); font-weight: 800; font-size: 3vh; color: #fff; }
.tv-reloj { font-family: var(--font-head); font-weight: 700; font-size: 3vh; color: var(--accent); }
.tv-llamando { margin: 1.6vh 0; padding: 1.6vh 1.6vw; border-radius: var(--r-lg); background: linear-gradient(120deg, var(--red-600), var(--red-800)); text-align: center; }
.tv-llamando__l { display: block; text-transform: uppercase; letter-spacing: .12em; color: #ffd; font-size: 1.8vh; }
.tv-llamando__n { display: block; font-family: var(--font-head); font-weight: 800; font-size: 5vh; color: #fff; line-height: 1.1; }
.tv-llamando__t { display: block; color: #ffe; font-size: 1.9vh; margin-top: .4vh; }
.tv-llamando--anim { animation: tvcall 1s ease 3; }
@keyframes tvcall { 0%,100% { transform: translateX(0) scale(1); } 20% { transform: translateX(-10px) scale(1.03); } 40% { transform: translateX(10px) scale(1.03); } 60% { transform: translateX(-6px) scale(1.02); } 80% { transform: translateX(6px) scale(1.02); } }
.tv-lista { list-style: none; margin: 0; padding: 0; flex: 1; overflow: hidden; display: flex; flex-direction: column; gap: 1vh; margin-top: 1.4vh; }
.tv-item { display: flex; align-items: center; gap: 1.4vw; background: rgba(255,255,255,.05); border-radius: var(--r-md); padding: 1.3vh 1.4vw; }
.tv-item__n { font-family: var(--font-head); font-weight: 800; font-size: 3.4vh; color: var(--accent); min-width: 2.4ch; text-align: right; }
.tv-item__nom { font-size: 3vh; font-weight: 600; color: #fff; }
.tv-vacio { color: #9aa1ad; font-size: 3vh; text-align: center; padding-top: 6vh; }
.tv-cola__foot { border-top: 2px solid rgba(255,255,255,.12); padding-top: 1.2vh; margin-top: 1vh; color: #9aa1ad; font-size: 1.9vh; }
.tv-media { background: #000; display: grid; place-items: center; overflow: hidden; }
.tv-media__v, .tv-media__img { width: 100%; height: 100%; object-fit: cover; }
.tv-media__ph { text-align: center; color: #cfd3da; padding: 4vh; }
@media (prefers-reduced-motion: reduce) { .tv-llamando--anim { animation: none; } }

/* ── Botón de pantalla completa (tótem/tablet/TV) ──────────────────────────── */
.tv-fs {
    position: fixed; top: 12px; right: 12px; z-index: 90;
    width: 44px; height: 44px; border-radius: 10px; border: 0; cursor: pointer;
    background: rgba(255,255,255,.12); color: #fff; font-size: 20px; line-height: 1;
    opacity: .35; transition: opacity .15s, background .15s;
}
.tv-fs:hover { opacity: 1; background: rgba(255,255,255,.22); }
:fullscreen .tv-fs { opacity: 0; }
:fullscreen .tv-fs:hover { opacity: 1; }

/* ── Gestor de media de la TV (panel) ──────────────────────────────────────── */
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
.media-item { background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-sm); }
.media-item__thumb { aspect-ratio: 16/10; background: #000; display: grid; place-items: center; overflow: hidden; }
.media-item__thumb img, .media-item__thumb video { width: 100%; height: 100%; object-fit: cover; }
.media-item__body { padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.media-item__name { font-size: .82rem; color: var(--gray-700); word-break: break-all; }

/* ── Etiqueta "Visitante" en la TV ─────────────────────────────────────────── */
.tv-item__wrap { display: flex; flex-direction: column; gap: 2px; }
.tv-item__tag {
    align-self: flex-start; font-size: 1.5vh; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
    color: var(--accent); background: rgba(198,240,0,.12); padding: 2px 8px; border-radius: 6px; line-height: 1.4;
}
.tv-llamando__tag {
    display: inline-block; margin: 0 auto 4px; font-size: 1.9vh; font-weight: 800; text-transform: uppercase;
    letter-spacing: .1em; color: #fff; background: rgba(255,255,255,.18); padding: 2px 12px; border-radius: 999px;
}

/* ── Paso de nombre en la tablet de tickets ────────────────────────────────── */
.tk__name { margin-top: 10px; }
.tk__name-l { color: #cfd3da; margin-bottom: 12px; font-size: 1.05rem; }
.tk__name-input {
    width: 100%; padding: 18px 16px; font-size: 1.6rem; text-align: center; text-transform: capitalize;
    border-radius: var(--r-md); border: 2px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); color: #fff;
}
.tk__name-input:focus { outline: none; border-color: var(--accent); }
.tk__name-btns { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; margin-top: 14px; }

/* Mensaje de "espera en la sala" del ticket en pantalla */
.tk__ticket-msg { display: block; color: #cfd3da; margin-top: 18px; font-size: 1.15rem; line-height: 1.5; max-width: 22ch; margin-inline: auto; }
.tk__ticket-msg b { color: #fff; }

/* ── Cola TV: más espacio para el video, video centrado y completo ─────────── */
.tv-grid { grid-template-columns: 38% 1fr; }        /* cola más angosta, media más grande */
.tv-media__v, .tv-media__img { object-fit: contain; }   /* se ve completo y centrado (no recortado) */

/* Reducimos un poco los tamaños de la cola al ser más angosta */
.tv-item__nom { font-size: 2.6vh; }
.tv-item__n { font-size: 3vh; }

/* ── Biblioteca de media: arrastrable ──────────────────────────────────────── */
.media-item { position: relative; cursor: grab; }
.media-item:active { cursor: grabbing; }
.media-item.arrastrando { opacity: .45; outline: 2px dashed var(--primary); }
.media-item__drag {
    position: absolute; top: 6px; left: 6px; z-index: 2;
    background: rgba(0,0,0,.55); color: #fff; border-radius: 6px; padding: 0 6px;
    font-size: 15px; line-height: 20px; letter-spacing: 2px;
}

/* ── Varios "es tu turno" (multi-recepcionista) ────────────────────────────── */
.tv-llamados { display: flex; flex-direction: column; gap: 1vh; margin: 1.4vh 0; }
.tv-llamados:empty { display: none; }
.tv-llamados > .tv-llamando { margin: 0; }
.tv-llamados > .tv-llamando .tv-llamando__n { font-size: 4.2vh; }   /* algo más chico al apilar */

/* ── Botón de salir en pantallas-dispositivo (TV) ──────────────────────────── */
.tv-logout {
    position: fixed; top: 12px; right: 12px; z-index: 95;
    width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center;
    background: rgba(255,255,255,.12); color: #fff; opacity: .35; transition: opacity .15s, background .15s;
}
.tv-logout:hover { opacity: 1; background: rgba(255,255,255,.22); text-decoration: none; }
.tv-logout .ico { width: 22px; height: 22px; }
body.tv .tv-fs, body.kiosk .tv-fs { right: 64px; }   /* deja sitio al botón de salir */
:fullscreen .tv-logout { opacity: 0; }
:fullscreen .tv-logout:hover { opacity: 1; }

/* ── Libro de Reclamaciones (hoja pública) ────────────────────────────────── */
.badge--info  { background: var(--info-soft);   color: var(--info-ink); }
.badge--error { background: var(--danger-soft); color: var(--danger-ink); }

.lr__wrap { max-width: 860px; }
.lr__head { text-align: center; margin-bottom: 22px; }
.lr__head h2 { margin: 10px 0 6px; }
.lr__prov {
    display: flex; flex-wrap: wrap; gap: 10px 40px;
    background: linear-gradient(180deg, var(--red-50), #fff);
    border: 1px solid var(--red-100); border-left: 5px solid var(--primary);
    border-radius: var(--r-md); padding: 16px 20px; margin-bottom: 16px;
}
.lr__prov > div { display: flex; flex-direction: column; }
.lr__prov-k { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
.lr__prov strong { font-size: 1rem; color: var(--ink); }
.lr__note {
    background: var(--surface-2); border: 1px dashed var(--border);
    border-radius: var(--r-md); padding: 14px 18px; margin-bottom: 22px;
    font-size: .86rem; color: var(--gray-700);
}
.lr__note p { margin: 0 0 6px; }
.lr__note p:last-child { margin: 0; }

.lr__form { gap: 0; }
.lr__form .alerta { margin-bottom: 18px; }
.lr-sec {
    background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm); padding: 22px 24px; margin-bottom: 18px;
    display: grid; gap: 16px;
}
.lr-sec__head { display: flex; align-items: center; gap: 12px; }
.lr-sec__head h3 { margin: 0; font-size: 1.08rem; }
.lr-sec__num {
    flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
    display: grid; place-items: center; font-family: var(--font-head); font-weight: 700;
    background: var(--primary); color: #fff; box-shadow: 0 6px 16px rgba(230,57,70,.35);
}
.lr-fila-3 { grid-template-columns: 1fr 1fr 1fr; }

.lr-check { display: flex; align-items: flex-start; gap: 10px; font-size: .92rem; color: var(--gray-700); cursor: pointer; }
.lr-check input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--primary); flex: 0 0 auto; }
.lr-cnt { font-size: .78rem; }
.lr-decl {
    background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md);
    padding: 16px 18px; margin: 4px 0 20px; display: grid; gap: 12px;
}
.btn--lg { padding: 15px 24px; font-size: 1.02rem; }

/* Constancia (éxito) */
.lr-ok { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg);
    box-shadow: var(--shadow-md); padding: 44px 30px; text-align: center; }
.lr-ok__icon { font-size: 54px; line-height: 1; }
.lr-ok h2 { margin: 12px 0 4px; }
.lr-ok__code {
    display: inline-flex; flex-direction: column; gap: 4px; margin: 22px auto;
    padding: 16px 30px; background: var(--red-50); border: 1px dashed var(--red-300); border-radius: var(--r-md);
}
.lr-ok__code span { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.lr-ok__code strong { font-size: 1.7rem; letter-spacing: .05em; color: var(--primary-d); }
.lr-ok__plazo { font-size: .9rem; }
.lr-ok__acts { margin-top: 18px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 640px) {
    .lr-fila-3 { grid-template-columns: 1fr; }
    .lr-sec { padding: 18px 16px; }
    .lr__prov { gap: 8px 20px; }
}

/* ============================================================================
   PERSONALIDAD · Fase 1 — hero atlético, tipografía póster, reveals, contadores.
   Aditivo y con alcance en clases nuevas: no afecta panel ni portal.
   ========================================================================== */

/* ── Titulares tipo póster (Anton) en el hero público ─────────────────────── */
.hero h1 {
    font-family: var(--font-display); font-weight: 400;
    text-transform: uppercase; letter-spacing: .01em; line-height: 1.32;
    font-size: clamp(2.6rem, 8vw, 5.4rem); max-width: 15ch;
}
.hero h1 em { font-style: normal; } /* el color lo da .grad */

/* ── Texto con gradiente animado (estilo Magic UI) ────────────────────────── */
/* El selector .hero h1 em.grad supera a la regla base `.hero h1 em{color:...}`. */
.grad, .hero h1 em.grad {
    background: linear-gradient(100deg, var(--red-400), var(--accent), var(--red-400));
    background-size: 220% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: gradMove 6s ease infinite;
}
@keyframes gradMove { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* ── Subrayado dibujado a mano (acento estilo SketchValley) ───────────────── */
/* El color lo hereda del contexto: lima por defecto (fondos oscuros como el
   hero); usa .sketch--ink para trazo rojo sobre fondos claros. */
.sketch { position: relative; white-space: nowrap; color: var(--accent); }
.sketch--ink { color: var(--primary); }
.sketch > svg {
    position: absolute; left: -2%; right: -2%; bottom: -.02em;
    width: 104%; height: .28em; color: currentColor; pointer-events: none;
}

/* ── Grid animado de fondo en el hero ─────────────────────────────────────── */
.hero { isolation: isolate; }
.hero::after {
    content: ""; position: absolute; inset: -2px; z-index: -1; opacity: .5;
    background-image:
        linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%);
    mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%);
    animation: gridDrift 18s linear infinite;
}
@keyframes gridDrift { to { background-position: 0 56px, 56px 0; } }

/* ── Estadísticas del hero: dígitos alineados + centradas sobre su etiqueta ── */
.hero__stats b { font-variant-numeric: tabular-nums; }
.hero__stats > div { text-align: center; }

/* ── Eyebrow del hero (punto lima con efecto radar) ───────────────────────── */
.eyebrow {
    display: inline-flex; align-items: center; gap: 10px; width: max-content; justify-self: start;
    font-family: var(--font-head); font-weight: 700; font-size: .78rem;
    letter-spacing: .16em; text-transform: uppercase; color: var(--accent);
}
/* Efecto radar: dos anillos que se expanden desde el punto (transform scale → muy visible
   y no lo recorta ningún overflow del hero). */
.eyebrow__dot {
    position: relative; width: 10px; height: 10px; border-radius: 50%;
    background: var(--accent); flex: none;
    box-shadow: 0 0 6px rgba(198, 240, 0, .7);
}
.eyebrow__dot::before,
.eyebrow__dot::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    border: 2px solid var(--accent);
    animation: radar 1.8s ease-out infinite;
}
.eyebrow__dot::after { animation-delay: .9s; }
@keyframes radar {
    0%   { transform: scale(1);   opacity: .75; }
    100% { transform: scale(2.8); opacity: 0; }
}
/* Aunque el sistema pida menos movimiento (p. ej. Windows con los "Efectos de
   animación" desactivados), mantenemos el radar del indicador de estado —es un
   punto pequeño y decorativo— solo que más lento y suave. */
@media (prefers-reduced-motion: reduce) {
    .eyebrow__dot::before, .eyebrow__dot::after {
        animation-duration: 3.2s;
        animation-timing-function: ease-in-out;
    }
}

/* ── Reveal al hacer scroll (blur-fade) ───────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(22px) scale(.99); filter: blur(6px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1), filter .7s ease; }
.reveal.in { opacity: 1; transform: none; filter: none; }

/* Nota: las animaciones decorativas de marca (texto degradado, rejilla del hero,
   reveals al hacer scroll) se mantienen aunque el sistema pida menos movimiento,
   para que la web se vea igual de viva en equipos con los efectos de animación
   desactivados (p. ej. Windows). Los reveals los dispara el JS (clase .in), así que
   el contenido siempre queda visible. */

/* ============================================================================
   PERSONALIDAD · Fase 2 — marquee de clases, bento de beneficios, planes glow.
   Aditivo y con alcance en clases nuevas: no afecta panel ni portal.
   ========================================================================== */

/* ── Titulares de sección tipo póster (opt-in con .h-display) ─────────────── */
.h-display {
    font-family: var(--font-display); font-weight: 400;
    text-transform: uppercase; letter-spacing: .01em; line-height: .95;
    font-size: clamp(2rem, 5vw, 3.4rem);
}

/* ── Marquee de clases ────────────────────────────────────────────────────── */
.marquee { background: var(--primary); color: #fff; padding: 15px 0; overflow: hidden; }
.marquee__track { display: flex; width: max-content; animation: marqueeX 30s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track span {
    font-family: var(--font-display); font-size: 1.3rem; text-transform: uppercase;
    letter-spacing: .05em; padding-inline: 24px; display: inline-flex; align-items: center;
    gap: 24px; white-space: nowrap;
}
.marquee__track span::after { content: ""; width: 8px; height: 8px; background: var(--accent);
    border-radius: 2px; transform: rotate(45deg); }
@keyframes marqueeX { to { transform: translateX(-50%); } }

/* ── Bento de beneficios ──────────────────────────────────────────────────── */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.bento .card { margin: 0; } /* por si hereda algún margen */
.cell {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
    padding: 26px; position: relative; overflow: hidden;
    transition: transform .2s ease, box-shadow .25s ease, border-color .2s;
}
.cell:hover { transform: translateY(-5px); box-shadow: var(--shadow-md);
    border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }
.cell__icon {
    width: 52px; height: 52px; border-radius: var(--r-md); display: grid; place-items: center;
    margin-bottom: 15px; background: var(--red-50); color: var(--primary);
}
.cell__icon .ico { width: 26px; height: 26px; }
.cell h3 { margin-bottom: 7px; }
.cell .cell__big { font-family: var(--font-display); font-size: clamp(2.4rem, 5vw, 3.4rem);
    line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
.cell--wide { grid-column: span 2; }
.cell--tall { grid-row: span 2; }
.cell--dark { background: var(--coal-900); color: #fff; border-color: var(--coal-700);
    display: flex; flex-direction: column; }
.cell--dark h3 { color: #fff; }
.cell--dark .muted { color: #b8bcc4 !important; }
.cell--dark .cell__icon { background: rgba(198,240,0,.14); color: var(--accent); }
.cell--dark::before {
    content: ""; position: absolute; inset: 0; z-index: 0; opacity: .5;
    background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px);
    background-size: 16px 16px;
    -webkit-mask-image: radial-gradient(80% 80% at 80% 20%, #000, transparent 75%);
    mask-image: radial-gradient(80% 80% at 80% 20%, #000, transparent 75%);
}
.cell--dark > * { position: relative; z-index: 1; }
@media (max-width: 900px) {
    .bento { grid-template-columns: repeat(2, 1fr); }
    .cell--wide { grid-column: span 2; }
    .cell--tall { grid-row: auto; }
}
@media (max-width: 560px) {
    .bento { grid-template-columns: 1fr; }
    .cell--wide { grid-column: auto; }
}

/* ── Plan destacado: tarjeta oscura con glow (estilo Magic UI) ────────────── */
.plan--top {
    color: #fff; border: 0;
    background: radial-gradient(120% 80% at 80% 0%, var(--red-600), var(--coal-900) 70%);
    box-shadow: 0 24px 60px rgba(230,57,70,.35);
}
.plan--top h3, .plan--top .plan__price { color: #fff; }
.plan--top .plan__price small, .plan--top .muted, .plan--top .plan__list li { color: #e6cdd0; }
.plan--top .plan__list svg { color: var(--accent); }
.plan--top .plan__badge { background: var(--accent); color: var(--coal-900); }
@media (min-width: 861px) {
    .plan--top { transform: scale(1.03); }
    .plan--top:hover { transform: scale(1.03) translateY(-2px); }
}

/* ============================================================================
   PERSONALIDAD · Fase 3 — botón con borde brillante, micro-interacciones.
   Aditivo y con alcance en clases nuevas: no afecta panel ni portal.
   ========================================================================== */

/* ── Botón con borde multicolor girando (estilo Magic UI "shimmer") ───────── */
/* Un anillo cónico completo gira por transform (compatible en todos lados) y
   el cuerpo del botón lo tapa dejando solo un borde de 2px animado. */
.btn--shine { position: relative; background: var(--coal-800); color: #fff; overflow: hidden; z-index: 0; }
.btn--shine:hover { background: var(--coal-800); }
.btn--shine::before {
    content: ""; position: absolute; z-index: -2; left: 50%; top: 50%;
    width: 250%; aspect-ratio: 1; transform: translate(-50%, -50%) rotate(0deg);
    background: conic-gradient(from 0deg,
        var(--accent), var(--primary), var(--red-400), var(--lime-300), var(--accent));
    animation: shineSpin 3s linear infinite;
}
.btn--shine::after {
    content: ""; position: absolute; z-index: -1; inset: 2px; border-radius: 6px;
    background: var(--coal-800);
}
@keyframes shineSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
/* Respaldo si no hay conic-gradient (borde estático lima). */
@supports not (background: conic-gradient(from 0deg, red, blue)) {
    .btn--shine { border: 2px solid var(--accent); }
    .btn--shine::before, .btn--shine::after { display: none; }
}

/* ── Micro-interacciones de hover ─────────────────────────────────────────── */
/* Subrayado deslizante en los enlaces del navbar. */
.nav__links a:not(.btn) { position: relative; }
.nav__links a:not(.btn)::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px;
    background: var(--accent); transform: scaleX(0); transform-origin: left;
    transition: transform .25s ease;
}
.nav__links a:not(.btn):hover::after { transform: scaleX(1); }

/* El ícono del bento reacciona al pasar el mouse por la celda. */
.cell__icon { transition: transform .25s ease; }
.cell:hover .cell__icon { transform: scale(1.08) rotate(-4deg); }

/* La flecha/rayo de los botones primarios se adelanta un poco. */
.btn--primary .ico { transition: transform .2s ease; }
.btn--primary:hover .ico { transform: translateX(2px); }


/* ============================================================================
   PERSONALIDAD · Equipo (bento de Nosotros) — avatar de iniciales, especialidad.
   Reutiliza .bento/.cell de la Fase 2.
   ========================================================================== */
.cell__avatar {
    width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center;
    font-family: var(--font-display); font-size: 1.5rem; color: #fff; margin-bottom: 14px;
    background: radial-gradient(120% 120% at 30% 20%, var(--red-500), var(--red-700));
    box-shadow: 0 8px 20px rgba(230,57,70,.3); overflow: hidden;
}
.cell__avatar img { width: 100%; height: 100%; object-fit: cover; }
.cell__spec {
    display: inline-block; font-family: var(--font-head); font-weight: 700; font-size: .72rem;
    letter-spacing: .06em; text-transform: uppercase; color: var(--primary); background: var(--red-50);
    padding: 4px 10px; border-radius: 999px; margin-top: 2px;
}
.cell__bio {
    color: var(--muted); font-size: .92rem; margin-top: 10px;
    display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3;
    -webkit-box-orient: vertical; overflow: hidden;
}

/* ============================================================================
   PERSONALIDAD · Tipos de clases — tarjetas con cabecera ilustrada
   6 tarjetas (3 por fila). Cabecera con degradado + icono grande, cuerpo con
   título y descripción. Reutiliza .grid--3 y .reveal.
   ========================================================================== */
.clase-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm); overflow: hidden; display: flex; flex-direction: column;
    transition: transform .18s ease, box-shadow .25s ease, border-color .2s;
}
.clase-card:hover {
    transform: translateY(-5px); box-shadow: var(--shadow-md);
    border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
}
.clase-card__media {
    position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center;
    color: #fff; overflow: hidden;
    background: radial-gradient(120% 120% at 25% 15%, var(--c1, var(--red-500)), var(--c2, var(--red-700)));
}
.clase-card__media::before {
    content: ""; position: absolute; inset: 0; opacity: .45;
    background-image: radial-gradient(rgba(255,255,255,.35) 1.5px, transparent 1.5px);
    background-size: 18px 18px;
    -webkit-mask-image: radial-gradient(90% 90% at 85% 15%, #000, transparent 70%);
    mask-image: radial-gradient(90% 90% at 85% 15%, #000, transparent 70%);
}
.clase-card__media svg { width: 58px; height: 58px; position: relative; z-index: 1;
    stroke-width: 1.8; filter: drop-shadow(0 4px 10px rgba(0,0,0,.25)); }
.clase-card__tag {
    position: absolute; top: 12px; left: 12px; z-index: 2;
    display: inline-flex; align-items: center; gap: 5px;
    font-family: var(--font-head); font-weight: 700; font-size: .68rem;
    letter-spacing: .06em; text-transform: uppercase; color: #fff;
    background: rgba(14,15,18,.32); backdrop-filter: blur(4px);
    padding: 5px 11px; border-radius: 999px;
}
.clase-card__body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.clase-card__body h3 { font-family: var(--font-head); font-size: 1.2rem; }
.clase-card__body p { color: var(--muted); font-size: .93rem; line-height: 1.55; }
.clase-card__meta {
    margin-top: auto; padding-top: 12px; display: flex; align-items: center; gap: 8px;
    font-size: .82rem; color: var(--muted); font-weight: 600;
}
.clase-card__meta .ico { width: 16px; height: 16px; color: var(--primary); }

/* ── Clases en vivo · CTA al portal de inscripciones ─────────────────────── */
.clases-vivo {
    text-align: center; background: var(--coal-900); color: #fff;
    border-radius: var(--r-xl); padding: clamp(32px, 5vw, 52px); margin-bottom: 56px;
    position: relative; overflow: hidden;
}
.clases-vivo::before {
    content: ""; position: absolute; inset: 0; opacity: .5;
    background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px);
    background-size: 16px 16px;
    -webkit-mask-image: radial-gradient(80% 80% at 80% 15%, #000, transparent 75%);
    mask-image: radial-gradient(80% 80% at 80% 15%, #000, transparent 75%);
}
.clases-vivo > * { position: relative; z-index: 1; }
.clases-vivo h2 { color: #fff; margin: 6px 0 10px; }
.clases-vivo p { color: #c5c9d1; max-width: 54ch; margin: 0 auto 22px; }
.clases-vivo .btn { margin-inline: auto; }
.clases-vivo__dot {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--font-head); font-weight: 700; font-size: .72rem;
    letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
}
.clases-vivo__dot span {
    width: 9px; height: 9px; border-radius: 50%; background: var(--accent);
    box-shadow: 0 0 0 0 rgba(198,240,0,.6); animation: vivoPulse 1.8s infinite;
}
@keyframes vivoPulse {
    0%   { box-shadow: 0 0 0 0 rgba(198,240,0,.55); }
    70%  { box-shadow: 0 0 0 10px rgba(198,240,0,0); }
    100% { box-shadow: 0 0 0 0 rgba(198,240,0,0); }
}
.clases-vivo__nota { font-size: .82rem; color: #9aa1ad !important; margin: 14px auto 0 !important; }

/* ── Portal público de Clases en vivo ────────────────────────────────────── */
.cv-fecha { display:flex; align-items:baseline; gap:10px; margin:40px 0 18px; }
.cv-fecha h3 { font-family: var(--font-head); font-size:1.15rem; text-transform:capitalize; }
.cv-fecha span { color: var(--muted); font-size:.9rem; }
.clase-card__media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.clase-card__cupos {
    position:absolute; bottom:10px; right:10px; z-index:2;
    font-family: var(--font-head); font-weight:700; font-size:.72rem;
    padding:5px 11px; border-radius:999px; color:#fff; background:rgba(31,157,85,.92);
}
.clase-card__cupos--lleno { background: rgba(214,69,69,.94); }
.clase-card__meta-row { display:flex; flex-wrap:wrap; gap:6px 14px; font-size:.85rem; color:var(--muted); margin-top:2px; }
.clase-card__meta-row span { display:inline-flex; align-items:center; gap:5px; }
.clase-card__meta-row .ico { width:15px; height:15px; color:var(--primary); }
.clase-card .btn { margin-top:14px; }
/* Detalle */
.cv-detalle { display:grid; grid-template-columns: 1.1fr .9fr; gap:28px; align-items:start; }
.cv-detalle__img { border-radius: var(--r-lg); overflow:hidden; aspect-ratio:16/10; background:var(--coal-800); position:relative; }
.cv-detalle__img img { width:100%; height:100%; object-fit:cover; }
.cv-detalle__img-ph { position:absolute; inset:0; display:grid; place-items:center;
    background: radial-gradient(120% 120% at 25% 15%, var(--c1,var(--red-500)), var(--c2,var(--red-700))); }
.cv-detalle__img-ph svg { width:72px; height:72px; color:#fff; opacity:.9; }
.cv-datos { list-style:none; padding:0; margin:16px 0; display:grid; gap:12px; }
.cv-datos li { display:flex; gap:10px; align-items:flex-start; }
.cv-datos .ico { width:20px; height:20px; color:var(--primary); flex:none; margin-top:2px; }
.cv-datos b { display:block; font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700; }
@media (max-width:800px){ .cv-detalle { grid-template-columns:1fr; } }

/* ── Portal de clases (subdominio, layout independiente) ──────────────────── */
.portal-body { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
.portal-body main { flex: 1; }
.portal-head {
    position: sticky; top: 0; z-index: 40; height: var(--nav-h);
    background: rgba(14,15,18,.94); backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255,255,255,.08);
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding-inline: clamp(16px, 5vw, 40px);
}
.portal-head__brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 800; font-size: 1.2rem; color: #fff; }
.portal-head__brand:hover { text-decoration: none; }
.portal-head__brand b { color: var(--primary); }
.portal-head__brand svg { width: 22px; height: 22px; color: var(--primary); }
.portal-head__tag { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-family: var(--font-head); font-weight: 700; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; }
.portal-head__tag .ico { width: 16px; height: 16px; }
.portal-foot { text-align: center; color: var(--muted); font-size: .85rem; padding: 26px 16px; border-top: 1px solid var(--border); }

/* ── Cuenta regresiva del "drop" de horarios ─────────────────────────────── */
.cd {
    text-align: center; color: #fff; border-radius: var(--r-xl);
    background: radial-gradient(120% 120% at 80% 0%, var(--red-600), var(--coal-900) 70%);
    box-shadow: 0 24px 60px rgba(230,57,70,.28);
    padding: clamp(24px, 4vw, 40px); margin-bottom: 40px;
}
.cd__label { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .8rem; color: var(--accent); }
.cd__label .ico { width: 18px; height: 18px; }
.cd__time {
    font-family: var(--font-display); font-size: clamp(3rem, 12vw, 6rem); line-height: 1;
    letter-spacing: .02em; margin: 8px 0 6px; font-variant-numeric: tabular-nums;
    text-shadow: 0 6px 24px rgba(0,0,0,.35);
}
.cd__sub { color: #fff; font-size: 1rem; font-weight: 600; max-width: 52ch; margin: 0 auto; }
.cd__hint { color: #c5c9d1; font-size: .85rem; margin: 8px auto 0; max-width: 48ch; }
.cd--go .cd__time { color: var(--accent); animation: cdPulse 1s ease-in-out infinite; }
@keyframes cdPulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }