:root {
    --fondo: #f8f4ec;
    --superficie: #fffdf8;
    --texto: #161616;
    --texto-suave: #615b52;
    --linea: #e4dacb;
    --principal: #ff5a1f;
    --principal-oscuro: #d94711;
    --secundario: #00a99d;
    --secundario-oscuro: #087a72;
    --lima: #d7ff38;
    --carbon: #171717;
    --carbon-suave: #24211d;
    --acento: #00a99d;
    --alerta: #ad4d00;
    --exito: #0a7a55;
    --sombra: 0 18px 50px rgba(22, 18, 13, 0.11);
    --radio: 8px;
}

* {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

html {
    min-height: 100%;
    background: var(--fondo);
}

body {
    min-height: 100%;
    margin: 0;
    color: var(--texto);
    background:
        linear-gradient(180deg, #fffaf1 0, var(--fondo) 360px, #f2ecdf 100%);
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    line-height: 1.5;
}

body.tema-minimal {
    --fondo: #f6f7f8;
    --superficie: #ffffff;
    --texto: #151719;
    --texto-suave: #5d646b;
    --linea: #dfe4e8;
    --lima: #d8ff4d;
    --carbon: #16191d;
    --carbon-suave: #262b30;
    background: linear-gradient(180deg, #ffffff 0, var(--fondo) 420px, #edf1f3 100%);
}

body.tema-premium {
    --fondo: #f5f0e8;
    --superficie: #fffdf8;
    --texto: #18130f;
    --texto-suave: #62584d;
    --linea: #dfd1bf;
    --lima: #f4d06f;
    --carbon: #15110e;
    --carbon-suave: #2a221b;
    background: linear-gradient(180deg, #fffaf1 0, var(--fondo) 420px, #ece1d2 100%);
}

body.tema-alto_contraste {
    --fondo: #050505;
    --superficie: #101010;
    --texto: #ffffff;
    --texto-suave: #d6d6d6;
    --linea: #333333;
    --lima: #e2ff3c;
    --carbon: #000000;
    --carbon-suave: #161616;
    --sombra: 0 18px 48px rgba(0, 0, 0, 0.42);
    background: #050505;
}

body.animacion-suave .boton,
body.animacion-suave .panel-nav a,
body.animacion-suave .navegacion a,
body.animacion-suave .modulo,
body.animacion-suave .producto,
body.animacion-suave .preview-telefono {
    transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

body.animacion-dinamica .boton,
body.animacion-dinamica .panel-nav a,
body.animacion-dinamica .navegacion a,
body.animacion-dinamica .modulo,
body.animacion-dinamica .producto,
body.animacion-dinamica .preview-telefono {
    transition: background-color 220ms ease, border-color 220ms ease, color 220ms ease, box-shadow 220ms ease, transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

body.animacion-dinamica .boton:hover,
body.animacion-dinamica .modulo:hover,
body.animacion-dinamica .producto:hover,
body.animacion-dinamica .preview-telefono:hover {
    transform: translateY(-2px);
}

body.animacion-desactivada *,
body.animacion-desactivada *::before,
body.animacion-desactivada *::after {
    animation: none !important;
    transition: none !important;
}

body.tema-alto_contraste input,
body.tema-alto_contraste select,
body.tema-alto_contraste textarea {
    background: #050505;
    color: var(--texto);
}

body.tema-alto_contraste .boton.primario {
    color: #050505;
}

a {
    color: var(--principal);
    text-decoration: none;
}

a:hover {
    color: var(--principal-oscuro);
}

img {
    max-width: 100%;
    display: block;
}

code {
    padding: 2px 6px;
    border-radius: 6px;
    background: #fff0dc;
    color: #78350f;
}

.aviso-conexion {
    position: sticky;
    top: 0;
    z-index: 20;
    padding: 10px 18px;
    background: #fff3d6;
    border-bottom: 1px solid #ffc470;
    color: #773400;
    text-align: center;
    font-size: 0.92rem;
}

.barra {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 16px 32px;
    border-bottom: 1px solid rgba(228, 218, 203, 0.85);
    background: rgba(255, 253, 248, 0.94);
    backdrop-filter: blur(12px);
}

.marca {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    color: var(--texto);
}

.marca:hover {
    color: var(--texto);
}

.marca-simbolo {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radio);
    background: linear-gradient(135deg, var(--principal), var(--secundario));
    color: white;
    font-weight: 800;
}

.marca strong,
.marca small {
    display: block;
}

.marca small {
    color: var(--texto-suave);
    font-size: 0.78rem;
}

.navegacion {
    display: flex;
    align-items: center;
    gap: 8px;
}

.navegacion a,
.form-salida button,
.panel-nav a {
    min-height: 40px;
    padding: 10px 12px;
    border-radius: var(--radio);
    color: var(--texto-suave);
    font-weight: 650;
}

.navegacion a:hover,
.form-salida button:hover,
.panel-nav a:hover,
.panel-nav a.activo {
    background: #fff0dc;
    color: var(--principal-oscuro);
}

.usuario-nav {
    max-width: 180px;
    color: var(--texto-suave);
    font-size: 0.9rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.form-salida {
    margin: 0;
}

.form-salida button {
    border: 0;
    background: transparent;
    cursor: pointer;
    font: inherit;
}

.boton-menu {
    display: none;
    width: 42px;
    height: 42px;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: var(--superficie);
}

.boton-menu span {
    display: block;
    width: 18px;
    height: 2px;
    margin: 4px auto;
    background: var(--texto);
}

.panel-movil-barra,
.panel-fondo {
    display: none;
}

main {
    min-height: calc(100vh - 144px);
}

.hero {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
    gap: 36px;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 64px max(20px, calc((100% - 1180px) / 2)) 54px;
    background:
        linear-gradient(135deg, rgba(0, 169, 157, 0.16), transparent 34%),
        linear-gradient(115deg, var(--carbon) 0%, #211f1b 58%, #3a1f14 100%);
    color: white;
}

.gym-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
    gap: 36px;
    align-items: center;
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
    padding: 56px 0 34px;
}

.hero h1,
.gym-hero h1,
.pagina-formulario h1,
.pagina-listado h1,
.pagina-documento h1,
.pagina-error h1 {
    max-width: 850px;
    margin: 0;
    font-size: 3rem;
    line-height: 1.05;
}

.texto-grande {
    max-width: 720px;
    color: var(--texto-suave);
    font-size: 1.15rem;
}

.hero .texto-grande {
    color: #f4dfcf;
}

.etiqueta {
    margin: 0 0 10px;
    color: var(--principal);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.hero .etiqueta {
    color: var(--lima);
}

.acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 11px 16px;
    border: 1px solid transparent;
    border-radius: var(--radio);
    cursor: pointer;
    font: inherit;
    font-weight: 750;
}

.icono-ui {
    flex: 0 0 auto;
    width: 1.1em;
    height: 1.1em;
}

.boton.primario {
    background: var(--principal);
    color: var(--texto);
    box-shadow: 0 12px 28px rgba(255, 90, 31, 0.24);
}

.boton.primario:hover {
    background: var(--principal-oscuro);
    color: var(--texto);
}

.boton.secundario {
    border-color: var(--linea);
    background: var(--superficie);
    color: var(--texto);
}

.hero .boton.secundario {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.terminal-producto,
.credencial-demo,
.formulario,
.bloque-panel,
.producto {
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: var(--superficie);
    box-shadow: var(--sombra);
}

.hero .terminal-producto {
    border-color: rgba(255, 255, 255, 0.14);
    background: #fffdf8;
    color: var(--texto);
}

.terminal-producto {
    overflow: hidden;
}

.terminal-cabecera {
    display: flex;
    gap: 7px;
    padding: 14px;
    border-bottom: 1px solid var(--linea);
}

.terminal-cabecera span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--linea);
}

.terminal-cabecera span:first-child {
    background: var(--principal);
}

.terminal-cabecera span:nth-child(2) {
    background: var(--lima);
}

.terminal-cabecera span:nth-child(3) {
    background: var(--secundario);
}

.terminal-grid,
.metricas {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: var(--linea);
}

.terminal-grid div,
.metricas div {
    min-height: 108px;
    padding: 20px;
    background: var(--superficie);
}

.terminal-grid small,
.metricas small {
    display: block;
    color: var(--texto-suave);
}

.terminal-grid strong,
.metricas strong {
    display: block;
    margin-top: 8px;
    font-size: 1.65rem;
}

.terminal-grid strong {
    color: var(--principal);
}

.linea-estado {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 20px;
    color: var(--texto-suave);
}

.pulso {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--lima);
    box-shadow: 0 0 0 6px rgba(215, 255, 56, 0.22);
}

.banda,
.pagina-formulario,
.pagina-acceso,
.pagina-listado,
.pagina-documento,
.pagina-error {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
    padding: 46px 0;
}

.banda-clara {
    width: 100%;
    padding-inline: max(20px, calc((100% - 1180px) / 2));
    background: #fff4e3;
}

.encabezado-seccion {
    max-width: 760px;
    margin-bottom: 24px;
}

.encabezado-seccion h2,
.panel-superior h2 {
    margin: 0;
    font-size: 2rem;
    line-height: 1.1;
}

.encabezado-seccion p:not(.etiqueta) {
    color: var(--texto-suave);
}

.modulos,
.productos-grid,
.equipo-grid,
.dispositivo-grid,
.documento-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.equipo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.modulo {
    min-height: 220px;
    padding: 22px;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: var(--superficie);
    position: relative;
    overflow: hidden;
}

.modulo::before,
.producto::before {
    content: "";
    display: block;
    width: 52px;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--principal), var(--secundario));
    margin-bottom: 18px;
}

.modulo h3,
.producto h3 {
    margin: 18px 0 10px;
}

.modulo p,
.modulo small,
.producto small {
    color: var(--texto-suave);
}

.equipo-grid article {
    display: grid;
    gap: 10px;
    min-height: 150px;
    padding: 20px;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: var(--superficie);
    box-shadow: 0 10px 26px rgba(22, 18, 13, 0.07);
}

.equipo-grid article::before {
    content: "";
    width: 44px;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--principal), var(--secundario));
}

