/* ============================================================================
   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;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: grayscale;
    font-synthesis: none;
}
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 (estilo AdminLTE, paleta rojo/negro): barra superior a todo
      el ancho, menú lateral CLARO, footer a todo el ancho por debajo ─────────── */
.app { height: 100vh; height: 100dvh; display: grid;
    grid-template-columns: 250px 1fr; grid-template-rows: 56px 1fr auto; overflow: hidden; }

/* ── Barra superior: un solo color; cada ítem es un BLOQUE a todo el alto cuyo
      hover sombrea la selección completa (sin bordes redondeados) ───────────── */
.appbar { grid-column: 1 / -1; grid-row: 1; display: flex; align-items: stretch;
    background: var(--primary); color: #fff; z-index: 70; box-shadow: 0 2px 10px rgba(14,15,18,.22); }
.appbar__item { display: inline-flex; align-items: center; gap: 8px; height: 100%; padding: 0 16px;
    color: rgba(255,255,255,.92); font-size: .85rem; font-weight: 600; text-decoration: none;
    border: 0; background: transparent; cursor: pointer; white-space: nowrap;
    transition: background .15s ease, color .15s ease; }
.appbar__item:hover { background: rgba(0,0,0,.16); color: #fff; text-decoration: none; }
.appbar__item.is-active { background: rgba(0,0,0,.22); color: #fff; }
.appbar__item svg { width: 18px; height: 18px; flex: none; }
/* Marca (esquina izquierda, del ancho del menú lateral) — SIN sombreado en reposo */
.appbar__brand { width: 250px; gap: 9px; background: transparent; color: #fff;
    font-family: var(--font-head); font-weight: 800; font-size: 1.12rem; }
.appbar__brand:hover { background: rgba(0,0,0,.12); }
.appbar__brand span { overflow: hidden; text-overflow: ellipsis; color: #fff; }
.appbar__brand svg { width: 22px; height: 22px; }
.appbar__toggle { padding: 0 18px; }
.appbar__toggle svg { width: 20px; height: 20px; }
.appbar__spacer { flex: 1 1 auto; }
.appbar__icon { padding: 0 15px; position: relative; }
.appbar__icon svg { width: 19px; height: 19px; }
.appbar__icon .noti-badge { top: 8px; right: 8px; border-color: transparent; }
.appbar__user { gap: 10px; padding: 0 18px; }
.appbar__avatar { width: 34px; height: 34px; border-radius: 50%; background: #fff; color: var(--primary);
    display: grid; place-items: center; font-family: var(--font-head); font-weight: 700; font-size: .8rem; }
.appbar__user-name { font-weight: 600; }

/* ── Menú lateral CLARO ───────────────────────────────────────────────────────── */
.side { grid-column: 1; grid-row: 2; background: var(--surface); color: var(--gray-700);
    border-right: 1px solid var(--border); padding: 0 12px 12px; display: flex; flex-direction: column; overflow-y: auto; }
/* Perfil: foto en círculo centrada + nombre + estado, con línea divisoria ROJA.
   Solo el avatar y el nombre enlazan al perfil; el estado "Online" no navega. */
.side__profile { display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 20px 10px 18px; margin-bottom: 8px; border-bottom: 2px solid var(--primary); }
.side__profile-avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--primary); color: #fff;
    display: grid; place-items: center; font-family: var(--font-head); font-weight: 700; font-size: 1.35rem;
    box-shadow: 0 4px 12px rgba(230,57,70,.30); text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease; }
.side__profile-avatar:hover { color: #fff; text-decoration: none; transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(230,57,70,.42); }
.side__profile-name { color: var(--ink); font-weight: 700; font-size: .95rem; text-align: center; text-decoration: none;
    max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side__profile-name:hover { color: var(--primary); text-decoration: none; }
.side__profile-status { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: .76rem; }
/* Punto verde con efecto radar (pulso por box-shadow, muy visible) */
.side__profile-dot { width: 9px; height: 9px; border-radius: 50%; background: #2ecc71; flex: none;
    animation: radar-pulse 1.8s ease-out infinite; }
@keyframes radar-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(46,204,113,.6); }
    70%  { box-shadow: 0 0 0 10px rgba(46,204,113,0); }
    100% { box-shadow: 0 0 0 0 rgba(46,204,113,0); }
}
/* Encabezado de sección */
.side__section { display: block; padding: 15px 12px 6px; color: var(--gray-400);
    font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
.side__nav { display: grid; gap: 2px; }
.side__nav a, .side__tree-toggle {
    display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: var(--r-sm);
    color: var(--gray-700); font: inherit; font-weight: 600; font-size: .9rem; text-align: left;
    background: transparent; border: 0; cursor: pointer; position: relative; }
.side__nav a > svg, .side__tree-toggle > svg { width: 18px; height: 18px; flex: none; color: var(--gray-400); transition: color .15s ease; }
.side__nav a:hover, .side__tree-toggle:hover { background: var(--gray-100); color: var(--ink); text-decoration: none; }
.side__nav a:hover > svg, .side__tree-toggle:hover > svg { color: var(--gray-500); }
.side__nav a.activo { background: var(--red-50); color: var(--primary); font-weight: 700; box-shadow: inset 3px 0 0 var(--primary); }
.side__nav a.activo > svg { color: var(--primary); }
.side__badge { margin-left: auto; font-size: .7rem; }
.side__logout { color: var(--danger-ink); }
.side__logout > svg { color: var(--danger) !important; }

/* Desplegable (submenú tipo árbol) */
.side__tree-caret { margin-left: auto; display: inline-flex; transition: transform .25s ease; }
.side__tree-caret svg { width: 16px; height: 16px; }
.side__tree.is-open > .side__tree-toggle { color: var(--ink); }
.side__tree.is-open > .side__tree-toggle .side__tree-caret { transform: rotate(180deg); }
.side__tree-menu { display: grid; gap: 2px; overflow: hidden; max-height: 0; transition: max-height .28s ease; }
.side__tree.is-open > .side__tree-menu { max-height: 480px; }
.side__tree-menu a { padding-left: 40px; font-weight: 600; font-size: .86rem; }
.side__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gray-300); flex: none; margin-left: -16px; }
.side__tree-menu a:hover .side__dot { background: var(--gray-400); }
.side__tree-menu a.activo { background: var(--red-50); color: var(--primary); box-shadow: inset 3px 0 0 var(--primary); }
.side__tree-menu a.activo .side__dot { background: var(--primary); }

/* ── Botón flotante para minimizar/expandir el menú (borde derecho, centrado) ── */
.side-collapse { position: fixed; top: 50%; left: calc(250px - 14px); transform: translateY(-50%);
    z-index: 65; width: 28px; height: 28px; border-radius: 50%; background: var(--surface);
    border: 1px solid var(--border); color: var(--gray-500); display: grid; place-items: center;
    cursor: pointer; box-shadow: 0 2px 8px rgba(14,15,18,.16);
    transition: left .2s ease, color .15s ease, border-color .15s ease; }
.side-collapse:hover { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }
.side-collapse svg { width: 16px; height: 16px; transform: rotate(90deg); transition: transform .2s ease; }
body.side-collapsed .side-collapse { left: calc(72px - 14px); }
body.side-collapsed .side-collapse svg { transform: rotate(-90deg); }

/* ── Menú lateral MINIMIZADO: solo la foto circular y los iconos ─────────────── */
body.side-collapsed .app { grid-template-columns: 72px 1fr; }
body.side-collapsed .appbar__brand { width: 72px; padding: 0; justify-content: center; }
body.side-collapsed .appbar__brand span { display: none; }
body.side-collapsed .side { padding: 0 8px 12px; }
body.side-collapsed .side__profile { padding: 14px 0 12px; }
body.side-collapsed .side__profile-avatar { width: 42px; height: 42px; font-size: .95rem; }
body.side-collapsed .side__profile-name,
body.side-collapsed .side__profile-status,
body.side-collapsed .side__section,
body.side-collapsed .side__nav a span,
body.side-collapsed .side__tree-toggle span,
body.side-collapsed .side__tree-caret,
body.side-collapsed .side__badge { display: none; }
body.side-collapsed .side__nav a,
body.side-collapsed .side__tree-toggle { justify-content: center; gap: 0; padding: 11px 0; }
body.side-collapsed .side__tree-menu { display: none; }

.side-backdrop { display: none; }
.panel-flash { margin-bottom: var(--panel-section-gap); }
/* .main es la columna derecha de altura completa: topbar fija arriba, footer fijo
   abajo y solo la zona central (.main__scroll) se desplaza. */
.main { grid-column: 2; grid-row: 2; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.main__scroll { flex: 1 1 auto; overflow-y: auto; overflow-x: auto; padding: 26px clamp(18px, 3vw, 40px); -webkit-overflow-scrolling: touch; }
/* Footer a TODO el ancho (fila 3 del grid), por debajo del menú lateral y del contenido */
.main__footer { grid-column: 1 / -1; grid-row: 3; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px clamp(18px, 3vw, 40px); background: var(--surface); border-top: 1px solid var(--border);
    color: var(--muted); font-size: .82rem; z-index: 60; }
.main__footer strong { color: var(--gray-700); font-weight: 700; }
.main__footer-brand { color: var(--primary); }
.main__footer a { color: var(--brand-link); font-weight: 700; }
.topbar { display: flex; align-items: center; gap: 16px; }
.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; grid-template-rows: 56px 1fr auto; }
    .main { grid-column: 1 / -1; }
    /* La marca deja de reservar el ancho del sidebar; el botón abre el cajón. */
    .appbar__brand { width: auto; }
    .appbar__link span { display: none; }   /* FAQ/Guía solo icono en móvil */
    .appbar__user-name { display: none; }
    .side-collapse { display: none; }        /* el botón flotante es solo de escritorio */
    /* Sidebar como cajón deslizable (off-canvas) por debajo de la barra. */
    .side { position: fixed; top: 56px; bottom: 0; left: 0; width: 272px; max-width: 84vw;
        z-index: 60; transform: translateX(-100%); transition: transform .25s ease; }
    body.side-collapsed .side { display: flex; }   /* en móvil no aplica el colapso de escritorio */
    body.side-collapsed .app { grid-template-columns: 1fr; }
    body.side-open .side { transform: none; box-shadow: 0 18px 50px rgba(14,15,18,.28); }
    .side-backdrop { display: block; position: fixed; inset: 56px 0 0 0; z-index: 55;
        background: rgba(14, 15, 18, .5); opacity: 0; visibility: hidden; transition: opacity .2s ease; }
    body.side-open .side-backdrop { opacity: 1; visibility: visible; }
    body.side-open { overflow: hidden; }   /* no scroll de fondo con el drawer abierto */
    .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__scroll { padding: 16px 14px; }
    .main__footer { padding: 10px 14px; }
    .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: 480px; margin: 8px auto 0; 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; }
/* QR grande y centrado: datos arriba y el código QU en el centro, debajo. */
.carne__body { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; padding: 26px 22px 30px; }
.carne__datos { flex: none; }
.carne__datos h2 { color: #fff; font-size: 1.35rem; }
.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: 16px; border-radius: 14px; line-height: 0; align-self: center; }
.carne__qr svg { width: 300px; height: 300px; max-width: 74vw; display: block; }
@media (max-width: 560px) { .carne__qr svg { width: 260px; height: 260px; } }

/* Caja enfocada a un socio: cabecera del cobro */
.cobro-fijo { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
    margin-bottom: 14px; padding: 10px 12px; background: color-mix(in srgb, var(--primary) 6%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border)); border-radius: 10px; }

/* ── 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 (barra superior fija) ──────────────────────────────── */
/* Barra en una sola fila: título a la izquierda; a la derecha los iconos de
   acción y, al final, el usuario (los iconos quedan a la IZQUIERDA del perfil,
   como en el sistema de referencia). El breadcrumb ya NO vive aquí: pasó al
   .content-header dentro del contenido. */
.topbar { flex: none; align-items: center; margin: 0; padding: 12px clamp(18px, 3vw, 40px);
    background: var(--surface); border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 3px rgba(14, 15, 18, .05); z-index: 30; }
.topbar__heading { min-width: 0; }
.topbar__heading h1 { margin: 0; font-size: 1.35rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Enlaces rápidos de ayuda en la barra (FAQ / Guía), como el sistema de referencia */
.topbar__quicklinks { display: flex; align-items: center; gap: 6px; margin-left: 18px; }
.topbar__quicklinks a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 8px;
    color: var(--gray-700); font-size: .82rem; font-weight: 600; text-decoration: none;
    transition: background .15s ease, color .15s ease; }