.equipo-grid strong {
    font-size: 1.08rem;
}

.equipo-grid span {
    color: var(--texto-suave);
}

.icono {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: var(--radio);
    background: var(--carbon);
    color: var(--lima);
    font-weight: 800;
}

.lista-gimnasios {
    width: min(1180px, 100%);
    margin: 0 auto;
}

.tabla-responsive {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    min-width: 720px;
}

th,
td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--linea);
    text-align: left;
}

th {
    color: var(--texto-suave);
    font-size: 0.82rem;
    text-transform: uppercase;
}

.estado {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 9px;
    border-radius: 999px;
    background: #fff0dc;
    color: var(--principal-oscuro);
    font-size: 0.78rem;
    font-weight: 800;
}

.estado-moroso,
.estado-suspendido,
.estado-baja {
    background: #fff3d6;
    color: var(--alerta);
}

.estado-activo,
.estado-prueba,
.estado-permitido,
.estado-pagada,
.estado-procesado,
.estado-online {
    background: #e4fff8;
    color: var(--exito);
}

.estado-adeudo,
.estado-pendiente,
.estado-standalone,
.estado-mixto {
    background: #fff3d6;
    color: var(--alerta);
}

.estado-rechazado,
.estado-conflicto {
    background: #fff2ef;
    color: #9f2418;
}