.topbar__quicklinks a:hover { background: var(--gray-100); color: var(--primary); text-decoration: none; }
.topbar__quicklinks a.is-active { color: var(--primary); background: var(--red-50); }
.topbar__quicklinks a svg { width: 16px; height: 16px; }
@media (max-width: 992px) { .topbar__quicklinks a span { display: none; } }
.topbar__account { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.topbar__icon-actions { display: flex; align-items: center; gap: 8px; }
.topbar__divider { width: 1px; height: 26px; background: var(--border); flex: none; }
.topbar__user { margin-left: 0; display: flex; align-items: center; gap: 10px; font-size: .82rem; }
.topbar__user-name { font-weight: 600; color: var(--gray-700); white-space: nowrap; }

/* Cabecera de contenido: título + subtítulo (izq.) + breadcrumb (der.), como AdminLTE */
.content-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    flex-wrap: wrap; margin-bottom: 20px; }
.content-header__titles { min-width: 0; }
.content-header__titles h1 { margin: 0; font-size: 1.5rem; line-height: 1.15; color: var(--ink); display: inline-flex; align-items: center; gap: 11px; }
.content-header__titles h1 > svg { width: 27px; height: 27px; color: var(--primary); flex: none; }
.content-header__subtitle { margin: 5px 0 0; color: var(--muted); font-size: .9rem; }
.content-header .crumbs { margin-left: auto; padding-top: 6px; }
.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; }
/* Selector de sede dentro de la barra superior: bloque a todo el alto, panel debajo */
.appbar .sede-menu { height: 100%; }
.appbar .sede-menu[data-open] > .sede-menu__btn { background: rgba(0,0,0,.22); color: #fff; }

/* 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: nowrap; white-space: nowrap; gap: 8px; margin-bottom: 5px; font-size: .8rem; font-weight: 600; color: var(--muted); }
.crumbs__link { display: inline-flex; align-items: center; gap: 6px; color: var(--gray-600, var(--muted)); text-decoration: none; transition: color .15s ease; }
.crumbs__link:hover { color: var(--primary); text-decoration: none; }
.crumbs__link svg, .crumbs__cur svg { width: 15px; height: 15px; flex: none; }
.crumbs__sep { color: var(--primary); font-weight: 800; font-size: 1.15rem; line-height: 1; margin: 0 1px; }
.crumbs__cur { display: inline-flex; align-items: center; gap: 6px; color: var(--primary); font-weight: 700; }
@media (max-width: 600px) { .crumbs { flex-wrap: wrap; white-space: normal; } }

/* ── Caja de tabla (bandeja) con cabecera, acciones y tabla ─────────────────── */
.table-card {
    /* Color del módulo: cada vista lo sobreescribe con style="--tabla-color:#xxx".
       Los demás tonos se derivan de él, así basta una línea para re-tematizar la
       tabla completa (cabecera, hover, paginador, botón, foco del buscador). */
    --tabla-color: var(--primary);
    --tabla-hover: color-mix(in srgb, var(--tabla-color) 7%, #fff);
    --tabla-soft:  color-mix(in srgb, var(--tabla-color) 12%, #fff);
    --tabla-borde: color-mix(in srgb, var(--tabla-color) 40%, var(--border));
    --tabla-sombra: color-mix(in srgb, var(--tabla-color) 30%, transparent);
    background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--tabla-color);
    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: 2px solid var(--tabla-color, var(--primary));
}
.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(--tabla-color); 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).
   SIN sombra en reposo; la sombra (en su color) aparece solo al hover/clic más abajo. */
.btn--pdf   { background: #e5342b; color: #fff; }
.btn--pdf:hover   { background: #c72c24; }
.btn--excel { background: #1d9d5b; color: #fff; }
.btn--excel:hover { background: #178049; }
.btn--info  { background: #2563eb; color: #fff; }
.btn--info:hover  { background: #1d4fd0; }
.btn--danger { background: var(--danger); color: #fff; }
.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: 7px 12px; border: 3px solid var(--gray-300); border-radius: 10px; font: inherit; font-size: .82rem; font-weight: 500; text-transform: none; letter-spacing: 0; }
.table-toolbar__search input:hover { border-color: var(--primary); }
.table-toolbar__search input:focus { outline: none; border-color: var(--primary); box-shadow: none; }

/* Tabla dentro de la caja: encabezado con el color del módulo y sin doble borde */
.table-card .tabla-wrap { border: 0; box-shadow: none; border-radius: 0; }
/* position:relative en TODAS las cabeceras (incl. la no ordenable "Gestión") para que
   se compongan en la misma capa y no se vean a desnivel / "pegadas encima" */
.table-card table.tabla th { position: relative; background: var(--tabla-color); color: #fff; border-bottom-color: transparent; }
.table-card table.tabla th a { color: #fff; }
.table-card table.tabla tbody tr:hover { background: var(--tabla-hover); }

/* El botón "Nuevo" adopta el color del módulo (como el catálogo de referencia) */
.table-card .table-card__actions .btn--primary { background: var(--tabla-color); box-shadow: none; }
.table-card .table-card__actions .btn--primary:hover { background: color-mix(in srgb, var(--tabla-color) 85%, #000); box-shadow: 0 9px 20px var(--tabla-sombra); }
.table-card .table-card__actions .btn--primary:active { box-shadow: 0 4px 10px var(--tabla-sombra); }
/* Foco del buscador con el color del módulo (sin halo de sombra) */
.table-card .table-toolbar__search input:hover,
.table-card .table-toolbar__search input:focus { border-color: var(--tabla-color); box-shadow: none; }

/* ── Páginas de ayuda (FAQ / Guía): caja centrada y angosta, título centrado ── */
.table-card--help { max-width: 880px; margin: 0 auto; }
.table-card--help .table-card__head { justify-content: center; border-bottom: 2px solid var(--tabla-color); }
.table-card--help .table-card__title { justify-content: center; text-align: center; }
.table-card--help .table-card__body { padding: 24px 26px 30px; }

/* ── Acordeón de ayuda (FAQ / Guía de uso) ─────────────────────────────────── */
.faq { display: flex; flex-direction: column; gap: 12px; --faq-color: var(--tabla-color, var(--primary)); }
.faq__item { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface);
    transition: border-color .2s ease, box-shadow .2s ease; }
.faq__item:hover { box-shadow: 0 4px 15px rgba(14,15,18,.06); }
.faq__item.is-open { border-color: var(--faq-color);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--faq-color) 22%, transparent); }
.faq__header { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px 20px;
    background: none; border: 0; font: inherit; text-align: left; cursor: pointer; color: var(--ink);
    transition: background .2s ease; }
.faq__header:hover { background: color-mix(in srgb, var(--faq-color) 6%, var(--surface)); }
.faq__icon { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%;
    color: var(--faq-color); background: color-mix(in srgb, var(--faq-color) 12%, var(--surface)); }
.faq__icon svg { width: 18px; height: 18px; }
.faq__title { flex: 1; min-width: 0; font-weight: 700; font-size: .98rem; }
.faq__chevron { flex: none; color: var(--gray-400); transition: transform .3s ease, color .3s ease; }
.faq__chevron svg { width: 18px; height: 18px; }
.faq__item.is-open .faq__chevron { color: var(--faq-color); transform: rotate(180deg); }
.faq__body { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.faq__item.is-open .faq__body { max-height: 1200px; }
.faq__content { padding: 0 22px 20px 74px; color: var(--gray-700); font-size: .9rem; line-height: 1.75; }
.faq__content b { color: var(--ink); }
.faq__content p { margin: 0 0 8px; }
.faq__content p:last-child { margin-bottom: 0; }
/* Píldoras de estado reutilizables dentro de la ayuda */
.help-pill { display: inline-flex; align-items: center; gap: 6px; margin: 2px 4px 2px 0;
    padding: 4px 10px; border-radius: 999px; color: #fff; font-size: .78rem; font-weight: 700; }
.help-pill--ok { background: var(--ok); }
.help-pill--warn { background: var(--warn); }
.help-pill--danger { background: var(--danger); }
.help-pill--muted { background: var(--gray-400); }
@media (max-width: 767px) {
    .faq__header { gap: 10px; padding: 14px 16px; }
    .faq__content { padding: 0 16px 16px 18px; font-size: .86rem; }
}

/* 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; }
/* Paginador tematizado por el color del módulo cuando vive dentro de una .table-card */
.table-card .pager__btn:hover:not(:disabled):not(.is-active) { border-color: var(--tabla-borde); color: var(--tabla-color); background: var(--tabla-hover); }
.table-card .pager__btn.is-active { background: var(--tabla-color); border-color: var(--tabla-color); color: #fff; }
.pager__btn:disabled { opacity: .45; cursor: not-allowed; }
.pager__gap { padding: 0 2px; color: var(--muted); font-weight: 700; }

/* ── Botón "Acción" con menú desplegable (estilo catálogo de referencia) ─────── */
.dropdown { position: relative; display: inline-block; vertical-align: middle; }
.btn-accion { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border: 0; border-radius: 8px;
    background: var(--tabla-color, var(--primary)); color: #fff; font: inherit; font-size: .82rem; font-weight: 700;
    cursor: pointer; box-shadow: none;
    transition: transform .15s ease, box-shadow .15s ease; }
.btn-accion svg { width: 15px; height: 15px; }
.btn-accion::after { content: ''; margin-left: 2px; border-left: 4px solid transparent; border-right: 4px solid transparent;
    border-top: 5px solid currentColor; }
.btn-accion:hover, .btn-accion:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 18px var(--tabla-sombra, rgba(230,57,70,.4)); color: #fff; }
.btn-accion:active { transform: translateY(0); box-shadow: 0 3px 8px var(--tabla-sombra, rgba(230,57,70,.35)); }
/* Botones de acción (PDF/Excel/Info/Danger): SIN sombra en reposo; elevar + sombrear
   (en el color de cada botón) SOLO al pasar el mouse / clic — como los botones de los alerts.
   La elevación (translateY) ya la da la regla base .btn:hover; el :active restablece. */
.table-card__actions .btn:active { transform: translateY(0); }
.btn--pdf:hover    { box-shadow: 0 9px 20px rgba(229,52,43,.42); }
.btn--excel:hover  { box-shadow: 0 9px 20px rgba(29,157,91,.42); }
.btn--info:hover   { box-shadow: 0 9px 20px rgba(37,99,235,.42); }
.btn--danger:hover { box-shadow: 0 9px 20px rgba(214,69,69,.42); }
.btn--pdf:active    { box-shadow: 0 4px 10px rgba(229,52,43,.32); }
.btn--excel:active  { box-shadow: 0 4px 10px rgba(29,157,91,.32); }
.btn--info:active   { box-shadow: 0 4px 10px rgba(37,99,235,.32); }
.btn--danger:active { box-shadow: 0 4px 10px rgba(214,69,69,.32); }
.dropdown__menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 50; min-width: 214px; padding: 0; overflow: hidden;
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 30px rgba(14,15,18,.16); text-align: left; }
.dropdown__menu[hidden] { display: none; }
/* Cada ítem con su línea divisora; el sombreado del hover ocupa TODO el ancho */
.dropdown__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 15px; border: 0; border-radius: 0;
    border-bottom: 1px solid var(--border); background: transparent; color: var(--gray-700); font: inherit; font-size: .85rem;
    font-weight: 600; text-align: left; text-decoration: none; cursor: pointer; white-space: nowrap; }
.dropdown__menu > :last-child .dropdown__item, .dropdown__menu > .dropdown__item:last-child { border-bottom: 0; }
.dropdown__item svg { width: 16px; height: 16px; flex: none; color: var(--gray-400); }
.dropdown__item:hover { background: var(--tabla-hover, var(--gray-100)); color: var(--tabla-color, var(--primary)); text-decoration: none; }
.dropdown__item:hover svg { color: inherit; }
.dropdown__item.is-warn { color: var(--warn-ink); } .dropdown__item.is-warn svg { color: var(--warn); }
.dropdown__item.is-warn:hover { background: var(--warn-soft); color: var(--warn-ink); }
.dropdown__item.is-danger { color: var(--danger-ink); } .dropdown__item.is-danger svg { color: var(--danger); }
.dropdown__item.is-danger:hover { background: var(--danger-soft); color: var(--danger-ink); }
.dropdown__item.is-success { color: var(--ok-ink); } .dropdown__item.is-success svg { color: var(--ok); }
.dropdown__item.is-success:hover { background: var(--ok-soft); color: var(--ok-ink); }
.dropdown__item:disabled { color: var(--gray-400); cursor: not-allowed; }
.dropdown__item:disabled svg { color: var(--gray-300); }
.dropdown__divider { height: 1px; margin: 5px 4px; background: var(--border); }
.dropdown__form { margin: 0; }
/* Mientras un menú de la tabla está abierto, ni el wrap ni la propia caja recortan el
   desplegable (importante cuando hay pocas filas y el menú excede el alto de la tabla). */
.table-card .tabla-wrap:has(.dropdown[data-open]) { overflow: visible; }
.table-card:has(.dropdown[data-open]) { overflow: visible; }
.table-card:has(.dropdown[data-open]) .table-card__body { overflow: visible; }

/* ── Selector "MOSTRAR N REGISTROS" ─────────────────────────────────────────── */
.table-length { 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-length select { padding: 7px 12px; border: 3px solid var(--gray-300); border-radius: 10px; font: inherit; font-size: .82rem;
    font-weight: 700; color: var(--gray-700); background: var(--surface); box-shadow: none; cursor: pointer; text-transform: none; }
.table-length select:hover { border-color: var(--tabla-color, var(--primary)); }
.table-length select:focus { outline: none; border-color: var(--tabla-color, var(--primary)); box-shadow: none; }

/* Badge de estado (ACTIVO / INACTIVO) en la celda — estilo botón (relleno) */
.estado-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 6px; font-size: .74rem; font-weight: 800; color: #fff; }
.estado-pill svg { width: 13px; height: 13px; color: #fff; }
.estado-pill--on { background: var(--ok); }
.estado-pill--off { background: var(--danger); }
.estado-pill--warn { background: var(--warn); }

/* Membresía en la celda: misma estética que estado-pill (cuadrado redondeado, relleno),
   tematizada con el color del proyecto (rojo). */
.memb-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 6px;
    font-size: .74rem; font-weight: 800; line-height: 1.1; }
.memb-pill--on   { background: var(--primary); color: #fff; }
.memb-pill--off  { background: var(--red-50); color: var(--primary-d); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--primary) 45%, transparent); }
.memb-pill--none { background: var(--gray-100); color: var(--gray-500); }

/* Chip resaltado (p. ej. DNI) y fecha/hora con iconos del color del módulo */
.cell-token { display: inline-block; padding: 4px 12px; border-radius: 6px; background: var(--tabla-hover, var(--gray-100));
    color: var(--tabla-color, var(--primary)); font-weight: 700; font-size: .82rem; white-space: nowrap; }
.cell-dtrow { display: inline-flex; align-items: center; gap: 14px; white-space: nowrap; }
.cell-dt { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; color: var(--gray-500); font-weight: 600; }
.cell-dt svg { width: 14px; height: 14px; color: var(--tabla-color, var(--primary)); }
.cell-icon { color: var(--gray-400); }
.cell-icon svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 5px; }
/* Teléfono: icono + número SIEMPRE en una línea */
.cell-phone { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.cell-phone svg { width: 14px; height: 14px; color: var(--gray-400); flex: none; }
/* Badge de rol: mismo formato que el badge de estado (cuadro con bordes redondeados),
   relleno con el color del módulo */
.role-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: var(--r-sm, 8px);
    background: var(--tabla-color, var(--primary)); color: #fff; font-size: .74rem; font-weight: 800; }
/* Chip de rol con aspecto de botón, pero fijo (no clickeable). */
.role-badge--fijo { padding: 8px 18px; border-radius: var(--r-sm, 8px); font-size: .8rem; letter-spacing: .02em;
    text-transform: uppercase; cursor: default; box-shadow: 0 4px 12px color-mix(in srgb, var(--tabla-color, var(--primary)) 30%, transparent); }
.role-badge--socio   { background: var(--primary); box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 30%, transparent); }
.role-badge--cliente { background: #2563eb;        box-shadow: 0 4px 12px color-mix(in srgb, #2563eb 30%, transparent); }

/* ── Formulario de usuario (crear / editar) ──────────────────────────────────── */
.form-card { --fc: var(--primary);
    background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--fc);
    border-radius: var(--panel-card-radius, 16px); box-shadow: var(--panel-card-shadow); overflow: hidden; }
.form-card__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    padding: 16px 20px; border-bottom: 2px solid var(--fc); }
.form-card__title { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 1.05rem; }
.form-card__title svg { width: 20px; height: 20px; color: var(--fc); }
.form-card__body { padding: 22px 24px 26px; }

.ff-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 22px; }
.ff { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ff--2 { grid-column: 1 / -1; }
/* Variante de 3 por fila con la última fila centrada (flex en vez de grid). */
.ff-grid--3 { display: flex; flex-wrap: wrap; justify-content: center; }
.ff-grid--3 > .ff { flex: 0 1 calc((100% - 44px) / 3); min-width: 230px; }
.cliente-clave-card { margin-top: 18px; }
.ff__label { font-size: .8rem; font-weight: 700; color: var(--fc); }
.ff__control { display: flex; align-items: center; border: 2px solid var(--gray-300); border-radius: 10px;
    background: var(--surface); overflow: hidden; transition: border-color .15s ease; }
.ff__control:focus-within { border-color: var(--fc); }
.ff__ico { display: grid; place-items: center; padding: 0 11px; align-self: stretch; color: var(--gray-400);
    background: var(--gray-50); border-right: 2px solid var(--border); }
.ff__ico svg { width: 16px; height: 16px; }
.ff__control input, .ff__control select { flex: 1; min-width: 0; border: 0; outline: none; background: transparent;
    padding: 10px 12px; font: inherit; font-size: .9rem; color: var(--ink); }
.ff__control select { cursor: pointer; }
.ff textarea { border: 2px solid var(--gray-300); border-radius: 10px; padding: 10px 12px; font: inherit; font-size: .9rem;
    resize: vertical; outline: none; transition: border-color .15s ease; }
.ff textarea:focus { border-color: var(--fc); }
.ff__hint { font-size: .74rem; color: var(--muted); }
.ff__file { font-size: .85rem; }
.ff__inline { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; }
.current-trainer-photo { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.current-trainer-photo img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border); }

.form-subhead { display: flex; align-items: center; gap: 9px; margin: 22px 0 14px; padding-top: 18px;
    border-top: 1px dashed var(--border); font-weight: 800; color: var(--fc); font-size: .95rem; }
.form-subhead svg { width: 18px; height: 18px; }
.form-subhead small { font-weight: 500; color: var(--muted); font-size: .78rem; }

.form-divider { height: 0; border-top: 2px dashed var(--border); margin: 22px 0; }
/* En el formulario de usuarios el divisor que separa los datos de las cajas
   de estado/contraseña va en rojo (color del módulo). */
[data-user-form] .form-divider { border-top-color: var(--primary); }

.form-note { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 12px;
    border: 1px dashed color-mix(in srgb, #2563eb 45%, var(--border));
    background: color-mix(in srgb, #2563eb 7%, var(--surface)); color: var(--gray-700); }
.form-note svg { width: 20px; height: 20px; color: #2563eb; flex: none; }
.form-note p { margin: 0; font-size: .88rem; }

.form-boxes { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
/* Un solo box (p. ej. clientes: solo «Estado del cliente») centrado. */
.form-boxes--solo { grid-template-columns: minmax(0, 380px); justify-content: center; }
.estado-box, .pass-box { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
    padding: 20px; border-radius: 14px; border: 2px dashed var(--border); }
.estado-box__title, .pass-box__title { font-size: .74rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--gray-500); }
.estado-box { cursor: pointer; }
.estado-box.is-on { border-color: color-mix(in srgb, var(--ok) 55%, var(--border)); background: color-mix(in srgb, var(--ok) 8%, var(--surface)); }
.estado-box.is-off { border-color: color-mix(in srgb, var(--danger) 55%, var(--border)); background: color-mix(in srgb, var(--danger) 8%, var(--surface)); }
.estado-box__toggle { display: inline-flex; align-items: center; gap: 10px; font-size: 1rem; }
/* Check siempre visible: verde cuando está activo, rojo cuando está inactivo. */
.estado-box__toggle input { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; margin: 0;
    border-radius: 6px; border: 2px solid var(--ok); background: var(--ok); cursor: pointer;
    display: inline-grid; place-content: center; flex: none; transition: background .15s ease, border-color .15s ease; }
.estado-box__toggle input::after { content: ""; width: 6px; height: 11px; margin-top: -2px;
    border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.estado-box.is-off .estado-box__toggle input { border-color: var(--danger); background: var(--danger); }
.estado-box.is-on .estado-box__toggle b { color: var(--ok-ink, var(--ok)); }
.estado-box.is-off .estado-box__toggle b { color: var(--danger-ink, var(--danger)); }
.pass-box { border-color: color-mix(in srgb, #2563eb 45%, var(--border)); background: color-mix(in srgb, #2563eb 6%, var(--surface)); }
.pass-box small { font-size: .76rem; color: var(--muted); }

.form-actions { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 26px; }
/* Guardar/Actualizar y Cancelar comparten EXACTAMENTE el mismo tamaño (mismo botón reutilizado). */
.form-actions .btn { width: 230px; justify-content: center; }
@media (max-width: 520px) { .form-actions .btn { width: 100%; } }
/* Botones del encabezado del formulario (Perfil público / Perfil / Regresar). */
.form-head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.btn--warn { background: var(--warn); color: #fff; }
.btn--warn:hover { background: color-mix(in srgb, var(--warn) 85%, #000); box-shadow: 0 9px 20px color-mix(in srgb, var(--warn) 42%, transparent); }

@media (max-width: 767px) {
    .ff-grid, .form-boxes { grid-template-columns: 1fr; }
    .form-card__body { padding: 18px 16px 22px; }
}

/* Tabla con encabezados centrados; columna .tl alineada a la izquierda */
table.tabla.tabla--center th, table.tabla.tabla--center td { text-align: center; vertical-align: middle; }
table.tabla.tabla--center th.tl, table.tabla.tabla--center td.tl { text-align: left; }
.tabla--center .cell-name { display: inline-flex; align-items: center; gap: 9px; }
.tabla--center .cell-name svg { width: 16px; height: 16px; color: var(--tabla-color, var(--primary)); flex: none; }

/* Línea separadora a todo el ancho por fila + sombreado completo al pasar el mouse */
.table-card table.tabla tbody tr { border-bottom: 1px solid var(--border); }
.table-card table.tabla tbody tr:last-child { border-bottom: 0; }
.table-card table.tabla tbody td { border-bottom: 0; }
.table-card table.tabla tbody tr:hover { background: color-mix(in srgb, var(--tabla-color) 9%, #fff); }

/* Ordenamiento por columnas (cabecera clicable con flechas).
   Sin padding-right extra para que el texto quede centrado igual que las celdas;
   la flecha es absoluta y no desplaza el contenido. */
.tabla th.th-sort { cursor: pointer; user-select: none; position: relative; }
.tabla th.th-sort:hover { background: color-mix(in srgb, #000 12%, var(--tabla-color)) !important; }
.th-arrow { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); display: inline-flex; flex-direction: column; gap: 1px; line-height: 1; pointer-events: none; }
.th-arrow span { font-size: 8px; color: rgba(255,255,255,.45); }
.tabla th.th-asc .th-up { color: #fff; }
.tabla th.th-desc .th-down { color: #fff; }

/* ── Alertas flotantes (toast) sobre el box de la tabla, auto-cierre a los 5s ── */
.panel-flash { position: relative; display: flex; align-items: center; gap: 12px; margin-bottom: 18px;
    padding: 14px 48px 14px 18px; border-radius: 10px; color: #fff; font-weight: 600;
    box-shadow: 0 10px 26px rgba(14,15,18,.20); animation: toast-in .3s ease; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
.panel-flash.is-hiding { animation: toast-out .5s ease forwards; }
@keyframes toast-out { to { opacity: 0; transform: translateY(-12px); } }
.panel-flash--ok { background: var(--ok); }
.panel-flash--error { background: var(--danger); }
.panel-flash__icon { display: inline-flex; flex: none; }
.panel-flash__icon svg { width: 20px; height: 20px; }
.panel-flash__close { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); background: none; border: 0;
    color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; opacity: .85; transition: transform .15s ease, opacity .15s ease; }
.panel-flash__close:hover { opacity: 1; transform: translateY(-50%) scale(1.45); }

/* ── Modal de confirmación reutilizable (deshabilitar / habilitar / eliminar) ── */
.cmodal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px;
    background: rgba(14,15,18,.55); animation: cmodal-fade .18s ease; }
.cmodal[hidden] { display: none; }
@keyframes cmodal-fade { from { opacity: 0; } to { opacity: 1; } }
.cmodal__box { width: 100%; max-width: 460px; background: var(--surface); border-radius: 16px; overflow: hidden;
    box-shadow: 0 24px 60px rgba(0,0,0,.35); animation: cmodal-pop .2s ease; }
@keyframes cmodal-pop { from { transform: translateY(10px) scale(.97); opacity: .5; } to { transform: none; opacity: 1; } }
.cmodal__head { display: flex; align-items: center; justify-content: center; position: relative; padding: 16px 22px; color: #fff; }
.cmodal__head h4 { margin: 0; font-size: 1.15rem; font-weight: 700; }
.cmodal__x { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: #fff;
    font-size: 1.55rem; line-height: 1; cursor: pointer; opacity: .85; transition: transform .15s ease, opacity .15s ease; }
.cmodal__x:hover { opacity: 1; transform: translateY(-50%) scale(1.35); }
.cmodal__body { padding: 26px 24px 8px; text-align: center; }
.cmodal__icon { place-items: center; margin: 0 auto 16px; width: 78px; height: 78px; border-radius: 50%; }
.cmodal__icon svg { width: 40px; height: 40px; }
.cmodal__q { margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--ink); }
.cmodal__sub { margin: 8px 0 0; font-size: .88rem; color: var(--muted); }
.cmodal__sub[hidden] { display: none; }
.cmodal__foot { display: flex; justify-content: center; gap: 12px; padding: 22px 24px 26px; }
.cmodal__btn { border: 0; border-radius: 30px; padding: 11px 30px; font: inherit; font-weight: 700; font-size: .92rem;
    cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.cmodal__btn:hover { transform: translateY(-2px); }
.cmodal__btn:active { transform: translateY(0); }
.cmodal__cancel { background: var(--gray-100); color: var(--gray-700); }
.cmodal__cancel:hover { box-shadow: 0 8px 18px rgba(14,15,18,.14); }
.cmodal--warn .cmodal__head { background: var(--warn); }
.cmodal--warn .cmodal__ok { background: var(--warn); color: #fff; }
.cmodal--warn .cmodal__ok:hover { box-shadow: 0 8px 18px rgba(199,125,10,.4); }
.cmodal--success .cmodal__head { background: var(--ok); }
.cmodal--success .cmodal__ok { background: var(--ok); color: #fff; }
.cmodal--success .cmodal__ok:hover { box-shadow: 0 8px 18px rgba(31,157,85,.4); }
.cmodal--danger .cmodal__head { background: var(--danger); }
.cmodal--danger .cmodal__ok { background: var(--danger); color: #fff; }
.cmodal--danger .cmodal__ok:hover { box-shadow: 0 8px 18px rgba(214,69,69,.4); }
/* Solo se muestra el icono de la variante activa, con su color */
.cmodal__icon { display: none; }
.cmodal--warn .cmodal__icon[data-icon="warn"] { display: grid; background: var(--warn-soft); color: var(--warn); }
.cmodal--success .cmodal__icon[data-icon="success"] { display: grid; background: var(--ok-soft); color: var(--ok); }
.cmodal--danger .cmodal__icon[data-icon="danger"] { display: grid; background: var(--danger-soft); color: var(--danger); }

@media print {
    .side, .appbar, .topbar, .main__footer, .no-print { display: none !important; }
    /* Restaurar el flujo normal: sin altura fija ni overflow oculto, la impresión
       no se recorta al alto de una pantalla. */
    .app { display: block; height: auto; overflow: visible; }
    .main { height: auto; overflow: visible; display: block; }
    .main__scroll { padding: 0; overflow: visible; }
    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; }

/* ── Módulos 2026: Asistencia, QR por sede y Colas ───────────────────────── */
.module-toolbar { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:-4px 0 22px; }
.back-link { display:inline-flex; align-items:center; gap:8px; color:var(--primary); font-weight:700; font-size:.88rem; }
.back-link .ico { width:18px; height:18px; }
.module-kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-bottom:20px; }
.module-kpi { min-height:112px; display:flex; align-items:center; gap:15px; padding:20px; background:#fff; border:1px solid #e9ebf0; border-radius:13px; box-shadow:0 5px 18px rgba(27,35,58,.055); }
.module-kpi__icon { width:46px; height:46px; flex:0 0 46px; display:grid; place-items:center; border-radius:12px; }
.module-kpi__icon .ico { width:23px; height:23px; }
.module-kpi > div { min-width:0; display:grid; line-height:1.2; }
.module-kpi strong { font-family:var(--font-head); font-size:1.55rem; color:#171a21; }
.module-kpi span:not(.module-kpi__icon) { font-size:.82rem; font-weight:650; color:#4c5361; margin-top:2px; }
.module-kpi small,.module-kpi a { margin-top:8px; color:#8a91a1; font-size:.7rem; }
.module-kpi a { color:#424a5a; font-weight:650; }
.module-kpi--red .module-kpi__icon { background:#ffedef; color:#ef3348; }
.module-kpi--green .module-kpi__icon { background:#e6f7ed; color:#22af69; }
.module-kpi--blue .module-kpi__icon { background:#e9f0ff; color:#416df0; }
.module-kpi--violet .module-kpi__icon { background:#f1eaff; color:#7d50ec; }
.module-kpi--orange .module-kpi__icon { background:#fff0df; color:#e88022; }

.attendance-layout { display:grid; grid-template-columns:minmax(0,1.48fr) minmax(330px,.78fr); gap:18px; align-items:start; }
.attendance-main,.attendance-side { display:grid; gap:18px; min-width:0; }
.attendance-layout .card,.attendance-summary,.queues-layout .card { border:1px solid #e7e9ee; box-shadow:0 5px 20px rgba(26,35,58,.055); border-radius:13px; }
.section-heading { display:flex; align-items:center; gap:12px; margin-bottom:15px; }
.section-heading__icon { width:34px; height:34px; border-radius:9px; display:grid; place-items:center; flex:0 0 auto; }
.section-heading__icon .ico { width:19px; height:19px; }
.section-heading__icon--red { background:#fff0f1; color:#ef3348; }
.section-heading__icon--dark { background:#eef0f4; color:#262b35; }
.section-heading h3,.section-title-row h3 { margin:0; font-size:.96rem; }
.section-heading p,.section-title-row p { margin:3px 0 0; color:#7c8494; font-size:.76rem; }
.section-title-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.section-title-row h3 span { color:#a0a6b2; font-weight:500; }
.section-title-row small { display:block; color:#98a0ad; font-size:.7rem; margin-top:3px; }
.attendance-scanner { padding:18px; }
.attendance-scanner .asis-cam { aspect-ratio:2.85/1; min-height:190px; background:radial-gradient(circle at 50% 30%,#30343b 0,#16191e 60%,#0d0f12 100%); border-radius:10px; }
.attendance-scanner .asis-cam video { position:relative; z-index:2; }
.attendance-scanner .asis-mira { inset:7% 36%; border:2px solid #ff334b; border-radius:11px; box-shadow:none; z-index:4; }
.asis-placeholder { position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:8px; color:#fff; opacity:.9; z-index:3; }
.asis-placeholder .ico { width:30px; height:30px; }
.asis-placeholder span { font-size:.75rem; }
.attendance-scanner .asis-aviso { margin-top:14px; padding:12px 14px; font-size:.79rem; }
.scanner-actions { display:flex; gap:10px; margin-top:12px; }
.btn--danger-soft { border:1px solid #ffcbd1; background:#fff7f8; color:#e52e42; }
.attendance-manual { padding:18px; }
.attendance-manual > p { color:#747d8d; font-size:.76rem; margin:4px 0 12px; }
.attendance-manual__row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; }
.attendance-manual .combo__input { width:100%; height:40px; padding:0 14px 0 39px; border:1.5px solid var(--border); border-radius:8px; font:inherit; font-size:.8rem; }
.field-icon { position:absolute; z-index:2; left:13px; top:10px; color:#9ba3b0; }
.field-icon .ico { width:18px; height:18px; }
.attendance-manual .btn:disabled { opacity:.48; cursor:not-allowed; }
.attendance-selected { margin-top:9px; color:#667080; font-size:.76rem; }
.attendance-manual-inline { margin-top:16px; padding-top:14px; border-top:1px solid var(--border); }
.attendance-manual-inline label { display:block; font-size:.82rem; color:var(--muted); font-weight:650; margin-bottom:7px; }
.attendance-manual-inline > div { display:flex; gap:8px; }
.attendance-manual-inline input { flex:1; padding:10px 12px; border:1.5px solid var(--border); border-radius:8px; font:inherit; }
.session-card,.recent-card { padding:18px; }
.session-card { min-height:265px; }
.session-empty { min-height:155px; display:grid; place-content:center; justify-items:center; text-align:center; color:#9aa1ad; }
.session-empty > span { width:48px; height:48px; display:grid; place-items:center; border-radius:50%; background:#f3f5f8; margin-bottom:9px; }
.session-empty .ico { width:23px; height:23px; }
.session-empty p { max-width:210px; font-size:.75rem; line-height:1.5; }
.asis-lista li { padding:11px 12px; }
.asis-lista li span:first-child { display:grid; }
.asis-lista li small { margin-top:2px; }
.live-pill { display:inline-flex; align-items:center; gap:5px; padding:4px 8px; color:#168453; background:#e9f8f0; border-radius:99px; font-size:.66rem; font-weight:700; }
.live-pill i { width:6px; height:6px; border-radius:50%; background:#23b66c; }
.recent-empty { padding:38px 12px; text-align:center; color:#929aa7; font-size:.76rem; }
.recent-timeline { list-style:none; margin:0; padding:2px 0 4px; }
.recent-timeline li { display:grid; grid-template-columns:26px minmax(0,1fr) auto; gap:9px; align-items:start; min-height:51px; position:relative; }
.recent-timeline li:not(:last-child)::before { content:""; position:absolute; left:11px; top:25px; bottom:0; width:1px; background:#e1e5eb; }
.recent-timeline__dot { width:24px; height:24px; border-radius:50%; display:grid; place-items:center; background:#f0f2f5; color:#87909e; font-size:.75rem; z-index:1; }
.recent-timeline__dot.is-live { background:#e3f7eb; color:#19a65d; font-weight:800; }
.recent-timeline b { display:block; font-size:.75rem; color:#22262e; }
.recent-timeline small { display:block; margin-top:2px; font-size:.66rem; color:#8992a2; }
.recent-timeline time { padding-top:2px; color:#8992a2; font-size:.66rem; }
.recent-link { display:block; border-top:1px solid #eceef2; padding-top:10px; color:#4b5362; font-size:.7rem; font-weight:700; }
.attendance-summary { margin-top:18px; padding:16px 18px; }
.attendance-summary__grid { display:grid; grid-template-columns:repeat(4,1fr); }
.attendance-summary__grid > div { display:grid; grid-template-columns:32px auto; grid-template-rows:auto auto; align-items:center; gap:0 9px; padding:1px 18px; border-right:1px solid #e8ebef; }
.attendance-summary__grid > div:first-child { padding-left:0; }.attendance-summary__grid > div:last-child { border:0; }
.attendance-summary__grid b { font-size:.88rem; }.attendance-summary__grid small { color:#87909e; font-size:.67rem; }
.summary-icon { width:30px; height:30px; grid-row:1/3; display:grid; place-items:center; border-radius:50%; }
.summary-icon .ico { width:16px; height:16px; }.summary-icon--blue{background:#edf2ff;color:#416df0}.summary-icon--green{background:#e7f8ee;color:#1da866}.summary-icon--orange{background:#fff1e3;color:#e78022}.summary-icon--red{background:#ffedef;color:#eb4053}

/* QR imprimible por sede */
.qr-poster-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(430px,620px)); justify-content:center; gap:24px; }
.qr-poster.sticker { max-width:620px; width:100%; margin:0; padding:36px 52px 40px; border:1px solid #e5e8ee; box-shadow:0 10px 35px rgba(28,36,58,.08); }
.qr-poster__brand { display:flex; justify-content:center; align-items:center; gap:8px; color:#ef3046; font-size:1.05rem; }.qr-poster__brand .ico{width:22px;height:22px;fill:currentColor}
.qr-poster__site { display:inline-flex; align-items:center; gap:5px; margin-top:12px; padding:5px 10px; background:#f3f5f8; color:#687181; border-radius:99px; font-size:.7rem; font-weight:700; }.qr-poster__site .ico{width:13px;height:13px}
.qr-poster h2 { margin:14px 0 3px; font-size:1.7rem; }.qr-poster > p { font-size:.84rem; }
.qr-frame { width:min(330px,100%); min-height:330px; margin:20px auto 24px; position:relative; display:grid; place-items:center; }
.qr-frame > i { position:absolute; width:32px; height:32px; border-color:#f02f46; border-style:solid; }
.qr-frame > i:nth-child(1){left:0;top:0;border-width:3px 0 0 3px;border-radius:10px 0 0}.qr-frame > i:nth-child(2){right:0;top:0;border-width:3px 3px 0 0;border-radius:0 10px 0 0}.qr-frame > i:nth-child(3){left:0;bottom:0;border-width:0 0 3px 3px;border-radius:0 0 0 10px}.qr-frame > i:nth-child(4){right:0;bottom:0;border-width:0 3px 3px 0;border-radius:0 0 10px}
.qr-poster .sticker__qr { margin:0; padding:18px; background:#fff; }.qr-poster .sticker__qr svg { width:270px; height:270px; }
.qr-url { max-width:420px; margin:0 auto; display:grid; grid-template-columns:24px minmax(0,1fr) 30px; align-items:center; gap:7px; padding:11px 12px; border-radius:8px; background:#f5f6f8; color:#535c6c; text-align:left; }.qr-url > span{transform:rotate(135deg);color:#8b94a3}.qr-url .ico{width:17px;height:17px}.qr-url b{font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.qr-copy{border:0;background:transparent;color:#7c8594;cursor:pointer;padding:4px}.qr-copy.is-copied{color:#20a765;background:#e6f7ee;border-radius:6px}
.qr-poster .qr-poster__hint { margin-top:18px; color:#6f7888; font-size:.78rem; }
.qr-help { max-width:920px; margin:20px auto 0; display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:14px; align-items:center; padding:18px 20px; }.qr-help__icon{width:42px;height:42px;display:grid;place-items:center;border-radius:10px;background:#fff0f1;color:#ec3448}.qr-help__icon .ico{width:21px}.qr-help h3{font-size:.85rem}.qr-help p{margin-top:3px;color:#7f8795;font-size:.72rem}.qr-help__steps{display:flex;gap:12px}.qr-help__steps span{display:flex;align-items:center;gap:5px;color:#606979;font-size:.69rem}.qr-help__steps b{width:20px;height:20px;display:grid;place-items:center;border-radius:50%;background:#171a20;color:#fff;font-size:.63rem}
.empty-state-card { max-width:560px; margin:45px auto; text-align:center; padding:40px; }.empty-state-card > span{width:58px;height:58px;display:grid;place-items:center;margin:0 auto 14px;border-radius:50%;background:#fff0f1;color:var(--primary)}.empty-state-card p{margin-top:8px;color:var(--muted);font-size:.85rem}

/* Administración de colas */
.queues-layout { display:grid; grid-template-columns:320px minmax(0,1fr); gap:18px; align-items:start; }
.queues-side,.queues-main { display:grid; gap:18px; min-width:0; }.queue-create-card,.queue-modules-card,.registered-queues,.tv-preview-card{padding:18px}
.queue-form .campo label,.module-config .campo label{font-size:.72rem}.select-look{position:relative}.select-look>.ico{position:absolute;left:12px;top:12px;width:17px;height:17px;color:#939ba8}.select-look input{padding-left:38px!important}.form-hint{margin:-2px 0 10px;color:#8b93a1;font-size:.68rem;line-height:1.5}.module-config{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;align-items:end}.module-config .campo{margin:0}.module-config input{height:38px}.queue-search{position:relative;margin-bottom:12px}.queue-search span{position:absolute;left:12px;top:10px;color:#929aa8}.queue-search .ico{width:18px;height:18px}.queue-search input{width:100%;height:39px;padding:0 12px 0 39px;border:1.5px solid #e2e5ea;border-radius:8px;font:inherit;font-size:.78rem}
.queue-list{display:grid;gap:6px}.queue-row{display:grid;grid-template-columns:38px minmax(150px,1fr) 72px 66px 30px;gap:10px;align-items:center;min-height:58px;padding:9px 10px;border:1px solid #e8ebef;border-radius:9px;background:#fff}.queue-row__icon{width:35px;height:35px;display:grid;place-items:center;border-radius:9px}.queue-row__icon .ico{width:18px;height:18px}.queue-row__icon--blue{background:#eaf0ff;color:#426ff1}.queue-row__icon--orange{background:#fff0df;color:#e17c21}.queue-row__icon--aqua{background:#e5f9f7;color:#1bafaa}.queue-row__icon--violet{background:#f0eaff;color:#7950e9}.queue-row__name{min-width:0}.queue-row__name b{display:block;font-size:.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.queue-row__name small,.queue-row__waiting small{display:block;margin-top:2px;color:#8992a0;font-size:.63rem}.queue-row__waiting{text-align:center}.queue-row__waiting b{font-size:.88rem}.queue-status{display:inline-flex;justify-content:center;padding:5px 8px;border-radius:99px;background:#f0f2f5;color:#7e8795;font-size:.62rem;font-weight:700}.queue-status.is-active{background:#e6f7ed;color:#18844f}.queue-menu{position:relative}.queue-menu summary{list-style:none;cursor:pointer;text-align:center;font-size:1.25rem;line-height:1}.queue-menu summary::-webkit-details-marker{display:none}.queue-menu>div{position:absolute;right:0;top:28px;z-index:10;width:160px;padding:5px;background:#fff;border:1px solid #e2e5ea;border-radius:9px;box-shadow:0 12px 30px rgba(22,30,49,.15)}.queue-menu a,.queue-menu button{width:100%;display:flex;align-items:center;gap:8px;padding:8px;border:0;background:transparent;color:#404856;font:inherit;font-size:.7rem;text-align:left;cursor:pointer;border-radius:6px}.queue-menu a:hover,.queue-menu button:hover{background:#f4f6f8}.queue-menu .ico{width:15px;height:15px}.queue-list-empty{text-align:center;padding:30px;color:#8b93a1;font-size:.78rem}
.tv-preview{border:1.5px solid #222832;border-radius:10px;overflow:hidden;background:#fff}.tv-preview header,.tv-preview footer{display:flex;justify-content:space-between;align-items:center;padding:9px 18px;font-size:.58rem}.tv-preview header{border-bottom:1px solid #e4e7ec;text-transform:uppercase}.tv-preview header span{color:#7e8795}.tv-preview__body{display:grid;grid-template-columns:1.1fr .9fr;min-height:150px}.tv-preview__body>div{padding:18px 28px}.tv-preview__body>div+div{border-left:1px solid #e5e8ed}.tv-preview__body small{display:block;font-weight:700;font-size:.65rem}.tv-preview__body>div:first-child strong{display:block;font-family:var(--font-head);font-size:2.5rem;line-height:1.1;margin:6px 0}.tv-preview__body>div:first-child>b{display:inline-block;padding:5px 14px;border-radius:5px;background:#ed3349;color:#fff;font-size:.68rem}.tv-preview__body p{display:flex;justify-content:space-between;gap:12px;margin:7px 0;font-size:.68rem}.tv-preview__body p span{color:#7e8795}.tv-preview footer{border-top:1px solid #e5e8ed;color:#697282}.tv-preview footer time{font-weight:700;color:#222}

@media (max-width:1150px){.module-kpis{grid-template-columns:repeat(2,1fr)}.attendance-layout{grid-template-columns:1fr}.attendance-side{grid-template-columns:repeat(2,minmax(0,1fr))}.queues-layout{grid-template-columns:280px minmax(0,1fr)}}
@media (max-width:820px){.queues-layout{grid-template-columns:1fr}.queues-side{grid-template-columns:repeat(2,minmax(0,1fr))}.attendance-side{grid-template-columns:1fr}.attendance-summary__grid{grid-template-columns:repeat(2,1fr);gap:12px}.attendance-summary__grid>div{border:0;padding:5px}.qr-help{grid-template-columns:auto 1fr}.qr-help__steps{grid-column:1/-1;justify-content:center}.qr-poster.sticker{padding:28px}.qr-frame{min-height:290px;width:290px}.qr-poster .sticker__qr svg{width:235px;height:235px}}
@media (max-width:560px){.module-toolbar{align-items:stretch}.module-toolbar .btn{padding-inline:12px}.module-kpis{grid-template-columns:1fr 1fr;gap:10px}.module-kpi{min-height:92px;padding:13px;gap:10px}.module-kpi__icon{width:38px;height:38px;flex-basis:38px}.module-kpi strong{font-size:1.2rem}.attendance-scanner .asis-cam{aspect-ratio:1.25/1}.attendance-scanner .asis-mira{inset:15% 22%}.attendance-manual__row{grid-template-columns:1fr}.attendance-manual__row .btn{width:100%}.queues-side{grid-template-columns:1fr}.queue-row{grid-template-columns:36px minmax(0,1fr) 50px 30px}.queue-status{display:none}.queue-row__waiting{font-size:.7rem}.tv-preview__body>div{padding:15px}.qr-poster-grid{grid-template-columns:1fr}.qr-poster.sticker{padding:25px 18px}.qr-poster h2{font-size:1.35rem}.qr-frame{width:250px;min-height:250px}.qr-poster .sticker__qr svg{width:205px;height:205px}.qr-help{display:block;text-align:center}.qr-help__icon{margin:0 auto 10px}.qr-help__steps{margin-top:14px;flex-wrap:wrap}.attendance-summary__grid{grid-template-columns:1fr 1fr}}
@media print{.module-toolbar,.qr-help,.topbar,.side{display:none!important}.app{display:block}.main{padding:0}.qr-poster-grid{display:block}.qr-poster.sticker{width:100%;max-width:100%;height:95vh;display:flex;flex-direction:column;justify-content:center;box-shadow:none;border:0;page-break-after:always}.qr-poster.sticker:last-child{page-break-after:auto}.qr-frame{width:380px;min-height:380px}.qr-poster .sticker__qr svg{width:320px;height:320px}}

/* Página pública abierta desde el QR de sede */
.checkin-public{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 50% 0,#fff 0,#f6f7fa 50%,#eef1f5 100%)}
.checkin-public__card{width:100%;max-width:440px;padding:36px;background:#fff;border:1px solid #e4e7ec;border-radius:22px;box-shadow:0 20px 55px rgba(20,27,44,.12);text-align:center}
.checkin-public__brand{display:flex;justify-content:center;align-items:center;gap:7px;color:#ed3046;font-size:1.05rem}.checkin-public__brand .ico{width:22px;height:22px;fill:currentColor}.checkin-site{display:inline-flex;align-items:center;gap:5px;margin:13px 0 18px;padding:5px 10px;background:#f2f4f7;color:#687181;border-radius:99px;font-size:.7rem;font-weight:700}.checkin-site .ico{width:13px;height:13px}.checkin-eyebrow{display:block;margin-top:20px;color:#ed3046;font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.checkin-public h1{margin:7px 0 8px;font-size:1.65rem}.checkin-public__card>p{color:#737c8b;font-size:.85rem;line-height:1.55}.checkin-state-icon{margin:24px 0 4px;font-size:2.6rem}.checkin-result{width:64px;height:64px;margin:22px auto 2px;display:grid;place-items:center;border-radius:50%;font-size:1.8rem;font-weight:800}.checkin-result .ico{width:31px;height:31px}.checkin-result.is-ok{background:#e5f8ed;color:#19a55e}.checkin-result.is-warn{background:#fff0e0;color:#e07b1e}.checkin-success{color:#168c52!important;font-weight:700}.checkin-warning{color:#b94b24!important;font-weight:700}.checkin-notice{margin:15px 0;padding:10px 12px;border-radius:8px;background:#f5f7f9;color:#667080;font-size:.73rem}.checkin-form{text-align:left;margin-top:20px}.checkin-form label{display:block;margin-bottom:7px;color:#505867;font-size:.74rem;font-weight:700}.checkin-input{position:relative}.checkin-input .ico{position:absolute;left:13px;top:12px;width:18px;height:18px;color:#8d95a2}.checkin-input input{width:100%;height:43px;padding:0 13px 0 42px;border:1.5px solid #dfe3e8;border-radius:9px;font:inherit;font-size:.88rem}.checkin-form .btn{margin-top:12px;display:flex;justify-content:center}.checkin-secure{display:flex;justify-content:center;align-items:center;gap:5px;margin-top:18px;color:#929aa8;font-size:.65rem}.checkin-secure .ico{width:14px;height:14px}.checkin-public .alerta{margin-top:15px;text-align:left}
@media(max-width:500px){.checkin-public{padding:14px}.checkin-public__card{padding:28px 22px;border-radius:18px}.checkin-public h1{font-size:1.42rem}}

/* ── Correos 2026 ───────────────────────────────────────────────────────── */
.mail-warning{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;margin-bottom:18px;padding:14px 18px;border:1px solid #ffc8ce;border-radius:10px;background:#fff8f8;color:#8e2732}.mail-warning__icon{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:#ea354b;color:#fff;font-weight:800}.mail-warning b{font-size:.8rem}.mail-warning p{margin-top:3px;font-size:.72rem}.email-workspace{display:grid;grid-template-columns:minmax(360px,.82fr) minmax(0,1.45fr);gap:18px;align-items:stretch}.compose-card,.mail-right{min-height:680px}.compose-card{padding:20px;display:flex;flex-direction:column}.compose-form{flex:1;display:flex;flex-direction:column}.compose-form .campo{margin-bottom:14px}.compose-form .campo label{font-size:.72rem}.compose-form .campo>small{display:block;margin-top:5px;color:#8992a1;font-size:.64rem}.mail-control{position:relative}.mail-control>.ico{position:absolute;left:13px;top:12px;width:17px;height:17px;color:#8e96a4;z-index:1}.mail-control input,.mail-control select,.mail-control textarea{width:100%;padding-left:40px!important}.mail-control--area>.ico{top:14px;color:#e94759}.mail-control--area textarea{padding-top:12px}.mail-divider{height:18px;display:flex;align-items:center;gap:8px;margin:-4px 0 10px}.mail-divider::before,.mail-divider::after{content:"";height:1px;flex:1;background:#e5e8ed}.mail-divider span{width:24px;height:24px;display:grid;place-items:center;border:1px solid #e2e5ea;border-radius:50%;color:#8d95a3;font-size:.65rem}.compose-message{flex:1}.compose-message .mail-control textarea{min-height:150px}.compose-submit{margin-top:auto;min-height:43px}.mail-right{display:grid;grid-template-rows:auto minmax(0,1fr);gap:16px}.mail-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.mail-metrics article{display:grid;grid-template-columns:42px 1fr;grid-template-rows:auto auto auto;align-items:center;padding:15px;background:#fff;border:1px solid #e6e9ee;border-radius:11px;box-shadow:0 4px 15px rgba(28,36,58,.05)}.mail-metric-icon{width:38px;height:38px;grid-row:1/4;display:grid;place-items:center;border-radius:9px;margin-right:10px}.mail-metric-icon .ico{width:20px;height:20px}.mail-metric-icon.is-red{background:#ffedef;color:#ec3448}.mail-metric-icon.is-green{background:#e5f8ed;color:#24ad66}.mail-metric-icon.is-violet{background:#eee9ff;color:#7653e7}.mail-metric-icon.is-orange{background:#fff1df;color:#e68224}.mail-metrics b{font-size:1rem}.mail-metrics p{font-size:.68rem;font-weight:650;color:#535c6a}.mail-metrics small{font-size:.6rem;color:#929aa8}.mail-history-card{display:flex;flex-direction:column;min-height:0;padding:18px}.mail-history-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}.mail-history-head h3{font-size:.95rem}.mail-history-head p{margin-top:3px;color:#858e9d;font-size:.68rem}.mail-history-search{position:relative;width:min(340px,48%)}.mail-history-search span{position:absolute;left:11px;top:9px;color:#929aa8}.mail-history-search .ico{width:17px;height:17px}.mail-history-search input{width:100%;height:37px;padding:0 12px 0 36px;border:1.5px solid #e0e4e9;border-radius:8px;font:inherit;font-size:.72rem}.mail-table-wrap{flex:1;border:1px solid #e7e9ee;border-radius:9px}.mail-table td{vertical-align:middle}.mail-table td>small,.mail-table td>b+small{display:block;margin-top:3px;color:#8992a0;font-size:.62rem}.mail-recipient{display:flex;align-items:center;gap:9px}.mail-recipient>span{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:#e3f7eb;color:#168c51;font-weight:700;font-size:.68rem}.mail-recipient b{display:block;font-size:.7rem}.mail-recipient small{display:block;color:#8992a0;font-size:.62rem}.mail-history-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 3px 0;color:#7f8897;font-size:.64rem}.mail-history-foot span:last-child{display:flex;align-items:center;gap:5px}.mail-history-foot .ico{width:14px;height:14px}.mail-empty{height:100%;display:grid;place-content:center;justify-items:center;color:#8e97a5;text-align:center}.mail-empty>.ico{width:38px;height:38px;margin-bottom:10px}.mail-empty b{font-size:.82rem}.mail-empty p{margin-top:4px;font-size:.68rem}

/* ── Atención de cola 2026 ──────────────────────────────────────────────── */
.queue-attention-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:-4px 0 20px}.queue-attention-toolbar>div{display:flex;gap:9px;flex-wrap:wrap}.queue-attention-layout{display:grid;grid-template-columns:minmax(360px,.88fr) minmax(0,1.55fr);gap:18px;align-items:start}.queue-operator-card{padding:20px;min-height:655px}.queue-current-select{margin-bottom:18px}.queue-current-select>span{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:6px;background:#fff0f1;color:#ec3348;font-size:.68rem;font-weight:800;text-transform:uppercase}.queue-current-select .ico{width:14px;height:14px}.queue-current-select select{height:36px;padding:0 12px;border:1.5px solid #e1e5ea;border-radius:8px;font:inherit;font-weight:700}.queue-module-pick{padding-bottom:18px;border-bottom:1px solid #eceef2}.queue-module-pick label{font-size:.73rem}.queue-module-pick select{height:40px}.queue-module-pick small{display:block;margin-top:6px;color:#8992a0;font-size:.64rem}.queue-serving{padding:18px 0;border-bottom:1px solid #eceef2}.queue-serving>span{color:#e93147;font-size:.67rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em}.queue-serving__person{display:flex;align-items:center;gap:15px;margin-top:14px}.queue-serving__person>i{width:58px;height:58px;display:grid;place-items:center;border-radius:50%;background:#fff0f1;color:#e93449}.queue-serving__person .ico{width:31px;height:31px}.queue-serving__person h2{font-size:1.55rem}.queue-serving__person p{margin-top:3px;color:#8b93a1;font-size:.68rem}.queue-action-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:20px 0}.queue-action-grid form{display:flex}.queue-action{width:100%;min-height:88px;display:grid;grid-template-columns:22px 1fr;grid-template-rows:auto auto;align-content:center;gap:3px 7px;padding:12px;border-radius:9px;border:1px solid transparent;font:inherit;text-align:left;cursor:pointer}.queue-action .ico{width:19px;height:19px;grid-row:1/3}.queue-action b{font-size:.7rem}.queue-action small{font-size:.59rem}.queue-action--call{background:#ed3349;color:#fff;box-shadow:0 7px 18px rgba(237,51,73,.2)}.queue-action--done{background:#e6f7ed;color:#187a49}.queue-action--miss{background:#fff;color:#e33247;border-color:#ef4054}.queue-how{margin-top:18px;padding:16px;border:1px solid #d9e4f7;border-radius:8px;background:#f8fbff;color:#657184}.queue-how b{display:flex;align-items:center;gap:7px;color:#313845;font-size:.7rem}.queue-how .ico{width:16px;height:16px;color:#4677cf}.queue-how p{margin:10px 0 0 26px;font-size:.64rem;line-height:1.5}.queue-waiting-panel{min-width:0}.queue-waiting-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.queue-waiting-head h3{font-size:1rem}.queue-wait-search{position:relative;margin-bottom:12px}.queue-wait-search span{position:absolute;left:14px;top:11px;color:#9099a7}.queue-wait-search .ico{width:18px;height:18px}.queue-wait-search input{width:100%;height:42px;padding:0 14px 0 42px;border:1.5px solid #e1e4e9;border-radius:9px;background:#fff;font:inherit;font-size:.75rem}.queue-wait-table{padding:0;min-height:250px;overflow:hidden}.queue-wait-table .tabla-wrap{border:0;border-radius:0}.queue-empty{min-height:190px;display:grid;place-content:center;justify-items:center;text-align:center}.queue-empty>span{width:54px;height:54px;display:grid;place-items:center;border-radius:50%;background:#fff0f1;color:#e83a4e}.queue-empty .ico{width:29px;height:29px}.queue-empty b{margin-top:12px;font-size:.9rem}.queue-empty p{margin-top:5px;color:#8c95a4;font-size:.67rem}.queue-live-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:16px 0}.queue-live-metrics article{display:grid;grid-template-columns:36px 1fr;grid-template-rows:auto auto auto;align-items:center;padding:14px;background:#fff;border:1px solid #e6e9ee;border-radius:10px}.queue-live-metrics .summary-icon{grid-row:1/4}.queue-live-metrics b{font-size:.9rem}.queue-live-metrics p{font-size:.64rem;font-weight:650}.queue-live-metrics small{font-size:.58rem;color:#9098a6}.queue-bottom-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.queue-last-called,.queue-info{padding:17px;min-height:170px}.queue-bottom-grid h3{font-size:.8rem;margin-bottom:12px}.queue-small-empty{display:grid;place-content:center;justify-items:center;text-align:center;color:#8d96a4}.queue-small-empty>.ico{width:30px;height:30px}.queue-small-empty b{margin-top:7px;font-size:.7rem}.queue-small-empty p{font-size:.6rem}.queue-last-called ul{list-style:none;padding:0}.queue-last-called li{display:grid;grid-template-columns:38px 1fr auto;gap:9px;align-items:center;padding:7px 0;border-top:1px solid #edf0f3}.queue-last-called li>span{font-weight:800;color:#e73549}.queue-last-called li b,.queue-last-called li small{display:block;font-size:.64rem}.queue-last-called li small,.queue-last-called time{color:#8d95a3;font-size:.58rem}.queue-info dl>div{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:8px 0;border-top:1px solid #edf0f3;font-size:.63rem}.queue-info dt{display:flex;align-items:center;gap:7px;font-weight:700}.queue-info dt .ico{width:14px;height:14px}.queue-info dd{color:#707988}

/* ── Clases grupales 2026 ───────────────────────────────────────────────── */
.classes-actions{display:flex;gap:10px;margin-bottom:16px}.classes-card{padding:0;overflow:visible}.classes-filters{display:grid;grid-template-columns:minmax(240px,1.35fr) .55fr .7fr .6fr .6fr auto;gap:12px;align-items:end;padding:16px 18px;border-bottom:1px solid #e8ebef}.classes-filters label{display:grid;gap:6px;color:#596271;font-size:.66rem;font-weight:700}.classes-filters select,.classes-filters input{height:38px;padding:0 10px;border:1.5px solid #e0e4e9;border-radius:8px;background:#fff;font:inherit;font-size:.7rem}.classes-search{position:relative}.classes-search span{position:absolute;left:12px;top:10px;color:#929aa8}.classes-search .ico{width:17px;height:17px}.classes-search input{width:100%;padding-left:37px}.classes-clear{grid-column:-2/-1;color:#e8364b;font-size:.63rem;text-align:center}.classes-table th{font-size:.6rem}.classes-table td{vertical-align:middle}.classes-table td>small{display:flex;align-items:center;gap:4px;margin-top:4px;color:#7f8897;font-size:.6rem}.classes-table td>small .ico{width:12px;height:12px}.class-name-cell{display:flex;align-items:center;gap:10px}.class-name-cell>span{width:35px;height:35px;display:grid;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--class-color) 12%,white);color:var(--class-color)}.class-name-cell>span .ico{width:18px;height:18px}.class-name-cell b{display:block;font-size:.7rem}.class-name-cell small{display:block;margin-top:3px;color:#7e8795;font-size:.59rem}.class-name-cell small i{padding:2px 5px;border-radius:99px;font-style:normal}.class-actions{display:flex;align-items:center;justify-content:flex-end;gap:6px;white-space:nowrap}.class-actions details{position:relative}.class-actions summary{list-style:none;width:32px;height:32px;display:grid;place-items:center;border:1px solid #e1e5ea;border-radius:7px;cursor:pointer}.class-actions summary::-webkit-details-marker{display:none}.class-actions details>div{position:absolute;right:0;top:36px;z-index:20;width:145px;padding:5px;background:#fff;border:1px solid #e1e5ea;border-radius:8px;box-shadow:0 12px 28px rgba(20,28,45,.15)}.class-actions details button{width:100%;display:flex;align-items:center;gap:7px;padding:8px;border:0;background:transparent;font:inherit;font-size:.65rem;text-align:left;cursor:pointer}.class-actions details button.is-danger{color:#d93648}.class-actions details .ico{width:14px;height:14px}.classes-foot{padding:12px 18px;border-top:1px solid #e8ebef;color:#7f8897;font-size:.64rem}
.class-form-toolbar{margin-bottom:15px}.class-editor{display:grid;gap:14px;max-width:100%}.class-editor-section{padding:18px}.class-editor-title{display:flex;align-items:center;gap:8px;margin-bottom:15px;color:#e73549}.class-editor-title .ico{width:18px;height:18px}.class-editor-title h3{color:#252a33;font-size:.82rem}.class-editor-title small{color:#8c95a3;font-size:.62rem;font-weight:500}.class-editor-grid{display:grid;gap:14px}.class-editor-grid--2{grid-template-columns:1fr 1fr}.class-editor-grid--4{grid-template-columns:1fr 1fr 1fr 1fr}.class-editor .campo{margin:0}.class-editor .campo label{font-size:.66rem}.class-editor .campo input,.class-editor .campo select,.class-editor .campo textarea{border-color:#dfe3e8;border-radius:7px}.class-editor .campo small{display:block;margin-top:5px;color:#8c95a3;font-size:.59rem}.class-description{margin-top:12px!important;position:relative}.class-description>small{position:absolute;right:10px;bottom:8px}.class-publish{display:flex;align-items:center;justify-content:space-between;gap:14px;position:relative;padding:6px 0;cursor:pointer}.class-publish span{display:grid}.class-publish b{font-size:.67rem}.class-publish small{margin-top:4px;color:#8c95a3;font-size:.59rem}.class-publish input{position:absolute;opacity:0}.class-publish i{width:34px;height:19px;position:relative;border-radius:99px;background:#d9dde3;transition:.2s}.class-publish i::after{content:"";position:absolute;left:3px;top:3px;width:13px;height:13px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:.2s}.class-publish input:checked+i{background:#ed354a}.class-publish input:checked+i::after{transform:translateX(15px)}.class-image-row{display:flex;gap:14px}.class-current-image{width:120px;display:grid;gap:5px}.class-current-image img{width:120px;height:78px;object-fit:cover;border-radius:8px}.class-current-image label{font-size:.58rem}.class-file-drop{flex:1;min-height:80px;display:flex;align-items:center;justify-content:center;gap:12px;padding:12px;border:1.5px dashed #d7dce3;border-radius:8px;cursor:pointer}.class-file-drop>.ico{width:22px;height:22px;color:#e8354a}.class-file-drop span{display:grid}.class-file-drop b{font-size:.64rem}.class-file-drop small{margin-top:3px;color:#8d96a4;font-size:.57rem}.class-file-drop input{position:absolute;opacity:0;pointer-events:none}.class-file-drop em{padding:7px 10px;border:1px solid #dfe3e8;border-radius:6px;font-size:.61rem;font-style:normal;font-weight:700}.class-editor-actions{display:flex;gap:9px;padding-bottom:4px}

@media(max-width:1180px){.email-workspace{grid-template-columns:1fr}.compose-card,.mail-right{min-height:auto}.queue-attention-layout{grid-template-columns:1fr}.queue-operator-card{min-height:auto}.classes-filters{grid-template-columns:repeat(3,1fr)}.classes-search{grid-column:1/-1}.classes-clear{grid-column:auto}.class-editor-grid--4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.mail-warning{grid-template-columns:auto 1fr}.mail-warning .btn{grid-column:1/-1}.mail-metrics{grid-template-columns:repeat(2,1fr)}.mail-history-head{align-items:stretch;flex-direction:column}.mail-history-search{width:100%}.queue-attention-toolbar{align-items:flex-start;flex-direction:column}.queue-action-grid{grid-template-columns:1fr}.queue-action{min-height:65px}.queue-live-metrics{grid-template-columns:repeat(2,1fr)}.queue-bottom-grid{grid-template-columns:1fr}.classes-filters{grid-template-columns:1fr 1fr}.classes-search{grid-column:1/-1}.classes-actions{flex-wrap:wrap}.class-editor-grid--2,.class-editor-grid--4{grid-template-columns:1fr}.class-image-row{flex-direction:column}.class-file-drop{align-items:flex-start;flex-wrap:wrap}}
@media(max-width:480px){.mail-metrics,.queue-live-metrics,.classes-filters{grid-template-columns:1fr}.email-workspace{grid-template-columns:1fr}.compose-card{padding:16px}.queue-attention-layout{grid-template-columns:1fr}.queue-operator-card{padding:16px}.class-file-drop em{width:100%;text-align:center}}
.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 ────────────────────────────────────────────────── */
/* Solo animamos la opacidad. Aplicar blur/scale a un contenedor rasteriza todo
   su texto en algunos navegadores y deja los bordes de las letras dentados. */
.reveal { opacity: 0; transition: opacity .65s ease; }
.reveal.in { opacity: 1; }

/* 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; height: 170px; display: grid; place-items: center;
    color: #fff; overflow: hidden;
    /* Capa de brillo diagonal + degradado del color de disciplina. Si solo se
       pasa --c1, --c2 se deriva a un tono más oscuro para que nunca quede plano. */
    background:
        linear-gradient(135deg, rgba(255,255,255,.16), rgba(0,0,0,.24)),
        linear-gradient(135deg, var(--c1, var(--red-500)),
            var(--c2, color-mix(in srgb, var(--c1, var(--red-500)) 52%, #000)));
}
.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: 54px; height: 54px; position: relative; z-index: 1;
    stroke-width: 1.8; opacity: .92; filter: drop-shadow(0 4px 12px rgba(0,0,0,.3)); }
.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 ────────────────────────────────────── */
/* Grilla del portal: tarjetas de ancho acotado y centradas (una sola clase NO se
   estira a todo el ancho). */
.cv-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(290px, 340px));
    gap:22px; justify-content:center; }
@media (max-width:360px){ .cv-grid { grid-template-columns:1fr; } }
.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:
        linear-gradient(135deg, rgba(255,255,255,.16), rgba(0,0,0,.24)),
        linear-gradient(135deg, var(--c1, var(--red-500)),
            var(--c2, color-mix(in srgb, var(--c1, var(--red-500)) 52%, #000))); }
.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; } }

/* ============================================================================
   Portada 2026 · composición fotográfica oscura inspirada en el mockup aprobado.
   Todo queda acotado a .home-page para no alterar portal, panel ni páginas internas.
   ========================================================================== */

.nav__in,
.footer .contenedor { max-width: 1380px; }

.btn--outline-light {
    color: #fff;
    background: rgba(10, 11, 13, .35);
    border-color: rgba(255, 255, 255, .72);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
}
.btn--outline-light:hover { color: #fff; border-color: var(--primary); background: rgba(230, 57, 70, .12); }

.home-page {
    --home-line: rgba(255, 255, 255, .11);
    color: #f5f6f7;
    background: #0a0b0d;
    overflow: hidden;
}
.home-page .contenedor { max-width: 1380px; padding-inline: clamp(22px, 4.5vw, 72px); }
.home-page .home-section { padding-block: clamp(68px, 7vw, 108px); }
.home-page .section-heading { margin-bottom: clamp(34px, 4vw, 52px); }
.home-page .section-kicker {
    display: inline-block;
    margin-bottom: 12px;
    color: var(--primary);
    font: 700 .72rem/1 var(--font-head);
    letter-spacing: .16em;
    text-transform: uppercase;
}
.home-page .section-accent { color: var(--primary); position: relative; white-space: nowrap; }
.home-page .section-accent::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -.16em; height: 3px;
    background: var(--primary); border-radius: 999px; transform: rotate(-2deg);
}

.home-page .hero {
    min-height: 660px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background:
        linear-gradient(90deg, rgba(5, 6, 8, .98) 0%, rgba(5, 6, 8, .84) 36%, rgba(5, 6, 8, .22) 69%, rgba(5, 6, 8, .12) 100%),
        linear-gradient(0deg, #090a0c 0%, transparent 28%),
        url('../img/home-hero.png') 50% 42% / cover no-repeat;
}
.home-page .hero::after { opacity: .08; z-index: 0; }
.home-page .hero__in {
    position: relative;
    z-index: 1;
    width: 100%;
    display: block;
    padding-top: clamp(82px, 9vw, 132px);
    padding-bottom: clamp(58px, 7vw, 88px);
}
.home-page .hero__copy { width: min(690px, 55%); display: grid; gap: 25px; }
.home-page .hero .eyebrow { color: var(--primary); }
.home-page .hero .eyebrow__dot { background: var(--primary); box-shadow: 0 0 10px rgba(230,57,70,.8); }
.home-page .hero .eyebrow__dot::before,
.home-page .hero .eyebrow__dot::after { border-color: var(--primary); }
.home-page .hero h1 {
    max-width: 14ch;
    font-size: clamp(3.35rem, 5.1vw, 5.85rem);
    line-height: 1.04;
    text-wrap: balance;
}
.home-page .hero h1 span,
.home-page .hero h1 em { display: block; white-space: nowrap; }
.home-page .hero h1 em { color: var(--primary); }
.home-page .hero p { font-size: clamp(1rem, 1.15vw, 1.2rem); color: #e1e3e7; line-height: 1.7; }
.home-page .hero__cta { margin-top: 4px; }
.home-page .hero__stats-shell {
    position: relative;
    z-index: 2;
    border-top: 1px solid var(--home-line);
    background: rgba(9, 10, 12, .92);
    backdrop-filter: blur(14px);
}
.home-page .hero__stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin: 0;
    padding-block: 26px;
}
.home-page .hero__stats > div {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 4px 22px;
    text-align: left;
    border-right: 1px solid var(--home-line);
}
.home-page .hero__stats > div:last-child { border-right: 0; }
.home-page .hero__stats p { display: grid; gap: 2px; min-width: 0; }
.home-page .hero__stats b { color: #fff; font-size: clamp(1.45rem, 2vw, 2rem); line-height: 1; }
.home-page .hero__stats span:not(.stat-icon) { color: #c6c9ce; font-size: .84rem; white-space: nowrap; }
.home-page .stat-icon { color: var(--primary); }
.home-page .stat-icon .ico { width: 34px; height: 34px; }

.home-page .marquee { border-block: 1px solid rgba(255,255,255,.08); padding-block: 12px; }
.home-page .marquee__track span { font-size: 1.08rem; }

.home-page .home-why { background: linear-gradient(145deg, #0a0b0d, #101216); }
.home-page .home-why .h-display,
.home-page .home-plans .h-display { color: #f6f7f8; }
.home-page .bento { grid-template-columns: repeat(4, 1fr); gap: 16px; }
.home-page .cell {
    min-height: 176px;
    background: linear-gradient(145deg, rgba(31,34,40,.95), rgba(19,21,25,.98));
    border-color: var(--home-line);
    color: #fff;
    box-shadow: none;
}
.home-page .cell h3 { color: #fff; }
.home-page .cell .muted { color: #c4c7cc !important; }
.home-page .cell__icon { background: var(--primary); color: #fff; box-shadow: 0 8px 20px rgba(230,57,70,.25); }
.home-page .cell--dark {
    min-height: 368px;
    background: radial-gradient(100% 120% at 90% 10%, rgba(153,32,43,.25), transparent 60%), #111317;
    border-color: rgba(230,57,70,.45);
}
.home-page .cell--dark .cell__icon { background: var(--primary); color: #fff; }
.home-page .cell__metric { margin-top: auto; padding-top: 30px; }

.home-page .home-plans {
    border-top: 1px solid var(--home-line);
    background: radial-gradient(80% 80% at 50% 100%, rgba(153,32,43,.15), transparent 65%), #090a0c;
}
.home-page .home-plan-grid { gap: 18px; align-items: stretch; }
.home-page .plan {
    padding: 28px;
    color: #f1f2f4;
    background: linear-gradient(155deg, #1a1c21, #101216);
    border: 1px solid var(--home-line);
    box-shadow: none;
}
.home-page .plan h3,
.home-page .plan .plan__price { color: #fff; }
.home-page .plan .muted,
.home-page .plan .plan__price small,
.home-page .plan .plan__list li { color: #c7cad0; }
.home-page .plan .plan__list svg { color: var(--accent); }
.home-page .plan--top {
    border: 1px solid rgba(230,57,70,.45);
    background: radial-gradient(100% 90% at 85% 0%, rgba(153,32,43,.48), transparent 58%), #121418;
    box-shadow: 0 22px 45px rgba(0,0,0,.28);
}
.home-page .plan__price { font-family: var(--font-display); font-weight: 400; }
.home-page .home-plans__more { margin-top: 30px; }

.home-page .home-promo {
    min-height: 460px;
    display: grid;
    align-items: center;
    border-block: 1px solid var(--home-line);
    background:
        linear-gradient(90deg, rgba(7,8,10,.05) 0%, rgba(7,8,10,.22) 38%, rgba(7,8,10,.92) 61%, #07080a 100%),
        url('../img/home-promo.png') center / cover no-repeat;
}
.home-page .home-promo__in { width: 100%; display: flex; justify-content: flex-end; padding-block: 76px; }
.home-page .home-promo__copy { width: min(540px, 46%); }
.home-page .home-promo h2 { color: #fff; font-size: clamp(2.8rem, 5vw, 5rem); line-height: 1.04; margin-bottom: 18px; }
.home-page .home-promo h2 span { display: block; color: var(--accent); }
.home-page .home-promo p { color: #d9dce1; font-size: 1.06rem; max-width: 46ch; margin-bottom: 26px; }

.home-page .home-proof { padding-block: 32px; border-bottom: 1px solid var(--home-line); background: #0d0f12; }
.home-page .home-proof__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.home-page .home-proof__grid > div {
    display: flex; align-items: center; justify-content: center; gap: 16px;
    padding: 8px 24px; border-right: 1px solid var(--home-line); color: #d9dce0;
}
.home-page .home-proof__grid > div:last-child { border-right: 0; }
.home-page .home-proof__grid .ico { width: 38px; height: 38px; color: var(--primary); }
.home-page .home-proof__grid span { font-size: .88rem; line-height: 1.35; }
.home-page .home-proof__grid b { color: #fff; font-weight: 700; }

.home-page .home-gallery { padding-block: 22px; background: #090a0c; }
.home-page .home-gallery__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.home-page .home-gallery figure { height: 190px; overflow: hidden; border: 1px solid rgba(230,57,70,.36); border-radius: 14px; }
.home-page .home-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.home-page .home-gallery figure:nth-child(1) img { object-position: 68% center; }
.home-page .home-gallery figure:nth-child(2) img { object-position: 24% center; }
.home-page .home-gallery figure:nth-child(3) img { object-position: 88% center; }
.home-page .home-gallery figure:nth-child(4) img { object-position: 8% center; }
.home-page .home-gallery figure:hover img { transform: scale(1.045); }

@media (max-width: 980px) {
    .home-page .hero { min-height: 620px; background-position: 58% center; }
    .home-page .hero__copy { width: min(620px, 68%); }
    .home-page .hero__stats { grid-template-columns: repeat(2, 1fr); }
    .home-page .hero__stats > div:nth-child(2) { border-right: 0; }
    .home-page .hero__stats > div:nth-child(-n+2) { padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--home-line); }
    .home-page .bento { grid-template-columns: repeat(2, 1fr); }
    .home-page .home-proof__grid { grid-template-columns: repeat(2, 1fr); gap: 26px 0; }
    .home-page .home-proof__grid > div:nth-child(2) { border-right: 0; }
    .home-page .home-gallery__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
    .home-page .contenedor { padding-inline: 20px; }
    .home-page .hero {
        min-height: auto;
        background:
            linear-gradient(0deg, #090a0c 0%, rgba(5,6,8,.7) 48%, rgba(5,6,8,.32) 100%),
            url('../img/home-hero.png') 67% top / auto 440px no-repeat,
            #090a0c;
    }
    .home-page .hero__in { padding-top: 330px; padding-bottom: 48px; }
    .home-page .hero__copy { width: 100%; }
    .home-page .hero h1 { font-size: clamp(2.9rem, 14vw, 4.3rem); }
    .home-page .hero h1 span,
    .home-page .hero h1 em { white-space: normal; }
    .home-page .hero p { font-size: 1rem; }
    .home-page .hero__cta .btn { flex: 1 1 180px; }
    .home-page .hero__stats > div { justify-content: flex-start; padding-inline: 12px; }
    .home-page .hero__stats span:not(.stat-icon) { white-space: normal; }
    .home-page .home-promo {
        min-height: 670px;
        align-items: end;
        background:
            linear-gradient(0deg, #08090b 0%, rgba(8,9,11,.92) 44%, rgba(8,9,11,.08) 78%),
            url('../img/home-promo.png') 24% top / auto 470px no-repeat,
            #08090b;
    }
    .home-page .home-promo__in { justify-content: flex-start; padding-block: 54px; }
    .home-page .home-promo__copy { width: 100%; }
}

@media (max-width: 560px) {
    .home-page .home-section { padding-block: 62px; }
    .home-page .hero__stats { grid-template-columns: 1fr; padding-block: 20px; }
    .home-page .hero__stats > div,
    .home-page .hero__stats > div:nth-child(2) { border-right: 0; border-bottom: 1px solid var(--home-line); margin: 0; padding: 15px 6px; }
    .home-page .hero__stats > div:last-child { border-bottom: 0; }
    .home-page .bento { grid-template-columns: 1fr; }
    .home-page .cell--wide { grid-column: auto; }
    .home-page .cell--dark { min-height: 310px; }
    .home-page .home-proof__grid { grid-template-columns: 1fr 1fr; gap: 24px 0; }
    .home-page .home-proof__grid > div { align-items: flex-start; justify-content: flex-start; padding-inline: 12px; }
    .home-page .home-proof__grid .ico { width: 30px; height: 30px; }
    .home-page .home-gallery__grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .home-page .home-gallery figure { height: 132px; border-radius: 10px; }
}

/* ── Ajustes de composición solicitados para la portada ─────────────────── */
html {
    scrollbar-color: var(--primary) #0b0c0f;
    scrollbar-width: thin;
}
html::-webkit-scrollbar { width: 12px; }
html::-webkit-scrollbar-track { background: #0b0c0f; }
html::-webkit-scrollbar-thumb {
    background: linear-gradient(var(--red-400), var(--red-700));
    border: 3px solid #0b0c0f;
    border-radius: 999px;
}
html::-webkit-scrollbar-thumb:hover { background: var(--primary); }

.nav__in,
.footer .contenedor { max-width: 1540px; }
.home-page .contenedor { max-width: 1540px; padding-inline: clamp(22px, 2.8vw, 48px); }

.home-page .hero { min-height: 700px; }
.home-page .hero__in { padding-top: clamp(76px, 8vw, 118px); padding-bottom: clamp(58px, 6vw, 82px); }
.home-page .hero__copy { width: min(800px, 61%); gap: 26px; }
.home-page .hero h1 { max-width: 14ch; font-size: clamp(3.7rem, 5.45vw, 6.35rem); }
.home-page .hero p { max-width: 60ch; }
.home-page .hero__stats {
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: 20px;
}
.home-page .hero__stats > div { justify-content: center; padding-inline: clamp(14px, 2vw, 30px); }

.home-page .home-section { padding-top: clamp(52px, 4.5vw, 72px); }
.home-page .section-heading { margin-bottom: clamp(44px, 4.5vw, 62px); }
.home-page .section-kicker {
    margin-bottom: 24px;
    font-size: clamp(.9rem, 1.05vw, 1.08rem);
    letter-spacing: .18em;
}

.home-page .cell__icon { margin-inline: auto; }
.home-page .cell h3 { text-align: center; }
.home-page .cell > p { text-align: left; }
.home-page .cell__metric {
    margin-top: clamp(36px, 5vw, 72px);
    padding-top: 0;
    text-align: center;
}
.home-page .cell__metric .muted { font-weight: 600; text-align: center; }

.home-page .plan__cta { text-align: center; letter-spacing: .055em; }

.home-page .home-promo__in { padding-inline: clamp(22px, 2.8vw, 48px); }
.home-page .home-promo__copy {
    width: min(630px, 48%);
    margin-right: clamp(0px, 2vw, 34px);
}
.home-page .home-promo__copy .section-kicker,
.home-page .home-promo__copy h2 { display: block; text-align: center; }
.home-page .home-promo__copy p { margin-inline: 0; text-align: left; }
.home-page .home-promo__copy .btn { display: flex; width: max-content; margin-inline: auto; }

/* ── Entrenadores: biografía y redes, sin barras de habilidad ───────────── */
.home-page .home-trainers {
    padding-block: clamp(68px, 7vw, 108px);
    border-bottom: 1px solid var(--home-line);
    background:
        radial-gradient(70% 110% at 50% 0%, rgba(153,32,43,.18), transparent 62%),
        #0b0c0f;
}
.home-page .home-trainers .h-display { color: #fff; }
.home-page .home-trainers .section-heading > p {
    max-width: 62ch;
    margin: 22px auto 0;
    color: #bfc3ca;
}
.home-page .trainer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}
.home-page .trainer-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--home-line);
    border-radius: 20px;
    background: linear-gradient(150deg, #1a1c21, #101216);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.home-page .trainer-card:hover {
    transform: translateY(-6px);
    border-color: rgba(230,57,70,.55);
    box-shadow: 0 24px 48px rgba(0,0,0,.32);
}
.home-page .trainer-card__media {
    height: 300px;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: var(--primary);
    background:
        linear-gradient(0deg, rgba(8,9,11,.55), transparent 48%),
        radial-gradient(circle at 50% 30%, #282b32, #111317 70%);
    font: 400 4rem/1 var(--font-display);
}
.home-page .trainer-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.home-page .trainer-card__body { padding: 24px; }
.home-page .trainer-card__role {
    display: inline-block;
    margin-bottom: 9px;
    color: var(--primary);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.home-page .trainer-card h3 { color: #fff; font-size: 1.28rem; }
.home-page .trainer-card__body > p { min-height: 4.6em; margin-top: 12px; color: #bec2c9; font-size: .92rem; }
.home-page .trainer-card__socials { display: flex; gap: 9px; margin-top: 20px; }
.home-page .trainer-card__socials a,
.footer__socials a {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 50%;
    color: #fff;
    font-size: .72rem;
    font-weight: 800;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.home-page .trainer-card__socials a:hover,
.footer__socials a:hover { background: var(--primary); border-color: var(--primary); transform: translateY(-2px); text-decoration: none; }
.home-page .trainer-card__socials .ico { width: 17px; height: 17px; }

/* ── Footer con identidad visual y mejor jerarquía ───────────────────────── */
.footer {
    position: relative;
    padding-block: 0 28px;
    border-top: 0;
    color: #aeb3bc;
    background:
        radial-gradient(70% 160% at 0% 0%, rgba(153,32,43,.18), transparent 54%),
        #090a0c;
}
.footer__accent { height: 4px; background: linear-gradient(90deg, var(--primary), var(--red-800) 48%, transparent 92%); }
.footer > .contenedor { padding-top: 58px; }
.footer__grid { grid-template-columns: 1.45fr .8fr 1.05fr; gap: clamp(44px, 7vw, 108px); }
.footer__brand {
    width: max-content;
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    padding: 0 !important;
    color: #fff !important;
    font: 800 1.2rem/1 var(--font-head);
}
.footer__brand .ico { width: 25px; height: 25px; color: var(--primary); }
.footer__brand b { margin-left: 4px; color: var(--primary); }
.footer__identity > p:first-of-type { max-width: 35ch; margin-top: 18px; color: #d0d3d8; }
.footer__schedule { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: .86rem; }
.footer__schedule .ico { width: 17px; height: 17px; color: var(--primary); }
.footer__socials { display: flex; gap: 9px; margin-top: 20px; }
.footer h4 { margin-bottom: 20px; color: #fff; font-size: 1.02rem; }
.footer__column > a { width: max-content; padding-block: 5px; }
.footer__contact a,
.footer__contact > p { display: flex; align-items: flex-start; gap: 10px; width: auto; padding-block: 6px; }
.footer__contact .ico { width: 18px; height: 18px; margin-top: 2px; color: var(--primary); }
.footer__book {
    width: max-content !important;
    margin-top: 14px;
    padding: 10px 14px !important;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 9px;
    color: #fff !important;
}
.footer__book:hover { border-color: var(--primary); background: rgba(230,57,70,.1); }
.footer__bottom {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 48px;
    padding-top: 22px;
    text-align: left;
}
.footer__bottom span:last-child { color: var(--primary); font-weight: 700; }

@media (max-width: 980px) {
    .home-page .hero__copy { width: min(690px, 69%); }
    .home-page .home-promo__copy { width: min(570px, 52%); margin-right: 0; }
    .footer__grid { grid-template-columns: 1.3fr 1fr; }
    .footer__contact { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
    .home-page .hero { min-height: auto; }
    .home-page .hero__copy { width: 100%; }
    .home-page .section-kicker { margin-bottom: 18px; font-size: .82rem; }
    .home-page .home-promo__copy { width: 100%; margin-right: 0; }
    .home-page .trainer-card__media { height: 340px; }
    .footer__grid { grid-template-columns: 1fr; gap: 38px; }
    .footer__contact { grid-column: auto; }
    .footer__bottom { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 480px) {
    .home-page .hero h1 { font-size: clamp(2.75rem, 13vw, 3.8rem); }
    .home-page .hero__stats { padding-inline: 20px; }
    .home-page .trainer-card__media { height: 300px; }
}

/* ============================================================================
   Página de planes · tarjetas fotográficas comparativas
   ========================================================================== */
.plans-page {
    --plans-line: rgba(230, 57, 70, .42);
    min-height: calc(100vh - var(--nav-h));
    overflow: hidden;
    color: #f4f5f7;
    background:
        radial-gradient(60% 80% at 50% 25%, rgba(153,32,43,.17), transparent 68%),
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
        #08090b;
    background-size: auto, 48px 48px, 48px 48px, auto;
}
.plans-page .contenedor { max-width: 1440px; padding-inline: clamp(20px, 3.3vw, 52px); }
.plans-hero { position: relative; padding-block: clamp(58px, 6vw, 90px) clamp(50px, 5vw, 76px); }
.plans-hero::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 250px;
    height: 210px;
    opacity: .32;
    background-image: radial-gradient(var(--primary) 1.5px, transparent 1.5px);
    background-size: 10px 10px;
    -webkit-mask-image: linear-gradient(135deg, #000, transparent 72%);
    mask-image: linear-gradient(135deg, #000, transparent 72%);
    pointer-events: none;
}
.plans-heading { margin-bottom: 42px; }
.plans-heading__kicker {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 12px;
    color: var(--primary);
    font: 800 .82rem/1 var(--font-head);
    letter-spacing: .18em;
    text-transform: uppercase;
}
.plans-heading__kicker i { width: 56px; height: 1px; background: linear-gradient(90deg, transparent, var(--primary)); }
.plans-heading__kicker i:last-child { transform: scaleX(-1); }
.plans-heading h1 {
    color: #fff;
    font-family: var(--font-display);
    font-size: clamp(3.1rem, 5.5vw, 5.6rem);
    font-weight: 400;
    letter-spacing: .015em;
    line-height: 1;
    text-transform: uppercase;
}
.plans-heading h1 em { color: var(--primary); font-style: normal; }
.plans-heading p { margin-top: 17px; color: #b8bdc5; font-size: 1rem; }

.plans-showcase {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}
.membership-card {
    position: relative;
    min-width: 0;
    overflow: visible;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 20px;
    background: linear-gradient(155deg, #15171b, #0b0c0f 72%);
    box-shadow: 0 24px 56px rgba(0,0,0,.28);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.membership-card:hover { transform: translateY(-7px); border-color: rgba(230,57,70,.65); box-shadow: 0 28px 62px rgba(0,0,0,.4); }
.membership-card--featured {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px rgba(230,57,70,.12), 0 22px 58px rgba(230,57,70,.2);
}
.membership-card__ribbon {
    position: absolute;
    z-index: 4;
    top: -1px;
    left: 50%;
    min-width: 178px;
    padding: 8px 22px 10px;
    transform: translateX(-50%);
    clip-path: polygon(0 0, 100% 0, 87% 100%, 13% 100%);
    color: #fff;
    background: linear-gradient(135deg, var(--red-400), var(--red-700));
    font: 800 .78rem/1 var(--font-head);
    letter-spacing: .05em;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
}
.membership-card__image {
    height: 190px;
    overflow: hidden;
    border-radius: 19px 19px 0 0;
    border-bottom: 1px solid var(--plans-line);
    background-color: #121418;
    background-repeat: no-repeat;
    background-size: cover;
    filter: saturate(.86) contrast(1.06);
}
.membership-card__image::after { content: ""; }
.membership-card--daily .membership-card__image {
    background-image: linear-gradient(0deg, rgba(9,10,12,.2), transparent 60%), url('../img/home-promo.png');
    background-position: 32% center;
}
.membership-card--monthly .membership-card__image {
    background-image: linear-gradient(0deg, rgba(9,10,12,.18), transparent 58%), url('../img/home-promo.png');
    background-position: 7% center;
}
.membership-card--classes .membership-card__image {
    background-image: linear-gradient(0deg, rgba(9,10,12,.18), transparent 58%), url('../img/home-hero.png');
    background-position: 73% center;
}
.membership-card__icon {
    position: absolute;
    z-index: 3;
    top: 158px;
    left: 50%;
    width: 66px;
    height: 66px;
    display: grid;
    place-items: center;
    transform: translateX(-50%);
    border: 2px solid var(--primary);
    border-radius: 50%;
    color: #fff;
    background: #111317;
    box-shadow: 0 10px 22px rgba(0,0,0,.34);
}
.membership-card__icon .ico { width: 30px; height: 30px; }
.membership-card__body {
    min-height: 480px;
    display: flex;
    flex-direction: column;
    padding: 45px 26px 26px;
}
.membership-card h2 {
    color: #fff;
    font-size: clamp(1.35rem, 2vw, 1.75rem);
    text-align: center;
    text-transform: uppercase;
}
.membership-card__description {
    min-height: 3.7em;
    margin: 10px auto 18px;
    color: #b9bdc4;
    font-size: .86rem;
    line-height: 1.5;
    text-align: center;
}
.membership-card__features {
    list-style: none;
    margin: 0;
    padding: 14px 0 0;
    border-top: 1px solid var(--plans-line);
}
.membership-card__features li {
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-bottom: 1px solid rgba(230,57,70,.3);
    color: #e0e2e6;
    font-size: .9rem;
}
.membership-card__features .ico { width: 18px; height: 18px; color: var(--accent); }
.membership-card__features .feature-x { width: 18px; color: #707680; font-size: 1.35rem; font-weight: 700; line-height: 1; text-align: center; }
.membership-card__features .is-disabled { color: #747983; text-decoration: line-through; }
.membership-card__price {
    margin-top: auto;
    padding-top: 22px;
    color: #fff;
    font-family: var(--font-display);
    font-size: clamp(2.3rem, 3.7vw, 3.55rem);
    line-height: 1;
    text-align: center;
}
.membership-card__price small { color: #c2c5cb; font-family: var(--font-sans); font-size: .78rem; font-weight: 500; white-space: nowrap; }
.membership-card__cta {
    width: min(100%, 290px);
    margin: 24px auto 0;
    padding: 14px 20px;
    border: 1px solid var(--primary);
    color: #fff;
    background: transparent;
    font-size: .86rem;
    letter-spacing: .055em;
    text-transform: uppercase;
}
.membership-card__cta .ico { width: 16px; height: 16px; color: var(--primary); }
.membership-card__cta:hover { color: #fff; background: rgba(230,57,70,.12); }
.membership-card--featured .membership-card__cta { background: var(--primary); box-shadow: 0 10px 24px rgba(230,57,70,.25); }
.membership-card--featured .membership-card__cta:hover { background: var(--primary-d); }
.membership-card--featured .membership-card__cta .ico { color: #fff; }

.plans-benefits {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    margin-top: 28px;
    padding: 22px 8px;
    border-block: 1px solid rgba(255,255,255,.1);
    background: rgba(14,15,18,.78);
}
.plans-benefits > div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding-inline: 14px;
    border-right: 1px solid rgba(255,255,255,.12);
}
.plans-benefits > div:last-child { border-right: 0; }
.plans-benefits .ico { width: 30px; height: 30px; color: var(--primary); }
.plans-benefits p { display: grid; gap: 2px; }
.plans-benefits b { color: #f4f5f7; font-size: .84rem; }
.plans-benefits span { color: #aeb3bb; font-size: .76rem; }

.plans-empty {
    max-width: 680px;
    margin-inline: auto;
    padding: 64px 30px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 20px;
    text-align: center;
    background: #121418;
}
.plans-empty .ico { width: 48px; height: 48px; margin: 0 auto 20px; color: var(--primary); }
.plans-empty h2 { color: #fff; }
.plans-empty p { margin-top: 10px; color: #aeb3bb; }

@media (max-width: 980px) {
    .plans-showcase { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .plans-benefits { grid-template-columns: repeat(3, 1fr); gap: 22px 0; }
    .plans-benefits > div:nth-child(3) { border-right: 0; }
}

@media (max-width: 680px) {
    .plans-hero { padding-top: 48px; }
    .plans-heading { margin-bottom: 34px; }
    .plans-heading__kicker { font-size: .7rem; }
    .plans-heading__kicker i { width: 28px; }
    .plans-heading h1 { font-size: clamp(2.9rem, 14vw, 4.2rem); }
    .plans-heading h1 span,
    .plans-heading h1 em { display: block; }
    .plans-showcase { grid-template-columns: 1fr; gap: 28px; }
    .membership-card__body { min-height: 450px; }
    .plans-benefits { grid-template-columns: 1fr 1fr; padding: 24px 10px; }
    .plans-benefits > div { justify-content: flex-start; border-right: 0; padding-inline: 12px; }
    .plans-benefits > div:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.12); }
    .plans-benefits > div:last-child { grid-column: 1 / -1; border-right: 0; justify-content: center; }
}

/* Ajustes de legibilidad solicitados en Planes */
.plans-heading__kicker {
    margin-bottom: 18px;
    font-size: clamp(.94rem, 1.3vw, 1.12rem);
    letter-spacing: .2em;
}
.plans-heading__kicker i { width: clamp(48px, 5vw, 76px); }
.plans-benefits { padding-block: 26px; }
.plans-benefits > div { min-width: 0; gap: 14px; }
.plans-benefits .ico { width: 34px; height: 34px; flex: 0 0 auto; }
.plans-benefits p { min-width: 0; gap: 4px; }
.plans-benefits b { font-size: clamp(.88rem, 1vw, 1.02rem); line-height: 1.2; }
.plans-benefits span { font-size: clamp(.79rem, .9vw, .9rem); line-height: 1.25; }
.nav__links .btn--primary,
.portal-head__nav .btn--primary { box-shadow: 0 7px 16px rgba(230,57,70,.2); }

/* ============================================================================
   Clases · catálogo, agenda y detalle
   ========================================================================== */
.classes-page,
.live-page,
.class-detail-page {
    color: #f4f5f7;
    background:
        radial-gradient(60% 70% at 100% 30%, rgba(196,24,40,.1), transparent 68%),
        linear-gradient(rgba(255,255,255,.014) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.014) 1px, transparent 1px),
        #07090b;
    background-size: auto, 44px 44px, 44px 44px, auto;
}
.classes-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--accent);
    font: 800 .76rem/1 var(--font-head);
    letter-spacing: .1em;
    text-transform: uppercase;
}
.classes-kicker i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px rgba(190,242,0,.55); }

.classes-hero,
.live-hero {
    position: relative;
    max-width: 1480px;
    min-height: 430px;
    margin-inline: auto;
    overflow: hidden;
    border-inline: 1px solid rgba(255,255,255,.12);
    border-bottom: 1px solid rgba(255,255,255,.12);
    background:
        linear-gradient(90deg, #07090b 0%, rgba(7,9,11,.96) 33%, rgba(7,9,11,.45) 58%, rgba(7,9,11,.08) 100%),
        url('../img/home-hero.png') 72% 44% / cover no-repeat;
}
.classes-hero::after,
.live-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(120deg, transparent 34%, rgba(230,57,70,.28) 34.2%, transparent 34.7%), radial-gradient(var(--primary) 1px, transparent 1px);
    background-size: auto, 9px 9px;
    -webkit-mask-image: linear-gradient(90deg, #000, transparent 28%, transparent 82%, #000);
    mask-image: linear-gradient(90deg, #000, transparent 28%, transparent 82%, #000);
    opacity: .6;
}
.classes-hero__copy,
.live-hero__copy {
    position: relative;
    z-index: 2;
    width: min(620px, 50%);
    padding: clamp(70px, 7vw, 108px) clamp(28px, 6vw, 92px);
}
.classes-hero h1,
.live-hero h1,
.class-detail__poster h2,
.class-detail__content h1 {
    color: #fff;
    font-family: var(--font-display);
    font-weight: 400;
    line-height: .96;
    text-transform: uppercase;
}
.classes-hero h1,
.live-hero h1 { margin: 18px 0 16px; font-size: clamp(3.2rem, 5.3vw, 5.6rem); }
.classes-hero p,
.live-hero p { max-width: 56ch; margin-bottom: 24px; color: #c5c8ce; font-size: .96rem; line-height: 1.65; }
.classes-hero .btn { min-width: 250px; color: #111; }

.classes-catalog { padding-block: clamp(46px, 5vw, 76px); }
.classes-title { margin-bottom: 32px; }
.classes-title h2 {
    color: #fff;
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 4vw, 4.3rem);
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
}
.classes-title span { position: relative; color: var(--primary); white-space: nowrap; }
.classes-title span::after { content: ""; position: absolute; right: 0; bottom: -9px; left: 0; height: 4px; border-radius: 50%; background: var(--primary); transform: rotate(-2deg); }
.classes-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.class-type {
    position: relative;
    min-height: 250px;
    display: grid;
    grid-template-columns: 34% 1fr;
    align-items: center;
    overflow: hidden;
    border: 1px solid rgba(230,57,70,.5);
    border-radius: 18px;
    background-color: #121418;
    background-size: cover;
    background-position: center;
    box-shadow: inset 0 0 44px rgba(0,0,0,.24);
    transition: transform .25s ease, border-color .25s ease;
}
.class-type:hover { transform: translateY(-5px); border-color: var(--primary); }
.class-type--promo { background-image: linear-gradient(90deg, rgba(11,12,15,.2), #111319 58%), url('../img/home-promo.png'); }
.class-type--hero { background-image: linear-gradient(90deg, rgba(11,12,15,.2), #111319 58%), url('../img/home-hero.png'); }
.class-type--1 { background-position: 25% center; }
.class-type--2 { background-position: 45% center; }
.class-type--3 { background-position: 75% center; }
.class-type--4 { background-position: 65% center; }
.class-type--5 { background-position: 18% center; }
.class-type--6 { background-position: 80% center; }
.class-type__icon { display: grid; place-items: center; align-self: stretch; color: #fff; background: linear-gradient(135deg, rgba(230,57,70,.45), transparent 72%); }
.class-type__icon .ico { width: 48px; height: 48px; filter: drop-shadow(0 4px 10px #000); }
.class-type__copy { align-self: stretch; display: flex; flex-direction: column; padding: 28px 22px 18px; background: linear-gradient(90deg, rgba(17,19,23,.9), #111317 52%); }
.class-type__copy h3 { color: #fff; font-size: 1.15rem; }
.class-type__copy p { margin-top: 10px; color: #b5bac3; font-size: .82rem; line-height: 1.55; }
.class-type__meta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(230,57,70,.3); color: #c9ccd2; font-size: .75rem; }
.class-type__meta span { display: inline-flex; align-items: center; gap: 5px; }
.class-type__meta .ico { width: 15px; height: 15px; color: var(--primary); }

.classes-benefits {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 22px;
    padding: 22px 10px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 18px;
    background: linear-gradient(135deg, #121519, #0d0f12);
}
.classes-benefits > div { min-width: 0; display: flex; align-items: center; justify-content: center; gap: 13px; padding: 4px 20px; border-right: 1px solid rgba(255,255,255,.13); }
.classes-benefits > div:last-child { border-right: 0; }
.classes-benefits .ico { width: 35px; height: 35px; flex: 0 0 auto; color: var(--primary); }
.classes-benefits p { min-width: 0; display: grid; gap: 3px; }
.classes-benefits b { color: #fff; font-size: .86rem; line-height: 1.25; }
.classes-benefits span { color: #9fa5af; font-size: .74rem; line-height: 1.35; }

/* Agenda de clases */
.portal-body { color: #f4f5f7; background: #07090b; }
.portal-head { padding-inline: clamp(18px, 6vw, 92px); background: rgba(7,9,11,.96); }
.portal-head__nav { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 32px); margin-left: auto; }
.portal-head__nav > a:not(.btn) { position: relative; color: #cfd3da; font-size: .86rem; font-weight: 600; }
.portal-head__nav > a:not(.btn):hover { color: #fff; text-decoration: none; }
.portal-head__nav > a.is-active { color: var(--primary); }
.portal-head__nav > a.is-active::after { content: ""; position: absolute; right: 0; bottom: -23px; left: 0; height: 2px; background: var(--primary); }
.live-page { min-height: calc(100vh - var(--nav-h)); padding: 14px clamp(14px, 5vw, 78px) 48px; }
.live-hero { min-height: 300px; border: 1px solid rgba(255,255,255,.17); border-radius: 24px; }
.live-hero__copy { width: min(640px, 52%); padding-block: 52px; }
.live-hero h1 { font-size: clamp(3.2rem, 5vw, 5.2rem); }
.live-hero__notice { display: inline-flex; align-items: center; gap: 8px; color: #aeb4bd; font-size: .76rem; }
.live-hero__notice .ico { width: 17px; height: 17px; color: var(--accent); }
.live-countdown {
    max-width: 1160px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 30px;
    margin: 14px auto;
    padding: 16px 34px;
    border: 1px solid rgba(230,57,70,.5);
    border-radius: 18px;
    background: radial-gradient(80% 160% at 50% 0%, rgba(230,57,70,.24), transparent), #0d0f12;
}
.live-countdown__label { display: flex; align-items: center; justify-content: flex-end; gap: 8px; color: var(--accent); font-size: .78rem; font-weight: 800; text-transform: uppercase; }
.live-countdown__label .ico { width: 18px; height: 18px; }
.live-countdown__time { padding-inline: 28px; border-inline: 1px solid var(--primary); color: #fff; font: 400 clamp(3.2rem, 6vw, 5.6rem)/.9 var(--font-display); letter-spacing: .05em; text-shadow: 0 5px 18px rgba(255,255,255,.24); }
.live-countdown__copy { display: grid; gap: 4px; color: #aeb3bc; font-size: .72rem; }
.live-countdown__copy b { color: #f3f4f6; }
.live-schedule { max-width: 1420px; margin-inline: auto; }
.live-date { display: flex; align-items: center; gap: 9px; margin: 24px 0 12px; color: #d8dbe0; font-weight: 600; }
.live-date .ico { width: 19px; height: 19px; color: var(--primary); }
.live-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.live-card { min-width: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.18); border-radius: 16px; background: #121418; }
.live-card__media { position: relative; height: 185px; background: linear-gradient(135deg, rgba(230,57,70,.28), transparent), url('../img/home-promo.png') 35% center / cover; }
.live-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(9,10,12,.55), transparent 60%); }
.live-card__media img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.live-card__tag,
.live-card__cupos { position: absolute; z-index: 2; padding: 6px 10px; border-radius: 999px; color: #fff; font-size: .67rem; font-weight: 800; }
.live-card__tag { top: 10px; left: 10px; background: var(--primary); text-transform: uppercase; }
.live-card__cupos { right: 9px; bottom: 9px; background: #42a52d; }
.live-card__cupos.is-full { background: #737882; }
.live-card__body { padding: 16px; }
.live-card h2 { min-height: 2.5em; color: #fff; font-size: 1rem; line-height: 1.25; }
.live-card__meta { display: grid; gap: 8px; margin: 11px 0 15px; color: #b2b7bf; font-size: .7rem; }
.live-card__meta span { display: flex; align-items: center; gap: 6px; }
.live-card__meta .ico { width: 14px; height: 14px; color: var(--primary); }
.live-card .btn { padding-inline: 10px; font-size: .78rem; }
.live-empty { max-width: 720px; margin: 56px auto; padding: 48px 24px; border: 1px solid rgba(255,255,255,.14); border-radius: 20px; text-align: center; background: #111318; }
.live-empty > .ico { width: 45px; height: 45px; margin: 0 auto 14px; color: var(--primary); }
.live-empty h2 { color: #fff; }
.live-empty p { max-width: 55ch; margin: 10px auto 0; color: #aeb3bc; }
.live-benefits { margin-top: 30px; }

/* Detalle e inscripción */
.class-detail-page { min-height: calc(100vh - var(--nav-h)); padding: 28px clamp(16px, 4vw, 64px) 38px; }
.class-detail__back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px; color: var(--accent); font-size: .84rem; font-weight: 700; }
.class-detail__back .ico { width: 17px; height: 17px; }
.class-detail-page > .alerta { max-width: 1380px; margin: 0 auto 16px; }
.class-detail { max-width: 1380px; display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(28px, 5vw, 72px); align-items: center; margin-inline: auto; }
.class-detail__visual { position: relative; min-height: 650px; overflow: hidden; border: 1px solid rgba(255,255,255,.16); border-radius: 24px; background: linear-gradient(0deg, #080a0d 0%, transparent 60%), url('../img/home-promo.png') 28% center / cover; }
.class-detail__visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(230,57,70,.4), transparent 35%); pointer-events: none; }
.class-detail__visual > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.class-detail__live { position: absolute; z-index: 3; top: 28px; left: 28px; display: inline-flex; align-items: center; gap: 7px; padding: 10px 15px; border: 1px solid var(--primary); border-radius: 9px; color: #fff; background: rgba(139,20,31,.65); font-size: .76rem; font-weight: 800; text-transform: uppercase; }
.class-detail__live .ico { width: 17px; height: 17px; color: var(--primary); }
.class-detail__poster { position: absolute; z-index: 3; right: 28px; bottom: 32px; left: 28px; }
.class-detail__poster h2 { font-size: clamp(3.3rem, 5.4vw, 5.5rem); text-shadow: 0 5px 18px #000; }
.class-detail__poster p { max-width: 46ch; margin-top: 12px; color: #d1d4d9; line-height: 1.5; }
.class-detail__tag { display: inline-block; padding: 6px 12px; border: 1px solid rgba(230,57,70,.65); border-radius: 999px; color: var(--primary); background: rgba(230,57,70,.1); font-size: .72rem; font-weight: 800; }
.class-detail__content h1 { margin: 14px 0 7px; font-size: clamp(3rem, 4.5vw, 5rem); }
.class-detail__description { color: #aeb4bd; line-height: 1.5; }
.class-detail__facts { list-style: none; margin: 18px 0; padding: 0; }
.class-detail__facts li { display: grid; grid-template-columns: 27px 1fr; gap: 12px; align-items: center; padding: 12px 5px; border-bottom: 1px solid rgba(255,255,255,.1); color: #e0e2e6; font-size: .86rem; }
.class-detail__facts .ico { width: 22px; height: 22px; color: var(--primary); }
.class-detail__facts span { display: grid; gap: 2px; }
.class-detail__facts b { color: #8f96a1; font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; }
.class-detail__form { padding: 22px; border: 1px solid rgba(230,57,70,.4); border-radius: 16px; background: linear-gradient(135deg, #15181c, #0d0f12); box-shadow: 0 14px 38px rgba(0,0,0,.25); }
.class-detail__form label { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; color: #fff; font-weight: 700; }
.class-detail__form label .ico { width: 20px; height: 20px; color: var(--accent); }
.class-detail__form input { width: 100%; padding: 13px 14px; border: 1px solid #3a3f47; border-radius: 8px; color: #fff; background: #12151a; }
.class-detail__form small { display: block; margin: 9px 0 17px; color: #9299a4; line-height: 1.45; }
.class-detail__form em { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 12px; color: #9aa1aa; font-size: .7rem; font-style: normal; }
.class-detail__form em .ico { width: 14px; height: 14px; color: var(--accent); }
.detail-benefits { max-width: 1380px; display: grid; grid-template-columns: 1.35fr 1fr 1fr .65fr; margin: 30px auto 0; padding: 20px 10px; border: 1px solid rgba(255,255,255,.13); border-radius: 16px; background: #101216; }
.detail-benefits > div { min-width: 0; display: flex; align-items: center; gap: 12px; padding: 3px 22px; border-right: 1px solid rgba(255,255,255,.12); }
.detail-benefits > div:last-child { border-right: 0; }
.detail-benefits .ico { width: 30px; height: 30px; flex: 0 0 auto; color: var(--accent); }
.detail-benefits p { display: grid; gap: 4px; }
.detail-benefits b { color: #fff; font-size: .8rem; }
.detail-benefits span { color: #9299a3; font-size: .68rem; line-height: 1.35; }

@media (max-width: 1120px) {
    .classes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .live-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .classes-benefits { grid-template-columns: repeat(2, 1fr); gap: 20px 0; }
    .classes-benefits > div:nth-child(2) { border-right: 0; }
    .detail-benefits { grid-template-columns: repeat(2, 1fr); gap: 20px 0; }
    .detail-benefits > div:nth-child(2) { border-right: 0; }
}
@media (max-width: 820px) {
    .portal-head__nav > a:not(.btn) { display: none; }
    .classes-hero, .live-hero { min-height: 420px; background-position: 65% center; }
    .classes-hero__copy, .live-hero__copy { width: 72%; }
    .live-countdown { grid-template-columns: 1fr; gap: 12px; text-align: center; }
    .live-countdown__label { justify-content: center; }
    .live-countdown__time { border-inline: 0; }
    .live-countdown__copy { justify-items: center; }
    .class-detail { grid-template-columns: 1fr; }
    .class-detail__visual { min-height: 560px; }
}
@media (max-width: 640px) {
    .plans-heading__kicker { font-size: .78rem; letter-spacing: .13em; }
    .plans-benefits b { font-size: .86rem; }
    .plans-benefits span { font-size: .78rem; }
    .portal-head__brand { font-size: 1rem; }
    .portal-head__nav { gap: 8px; }
    .portal-head__nav .btn { padding: 10px 12px; font-size: .72rem; }
    .classes-hero, .live-hero { min-height: 540px; background-position: 68% center; }
    .classes-hero::before, .live-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, #07090b 8%, rgba(7,9,11,.72) 58%, rgba(7,9,11,.1)); }
    .classes-hero__copy, .live-hero__copy { position: absolute; right: 0; bottom: 0; left: 0; width: 100%; padding: 34px 24px; }
    .classes-hero h1, .live-hero h1 { font-size: clamp(3rem, 14vw, 4.3rem); }
    .classes-grid, .live-grid { grid-template-columns: 1fr; }
    .class-type { min-height: 230px; }
    .classes-benefits, .detail-benefits { grid-template-columns: 1fr; }
    .classes-benefits > div, .detail-benefits > div { justify-content: flex-start; padding: 13px 16px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.1); }
    .classes-benefits > div:last-child, .detail-benefits > div:last-child { border-bottom: 0; }
    .live-page { padding-inline: 10px; }
    .live-countdown { padding-inline: 18px; }
    .class-detail-page { padding-inline: 14px; }
    .class-detail__visual { min-height: 510px; }
    .class-detail__poster h2 { font-size: 3.2rem; }
}

/* ── 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; } }

/* El portal comparte el mismo lienzo oscuro de las páginas públicas. */
.portal-body { color: #f4f5f7; background: #07090b; }
.portal-head { padding-inline: clamp(18px, 6vw, 92px); background: rgba(7,9,11,.96); }
.portal-foot { color: #8f96a1; border-color: rgba(255,255,255,.1); background: #090b0e; }

/* ============================================================================
   Nosotros · comunidad y carrusel reutilizable de entrenadores
   ========================================================================== */
.about-page {
    --about-line: rgba(230,57,70,.38);
    overflow: hidden;
    color: #f4f5f7;
    background:
        radial-gradient(60% 70% at 90% 28%, rgba(184,24,39,.12), transparent 68%),
        linear-gradient(rgba(255,255,255,.014) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.014) 1px, transparent 1px),
        #07090b;
    background-size: auto, 46px 46px, 46px 46px, auto;
}
.about-hero {
    position: relative;
    min-height: 490px;
    border-bottom: 1px solid rgba(255,255,255,.12);
    background:
        linear-gradient(90deg, #07090b 2%, rgba(7,9,11,.94) 36%, rgba(7,9,11,.28) 68%, rgba(7,9,11,.05)),
        url('../img/home-hero.png') 74% 36% / cover no-repeat;
}
.about-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .55;
    background: linear-gradient(125deg, transparent 37%, rgba(230,57,70,.45) 37.2%, transparent 37.7%), radial-gradient(var(--primary) 1px, transparent 1px);
    background-size: auto, 10px 10px;
    -webkit-mask-image: linear-gradient(90deg, #000, transparent 32%, transparent 85%, #000);
    mask-image: linear-gradient(90deg, #000, transparent 32%, transparent 85%, #000);
}
.about-hero__copy { position: relative; z-index: 2; width: min(650px, 52%); padding: clamp(80px, 8vw, 122px) clamp(28px, 6vw, 92px); }
.about-hero h1 {
    margin: 18px 0 16px;
    color: #fff;
    font: 400 clamp(3.5rem, 5.7vw, 6.2rem)/.94 var(--font-display);
    text-transform: uppercase;
}
.about-hero h1 span { display: block; color: var(--accent); }
.about-hero p { max-width: 60ch; color: #c7cad0; font-size: .96rem; line-height: 1.65; }
.about-stats {
    position: relative;
    z-index: 3;
    max-width: 1340px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: -38px auto 0;
    padding: 18px 24px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 16px;
    background: rgba(13,15,18,.94);
    box-shadow: 0 20px 50px rgba(0,0,0,.35);
}
.about-stats > div { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 5px 28px; border-right: 1px solid rgba(255,255,255,.11); }
.about-stats > div:last-child { border-right: 0; }
.about-stats > div > span .ico { width: 42px; height: 42px; color: var(--primary); }
.about-stats p { display: grid; }
.about-stats b { color: #fff; font-size: 1.55rem; line-height: 1; }
.about-stats small { margin-top: 5px; color: #9fa5ae; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
.about-why,
.about-trainers,
.about-specialties { padding-block: clamp(54px, 6vw, 84px); }
.about-heading { margin-bottom: 30px; }
.about-heading > span,
.about-trainers__intro > div > span { color: var(--primary); font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.about-heading h2,
.about-trainers__intro h2 { margin-top: 8px; color: #fff; font: 400 clamp(2.5rem, 4vw, 4.2rem)/1 var(--font-display); text-transform: uppercase; }
.about-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.about-values article { min-width: 0; display: flex; align-items: flex-start; gap: 20px; padding: 30px; border: 1px solid rgba(255,255,255,.15); border-radius: 16px; background: linear-gradient(145deg, #15181c, #0f1114); }
.about-values article > .ico { width: 44px; height: 44px; flex: 0 0 auto; color: var(--primary); }
.about-values h3 { color: #fff; font-size: 1rem; }
.about-values p { margin-top: 8px; color: #aeb4bd; font-size: .82rem; line-height: 1.55; }
.about-trainers { border-block: 1px solid rgba(255,255,255,.1); background: radial-gradient(50% 110% at 50% 0%, rgba(139,22,34,.16), transparent 65%), #0a0c0f; }
.about-trainers__intro { display: grid; grid-template-columns: 1fr .72fr; gap: 40px; align-items: end; margin-bottom: 28px; }
.about-trainers__intro > p { color: #aeb3bc; font-size: .9rem; line-height: 1.6; }

.trainer-carousel { --trainer-gap: 20px; position: relative; }
.trainer-carousel__viewport { overflow: hidden; }
.trainer-carousel__track { display: flex; gap: var(--trainer-gap); transition: transform .65s cubic-bezier(.22,.61,.36,1); will-change: transform; }
.trainer-carousel .trainer-card {
    position: relative;
    flex: 0 0 calc((100% - (var(--trainer-gap) * 2)) / 3);
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(230,57,70,.45);
    border-radius: 18px;
    background: linear-gradient(150deg, #181b20, #0e1013);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.trainer-carousel .trainer-card:hover { transform: translateY(-5px); border-color: var(--primary); box-shadow: 0 22px 46px rgba(0,0,0,.36); }
.trainer-carousel .trainer-card__media { position: relative; height: 340px; display: grid; place-items: center; overflow: hidden; color: var(--primary); background: radial-gradient(circle at 50% 28%, #2b2f36, #111317 70%); font: 400 4rem/1 var(--font-display); }
.trainer-carousel .trainer-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(9,10,12,.82), transparent 48%), linear-gradient(135deg, rgba(230,57,70,.25), transparent 35%); pointer-events: none; }
.trainer-carousel .trainer-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.trainer-carousel .trainer-card__body { min-height: 205px; padding: 24px; }
.trainer-carousel .trainer-card__role { display: inline-block; margin-bottom: 8px; color: var(--primary); font-size: .68rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.trainer-carousel .trainer-card h3 { color: #fff; font-size: 1.28rem; }
.trainer-carousel .trainer-card__body > p { margin-top: 10px; color: #b9bec6; font-size: .85rem; line-height: 1.55; }
.trainer-carousel .trainer-card__socials { position: absolute; z-index: 3; right: 16px; bottom: 16px; left: 16px; display: flex; justify-content: center; gap: 9px; margin: 0; }
.trainer-carousel .trainer-card__socials:empty { display: none; }
.trainer-carousel .trainer-card__socials a { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.35); border-radius: 8px; color: #fff; background: rgba(10,12,15,.84); font-size: .72rem; font-weight: 800; backdrop-filter: blur(6px); }
.trainer-carousel .trainer-card__socials a:hover { border-color: var(--primary); background: var(--primary); text-decoration: none; transform: translateY(-2px); }
.trainer-carousel__controls { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 24px; }
.trainer-carousel__controls button { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; color: #fff; background: #121519; cursor: pointer; transition: border-color .2s, background .2s; }
.trainer-carousel__controls button:hover { border-color: var(--primary); background: var(--primary); }
.trainer-carousel__controls button .ico { width: 18px; height: 18px; }
.trainer-carousel__controls button span { font-size: 1.7rem; line-height: 1; transform: translateY(-1px); }
.trainer-carousel__controls [data-carousel-status] { min-width: 62px; color: #9097a1; font-size: .75rem; text-align: center; }

.about-specialties { padding-top: 62px; }
.about-specialties__grid { display: grid; grid-template-columns: repeat(5, 1fr); padding: 20px 6px; border: 1px solid rgba(255,255,255,.14); border-radius: 16px; background: #101216; }
.about-specialties__grid > div { min-width: 0; display: flex; align-items: flex-start; gap: 12px; padding: 4px 17px; border-right: 1px solid rgba(255,255,255,.12); }
.about-specialties__grid > div:last-child { border-right: 0; }
.about-specialties__grid .ico { width: 28px; height: 28px; flex: 0 0 auto; color: var(--primary); }
.about-specialties__grid p { display: grid; gap: 4px; }
.about-specialties__grid b { color: #fff; font-size: .78rem; }
.about-specialties__grid span { color: #989fa8; font-size: .67rem; line-height: 1.4; }
.about-cta { padding-bottom: 58px; }
.about-cta .contenedor { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 26px 34px; border: 1px solid rgba(230,57,70,.5); border-radius: 16px; background: radial-gradient(60% 180% at 100% 50%, rgba(230,57,70,.25), transparent 70%), #111318; }
.about-cta .contenedor > div { display: flex; align-items: center; gap: 20px; }
.about-cta .contenedor > div > .ico { width: 42px; height: 42px; color: var(--primary); }
.about-cta p { display: grid; gap: 4px; }
.about-cta b { color: #fff; font: 700 clamp(1.15rem, 2vw, 1.65rem)/1.2 var(--font-head); text-transform: uppercase; }
.about-cta span { color: #aeb4bd; font-size: .82rem; }
.about-cta .btn { min-width: 210px; }

@media (max-width: 980px) {
    .about-stats { margin-inline: 22px; }
    .about-values { grid-template-columns: 1fr; }
    .trainer-carousel .trainer-card { flex-basis: calc((100% - var(--trainer-gap)) / 2); }
    .about-specialties__grid { grid-template-columns: repeat(2, 1fr); gap: 22px 0; }
    .about-specialties__grid > div { border-right: 0; }
    .about-specialties__grid > div:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.12); }
    .about-specialties__grid > div:last-child { grid-column: 1 / -1; border-right: 0; justify-content: center; }
}
@media (max-width: 680px) {
    .about-hero { min-height: 570px; background-position: 66% center; }
    .about-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, #07090b 6%, rgba(7,9,11,.78) 55%, transparent); }
    .about-hero__copy { position: absolute; right: 0; bottom: 0; left: 0; width: 100%; padding: 38px 24px; }
    .about-hero h1 { font-size: clamp(3.25rem, 15vw, 4.6rem); }
    .about-stats { grid-template-columns: 1fr; margin-top: 0; border-radius: 0; }
    .about-stats > div { justify-content: flex-start; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.1); }
    .about-stats > div:last-child { border-bottom: 0; }
    .about-trainers__intro { grid-template-columns: 1fr; gap: 14px; }
    .trainer-carousel .trainer-card { flex-basis: 100%; }
    .trainer-carousel .trainer-card__media { height: 320px; }
    .about-specialties__grid { grid-template-columns: 1fr; }
    .about-specialties__grid > div, .about-specialties__grid > div:nth-child(odd) { grid-column: auto; padding: 12px 16px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.1); }
    .about-specialties__grid > div:last-child { grid-column: auto; justify-content: flex-start; border-bottom: 0; }
    .about-cta .contenedor { align-items: stretch; flex-direction: column; }
    .about-cta .btn { width: 100%; }
}

/* ── Contacto ───────────────────────────────────────────────────────────── */
.contact-page {
    overflow: hidden;
    color: #eef0f3;
    background:
        radial-gradient(circle at 18% 14%, rgba(131,20,31,.18), transparent 30%),
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px), #080a0d;
    background-size: auto, 52px 52px, 52px 52px, auto;
}
.contact-hero {
    position: relative;
    min-height: 470px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,.12);
    background:
        linear-gradient(90deg, #080a0d 0%, rgba(8,10,13,.98) 34%, rgba(8,10,13,.52) 61%, rgba(8,10,13,.12) 100%),
        linear-gradient(0deg, rgba(8,10,13,.3), transparent 45%),
        url('../img/home-hero.png') 76% 39% / cover no-repeat;
}
.contact-hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 25% 35%, rgba(230,57,70,.1), transparent 35%); pointer-events: none; }
.contact-hero__copy { position: relative; z-index: 1; width: min(680px, 52%); margin-left: max(6vw, calc((100vw - 1320px) / 2)); padding: 72px 24px; }
.contact-page .classes-kicker { gap: 12px; font-size: .92rem; letter-spacing: .13em; }
.contact-page .classes-kicker i { position: relative; width: 10px; height: 10px; flex: none; }
.contact-page .classes-kicker i::before,
.contact-page .classes-kicker i::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid var(--accent);
    border-radius: 50%;
    animation: radar 1.8s ease-out infinite;
}
.contact-page .classes-kicker i::after { animation-delay: .9s; }
.contact-hero h1 { margin-top: 22px; color: #fff; font: 400 clamp(4rem, 6vw, 6.5rem)/.96 var(--font-display); letter-spacing: .02em; text-transform: uppercase; }
.contact-hero h1 span { color: #c8f500; text-shadow: 0 0 28px rgba(200,245,0,.08); }
.contact-hero__copy > p { max-width: 590px; margin-top: 30px; color: #d0d4da; font-size: 1rem; line-height: 1.75; }
.contact-hero__promises { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 28px; }
.contact-hero__promises > div { min-width: 0; display: flex; align-items: center; gap: 12px; padding: 4px 22px; border-right: 1px solid rgba(255,255,255,.16); }
.contact-hero__promises > div:first-child { padding-left: 0; }
.contact-hero__promises > div:last-child { border-right: 0; }
.contact-hero__promises .ico { width: 31px; height: 31px; flex: 0 0 auto; color: var(--primary); }
.contact-hero__promises p { display: grid; gap: 3px; min-width: 0; }
.contact-hero__promises b { color: #fff; font-size: .78rem; }
.contact-hero__promises span { color: #a7adb6; font-size: .67rem; }

.contact-main { padding: 66px 0 72px; }
.contact-layout { max-width: 1320px; display: grid; grid-template-columns: .82fr 1.32fr .88fr; gap: 26px; align-items: start; }
.contact-label { display: flex; align-items: center; gap: 10px; margin-bottom: 23px; color: #c8f500; font-size: .82rem; font-weight: 800; line-height: 1.25; letter-spacing: .12em; text-transform: uppercase; }
.contact-label i { width: 8px; height: 8px; border: 2px solid #c8f500; border-radius: 50%; box-shadow: 0 0 10px rgba(200,245,0,.55); }
.contact-info__cards { display: grid; gap: 14px; }
.contact-info__cards article { min-height: 116px; display: flex; align-items: center; gap: 16px; padding: 20px; border: 1px solid #30343b; border-radius: 13px; background: linear-gradient(145deg, #15181d, #0d0f12); transition: transform .22s ease, border-color .22s ease; }
.contact-info__cards article:hover { transform: translateY(-3px); border-color: rgba(230,57,70,.62); }
.contact-info__cards article > .ico { width: 48px; height: 48px; flex: 0 0 auto; padding: 12px; border-radius: 12px; color: #fff; background: linear-gradient(145deg, #ed4050, #9e1d2b); box-shadow: 0 8px 22px rgba(230,57,70,.25); }
.contact-info__cards p { min-width: 0; display: grid; gap: 4px; }
.contact-info__cards b { color: #fff; font-size: .86rem; }
.contact-info__cards span, .contact-info__cards a { color: #d1d5db; font-size: .75rem; line-height: 1.55; overflow-wrap: anywhere; }
.contact-info__cards a:hover { color: var(--primary); }
.contact-info__cards small { color: #858c96; font-size: .66rem; line-height: 1.4; }

.contact-form-card, .contact-visit { border: 1px solid rgba(255,255,255,.13); border-radius: 15px; background: linear-gradient(145deg, rgba(22,25,30,.96), rgba(10,12,15,.98)); box-shadow: 0 22px 54px rgba(0,0,0,.28); }
.contact-form-card { padding: 26px; }
.contact-form-card .contact-label, .contact-visit .contact-label { margin-bottom: 15px; }
.contact-form-card h2 { color: #fff; font: 400 2.1rem/1 var(--font-display); letter-spacing: .02em; text-transform: uppercase; }
.contact-form-card > p { margin: 8px 0 18px; color: #aab0b9; font-size: .75rem; line-height: 1.5; }
.contact-form { display: grid; gap: 12px; }
.contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.contact-form label { display: block; margin-bottom: 6px; color: #d9dde2; font-size: .68rem; font-weight: 650; }
.contact-form input, .contact-form select, .contact-form textarea { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #343941; border-radius: 7px; outline: 0; color: #f4f5f7; background: #0d1013; font: inherit; font-size: .75rem; transition: border-color .2s, box-shadow .2s; }
.contact-form textarea { min-height: 94px; resize: vertical; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: #707781; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(230,57,70,.12); }
.contact-form .btn { min-height: 48px; margin-top: 3px; text-transform: uppercase; letter-spacing: .045em; box-shadow: 0 10px 26px rgba(230,57,70,.22); }
.contact-form__privacy { display: flex; align-items: center; justify-content: center; gap: 7px; color: #7f8791; font-size: .64rem; text-align: center; }
.contact-form__privacy .ico { width: 14px; height: 14px; color: #c8f500; }

.contact-visit { padding: 22px; }
.contact-map { position: relative; height: 270px; overflow: hidden; margin-top: 17px; border: 1px solid #333840; border-radius: 12px 12px 5px 5px; background: radial-gradient(circle at 62% 62%, rgba(230,57,70,.13), transparent 24%), linear-gradient(140deg, #20252b, #101419); }
.contact-map::before, .contact-map::after { content: ""; position: absolute; width: 145%; height: 11px; left: -24%; border-block: 1px solid rgba(154,164,176,.22); background: rgba(102,112,123,.08); transform: rotate(-31deg); }
.contact-map::before { top: 34%; }
.contact-map::after { top: 72%; transform: rotate(21deg); }
.contact-map__roads i { position: absolute; width: 150%; height: 2px; left: -25%; background: rgba(143,153,164,.16); transform: rotate(12deg); }
.contact-map__roads i:nth-child(1) { top: 22%; }.contact-map__roads i:nth-child(2) { top: 48%; transform: rotate(-12deg); }.contact-map__roads i:nth-child(3) { top: 66%; transform: rotate(39deg); }.contact-map__roads i:nth-child(4) { top: 86%; transform: rotate(-3deg); }
.contact-map__pin { position: absolute; z-index: 2; top: 43%; left: 56%; display: flex; align-items: center; gap: 6px; }
.contact-map__pin > .ico { width: 42px; height: 42px; padding: 10px; border-radius: 50% 50% 50% 8px; color: #fff; background: var(--primary); box-shadow: 0 0 0 6px rgba(230,57,70,.15), 0 8px 24px rgba(0,0,0,.45); transform: rotate(-45deg); }
.contact-map__pin > .ico path, .contact-map__pin > .ico circle { transform-origin: center; transform: rotate(45deg); }
.contact-map__pin span { padding: 5px 8px; border-radius: 4px; color: #fff; background: rgba(5,7,9,.82); font-size: .62rem; white-space: nowrap; }
.contact-map__caption { position: absolute; z-index: 3; right: 0; bottom: 0; left: 0; display: flex; align-items: center; gap: 9px; padding: 12px; color: #ced3d9; background: rgba(7,9,11,.9); font-size: .68rem; line-height: 1.45; }
.contact-map__caption .ico { width: 17px; height: 17px; flex: 0 0 auto; color: var(--primary); }
.contact-visit > .btn { margin-top: 12px; }
.contact-visit__pending { display: block; margin-top: 12px; color: #858c95; font-size: .68rem; line-height: 1.45; text-align: center; }

.contact-cta { border-top: 1px solid rgba(230,57,70,.62); border-bottom: 1px solid rgba(255,255,255,.1); background: linear-gradient(110deg, rgba(92,11,23,.52), rgba(15,16,20,.97) 40%, rgba(88,12,23,.5)); }
.contact-cta .contenedor { min-height: 145px; display: flex; align-items: center; justify-content: center; gap: 54px; text-align: center; }
.contact-cta h2 { color: #fff; font: 400 clamp(2rem, 3.5vw, 3.2rem)/1 var(--font-display); text-transform: uppercase; }
.contact-cta p { margin-top: 6px; color: #c8f500; font-size: .77rem; }
.contact-cta .btn { min-width: 190px; }

@media (max-width: 1080px) {
    .contact-hero__copy { width: 64%; }
    .contact-layout { grid-template-columns: .85fr 1.3fr; }
    .contact-visit { grid-column: 1 / -1; }
    .contact-map { height: 240px; }
}
@media (max-width: 760px) {
    .contact-hero { min-height: 640px; align-items: end; background-position: 68% center; }
    .contact-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, #080a0d 8%, rgba(8,10,13,.87) 54%, rgba(8,10,13,.08)); }
    .contact-hero__copy { width: 100%; margin: 0; padding: 44px 24px; }
    .contact-page .classes-kicker { font-size: .82rem; }
    .contact-hero h1 { margin-top: 18px; font-size: clamp(3.5rem, 16vw, 5.4rem); line-height: .98; }
    .contact-hero__copy > p { margin-top: 24px; }
    .contact-hero__promises { grid-template-columns: 1fr; gap: 13px; }
    .contact-hero__promises > div, .contact-hero__promises > div:first-child { padding: 0; border-right: 0; }
    .contact-main { padding-block: 48px 56px; }
    .contact-layout { grid-template-columns: 1fr; gap: 34px; padding-inline: 20px; }
    .contact-visit { grid-column: auto; }
    .contact-form__row { grid-template-columns: 1fr; }
    .contact-cta .contenedor { flex-direction: column; gap: 18px; padding-block: 30px; }
    .contact-cta .btn { width: 100%; max-width: 340px; }
}

/* ── Reclamaciones: reglas compartidas (antes vivían junto al editor de usuarios) ── */
.claim-back { margin: 0 0 18px; }
.claim-legal-note { display: flex; gap: 11px; padding: 14px; border: 1px solid #bdd4ff; border-radius: 9px; color: #315a95; background: #f5f9ff; }
.claim-legal-note .ico { width: 20px; flex: 0 0 auto; }

/* ── Detalle del Libro de Reclamaciones ────────────────────────────── */
.claim-detail-grid { display: grid; grid-template-columns: minmax(0,1.04fr) minmax(390px,.96fr); gap: 18px; align-items: start; }
.claim-sheet, .claim-response-card { padding: 20px; }
.claim-sheet-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }.claim-main-icon, .claim-response-head > span { width: 46px; height: 46px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 11px; color: var(--primary); background: var(--primary-soft); }.claim-main-icon .ico, .claim-response-head .ico { width: 22px; }.claim-sheet-head div { flex: 1; }.claim-sheet-head h3, .claim-response-head h3 { margin: 0 0 3px; }.claim-sheet-head p, .claim-response-head p { margin: 0; color: var(--muted); font-size: .82rem; }
.claim-deadline { display: flex; align-items: center; gap: 9px; margin: 0 0 14px; padding: 13px 14px; border-radius: 8px; color: #9d1f2a; background: #fff0f2; font-size: .8rem; }.claim-deadline .ico { width: 19px; }.claim-deadline span { color: #a45259; }.claim-deadline.is-overdue { color: #fff; background: #c72c3c; }.claim-deadline.is-overdue span { color: #fff; }
.claim-section, .claim-text-section { margin-top: 12px; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }.claim-section h4, .claim-text-section h4 { display: flex; align-items: center; gap: 9px; margin: 0; padding: 12px 14px; border-bottom: 1px solid var(--border); font-size: .94rem; }.claim-section h4 span, .claim-text-section h4 span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; color: var(--primary); background: var(--primary-soft); }.claim-section h4 .ico, .claim-text-section h4 .ico { width: 15px; }
.claim-data { padding: 0 14px; }.claim-data-row { display: grid; grid-template-columns: 22px 150px minmax(0,1fr); gap: 8px; align-items: center; min-height: 43px; border-bottom: 1px solid var(--border); }.claim-data-row:last-child { border: 0; }.claim-data-row > span { color: var(--gray-500); }.claim-data-row .ico { width: 15px; }.claim-data-row small { color: var(--muted); }.claim-data-row strong { font-size: .82rem; font-weight: 600; overflow-wrap: anywhere; }
.claim-text-section h4 { border-bottom: 0; padding-bottom: 7px; }.claim-text-section p { margin: 0; padding: 0 14px 14px 51px; font-size: .86rem; line-height: 1.55; }
.claim-response-column { display: grid; gap: 18px; }.claim-response-head { display: flex; gap: 13px; align-items: center; margin: -20px -20px 18px; padding: 20px; border-bottom: 1px solid var(--border); }.claim-response-head p .badge { margin-left: 5px; }
.claim-previous-response { margin-bottom: 16px; padding: 14px; border-radius: 8px; color: #17633f; background: #effaf4; }.claim-previous-response p { margin: 7px 0; color: var(--gray-700); line-height: 1.5; }.claim-previous-response small { color: #528269; }
.claim-response-form label { display: block; margin-bottom: 7px; font-size: .8rem; font-weight: 700; }.claim-response-form textarea { width: 100%; resize: vertical; }.claim-count { margin: 5px 0 13px; color: var(--muted); font-size: .75rem; }.claim-response-form .btn { min-height: 46px; }
.claim-state-form { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; margin-top: 17px; }.claim-state-form label { color: var(--muted); font-size: .8rem; }.claim-state-form select { min-width: 140px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 7px; background: #fff; }
.claim-legal-note p { display: grid; gap: 5px; margin: 0; font-size: .78rem; line-height: 1.45; }.claim-legal-note span { color: #6982a5; }
@media (max-width: 1050px) { .claim-detail-grid { grid-template-columns: 1fr; } }
@media (max-width: 650px) { .claim-detail-grid { display: block; }.claim-response-column { margin-top: 16px; }.claim-data-row { grid-template-columns: 20px 105px minmax(0,1fr); }.claim-deadline { align-items: flex-start; flex-wrap: wrap; }.claim-text-section p { padding-left: 14px; } }

/* ── Editor visual del sitio público ───────────────────────────────── */
.web-editor-guide { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; padding: 16px 18px; border: 1px solid #f0c7cc; border-radius: 11px; background: #fff7f8; }
.web-editor-guide > span { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 10px; color: var(--primary); background: var(--primary-soft); }.web-editor-guide .ico { width: 21px; }.web-editor-guide div { flex: 1; }.web-editor-guide h3 { margin: 0 0 3px; font-size: .95rem; }.web-editor-guide p { margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.5; }.web-editor-guide strong { padding: 6px 10px; border-radius: 999px; color: #177a4d; background: #e8f8ef; font-size: .72rem; white-space: nowrap; }
.web-editor-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: #fff; }.web-editor-toolbar label { font-size: .8rem; font-weight: 700; }.web-editor-toolbar select { min-width: 190px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 7px; background: #fff; }.web-editor-status { display: flex; align-items: center; gap: 7px; margin-left: auto; color: #177a4d; font-size: .76rem; font-weight: 700; }.web-editor-status i { width: 8px; height: 8px; border-radius: 50%; background: #22b573; box-shadow: 0 0 0 4px rgba(34,181,115,.13); }
.web-editor-devicebar { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 7px; border: 1px solid var(--border); border-bottom: 0; border-radius: 10px 10px 0 0; background: #f7f8fa; }.web-editor-devicebar > span { margin-right: 8px; color: var(--muted); font-size: .72rem; }.web-editor-devicebar button { padding: 6px 9px; border: 0; border-radius: 6px; color: var(--gray-600); background: transparent; font-size: .72rem; cursor: pointer; }.web-editor-devicebar button.is-active { color: var(--primary); background: #fff; box-shadow: 0 1px 5px rgba(0,0,0,.08); font-weight: 700; }
.web-editor-stage { min-height: 610px; display: flex; justify-content: center; overflow: auto; padding: 10px; border: 1px solid var(--border); border-radius: 0 0 12px 12px; background: #dde1e6; }.web-editor-stage iframe { display: block; width: 100%; height: 76vh; min-height: 590px; border: 0; border-radius: 5px; background: #fff; box-shadow: 0 3px 16px rgba(0,0,0,.13); transition: width .2s ease; }
@media (max-width: 700px) { .web-editor-guide { align-items: flex-start; }.web-editor-guide strong { display: none; }.web-editor-toolbar { align-items: stretch; flex-direction: column; }.web-editor-toolbar select { width: 100%; }.web-editor-status { margin-left: 0; }.web-editor-devicebar > span { display: none; } }

/* ══════════════════ MI PERFIL ══════════════════ */
/* La foto queda a la MISMA altura que el box de Datos Personales; Seguridad va debajo. */
.perfil-grid { display: grid; grid-template-columns: 1.12fr 1fr; gap: 20px; align-items: start;
    grid-template-areas: "datos foto" "seguridad foto"; }
.perfil-box--datos { grid-area: datos; align-self: stretch; }
.perfil-foto-card { grid-area: foto; align-self: stretch; }
.perfil-box--seguridad { grid-area: seguridad; }

.perfil-box { border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px 20px; background: var(--surface);
    border-top: 3px solid var(--border); }
.perfil-box--rojo  { border-top-color: var(--primary); --fc: var(--primary); }
.perfil-box--ambar { border-top-color: var(--warn);    --fc: var(--warn); }
.perfil-box__head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 16px; padding-bottom: 12px;
    border-bottom: 2px solid color-mix(in srgb, var(--fc) 55%, var(--border)); font-weight: 800; color: var(--fc); font-size: 1rem; }
.perfil-box__head svg { width: 20px; height: 20px; }
.perfil-box__head small { flex-basis: 100%; font-weight: 500; color: var(--muted); font-size: .78rem; }
.perfil-box__head--ambar { color: var(--warn); }
.perfil-box__head--fila { justify-content: space-between; flex-wrap: nowrap; gap: 12px; }
.perfil-box__head--fila small { flex-basis: auto; display: block; margin-top: 2px; }
/* Icono + título del encabezado siempre en una sola línea (sin salto tras el icono). */
.perfil-box__head-t { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.perfil-box__head-t svg { flex: none; }
.perfil-box__foot { display: flex; justify-content: center; margin-top: 18px; }
.form-divider--rojo { border-top-color: var(--primary); }
.form-divider--ambar { border-top-color: var(--warn); }
.ff__control.is-readonly { background: var(--gray-50); }
.ff__control.is-readonly input { color: var(--muted); cursor: not-allowed; }
/* Label con icono en una sola línea (arregla el salto tras el escudo) y en rojo. */
.ff__label--ico { display: inline-flex; align-items: center; gap: 6px; }
.ff__label--ico svg { width: 15px; height: 15px; flex: none; }
.ff__label--rojo { color: var(--primary); }
/* Caja Seguridad: sombreado ámbar al enfocar + más aire antes de las claves nuevas. */
.perfil-box--ambar .ff__control:focus-within { border-color: var(--warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 22%, transparent); }
.perfil-box--rojo .ff__ico { border-right-color: color-mix(in srgb, var(--primary) 58%, var(--border));
    box-shadow: 2px 0 7px color-mix(in srgb, var(--primary) 18%, transparent); }
.perfil-box--ambar .ff__ico,
.perfil-box--ambar .ff__eye { border-color: color-mix(in srgb, var(--warn) 58%, var(--border));
    box-shadow: 2px 0 7px color-mix(in srgb, var(--warn) 18%, transparent); }
.perfil-box--ambar .ff__eye { box-shadow: -2px 0 7px color-mix(in srgb, var(--warn) 18%, transparent); }
.perfil-seguridad__nuevas { margin-top: 20px; }

/* Celular + Contraseña actual: fila centrada. Con 1 campo queda al centro; con 2, equilibrados. */
.perfil-par { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 22px; margin-top: 16px; }
.perfil-par__item { display: flex; flex-direction: column; gap: 6px; min-width: 220px; flex: 0 1 calc((100% - 22px) / 2); }

/* Botón "ojo" para mostrar/ocultar contraseña, pegado al borde derecho del control. */
.ff__eye { display: grid; place-items: center; align-self: stretch; flex: none; width: 42px; padding: 0;
    border: 0; border-left: 2px solid var(--border); background: var(--gray-50); color: var(--gray-500);
    cursor: pointer; transition: color .15s ease, background .15s ease; }
.ff__eye:hover { color: var(--fc); background: var(--gray-100); }
.ff__eye svg { width: 17px; height: 17px; }
.ff__eye.is-on { color: var(--fc); }

.perfil-foto-card { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    padding: 46px 20px 26px; border: 1px solid var(--border); border-top: 3px solid var(--primary); border-radius: 16px; background: var(--surface);
    box-shadow: var(--panel-card-shadow); text-align: center; }
.perfil-foto-card__top { position: absolute; top: 14px; right: 14px; display: flex; gap: 8px; }
.perfil-foto { padding: 8px; border: 3px dashed color-mix(in srgb, var(--primary) 45%, var(--border)); border-radius: 50%;
    background: transparent; cursor: pointer; transition: transform .15s ease, border-color .15s ease; }
.perfil-foto { position: relative; }
.perfil-foto:hover { transform: scale(1.02); border-color: var(--primary); }
.perfil-foto__badge { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; box-shadow: 0 4px 12px rgba(0,0,0,.18); }
.perfil-foto__badge svg { width: 13px; height: 13px; }
.perfil-foto img { display: block; width: 280px; height: 280px; max-width: min(60vw, 280px); border-radius: 50%; object-fit: cover; background: var(--gray-100); }
.perfil-foto-card__nombre { margin: 6px 0 0; font-size: 1.22rem; }
.perfil-foto-card__correo { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--muted); font-size: .98rem; }
.perfil-foto-card__correo svg { width: 15px; height: 15px; }
.role-badge--centrado { justify-content: center; min-width: 112px; text-align: center; font-size: .9rem; }
.perfil-foto-card__btns { display: flex; flex-flow: row nowrap; align-items: stretch; justify-content: center; gap: 9px; margin-top: 14px; width: 100%; }
.perfil-foto-card__btns .btn { flex: 1 1 0; min-width: 0; width: auto; padding-left: 10px; padding-right: 10px; white-space: nowrap; }

/* En Mi perfil los botones conservan su color al pasar el mouse o hacer clic;
   solo mantienen la elevación y la sombra del color correspondiente. */
.perfil-page .btn { appearance: none; -webkit-appearance: none; }
.perfil-page .btn--danger:hover,
.perfil-page .btn--danger:focus-visible,
.perfil-page .btn--danger:active { background: var(--danger); color: #fff; box-shadow: 0 9px 20px rgba(214,69,69,.42); }
.perfil-page .btn--primary:hover,
.perfil-page .btn--primary:focus-visible,
.perfil-page .btn--primary:active { background: var(--primary); color: #fff; box-shadow: 0 9px 20px rgba(230,57,70,.35); }
.perfil-page .btn--info:hover,
.perfil-page .btn--info:focus-visible,
.perfil-page .btn--info:active { background: #2563eb; color: #fff; box-shadow: 0 9px 20px rgba(37,99,235,.42); }
.perfil-page .btn--dark:hover,
.perfil-page .btn--dark:focus-visible,
.perfil-page .btn--dark:active { background: var(--coal-800); color: #fff; box-shadow: 0 9px 20px rgba(14,15,18,.28); }
.perfil-page .btn--warn:hover,
.perfil-page .btn--warn:focus-visible,
.perfil-page .btn--warn:active { background: var(--warn); color: #fff; box-shadow: 0 9px 20px color-mix(in srgb, var(--warn) 42%, transparent); }

/* Modal galería de fotos */
.pmodal { position: fixed; inset: 0; z-index: 1200; display: none; align-items: center; justify-content: center; padding: 18px;
    background: rgba(15,23,42,.6); }
.pmodal.is-open { display: flex; }
.pmodal__box { width: min(560px, 100%); background: var(--surface); border-radius: 16px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.4); }
.pmodal__head { display: flex; align-items: center; gap: 9px; padding: 15px 18px; color: #fff; background: var(--info, #2563eb); font-weight: 700; }
.pmodal__head svg { width: 20px; height: 20px; }
.pmodal__x { margin-left: auto; border: 0; background: transparent; color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.pmodal__body { padding: 20px; }
.pgal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.pgal__item { margin: 0; }
.pgal__pick { width: 100%; padding: 4px; border: 3px solid transparent; border-radius: 14px; background: var(--gray-50); cursor: pointer; transition: border-color .15s ease, transform .15s ease; }
.pgal__pick:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--info, #2563eb) 45%, var(--border)); }
.pgal__pick.is-sel { border-color: var(--info, #2563eb); }
.pgal__pick img { display: block; width: 100%; aspect-ratio: 1; border-radius: 11px; object-fit: cover; }
.pmodal__foot { display: flex; justify-content: center; gap: 12px; padding: 16px 20px; border-top: 1px solid var(--border); }

/* Visor de foto (lightbox) */
.plight { position: fixed; inset: 0; z-index: 1300; display: none; align-items: center; justify-content: center; padding: 24px;
    background: rgba(2,6,23,.85); }
.plight.is-open { display: flex; }
.plight__img { max-width: 90vw; max-height: 82vh; border-radius: 14px; box-shadow: 0 24px 70px rgba(0,0,0,.6); background: #fff; }
.plight__x { position: fixed; top: 18px; right: 22px; width: 44px; height: 44px; border: 0; border-radius: 50%;
    background: rgba(255,255,255,.15); color: #fff; font-size: 1.7rem; line-height: 1; cursor: pointer; }
.plight__x:hover { background: rgba(255,255,255,.3); }

@media (max-width: 900px) {
    .perfil-grid { grid-template-columns: 1fr; grid-template-areas: "foto" "datos" "seguridad"; }
    .perfil-foto-card { align-self: auto; }
}
@media (max-width: 520px) {
    .pgal { grid-template-columns: repeat(3, 1fr); }
    .perfil-foto-card__btns { flex-wrap: wrap; }
    .perfil-foto-card__btns .btn { flex: 1 1 100%; }
}
/* ══════════════════ ROLES Y PERMISOS ══════════════════ */
.role-desc { display: block; margin-top: 2px; color: var(--muted); font-size: .76rem; }
.perm-actions { display: flex; gap: 10px; margin: 4px 0 14px; }
.perm-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.perm-group { margin: 0; padding: 12px 14px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.perm-group__title { padding: 0; }
.perm-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.perm-check { display: flex; align-items: center; gap: 9px; font-size: .86rem; cursor: pointer; }
.perm-check input { width: 17px; height: 17px; accent-color: #4f46e5; cursor: pointer; flex: none; }
.perm-check--master { font-weight: 800; color: #4f46e5; font-size: .9rem; text-transform: uppercase; letter-spacing: .02em; }
.perm-check--master input { accent-color: #4f46e5; }

/* Foto de perfil dentro de los avatares circulares de la barra y el menú. */
.appbar__avatar img, .side__profile-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.appbar__avatar, .side__profile-avatar { overflow: hidden; }

/* ══════════════════ TIENDA · Punto de venta y detalle ══════════════════ */
.ventas-deuda-strip { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 9px 14px;
    border-radius: 10px; background: var(--warn-soft); color: var(--warn-ink); font-weight: 700; font-size: .84rem; }
.ventas-deuda-strip svg { width: 17px; height: 17px; }

/* Punto de venta (POS) */
.pos { --tabla-color: #d97706; }
.pos__grid { display: grid; grid-template-columns: 1.15fr .95fr; gap: 18px; align-items: start; }
.pos__catalogo, .pos__carrito { background: var(--surface); border: 1px solid var(--border); border-top: 3px solid #d97706;
    border-radius: 16px; box-shadow: var(--panel-card-shadow); padding: 16px 18px 20px; }
.pos .form-card__head { padding: 0 0 12px; border-bottom: 2px solid #d97706; margin-bottom: 14px; }
.pos .form-card__title svg { color: #d97706; }
.pos__buscar { position: relative; display: flex; align-items: center; margin-bottom: 14px; }
.pos__buscar .ff__ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); padding: 0; color: var(--gray-400); display: inline-flex; pointer-events: none; }
.pos__buscar svg { width: 18px; height: 18px; }
.pos__buscar input { width: 100%; padding: 10px 12px 10px 40px; border: 2px solid var(--gray-300); border-radius: 10px; font: inherit; }
.pos__buscar input:focus { outline: none; border-color: #d97706; }
.pos__prods { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; max-height: 62vh; overflow: auto; padding: 2px; }
.pos-prod { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; text-align: left; padding: 11px 12px;
    border: 1.5px solid var(--border); border-radius: 12px; background: var(--surface); cursor: pointer; transition: border-color .12s, transform .12s, box-shadow .12s; }
.pos-prod:hover { border-color: #d97706; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(217,119,6,.18); }
.pos-prod__tag { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: 999px; }
.pos-prod__tag--sale { background: var(--gray-100); color: var(--gray-600); }
.pos-prod__tag--rent { background: var(--warn-soft); color: var(--warn-ink); }
.pos-prod__name { font-weight: 700; font-size: .86rem; line-height: 1.2; }
.pos-prod__meta { font-size: .74rem; color: var(--muted); }
.pos-prod__foto { width: 100%; height: 84px; border-radius: 8px; overflow: hidden; background: var(--gray-100);
    display: grid; place-items: center; color: var(--gray-400); margin-bottom: 2px; }
.pos-prod__foto img { width: 100%; height: 100%; object-fit: cover; }
.pos-prod__foto svg { width: 26px; height: 26px; }
/* Miniatura del producto en la tabla del panel */
.prod-cell { display: inline-flex; align-items: center; gap: 10px; }
.prod-thumb { width: 34px; height: 34px; object-fit: cover; border-radius: 7px; border: 1px solid var(--gray-200); flex: none; }

/* ═══════════ Tienda Virtual (portal del cliente) ═══════════ */
.store-body { background: var(--gray-100, #f4f5f7); }
.store-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
    background: #fff; padding: 12px 22px; border-bottom: 1px solid var(--gray-200, #e5e7eb); position: sticky; top: 0; z-index: 20; }
.store-head__brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: #e63946; text-decoration: none; font-size: 1.05rem; }
.store-head__brand svg { width: 22px; height: 22px; }
.store-head__nav { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.store-head__nav a { color: var(--gray-700, #374151); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; font-weight: 500; }
.store-head__nav a svg { width: 16px; height: 16px; }
.store-head__nav a.is-active { color: #e63946; }
.store-head__cart { position: relative; }
.store-cart-badge { background: #e63946; color: #fff; border-radius: 999px; font-size: .7rem; font-weight: 800; padding: 1px 7px; margin-left: 2px; }
.store-head__user { color: var(--gray-500, #6b7280); display: inline-flex; align-items: center; gap: 5px; }
.store-main { max-width: 1100px; margin: 0 auto; padding: 22px; }
.store-foot { text-align: center; color: var(--gray-500, #6b7280); padding: 24px; font-size: .85rem; }
.store-title { font-size: 1.3rem; margin: 0 0 14px; display: flex; align-items: center; gap: 8px; }
.store-back { margin-bottom: 14px; }
.store-back a { color: var(--gray-600, #4b5563); text-decoration: none; }
.store-hint { color: var(--gray-500, #6b7280); font-size: .88rem; }

/* Acceso */
.store-auth__intro { text-align: center; margin-bottom: 18px; }
.store-auth__intro h1 { font-size: 1.6rem; margin: 0 0 6px; }
.store-auth__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.store-card { background: #fff; border: 1px solid var(--gray-200, #e5e7eb); border-radius: 14px; padding: 20px; }
.store-card h2 { font-size: 1.1rem; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.store-card--alt { background: #fafafa; }
.store-field { display: block; margin-bottom: 12px; font-size: .85rem; font-weight: 600; color: var(--gray-600, #4b5563); }
.store-field input, .store-field select, .store-field textarea { width: 100%; margin-top: 5px; padding: 10px 12px;
    border: 2px solid var(--gray-300, #d1d5db); border-radius: 10px; font: inherit; font-weight: 400; }
.store-field input:focus, .store-field textarea:focus, .store-field select:focus { outline: none; border-color: #d97706; }
.store-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Recomendaciones (banner en el catálogo) */
.store-reco { background: #fff; border: 1px solid var(--gray-200, #e5e7eb); border-radius: 14px; padding: 16px 18px; margin-bottom: 18px; }
.store-reco h2 { font-size: 1rem; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; color: #b45309; }
.store-reco__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.store-reco__item { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 10px; text-decoration: none; color: inherit; background: #fffbeb; }
.store-reco__item b { color: #111827; }
.store-reco__item span { color: #b45309; font-weight: 700; }
.store-reco__item small { color: var(--gray-500, #6b7280); }

/* Catálogo */
.store-filters { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.store-filters input, .store-filters select { padding: 9px 12px; border: 2px solid var(--gray-300, #d1d5db); border-radius: 10px; font: inherit; }
.store-filters input[type=search] { flex: 1; min-width: 200px; }
.store-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.store-prod { background: #fff; border: 1px solid var(--gray-200, #e5e7eb); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
.store-prod__media { position: relative; display: block; aspect-ratio: 1/1; background: var(--gray-100, #f3f4f6); }
.store-prod__media img { width: 100%; height: 100%; object-fit: cover; }
.store-prod__ph { display: grid; place-items: center; width: 100%; height: 100%; color: var(--gray-400, #9ca3af); }
.store-prod__ph svg { width: 42px; height: 42px; }
.store-prod__tag { position: absolute; top: 8px; left: 8px; font-size: .62rem; font-weight: 800; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; }
.store-prod__tag--sale { background: #e0e7ff; color: #3730a3; }
.store-prod__tag--rent { background: #fef3c7; color: #92400e; }
.store-prod__body { padding: 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.store-prod__name { font-weight: 700; color: #111827; text-decoration: none; line-height: 1.25; }
.store-prod__cat { color: var(--gray-500, #6b7280); font-size: .8rem; }
.store-prod__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 8px; }
.store-prod__price { color: #b45309; font-size: 1.05rem; }

/* Detalle */
.store-detail { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); gap: 24px; background: #fff;
    border: 1px solid var(--gray-200, #e5e7eb); border-radius: 16px; padding: 20px; }
.store-detail__media { aspect-ratio: 1/1; background: var(--gray-100, #f3f4f6); border-radius: 12px; overflow: hidden; display: grid; place-items: center; }
.store-detail__media img { width: 100%; height: 100%; object-fit: cover; }
.store-detail__info h1 { font-size: 1.5rem; margin: 8px 0 4px; }
.store-detail__cat { color: var(--gray-500, #6b7280); }
.store-detail__price { font-size: 1.6rem; font-weight: 800; color: #b45309; margin: 10px 0 2px; }
.store-detail__stock { color: var(--gray-600, #4b5563); margin-bottom: 14px; }
.store-detail__buy { display: flex; gap: 10px; align-items: center; }
.store-detail__buy input { width: 80px; padding: 9px; border: 2px solid var(--gray-300, #d1d5db); border-radius: 10px; font: inherit; }
.store-stars { color: #f59e0b; letter-spacing: 1px; }
.store-stars small { color: var(--gray-500, #6b7280); letter-spacing: normal; }

/* Reseñas */
.store-reviews { background: #fff; border: 1px solid var(--gray-200, #e5e7eb); border-radius: 16px; padding: 20px; margin-top: 18px; }
.store-reviews h2 { font-size: 1.15rem; margin: 0 0 14px; display: flex; align-items: center; gap: 8px; }
.store-review-form { border: 1px dashed var(--gray-300, #d1d5db); border-radius: 12px; padding: 14px; margin-bottom: 16px; max-width: 520px; }
.store-review-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.store-review-list li { border-bottom: 1px solid var(--gray-100, #f3f4f6); padding-bottom: 12px; }
.store-review-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* Carrito */
.store-cart { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,1fr); gap: 18px; align-items: start; }
.store-cart__items { background: #fff; border: 1px solid var(--gray-200, #e5e7eb); border-radius: 14px; padding: 16px; }
.store-cart__summary { background: #fff; border: 1px solid var(--gray-200, #e5e7eb); border-radius: 14px; padding: 18px; position: sticky; top: 84px; }
.store-cart__summary h3 { margin: 0 0 10px; }
.store-cart__total { font-size: 1.05rem; display: flex; justify-content: space-between; padding: 8px 0 14px; border-bottom: 1px solid var(--gray-100, #f3f4f6); margin-bottom: 12px; }
.store-cart__total b { color: #b45309; font-size: 1.3rem; }
.store-order-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; }
.store-empty { text-align: center; color: var(--gray-500, #6b7280); padding: 40px 20px; }
.store-empty svg { width: 44px; height: 44px; color: var(--gray-300, #d1d5db); }

@media (max-width: 720px) {
    .store-auth__grid, .store-detail, .store-cart, .store-field-row { grid-template-columns: 1fr; }
}

/* ═══════════ Libro de Reclamaciones (subdominio) + seguimiento ═══════════ */
.libro-body { background: var(--gray-100, #eef1f5); }
.libro-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    background: #fff; padding: 12px 22px; border-bottom: 1px solid var(--gray-200, #e5e7eb); position: sticky; top: 0; z-index: 20; }
.libro-head__brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: #e63946; text-decoration: none; }
.libro-head__brand svg { width: 22px; height: 22px; }
.libro-head__nav { display: flex; gap: 14px; }
.libro-head__nav a { color: var(--gray-700, #374151); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; font-weight: 500; }
.libro-head__nav a svg { width: 16px; height: 16px; }
.libro-main { max-width: 1000px; margin: 0 auto; padding: 22px; }
.libro-foot { text-align: center; color: var(--gray-500, #6b7280); padding: 22px; font-size: .82rem; }
.libro-wrap { max-width: 960px; margin: 0 auto; }
.libro-wrap--narrow { max-width: 520px; }
.libro-card { background: #fff; border: 1px solid var(--gray-200, #e5e7eb); border-radius: 14px; padding: 20px; margin-bottom: 16px; }
.libro-title { font-size: 1.3rem; margin: 0 0 6px; display: flex; align-items: center; gap: 8px; }
.libro-sub { color: var(--gray-600, #4b5563); margin: 0 0 16px; }
.libro-form { display: flex; flex-direction: column; gap: 12px; }
.libro-hint { color: var(--gray-500, #6b7280); font-size: .85rem; margin-top: 12px; }

/* Seguimiento estilo ticket */
.tk-code { font-size: 1.3rem; font-weight: 800; color: #1f2937; display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.tk-code svg { width: 22px; height: 22px; color: #3b82f6; }
.tk-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.tk-step { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 12px; padding: 12px 14px; }
.tk-step__ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none;
    background: var(--gray-100, #f3f4f6); color: var(--gray-400, #9ca3af); }
.tk-step__ic svg { width: 20px; height: 20px; }
.tk-step b { display: block; font-size: .92rem; }
.tk-step small { color: var(--gray-500, #6b7280); font-size: .78rem; }
.tk-step--ok { border-color: #fb923c; }
.tk-step--ok .tk-step__ic { background: #fff7ed; color: #ea580c; }
.tk-step.is-current { box-shadow: 0 0 0 2px #fdba74 inset; }
.tk-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; align-items: start; }
.tk-h { font-size: 1rem; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; color: #ea580c; }
.tk-h svg { width: 18px; height: 18px; }
.tk-h--sm { color: #374151; margin-top: 16px; font-size: .92rem; }
.tk-info { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
.tk-info > div { display: flex; flex-direction: column; }
.tk-info span { color: var(--gray-500, #6b7280); font-size: .74rem; text-transform: uppercase; letter-spacing: .03em; }
.tk-info b { color: #111827; }
.tk-progress { margin-top: 16px; }
.tk-progress__bar { height: 8px; border-radius: 999px; background: var(--gray-200, #e5e7eb); overflow: hidden; }
.tk-progress__bar span { display: block; height: 100%; background: linear-gradient(90deg,#f59e0b,#ea580c); border-radius: 999px; }
.tk-progress small { color: var(--gray-500, #6b7280); font-size: .78rem; }
.tk-detalle { color: #374151; white-space: pre-line; line-height: 1.5; margin: 4px 0 0; }
.tk-timeline { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--gray-200, #e5e7eb); }
.tk-timeline li { position: relative; padding: 0 0 16px 18px; }
.tk-timeline__dot { position: absolute; left: -7px; top: 3px; width: 12px; height: 12px; border-radius: 50%;
    background: #fff; border: 2px solid var(--gray-300, #d1d5db); }
.tk-timeline li.is-done .tk-timeline__dot { background: #ea580c; border-color: #ea580c; }
.tk-timeline b { display: block; font-size: .9rem; }
.tk-timeline small { color: var(--gray-500, #6b7280); font-size: .78rem; }
.tk-respuesta { margin-top: 14px; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 10px; padding: 12px 14px; }
.tk-respuesta p { margin: 4px 0 0; color: #166534; white-space: pre-line; }
@media (max-width: 760px) {
    .tk-steps { grid-template-columns: 1fr; }
    .tk-grid, .tk-info { grid-template-columns: 1fr; }
}

/* ═══════════ Foto del socio (portal) + aprobación (panel) ═══════════ */
.socio-foto-card { display: flex; gap: 18px; align-items: flex-start; background: #fff;
    border: 1px solid var(--gray-200, #e5e7eb); border-radius: 14px; padding: 18px; margin-bottom: 18px; flex-wrap: wrap; }
.socio-foto-card__preview { position: relative; flex: none; }
.socio-foto-card__preview img { width: 108px; height: 108px; border-radius: 14px; object-fit: cover; border: 1px solid var(--gray-200, #e5e7eb); }
.socio-foto-card__badge { position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.socio-foto-card__badge svg { width: 13px; height: 13px; }
.socio-foto-card__body { flex: 1; min-width: 220px; }
.socio-foto-card__body h2 { font-size: 1.05rem; margin: 0 0 6px; display: flex; align-items: center; gap: 8px; }
.socio-foto-card__upload { display: flex; gap: 10px; align-items: center; margin: 10px 0; flex-wrap: wrap; }
.socio-avatares { display: flex; gap: 8px; flex-wrap: wrap; }
.socio-avatares form { margin: 0; }
.socio-avatares__pick { padding: 0; border: 2px solid transparent; border-radius: 10px; background: var(--gray-100, #f3f4f6); cursor: pointer; }
.socio-avatares__pick img { width: 44px; height: 44px; display: block; border-radius: 8px; }
.socio-avatares__pick.is-sel { border-color: #e63946; }

.fotos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.foto-appr { border: 1px solid var(--gray-200, #e5e7eb); border-radius: 12px; padding: 14px; }
.foto-appr__imgs { display: flex; align-items: center; justify-content: center; gap: 12px; }
.foto-appr__imgs figure { margin: 0; text-align: center; }
.foto-appr__imgs img { width: 92px; height: 92px; object-fit: cover; border-radius: 10px; border: 1px solid var(--gray-200, #e5e7eb); }
.foto-appr__imgs figcaption { font-size: .72rem; color: var(--gray-500, #6b7280); margin-top: 4px; text-transform: uppercase; letter-spacing: .03em; }
.foto-appr__new { color: #7c3aed !important; font-weight: 700; }
.foto-appr__arrow { color: var(--gray-400, #9ca3af); font-size: 1.4rem; }
.foto-appr__info { text-align: center; margin: 10px 0; }
.foto-appr__acts { display: flex; gap: 8px; justify-content: center; }
.foto-appr__acts form { margin: 0; }
.foto-config { display: flex; align-items: center; gap: 12px; margin: 0; }
.foto-config__switch { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--gray-700, #374151); cursor: pointer; }

.pos-cart { margin: 6px 0 4px; }
.pos-cart__table { width: 100%; border-collapse: collapse; }
.pos-cart__table th { text-align: center; font-size: .68rem; text-transform: uppercase; letter-spacing: .03em; color: var(--gray-500); padding: 4px 6px; border-bottom: 1px solid var(--border); }
.pos-cart__table th.tl { text-align: left; }
.pos-cart__table td { padding: 8px 6px; border-bottom: 1px solid var(--border); text-align: center; vertical-align: middle; }
.pos-cart__table td.tl { text-align: left; }
.pos-cart__table td.tl b { display: block; font-size: .85rem; }
.pos-cart__table td.tl small { color: var(--muted); font-size: .72rem; }
.pos-cart__qty { white-space: nowrap; }
.pos-cart__qty input { width: 42px; text-align: center; padding: 5px 4px; border: 1.5px solid var(--gray-300); border-radius: 7px; font: inherit; }
.pos-qtybtn { width: 26px; height: 28px; border: 1.5px solid var(--gray-300); background: var(--gray-50); border-radius: 7px; font-size: 1rem; font-weight: 800; line-height: 1; cursor: pointer; color: var(--gray-700); }
.pos-qtybtn:hover { border-color: #d97706; color: #d97706; }
.pos-del { width: 26px; height: 26px; border: 0; background: var(--danger-soft); color: var(--danger-ink); border-radius: 50%; font-size: 1.1rem; line-height: 1; cursor: pointer; }
.pos-cart__empty { text-align: center; color: var(--muted); font-size: .84rem; padding: 16px 0; }
.pos-total { display: flex; align-items: center; justify-content: space-between; margin: 6px 0 14px; padding: 12px 14px;
    background: color-mix(in srgb, #d97706 8%, var(--surface)); border: 1.5px dashed color-mix(in srgb, #d97706 45%, var(--border)); border-radius: 12px; }
.pos-total span { font-weight: 700; color: var(--gray-600); text-transform: uppercase; font-size: .78rem; letter-spacing: .04em; }
.pos-total b { font-size: 1.4rem; color: #b45309; }
.pos-estado { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 4px 0 6px; }
.pos-estado__opt { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 11px; border: 2px solid var(--border);
    border-radius: 11px; cursor: pointer; font-weight: 700; font-size: .85rem; color: var(--gray-600); }
.pos-estado__opt svg { width: 16px; height: 16px; }
.pos-estado__opt input { position: absolute; opacity: 0; pointer-events: none; }
.pos-estado__opt.is-on { border-color: #d97706; background: color-mix(in srgb, #d97706 8%, var(--surface)); color: #b45309; }
.pos-estado__hint { margin: 4px 0 0; font-size: .78rem; color: var(--warn-ink); }

/* Detalle de venta */
.venta-page .form-card__head { padding: 0 0 12px; border-bottom: 2px solid #d97706; margin-bottom: 16px; }
.venta-page .form-card__title svg { color: #d97706; }
.venta-grid { display: grid; grid-template-columns: 1.6fr .9fr; gap: 18px; align-items: start; }
.venta-box { background: var(--surface); border: 1px solid var(--border); border-top: 3px solid #d97706; border-radius: 14px;
    box-shadow: var(--panel-card-shadow); padding: 16px 18px 18px; }
.venta-box__head { display: flex; align-items: center; gap: 9px; font-weight: 800; color: #b45309; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 2px solid color-mix(in srgb, #d97706 45%, var(--border)); }
.venta-box__head svg { width: 19px; height: 19px; }
.venta-box--cobro { border-top-color: var(--ok); }
.venta-box__head--cobro { color: var(--ok-ink); border-bottom-color: color-mix(in srgb, var(--ok) 45%, var(--border)); }
.venta-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; margin: 0 0 14px; }
.venta-meta > div { display: flex; flex-direction: column; }
.venta-meta dt { font-size: .68rem; text-transform: uppercase; letter-spacing: .03em; color: var(--gray-500); font-weight: 700; }
.venta-meta dd { margin: 1px 0 0; font-size: .9rem; font-weight: 600; }
.venta-items { width: 100%; margin-top: 4px; }
.venta-items tfoot td { border-top: 2px solid var(--border); font-size: .95rem; }
.venta-cobro__monto { display: flex; align-items: center; justify-content: space-between; margin: 0 0 12px; padding: 10px 12px;
    background: var(--ok-soft); border-radius: 10px; }
.venta-cobro__monto span { font-weight: 700; color: var(--gray-600); text-transform: uppercase; font-size: .74rem; }
.venta-cobro__monto b { font-size: 1.25rem; color: var(--ok-ink); }

.venta-side { display: flex; flex-direction: column; gap: 18px; }
/* Franja de estado de la venta */
.venta-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; background: var(--surface); border: 1px solid var(--border);
    border-top: 3px solid #d97706; border-radius: 14px; box-shadow: var(--panel-card-shadow); padding: 16px 4px; margin-bottom: 18px; }
.venta-strip__cell { display: flex; align-items: center; gap: 11px; padding: 4px 16px; min-width: 0; }
.venta-strip__cell + .venta-strip__cell { border-left: 1px solid var(--border); }
.venta-strip__ico { width: 40px; height: 40px; flex-shrink: 0; border-radius: 11px; display: grid; place-items: center;
    background: color-mix(in srgb, #d97706 12%, var(--surface)); color: #b45309; }
.venta-strip__ico svg { width: 20px; height: 20px; }
.venta-strip__cell small { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .03em; color: var(--gray-500); font-weight: 700; }
.venta-strip__cell b { font-size: .92rem; font-weight: 700; overflow-wrap: anywhere; }
/* Miniatura de producto en la tabla de ítems */
.venta-prod { display: inline-flex; align-items: center; gap: 11px; }
.venta-prod__thumb { width: 42px; height: 42px; flex-shrink: 0; border-radius: 9px; overflow: hidden; background: var(--gray-100); display: grid; place-items: center; }
.venta-prod__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.venta-prod__thumb svg { width: 18px; height: 18px; color: var(--gray-400); }
/* Resumen de la venta */
.venta-resumen { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.venta-resumen > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 2px; border-bottom: 1px solid var(--border); }
.venta-resumen > div:last-child { border-bottom: 0; }
.venta-resumen dt { display: inline-flex; align-items: center; gap: 9px; margin: 0; color: var(--gray-600); font-weight: 600; font-size: .9rem; }
.venta-resumen dt svg { width: 17px; height: 17px; color: var(--gray-400); }
.venta-resumen dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.venta-resumen__total dt { color: var(--ink, inherit); font-weight: 800; }
.venta-resumen__total dt svg { color: #b45309; }
.venta-resumen__total dd { font-size: 1.25rem; font-weight: 800; color: #b45309; }
.venta-resumen__acciones { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.venta-resumen__acciones .btn { box-shadow: none; }
/* Observaciones */
.venta-obs { margin-top: 18px; }
.venta-obs__txt { margin: 0; background: var(--gray-50); border-radius: 10px; padding: 14px 16px; color: var(--gray-700, #374151); line-height: 1.5; }
.venta-obs__txt--empty { color: var(--gray-500); font-style: italic; }

@media (max-width: 900px) {
    .pos__grid, .venta-grid { grid-template-columns: 1fr; }
    .venta-strip { grid-template-columns: 1fr 1fr; row-gap: 14px; }
    .venta-strip__cell:nth-child(odd) { border-left: 0; }
    .venta-strip__cell:nth-child(2) { border-left: 1px solid var(--border); }
}
@media (max-width: 560px) {
    .venta-strip { grid-template-columns: 1fr; }
    .venta-strip__cell { border-left: 0 !important; }
    .venta-strip__cell + .venta-strip__cell { border-top: 1px solid var(--border); padding-top: 14px; }
}

/* ══════════════════ TIENDA · Vitrina pública ══════════════════ */
.shop-hero { padding: clamp(70px, 12vw, 120px) 0 80px; }
.shop-heading { max-width: 720px; margin: 0 auto 44px; }
.shop-heading__kicker { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .74rem; color: var(--primary); }
.shop-heading__kicker i { width: 26px; height: 2px; background: var(--primary); display: inline-block; }
.shop-heading h1 { font-family: 'Poppins', sans-serif; font-size: clamp(2rem, 5vw, 3rem); margin: 12px 0 10px; }
.shop-heading h1 em { color: var(--primary); font-style: normal; }
.shop-heading p { color: var(--muted); font-size: 1.02rem; }
.shop-section-title { display: flex; align-items: center; gap: 10px; font-family: 'Poppins', sans-serif; font-size: 1.25rem; margin: 34px 0 16px; }
.shop-section-title svg { width: 22px; height: 22px; color: var(--primary); }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.shop-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 22px 18px 20px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 10px 30px rgba(15,23,42,.06); transition: transform .15s, box-shadow .15s; }
.shop-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(15,23,42,.12); }
.shop-card__top { display: flex; gap: 6px; align-self: stretch; }
.shop-card__tag { font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 3px 9px; border-radius: 999px; }
.shop-card__tag--sale { background: var(--gray-100); color: var(--gray-600); }
.shop-card__tag--rent { background: var(--warn-soft); color: var(--warn-ink); }
.shop-card__tag--out { margin-left: auto; background: var(--danger-soft); color: var(--danger-ink); }
.shop-card__icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--primary) 10%, var(--surface)); color: var(--primary); margin-top: 4px; }
.shop-card__icon svg { width: 28px; height: 28px; }
.shop-card__name { font-family: 'Poppins', sans-serif; font-size: 1.05rem; margin: 4px 0 0; }
.shop-card__cat { color: var(--muted); font-size: .82rem; margin: 0; }
.shop-card__price { font-size: 1.35rem; font-weight: 800; color: var(--primary); margin-top: 2px; }
.shop-card__price small { font-size: .72rem; color: var(--muted); font-weight: 600; }
.shop-card__cta { margin-top: 8px; }
.shop-empty { text-align: center; max-width: 460px; margin: 40px auto; color: var(--muted); }
.shop-empty svg { width: 46px; height: 46px; color: var(--primary); }
.shop-empty h2 { font-family: 'Poppins', sans-serif; margin: 12px 0 6px; color: var(--ink, inherit); }

/* ══════════════════ MEDIDAS · última en solo lectura + «Nuevas medidas» ══════════════════ */
.medida-actual { margin-bottom: 14px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--gray-50); }
.medida-actual__fecha { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.medida-actual__fecha svg { width: 15px; height: 15px; }
.medida-actual__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 16px; margin: 12px 0 0; }
.medida-actual__grid > div { display: flex; flex-direction: column; }
.medida-actual__grid dt { font-size: .66rem; text-transform: uppercase; letter-spacing: .03em; color: var(--gray-500); font-weight: 700; }
.medida-actual__grid dd { margin: 2px 0 0; font-size: 1.02rem; font-weight: 800; }
.medida-nueva > summary.medida-nueva__btn { list-style: none; display: inline-flex; width: auto; cursor: pointer; }
.medida-nueva > summary.medida-nueva__btn::-webkit-details-marker { display: none; }
.medida-nueva__form { margin-top: 14px; }
@media (max-width: 520px) { .medida-actual__grid { grid-template-columns: repeat(2, 1fr); } }