.estado-cancelado,
.estado-error {
    background: #fff2ef;
    color: #9f2418;
}

.formulario {
    display: grid;
    gap: 18px;
    max-width: 820px;
    padding: 24px;
}

.campo-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.pagina-acceso {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(320px, 0.7fr);
    gap: 28px;
    align-items: start;
}

.acceso-hero {
    min-height: 420px;
    padding: 34px;
    border-radius: var(--radio);
    background:
        linear-gradient(135deg, rgba(0, 169, 157, 0.14), transparent 32%),
        linear-gradient(135deg, var(--carbon) 0%, #25211b 58%, #3a2016 100%);
    color: white;
}

.acceso-hero h1 {
    max-width: 680px;
    margin: 0;
    font-size: 2.7rem;
    line-height: 1.05;
}

.acceso-hero p:not(.etiqueta) {
    max-width: 620px;
    color: #f4dfcf;
}

.acceso-demo {
    display: grid;
    gap: 8px;
    max-width: 420px;
    margin-top: 30px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radio);
    background: rgba(255, 255, 255, 0.08);
}

.acceso-demo strong {
    color: var(--lima);
}

.acceso-demo span {
    color: #fff9ef;
}

.acceso-formulario {
    width: 100%;
    max-width: none;
}

label,
fieldset {
    display: grid;
    gap: 8px;
    min-width: 0;
    border: 0;
    margin: 0;
    padding: 0;
}

label span,
legend {
    font-weight: 750;
}

input,
select,
textarea {
    width: 100%;
    min-height: 46px;
    padding: 10px 12px;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: white;
    color: var(--texto);
    font: inherit;
}

input[type="color"] {
    padding: 4px;
    cursor: pointer;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--principal);
    outline: 3px solid rgba(255, 90, 31, 0.18);
}

input[readonly],
input.telefono-identificado {
    border-style: dashed;
    background: #f7f1e8;
    color: var(--texto-suave);
    cursor: not-allowed;
}

textarea {
    resize: vertical;
}

.campos-dobles,
.campos-triples,
.opciones {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.campos-triples {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.opciones {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.opcion {
    padding: 12px;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: #fffaf2;
}

.opcion input {
    width: auto;
    min-height: auto;
}

.error {
    color: #b42318;
}

.vista-ruta {
    display: grid;
    gap: 4px;
    padding: 14px;
    border-radius: var(--radio);
    background: #fff0dc;
}

.vista-ruta span {
    color: var(--texto-suave);
}

.alerta {
    grid-column: 1 / -1;
    padding: 14px 16px;
    border: 1px solid #b5f5eb;
    border-radius: var(--radio);
    background: #e4fff8;
    color: #075e52;
}

.alerta-error {
    border-color: #ffd2c9;
    background: #fff2ef;
    color: #9f2418;
}

.gym-hero {
    --acento: var(--principal);
}

.gym-hero h1 {
    color: var(--acento);
}

.credencial-demo {
    justify-self: end;
    width: min(100%, 360px);
    padding: 24px;
}

.credencial-logo {
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    margin-bottom: 18px;
    border-radius: var(--radio);
    background: var(--acento);
    color: white;
    font-size: 2rem;
    font-weight: 900;
}

.credencial-demo strong,
.credencial-demo span {
    display: block;
}

.credencial-demo span {
    color: var(--texto-suave);
}

.qr-demo {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    width: 170px;
    margin-top: 22px;
    padding: 10px;
    border: 1px solid var(--linea);
    background: white;
}

.qr-demo i {
    aspect-ratio: 1;
    background: #fff0dc;
}

.qr-demo i.lleno {
    background: var(--texto);
}

.listado-actividades {
    display: grid;
    gap: 16px;
}

.actividad {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.75fr);
    gap: 20px;
    padding: 22px;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: var(--superficie);
}

.actividad h2 {
    margin: 12px 0 8px;
}

.actividad p,
.actividad dd {
    color: var(--texto-suave);
}

.actividad dl {
    display: grid;
    gap: 12px;
    margin: 0;
}

.actividad dt {
    color: var(--texto);
    font-weight: 800;
}

.actividad dd {
    margin: 0;
}

.panel-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 24px;
    width: min(1280px, calc(100% - 40px));
    margin: 0 auto;
    padding: 28px 0 46px;
}

.panel-lateral {
    position: sticky;
    top: 84px;
    height: max-content;
    padding: 20px;
    border: 1px solid #2e2b25;
    border-radius: var(--radio);
    background:
        linear-gradient(180deg, #22201c 0%, var(--carbon) 100%);
    color: white;
}

.panel-lateral h1 {
    margin: 0 0 18px;
    font-size: 1.55rem;
}

.panel-lateral .etiqueta {
    color: var(--lima);
}

.panel-lateral .panel-nav a {
    color: #e9ddcf;
}

.panel-lateral .panel-nav a:hover,
.panel-lateral .panel-nav a.activo {
    background: rgba(255, 90, 31, 0.18);
    color: white;
}

.panel-nav {
    display: grid;
    gap: 6px;
}

.panel-nav-iconos a {
    display: flex;
    align-items: center;
    gap: 10px;
}

.panel-contenido {
    display: grid;
    gap: 18px;
    min-width: 0;
}

.formulario-panel {
    max-width: none;
}

.panel-superior,
.bloque-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.panel-superior .acciones {
    margin-top: 0;
}

.panel-metricas {
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    overflow: hidden;
}

.panel-dos-columnas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.visitas-metricas {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.visita-ticket-panel .acciones {
    margin-top: 0;
}

.visita-ticket {
    display: grid;
    gap: 14px;
    width: min(100%, 330px);
    padding: 16px;
    border: 1px dashed var(--linea);
    border-radius: var(--radio);
    background: #ffffff;
}

.visita-ticket-marca {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.visita-ticket-marca div {
    min-width: 0;
}

.visita-ticket-marca strong,
.visita-ticket-url {
    overflow-wrap: anywhere;
}

.visita-ticket-marca small {
    display: block;
    color: var(--texto-suave);
}

.visita-ticket-qr {
    display: grid;
    place-items: center;
    width: 220px;
    height: 220px;
    margin: 0 auto;
    padding: 8px;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: #ffffff;
}

.visita-ticket-qr img,
.visita-ticket-qr canvas {
    width: 204px !important;
    height: 204px !important;
}

.visita-ticket-url {
    color: var(--texto-suave);
    font-size: 0.78rem;
    text-align: center;
}

.visita-publica {
    max-width: 720px;
}

.visita-publica .alerta {
    width: min(100%, 620px);
}

.visita-publica .formulario {
    width: min(100%, 620px);
}

.visita-pase-celular {
    display: grid;
    gap: 14px;
    width: min(100%, 620px);
    margin-bottom: 18px;
}

.visita-pase-celular .bloque-cabecera {
    align-items: flex-start;
}

.visita-pase-celular h2 {
    margin: 0;
    font-size: 1.35rem;
    line-height: 1.15;
}

.visita-pase-qr {
    display: grid;
    place-items: center;
    width: 236px;
    height: 236px;
    margin: 0 auto;
    padding: 8px;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: #ffffff;
}

.visita-pase-qr img,
.visita-pase-qr canvas {
    width: 220px !important;
    height: 220px !important;
}

.visita-pase-datos {
    display: grid;
    gap: 2px;
    text-align: center;
}

.visita-pase-datos strong,
.visita-pase-datos span,
.visita-pase-datos small,
.visita-pase-celular p {
    overflow-wrap: anywhere;
}

.visita-pase-datos small,
.visita-pase-celular p {
    color: var(--texto-suave);
}

.visita-pase-celular p {
    margin: 0;
    text-align: center;
}

.telefono-identificado-ayuda {
    color: var(--texto-suave);
    font-size: 0.86rem;
}

.visitas-layout,
.visitas-layout > * {
    min-width: 0;
}

.visitas-lista {
    display: grid;
    gap: 12px;
}

.visita-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 14px;
    padding: 14px;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: rgba(255, 255, 255, 0.78);
}

.visita-item > div {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.visita-item strong,
.visita-item span,
.visita-item p {
    overflow-wrap: anywhere;
}

.visita-item p {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--texto-suave);
}

.visita-item small {
    color: var(--texto-suave);
}

.visita-item p small {
    display: block;
    margin-top: 4px;
}

.dispositivo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bloque-panel {
    padding: 20px;
}

.acciones-formulario {
    display: flex;
    align-items: end;
}

.acciones-tabla {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.acciones-tabla form {
    margin: 0;
}

.acciones-tabla input {
    min-width: 150px;
    min-height: 34px;
    padding: 7px 10px;
    font-size: 0.86rem;
}

.boton.pequeno {
    min-height: 34px;
    padding: 7px 10px;
    font-size: 0.86rem;
}

.boton.peligro {
    border-color: #ffd2c9;
    background: #fff2ef;
    color: #9f2418;
}

.boton.peligro:hover {
    background: #ffe2dc;
    color: #7a1b12;
}

.boton:disabled {
    cursor: not-allowed;
    opacity: 0.56;
}

td span,
td small {
    display: block;
}

td small {
    color: var(--texto-suave);
}

.bloque-cabecera h3 {
    margin: 0;
}

.bloque-cabecera span {
    color: var(--texto-suave);
    font-size: 0.9rem;
}

.lista-compacta {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}

.lista-compacta div {
    display: grid;
    gap: 2px;
    padding: 12px;
    border-radius: var(--radio);
    background: #fff8ed;
}

.lista-compacta small {
    color: var(--texto-suave);
}

.pasos-sync {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.pasos-sync div {
    display: grid;
    gap: 8px;
    padding: 14px;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: #fffaf2;
}

.pasos-sync strong {
    color: var(--principal);
}

.sincronizacion-panel .formulario {
    max-width: none;
}

.sincronizacion-layout .bloque-panel {
    align-content: start;
}

.sincronizacion-layout table td:first-child {
    min-width: 190px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.superadmin-layout .panel-lateral {
    background:
        linear-gradient(180deg, rgba(0, 169, 157, 0.18), transparent 42%),
        linear-gradient(180deg, #24211c 0%, var(--carbon) 100%);
}

.selector-gimnasios {
    display: grid;
    gap: 8px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.selector-gimnasios > span {
    color: #d5c7b7;
    font-size: 0.78rem;
    font-weight: 850;
    text-transform: uppercase;
}

.selector-gimnasios a {
    display: grid;
    gap: 2px;
    min-width: 0;
    padding: 11px;
    border-radius: var(--radio);
    color: #f5efe7;
}

.selector-gimnasios a:hover,
.selector-gimnasios a.activo {
    background: rgba(255, 255, 255, 0.1);
}

.selector-gimnasios small {
    color: #cdbdad;
}

.superadmin-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(320px, 0.68fr);
    gap: 18px;
    align-items: start;
}

.superadmin-metricas {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.modulos-checklist {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}

.modulos-checklist label {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: #fffaf2;
}

.modulos-checklist input {
    width: 18px;
    min-height: 18px;
    margin-top: 2px;
    accent-color: var(--principal);
}

.modulos-checklist span {
    display: grid;
    gap: 3px;
}

.modulos-checklist small {
    color: var(--texto-suave);
}

.pagos-sistema-lista {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}

.pagos-sistema-lista div {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: #fffaf2;
}

.pagos-sistema-lista span {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radio);
    background: #e4fff8;
    color: var(--exito);
}

.pagos-sistema-lista small {
    grid-column: 2 / 3;
    color: var(--texto-suave);
}

.pagos-sistema-lista em {
    grid-column: 3 / 4;
    grid-row: 1 / span 2;
    font-style: normal;
    font-weight: 900;
    white-space: nowrap;
}

.vacio {
    margin: 0;
    color: var(--texto-suave);
}

.producto {
    min-height: 180px;
    padding: 20px;
}

.productos-gestion {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.producto-gestion {
    display: grid;
    align-content: start;
    gap: 12px;
}

.producto-vacio {
    grid-column: 1 / -1;
}

.producto-vacio .icono-ui {
    width: 38px;
    height: 38px;
    color: var(--principal);
}

.producto span {
    color: var(--texto-suave);
    font-size: 0.82rem;
    font-weight: 800;
}

.producto-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.producto-cabecera .estado {
    white-space: nowrap;
}

.producto strong {
    display: block;
    margin: 18px 0 6px;
    font-size: 1.35rem;
}

.producto-gestion strong {
    margin: 0;
    font-size: 0.78rem;
}

.producto-gestion p {
    margin: 0;
    color: var(--texto-suave);
}

.membresias-columnas {
    align-items: start;
}

.membresias-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.membresia-tarjeta {
    display: grid;
    gap: 12px;
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: #fffaf2;
}

.membresia-tarjeta.inactiva {
    background: #f8f4ed;
    color: var(--texto-suave);
}

.membresia-tarjeta h4 {
    margin: 8px 0 4px;
    font-size: 1rem;
}

.membresia-tarjeta p {
    margin: 0;
    color: var(--texto-suave);
}

.membresia-tarjeta strong {
    font-size: 1.25rem;
}

.estado-vigencia {
    display: inline-flex;
    align-items: center;
    width: max-content;
    max-width: 100%;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 850;
}

.estado-activa {
    background: #e7fbef;
    color: #146c36;
}

.estado-vencida {
    background: #fff2d8;
    color: #8a4c00;
}

.estado-cancelada {
    background: #f4ede6;
    color: #6d6258;
}

.agenda-columnas {
    align-items: start;
}

.instructores-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.instructor-tarjeta {
    display: grid;
    gap: 14px;
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: #fffaf2;
}

.instructor-tarjeta.inactiva {
    background: #f8f4ed;
}

.instructor-tarjeta h4,
.agenda-detalle h4 {
    margin: 8px 0 4px;
    font-size: 1rem;
}

.instructor-tarjeta p,
.instructor-tarjeta small,
.agenda-detalle p,
.agenda-detalle small {
    margin: 0;
    color: var(--texto-suave);
}

.agenda-lista {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}

.agenda-item {
    display: grid;
    grid-template-columns: minmax(150px, 0.35fr) minmax(220px, 1fr) auto;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: #fffaf2;
}

.agenda-hora {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.agenda-hora span {
    color: var(--principal);
    font-size: 0.8rem;
    font-weight: 900;
    text-transform: uppercase;
}

.agenda-hora strong {
    font-size: 0.98rem;
}

.agenda-hora .icono-ui {
    width: 30px;
    height: 30px;
    color: var(--principal);
}

.agenda-detalle {
    min-width: 0;
}

.agenda-acciones {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.agenda-acciones form {
    margin: 0;
}

.opcion-check {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
}

.opcion-check input {
    width: 18px;
    height: 18px;
    accent-color: var(--principal);
}

.icono-destacado {
    width: 34px;
    height: 34px;
    color: var(--principal);
}

.texto-suave {
    color: var(--texto-suave);
}

.credenciales-operacion {
    align-items: stretch;
    order: 2;
}

.lector-qr {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.lector-qr .icono-ui {
    width: 28px;
    height: 28px;
    color: var(--principal);
}

.lector-video {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 4 / 3;
    min-height: 210px;
    overflow: hidden;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: var(--carbon);
    color: white;
}

.lector-video video {
    width: 100%;
    height: 100%;
    min-height: 210px;
    display: block;
    object-fit: cover;
}

.lector-video span {
    position: absolute;
    right: 12px;
    bottom: 12px;
    max-width: calc(100% - 24px);
    padding: 7px 10px;
    border-radius: var(--radio);
    background: rgba(0, 0, 0, 0.72);
    color: white;
    font-size: 0.84rem;
    font-weight: 800;
}

.formulario-compacto {
    max-width: none;
    width: 100%;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
}

.lector-layout,
.lector-layout > * {
    min-width: 0;
}

.lector-layout .tabla-responsive {
    max-width: 100%;
}

.lector-qr .formulario-compacto,
.lector-qr .formulario-compacto label,
.lector-qr .formulario-compacto select,
.lector-qr .formulario-compacto textarea {
    min-width: 0;
}

.lector-layout textarea {
    max-width: 100%;
}

.importador-layout,
.importador-layout > * {
    min-width: 0;
}

.importador-ayuda,
.importador-ayuda-panel,
.importador-resultado {
    min-width: 0;
}

.importador-ayuda {
    display: grid;
    gap: 4px;
    padding: 14px;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: #fff7e8;
}

.importador-ayuda p,
.importador-ayuda small,
.importador-ayuda-panel p {
    margin: 0;
    color: var(--texto-suave);
}

.importador-ayuda-panel {
    display: grid;
    gap: 14px;
    align-content: start;
}

.importador-pasos {
    display: grid;
    gap: 8px;
}

.importador-pasos span {
    display: flex;
    align-items: center;
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: var(--superficie);
    font-weight: 750;
}

.importador-resultado {
    display: grid;
    gap: 16px;
}

.importador-resultado textarea[hidden] {
    display: none;
}

.importador-metricas {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.respaldos-layout,
.respaldos-layout > *,
.respaldo-panel,
.respaldo-historial {
    min-width: 0;
}

.respaldo-panel {
    display: grid;
    gap: 16px;
    align-content: start;
}

.respaldo-panel .icono-ui {
    width: 28px;
    height: 28px;
    color: var(--principal);
}

.respaldo-lista {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.respaldo-lista span {
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: #fff7e8;
    color: var(--texto-suave);
    font-weight: 750;
}

.respaldo-historial {
    display: grid;
    gap: 14px;
}

.respaldos-metricas {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.credenciales-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    order: 1;
}

.credencial-bloque {
    display: grid;
    gap: 14px;
}

.credencial-card {
    max-width: 430px;
}

.credencial-card-frente {
    position: relative;
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr) 140px;
    gap: 16px;
    min-height: 250px;
    padding: 18px;
    overflow: hidden;
    border-radius: var(--radio);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--principal) 88%, #000000), color-mix(in srgb, var(--secundario) 74%, #000000));
    color: white;
}

.credencial-card-frente::after {
    content: "";
    position: absolute;
    right: -60px;
    bottom: -80px;
    width: 190px;
    height: 190px;
    border: 28px solid rgba(255, 255, 255, 0.14);
    border-radius: 50%;
}

.credencial-marca {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.credencial-marca .marca-simbolo {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.18);
}

.credencial-marca strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.credencial-foto {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 128px;
    height: 156px;
    overflow: hidden;
    border: 3px solid rgba(255, 255, 255, 0.86);
    border-radius: var(--radio);
    background: rgba(255, 255, 255, 0.18);
}

.credencial-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.credencial-foto span {
    font-size: 3.2rem;
    font-weight: 900;
}

.credencial-datos {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.credencial-datos small,
.credencial-datos strong,
.credencial-datos span {
    display: block;
}

.credencial-datos small {
    color: rgba(255, 255, 255, 0.78);
    font-weight: 800;
}

.credencial-datos h3 {
    margin: 6px 0 10px;
    font-size: 1.55rem;
    line-height: 1.05;
}

.credencial-datos strong {
    margin-bottom: 12px;
    font-size: 1.1rem;
}

.credencial-qr {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 140px;
    height: 140px;
    align-self: end;
    padding: 4px;
    border-radius: var(--radio);
    background: white;
}

.credencial-qr img,
.credencial-qr canvas {
    width: 132px;
    height: 132px;
}

.credencial-acciones,
.credencial-acciones form {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 10px;
}

.credencial-acciones form {
    margin: 0;
}

.subir-foto {
    width: min(210px, 100%);
}

.subir-foto input {
    min-height: 38px;
    padding: 7px;
    font-size: 0.85rem;
}

.tabla-mini table {
    min-width: 520px;
}

.producto-datos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}

.producto-datos div {
    padding: 10px;
    border-radius: var(--radio);
    background: #fff8ed;
}

.producto-datos dt {
    color: var(--texto-suave);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.producto-datos dd {
    margin: 4px 0 0;
    font-weight: 800;
}

.ventas-gestion {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.venta-gestion {
    display: grid;
    align-content: start;
    gap: 12px;
}

.venta-gestion h3 {
    margin: 0;
}

.venta-gestion strong {
    margin: 0;
    font-size: 0.78rem;
}

.venta-gestion p {
    margin: 0;
    color: var(--texto-suave);
}

.venta-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.venta-cabecera .estado {
    white-space: nowrap;
}

.venta-datos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}

.venta-datos div {
    padding: 10px;
    border-radius: var(--radio);
    background: #fff8ed;
}

.venta-datos dt {
    color: var(--texto-suave);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.venta-datos dd {
    margin: 4px 0 0;
    font-weight: 800;
}

.dispositivo {
    display: grid;
    gap: 14px;
}

.dispositivo h3 {
    margin: 0;
}

.dispositivo dl {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 8px 12px;
    margin: 0;
}

.dispositivo dt {
    color: var(--texto);
    font-weight: 800;
}

.dispositivo dd {
    min-width: 0;
    margin: 0;
    color: var(--texto-suave);
}

.tabla-cabecera {
    margin-bottom: 12px;
}

.documento-grid {
    grid-template-columns: 1fr;
}

.documento-grid article {
    padding: 22px;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: var(--superficie);
}

.documento-grid img {
    width: 100%;
    min-height: 260px;
    margin-top: 16px;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    object-fit: cover;
    background: #fff0dc;
}

.documento-grid img.sin-imagen {
    display: block;
    min-height: 120px;
    opacity: 0.28;
}

.documento-legal {
    display: grid;
    gap: 14px;
    max-width: 920px;
    padding: 26px;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: var(--superficie);
}

.documento-legal h2 {
    margin: 12px 0 0;
    font-size: 1.2rem;
}

.documento-legal p {
    margin: 0;
    color: var(--texto-suave);
}

.pagina-error {
    min-height: 60vh;
}

.pie {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 32px;
    border-top: 1px solid var(--linea);
    color: var(--texto-suave);
    font-size: 0.9rem;
}

.pie a {
    color: inherit;
    font-weight: 800;
}

.apariencia-layout {
    grid-template-columns: minmax(0, 0.95fr) minmax(320px, 0.75fr);
    align-items: start;
}

.apariencia-preview {
    position: sticky;
    top: 84px;
    display: grid;
    gap: 16px;
    padding: 22px;
}

.preview-telefono {
    display: grid;
    gap: 14px;
    width: min(100%, 360px);
    min-height: 560px;
    margin: 0 auto;
    padding: 18px;
    border: 10px solid var(--carbon);
    border-radius: 30px;
    background:
        radial-gradient(circle at 20% 0, color-mix(in srgb, var(--secundario) 34%, transparent), transparent 28%),
        linear-gradient(180deg, var(--superficie), var(--fondo));
    box-shadow: 0 22px 60px rgba(22, 18, 13, 0.18);
}

.preview-barra,
.preview-grid,
.preview-menu {
    display: flex;
    align-items: center;
}

.preview-barra {
    gap: 10px;
    min-height: 50px;
}

.preview-logo {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radio);
    background: linear-gradient(135deg, var(--principal), var(--secundario));
    color: white;
    font-weight: 900;
}

.preview-hero {
    min-height: 150px;
    padding: 18px;
    border-radius: var(--radio);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--principal) 86%, #000000), color-mix(in srgb, var(--secundario) 78%, #000000));
    color: white;
}

.preview-hero span {
    display: inline-flex;
    margin-bottom: 32px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.85rem;
    font-weight: 800;
}

.preview-hero h3 {
    max-width: 230px;
    margin: 0;
    font-size: 1.8rem;
    line-height: 1.05;
}

.preview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.preview-grid div {
    min-height: 96px;
    padding: 14px;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: color-mix(in srgb, var(--superficie) 92%, var(--principal));
}

.preview-grid small {
    display: block;
    color: var(--texto-suave);
}

.preview-grid strong {
    display: block;
    margin-top: 8px;
    font-size: 1.45rem;
}

.preview-menu {
    justify-content: space-between;
    min-height: 48px;
    margin-top: auto;
    padding: 10px 14px;
    border-radius: var(--radio);
    background: var(--carbon);
    color: white;
    font-weight: 850;
}

.preview-menu .icono-ui {
    color: var(--lima);
}

@media (max-width: 980px) {
    html,
    body {
        overflow-x: hidden;
    }

    body.panel-menu-abierto {
        overflow: hidden;
    }

    .panel-movil-barra {
        position: sticky;
        top: 76px;
        z-index: 9;
        display: flex;
        width: min(1280px, calc(100% - 40px));
        margin: 12px auto 0;
        pointer-events: none;
    }

    body.menu-panel-derecha .panel-movil-barra {
        justify-content: flex-end;
    }

    .boton-panel-movil {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        min-height: 42px;
        padding: 10px 14px;
        border: 1px solid rgba(228, 218, 203, 0.9);
        border-radius: var(--radio);
        background: rgba(255, 253, 248, 0.96);
        box-shadow: 0 12px 34px rgba(22, 18, 13, 0.14);
        color: var(--texto);
        cursor: pointer;
        font: inherit;
        font-weight: 800;
        pointer-events: auto;
    }

    .boton-panel-movil .icono-ui {
        width: 19px;
        height: 19px;
        color: var(--principal);
    }

    .panel-fondo {
        position: fixed;
        inset: 0;
        z-index: 30;
        display: block;
        background: rgba(10, 10, 10, 0.46);
        backdrop-filter: blur(2px);
    }

    .panel-fondo[hidden] {
        display: none;
    }

    .hero,
    .gym-hero,
    .pagina-acceso,
    .panel-layout,
    .actividad {
        grid-template-columns: 1fr;
    }

    .terminal-grid,
    .metricas,
    .visitas-metricas,
    .modulos,
    .productos-grid,
    .membresias-grid,
    .equipo-grid,
    .dispositivo-grid,
    .pasos-sync,
    .superadmin-metricas {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .panel-lateral {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 31;
        width: min(84vw, 320px);
        max-height: 100vh;
        overflow: auto;
        border-radius: 0 var(--radio) var(--radio) 0;
        transform: translateX(-105%);
        transition: transform 230ms ease, box-shadow 230ms ease;
        will-change: transform;
    }

    .panel-menu-abierto .panel-lateral {
        box-shadow: 20px 0 55px rgba(0, 0, 0, 0.28);
        transform: translateX(0);
    }

    body.menu-panel-derecha .panel-lateral {
        right: 0;
        left: auto;
        border-radius: var(--radio) 0 0 var(--radio);
        transform: translateX(105%);
    }

    body.menu-panel-derecha.panel-menu-abierto .panel-lateral {
        box-shadow: -20px 0 55px rgba(0, 0, 0, 0.28);
        transform: translateX(0);
    }

    .panel-dos-columnas,
    .superadmin-grid {
        grid-template-columns: 1fr;
    }

    .apariencia-preview {
        position: static;
    }

    .productos-gestion,
    .ventas-gestion,
    .credenciales-grid,
    .instructores-grid,
    .membresias-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .agenda-item {
        grid-template-columns: minmax(140px, 0.35fr) minmax(220px, 1fr);
    }

    .agenda-acciones {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .importador-metricas,
    .respaldos-metricas {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .credencial-demo {
        justify-self: start;
    }
}

@media (max-width: 720px) {
    body.menu-superior-abierto,
    body.panel-menu-abierto {
        overflow: hidden;
    }

    .barra {
        padding: 12px 18px;
        backdrop-filter: none;
    }

    .boton-menu {
        display: inline-block;
    }

    .menu-superior-abierto .boton-menu {
        position: relative;
        z-index: 36;
    }

    .menu-superior-abierto .barra {
        z-index: 35;
    }

    .navegacion {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        z-index: 35;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: min(84vw, 320px);
        height: 100vh;
        height: 100dvh;
        padding: 86px 14px 18px;
        border: 1px solid var(--linea);
        border-radius: var(--radio) 0 0 var(--radio);
        background: var(--superficie);
        box-shadow: var(--sombra);
        transform: translateX(110%);
        transition: transform 230ms ease;
        will-change: transform;
    }

    .navegacion.abierta {
        transform: translateX(0);
    }

    .menu-superior-abierto::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 24;
        background: rgba(10, 10, 10, 0.32);
    }

    .usuario-nav {
        max-width: none;
        padding: 10px 12px;
    }

    .form-salida button {
        width: 100%;
        text-align: left;
    }

    .hero,
    .gym-hero,
    .banda,
    .pagina-formulario,
    .pagina-acceso,
    .pagina-listado,
    .pagina-documento,
    .pagina-error,
    .panel-layout {
        width: min(100% - 28px, 1180px);
        padding-top: 30px;
    }

    .hero h1,
    .gym-hero h1,
    .acceso-hero h1,
    .pagina-formulario h1,
    .pagina-listado h1,
    .pagina-documento h1,
    .pagina-error h1 {
        font-size: 2.2rem;
    }

    .encabezado-seccion h2,
    .panel-superior h2 {
        font-size: 1.55rem;
    }

    .terminal-grid,
    .metricas,
    .visitas-metricas,
    .modulos,
    .productos-grid,
    .membresias-grid,
    .instructores-grid,
    .equipo-grid,
    .dispositivo-grid,
    .pasos-sync,
    .superadmin-metricas,
    .form-grid,
    .campos-dobles,
    .campos-triples,
    .opciones {
        grid-template-columns: 1fr;
    }

    .panel-superior,
    .bloque-cabecera,
    .pie {
        align-items: flex-start;
        flex-direction: column;
    }

    .panel-lateral {
        padding: 16px;
    }

    .panel-nav-iconos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .panel-nav-iconos a {
        min-height: 48px;
    }

    .preview-telefono {
        min-height: 500px;
    }

    .producto-datos,
    .venta-datos,
    .credenciales-grid,
    .membresias-grid,
    .instructores-grid,
    .visitas-metricas,
    .importador-metricas,
    .respaldos-metricas,
    .sincronizacion-metricas,
    .respaldo-lista {
        grid-template-columns: 1fr;
    }

    .agenda-item {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .agenda-acciones {
        justify-content: stretch;
    }

    .agenda-acciones .boton,
    .agenda-acciones form,
    .agenda-acciones button {
        width: 100%;
    }

    .visita-item {
        grid-template-columns: 1fr;
    }

    .visita-ticket {
        width: 100%;
    }

    .visita-ticket-qr {
        width: min(220px, 100%);
    }

    .visita-pase-qr {
        width: min(236px, 100%);
    }

    .lector-video {
        min-height: 190px;
    }

    .lector-video video {
        min-height: 190px;
    }

    .credencial-card-frente {
        grid-template-columns: 96px minmax(0, 1fr);
    }

    .credencial-foto {
        width: 96px;
        height: 118px;
    }

    .credencial-qr {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .pagos-sistema-lista div {
        grid-template-columns: 34px minmax(0, 1fr);
    }

    .pagos-sistema-lista em {
        grid-column: 2 / 3;
        grid-row: auto;
    }

    .boton {
        width: 100%;
    }

    .acciones-tabla .boton {
        width: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .navegacion,
    .panel-lateral {
        transition: none;
    }
}

@media print {
    @page ticketVisitas {
        size: 80mm auto;
        margin: 4mm;
    }

    .barra,
    .panel-lateral,
    .panel-movil-barra,
    .panel-fondo,
    .panel-superior,
    .credenciales-operacion,
    .credencial-acciones,
    .pie {
        display: none !important;
    }

    body {
        background: white;
    }

    .panel-layout {
        display: block;
        width: 100%;
        padding: 0;
    }

    .credenciales-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10mm;
    }

    .bloque-panel,
    .credencial-bloque {
        border: 0;
        box-shadow: none;
        break-inside: avoid;
    }

    body.imprimir-ticket-visitas {
        background: #ffffff;
    }

    body.imprimir-ticket-visitas .visitas-metricas,
    body.imprimir-ticket-visitas .visitas-layout,
    body.imprimir-ticket-visitas .panel-superior,
    body.imprimir-ticket-visitas .alerta,
    body.imprimir-ticket-visitas .pie {
        display: none !important;
    }

    body.imprimir-ticket-visitas main {
        min-height: auto;
    }

    body.imprimir-ticket-visitas .panel-layout,
    body.imprimir-ticket-visitas .panel-contenido {
        display: block;
        width: 100%;
        padding: 0;
    }

    body.imprimir-ticket-visitas .visita-ticket-panel {
        display: block;
        width: 72mm;
        padding: 0;
        page: ticketVisitas;
    }

    body.imprimir-ticket-visitas .visita-ticket-panel .bloque-cabecera {
        display: none;
    }

    body.imprimir-ticket-visitas .visita-ticket {
        width: 72mm;
        padding: 4mm;
        border: 0;
        border-radius: 0;
    }

    body.imprimir-ticket-visitas .visita-ticket-qr {
        width: 58mm;
        height: 58mm;
        padding: 2mm;
        border-radius: 0;
    }

    body.imprimir-ticket-visitas .visita-ticket-qr img,
    body.imprimir-ticket-visitas .visita-ticket-qr canvas {
        width: 54mm !important;
        height: 54mm !important;
    }

    body.imprimir-ticket-visitas .visita-ticket-url {
        font-size: 8pt;
    }
}