:root,
[data-tema="oscura"] {
    color-scheme: dark;
    --boton-principal-fondo: #d6403c;
    --boton-principal-hover: #bd3632;
    --boton-principal-texto: #ffffff;
    --fondo: #071019;
    --fondo-profundo: #050c12;
    --superficie: #0d1822;
    --superficie-elevada: #12212d;
    --superficie-suave: #172a37;
    --superficie-hover: #10202a;
    --campo-fondo: #09141d;
    --borde: #243844;
    --borde-fuerte: #36505e;
    --texto: #f4f7f8;
    --texto-secundario: #a8bac4;
    --texto-tenue: #78909d;
    --acento: #32c6a6;
    --acento-fuerte: #1da98c;
    --acento-hover: #51d4b8;
    --acento-texto: #78e4cc;
    --texto-sobre-acento: #04130f;
    --acento-suave: rgba(50, 198, 166, 0.13);
    --barra-fondo: rgba(7, 16, 25, 0.96);
    --fondo-modal: rgba(2, 7, 11, 0.78);
    --sombra-color: rgba(0, 0, 0, 0.2);
    --correcto: #67d5a0;
    --correcto-texto: #88e1b7;
    --aviso: #f1bf63;
    --peligro: #ef7070;
    --peligro-texto: #ff9a9a;
    --zona-0: #78909d;
    --zona-1: #4cc9f0;
    --zona-2: #68d391;
    --zona-3: #f2c761;
    --zona-4: #f39a5a;
    --zona-5: #ef6673;
    --grafica-fondo: #08121a;
    --grafica-relleno: rgba(50, 198, 166, 0.12);
    --grafica-cuadricula: rgba(168, 186, 196, 0.12);
    --grafica-tooltip: #12212d;
    --dashboard-fondo: #0d1117;
    --dashboard-superficie: #151b23;
    --dashboard-superficie-elevada: #202833;
    --dashboard-superficie-suave: #1a212b;
    --dashboard-sidebar: #11161d;
    --dashboard-coral: #ff625f;
    --dashboard-coral-fuerte: #e84f4c;
    --dashboard-coral-suave: rgba(255, 98, 95, 0.13);
    --dashboard-azul: #62a8ff;
    --dashboard-azul-suave: rgba(98, 168, 255, 0.12);
    --dashboard-sombra: rgba(0, 0, 0, 0.24);
}

[data-tema="clara"] {
    color-scheme: light;
    --boton-principal-fondo: #c93e3b;
    --boton-principal-hover: #a8312f;
    --boton-principal-texto: #ffffff;
    --fondo: #f3f6f8;
    --fondo-profundo: #e9eff2;
    --superficie: #ffffff;
    --superficie-elevada: #edf3f6;
    --superficie-suave: #e3ebef;
    --superficie-hover: #f7fafb;
    --campo-fondo: #ffffff;
    --borde: #d4e0e6;
    --borde-fuerte: #afc2cc;
    --texto: #14242d;
    --texto-secundario: #526a76;
    --texto-tenue: #52676f;
    --acento: #0f7d68;
    --acento-fuerte: #08705d;
    --acento-hover: #0b7060;
    --acento-texto: #08705d;
    --texto-sobre-acento: #ffffff;
    --acento-suave: rgba(18, 139, 116, 0.11);
    --barra-fondo: rgba(255, 255, 255, 0.96);
    --fondo-modal: rgba(20, 36, 45, 0.48);
    --sombra-color: rgba(28, 53, 67, 0.12);
    --correcto: #15845b;
    --correcto-texto: #126d4d;
    --aviso: #8a5a08;
    --peligro: #c84b4b;
    --peligro-texto: #ad3838;
    --zona-0: #52676f;
    --zona-1: #066a8d;
    --zona-2: #1f7343;
    --zona-3: #8a5808;
    --zona-4: #a74d17;
    --zona-5: #b2323f;
    --grafica-fondo: #fbfdfe;
    --grafica-relleno: rgba(18, 139, 116, 0.1);
    --grafica-cuadricula: rgba(82, 106, 118, 0.18);
    --grafica-tooltip: #14242d;
    --dashboard-fondo: #f3f5f7;
    --dashboard-superficie: #ffffff;
    --dashboard-superficie-elevada: #f0f3f6;
    --dashboard-superficie-suave: #f7f8fa;
    --dashboard-sidebar: #ffffff;
    --dashboard-coral: #c93e3b;
    --dashboard-coral-fuerte: #a8312f;
    --dashboard-coral-suave: rgba(223, 78, 75, 0.1);
    --dashboard-azul: #1a65a8;
    --dashboard-azul-suave: rgba(40, 125, 204, 0.1);
    --dashboard-sombra: rgba(30, 42, 54, 0.11);
}

[data-tema="azul"] {
    color-scheme: dark;
    --boton-principal-fondo: #d6403c;
    --boton-principal-hover: #bd3632;
    --boton-principal-texto: #ffffff;
    --fondo: #081521;
    --fondo-profundo: #05101a;
    --superficie: #0d2232;
    --superficie-elevada: #123047;
    --superficie-suave: #183a52;
    --superficie-hover: #102a3d;
    --campo-fondo: #091c2a;
    --borde: #25465c;
    --borde-fuerte: #3c6178;
    --texto: #f1f6f9;
    --texto-secundario: #acc1ce;
    --texto-tenue: #7897aa;
    --acento: #5a9fd6;
    --acento-fuerte: #3c82ba;
    --acento-hover: #74b3e3;
    --acento-texto: #8cc4ec;
    --texto-sobre-acento: #071521;
    --acento-suave: rgba(90, 159, 214, 0.15);
    --barra-fondo: rgba(8, 21, 33, 0.96);
    --fondo-modal: rgba(3, 11, 18, 0.8);
    --sombra-color: rgba(0, 7, 13, 0.28);
    --correcto: #68cda0;
    --correcto-texto: #8addb5;
    --aviso: #e6b55c;
    --peligro: #e67878;
    --peligro-texto: #f29a9a;
    --zona-0: #7897aa;
    --zona-1: #55b7e7;
    --zona-2: #69c991;
    --zona-3: #e4bd65;
    --zona-4: #e99158;
    --zona-5: #e56774;
    --grafica-fondo: #081a28;
    --grafica-relleno: rgba(90, 159, 214, 0.13);
    --grafica-cuadricula: rgba(172, 193, 206, 0.13);
    --grafica-tooltip: #123047;
    --dashboard-fondo: #07131d;
    --dashboard-superficie: #0d1d2a;
    --dashboard-superficie-elevada: #152c3e;
    --dashboard-superficie-suave: #102536;
    --dashboard-sidebar: #091925;
    --dashboard-coral: #ff716d;
    --dashboard-coral-fuerte: #ed5e5a;
    --dashboard-coral-suave: rgba(255, 113, 109, 0.13);
    --dashboard-azul: #69b7f0;
    --dashboard-azul-suave: rgba(105, 183, 240, 0.13);
    --dashboard-sombra: rgba(0, 6, 12, 0.3);
}

[data-tema="dorada"] {
    color-scheme: dark;
    --boton-principal-fondo: var(--dashboard-coral);
    --boton-principal-hover: var(--dashboard-coral-fuerte);
    --boton-principal-texto: #1c1608;
    --fondo: #0b0a07;
    --fondo-profundo: #070605;
    --superficie: #14120c;
    --superficie-elevada: #1c1910;
    --superficie-suave: #221e14;
    --superficie-hover: #18150e;
    --campo-fondo: #100e09;
    --borde: #3a3420;
    --borde-fuerte: #5c4f26;
    --texto: #f6f1e4;
    --texto-secundario: #c4b89a;
    --texto-tenue: #8f8568;
    --acento: #d4af37;
    --acento-fuerte: #b8962b;
    --acento-hover: #e4c34a;
    --acento-texto: #f0d56a;
    --texto-sobre-acento: #1a1506;
    --acento-suave: rgba(212, 175, 55, 0.16);
    --barra-fondo: rgba(11, 10, 7, 0.88);
    --fondo-modal: rgba(6, 5, 3, 0.78);
    --sombra-color: rgba(0, 0, 0, 0.28);
    --correcto: #7dcb8c;
    --correcto-texto: #9ad8a6;
    --aviso: #e0b84d;
    --peligro: #e37a6a;
    --peligro-texto: #f09a8c;
    --zona-0: #8f8568;
    --zona-1: #4cc9f0;
    --zona-2: #68d391;
    --zona-3: #f2c761;
    --zona-4: #f39a5a;
    --zona-5: #ef6673;
    --grafica-fondo: #100e09;
    --grafica-relleno: rgba(212, 175, 55, 0.14);
    --grafica-cuadricula: rgba(196, 184, 154, 0.14);
    --grafica-tooltip: #1c1910;
    --dashboard-fondo: #0c0b08;
    --dashboard-superficie: #16140e;
    --dashboard-superficie-elevada: #221e14;
    --dashboard-superficie-suave: #1a1710;
    --dashboard-sidebar: #100e09;
    --dashboard-coral: #d4af37;
    --dashboard-coral-fuerte: #b8962b;
    --dashboard-coral-suave: rgba(212, 175, 55, 0.16);
    --dashboard-azul: #e4c34a;
    --dashboard-azul-suave: rgba(228, 195, 74, 0.14);
    --dashboard-sombra: rgba(0, 0, 0, 0.3);
}

[data-tema="dorada-clara"] {
    color-scheme: light;
    --boton-principal-fondo: #946c08;
    --boton-principal-hover: #7d5a06;
    --boton-principal-texto: #ffffff;
    --fondo: #f7f3e8;
    --fondo-profundo: #efe8d4;
    --superficie: #fffdf7;
    --superficie-elevada: #f4edd8;
    --superficie-suave: #efe6cf;
    --superficie-hover: #fbf8ef;
    --campo-fondo: #fffdf8;
    --borde: #e2d6b0;
    --borde-fuerte: #c9b67a;
    --texto: #1c1608;
    --texto-secundario: #5c5338;
    --texto-tenue: #665c3a;
    --acento: #946c08;
    --acento-fuerte: #7d5a06;
    --acento-hover: #c99712;
    --acento-texto: #8a6408;
    --texto-sobre-acento: #fffdf6;
    --acento-suave: rgba(184, 134, 11, 0.12);
    --barra-fondo: rgba(255, 253, 247, 0.9);
    --fondo-modal: rgba(28, 22, 8, 0.42);
    --sombra-color: rgba(56, 44, 12, 0.1);
    --correcto: #2f7a45;
    --correcto-texto: #246538;
    --aviso: #7f5806;
    --peligro: #b54a3c;
    --peligro-texto: #9a3c30;
    --zona-0: #665c3a;
    --zona-1: #066a8d;
    --zona-2: #1f7343;
    --zona-3: #8a5808;
    --zona-4: #a74d17;
    --zona-5: #b2323f;
    --grafica-fondo: #fffdf8;
    --grafica-relleno: rgba(184, 134, 11, 0.1);
    --grafica-cuadricula: rgba(92, 83, 56, 0.16);
    --grafica-tooltip: #1c1608;
    --dashboard-fondo: #f4efe0;
    --dashboard-superficie: #fffdf8;
    --dashboard-superficie-elevada: #f6efd8;
    --dashboard-superficie-suave: #faf6ea;
    --dashboard-sidebar: #fffdf8;
    --dashboard-coral: #7d5a06;
    --dashboard-coral-fuerte: #654805;
    --dashboard-coral-suave: rgba(184, 134, 11, 0.12);
    --dashboard-azul: #8a6408;
    --dashboard-azul-suave: rgba(201, 151, 18, 0.12);
    --dashboard-sombra: rgba(48, 38, 12, 0.1);
}

:root {
    --espacio-1: 4px;
    --espacio-2: 8px;
    --espacio-3: 12px;
    --espacio-4: 16px;
    --espacio-5: 24px;
    --espacio-6: 32px;
    --espacio-7: 48px;
    --radio-control: 10px;
    --radio: 12px;
    --radio-grande: 16px;
    --radio-pill: 999px;
    --sombra: 0 10px 28px var(--sombra-color);
    --sombra-elevada: 0 18px 48px var(--dashboard-sombra);
    --ancho-contenido: 1440px;
    --texto-h1: clamp(1.65rem, 2.4vw, 2.2rem);
    --texto-h2: clamp(1.12rem, 1.5vw, 1.35rem);
    --texto-h3: 1.05rem;
    --texto-cuerpo: 0.95rem;
    --texto-secundario-tam: 0.88rem;
    --texto-label: 0.78rem;
    --texto-badge: 0.75rem;
    --texto-sobrelinea: 0.75rem;
    --transicion-ui: 0.18s ease;
    --duracion-drawer: 0.2s;
    --z-sticky: 100;
    --z-sidebar: 100;
    --z-raised: 180;
    --z-raised-front: 190;
    --z-drawer-barra: 220;
    --z-overlay: 240;
    --z-drawer: 260;
    --z-aviso: 900;
    --z-modal-back: 998;
    --z-modal-mid: 999;
    --z-modal: 1000;
    --ui-marca: contexto-sesion-1;
}

:root,
[data-tamano="normal"] {
    --tamano-base: 16px;
    --altura-control: 42px;
    --relleno-control-y: 8px;
    --relleno-control-x: 16px;
    --relleno-panel: 24px;
    --separacion-contenido: 24px;
    --ancho-minimo-tarjeta: 300px;
}

[data-tamano="compacto"] {
    --tamano-base: 14px;
    --altura-control: 36px;
    --relleno-control-y: 6px;
    --relleno-control-x: 12px;
    --relleno-panel: 16px;
    --separacion-contenido: 16px;
    --ancho-minimo-tarjeta: 260px;
}

[data-tamano="grande"] {
    --tamano-base: 17px;
    --altura-control: 46px;
    --relleno-control-y: 10px;
    --relleno-control-x: 16px;
    --relleno-panel: 24px;
    --separacion-contenido: 24px;
    --ancho-minimo-tarjeta: 320px;
}

* {
    box-sizing: border-box;
}

html {
    min-width: 320px;
    max-width: 100%;
    overflow-x: clip;
    background: var(--fondo);
    font-size: var(--tamano-base);
}

body {
    margin: 0;
    min-height: 100vh;
    max-width: 100%;
    overflow-x: clip;
    background: var(--fondo);
    color: var(--texto);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

html.menu-abierto,
body.menu-abierto {
    overflow: hidden;
    overscroll-behavior: none;
}

button,
input,
select {
    font: inherit;
}

button,
a,
input,
select {
    -webkit-tap-highlight-color: transparent;
}

:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--acento) 55%, transparent);
    outline-offset: 3px;
}

h1,
h2,
h3,
h4,
p {
    margin-top: 0;
}

h1 {
    font-size: var(--texto-h1);
    line-height: 1.15;
    letter-spacing: -0.03em;
}

h2 {
    font-size: var(--texto-h2);
    line-height: 1.25;
}

h3 {
    font-size: var(--texto-h3);
    line-height: 1.3;
}

::placeholder {
    color: var(--texto-tenue);
    opacity: 0.88;
}

.barra-aplicacion {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--separacion-contenido);
    min-height: 68px;
    padding: 10px max(24px, calc((100vw - var(--ancho-contenido)) / 2));
    border-bottom: 1px solid var(--borde);
    background: var(--barra-fondo);
}

.identidad-aplicacion {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-3);
    color: var(--texto);
    font-size: 0.9rem;
    font-weight: 760;
    letter-spacing: 0.02em;
    text-decoration: none;
    white-space: nowrap;
}

.identidad-aplicacion::before {
    width: 11px;
    height: 24px;
    border-radius: 3px;
    background: var(--acento);
    content: "";
}

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

.navegacion-principal a {
    padding: var(--espacio-2) var(--espacio-3);
    border-radius: var(--radio-control);
    color: var(--texto-secundario);
    font-size: 0.9rem;
    font-weight: 650;
    text-decoration: none;
}

.navegacion-principal a:hover {
    background: var(--superficie-elevada);
    color: var(--texto);
}

.navegacion-principal a[aria-current="page"] {
    background: var(--acento-suave);
    color: var(--acento-texto);
}

.controles-preferencias {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
}

.selector-preferencia {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-2);
    color: var(--texto-tenue);
    font-size: var(--texto-sobrelinea);
    font-weight: 750;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.selector-preferencia select {
    width: auto;
    min-width: 94px;
    min-height: var(--altura-control);
    border-color: var(--borde);
    background: var(--superficie-elevada);
    padding: 6px 28px 6px 9px;
    color: var(--texto);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: none;
}

.cabecera-pagina,
.contenido {
    width: min(var(--ancho-contenido), calc(100% - 48px));
    margin-inline: auto;
}

.cabecera-pagina {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--espacio-5);
    padding: var(--espacio-6) 0 var(--espacio-5);
}

.sobrelinea {
    margin-bottom: var(--espacio-2);
    color: var(--acento);
    font-size: var(--texto-sobrelinea);
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.cabecera-pagina h1 {
    margin-bottom: var(--espacio-2);
    font-size: var(--texto-h1);
    line-height: 1.15;
    letter-spacing: -0.03em;
}

.descripcion {
    max-width: 42rem;
    margin-bottom: 0;
    color: var(--texto-secundario);
    font-size: var(--texto-secundario-tam);
}

.boton,
.boton-principal,
.boton-secundario,
.boton-peligro,
.boton-exito,
.boton-fantasma {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--espacio-2);
    min-height: var(--altura-control);
    border: 1px solid transparent;
    border-radius: var(--radio-control);
    padding: var(--relleno-control-y) var(--relleno-control-x);
    font: inherit;
    font-weight: 750;
    line-height: 1.1;
    cursor: pointer;
    transition: background-color var(--transicion-ui), border-color var(--transicion-ui), color var(--transicion-ui), transform var(--transicion-ui);
}

.boton:active:not(:disabled),
.boton-principal:active:not(:disabled),
.boton-secundario:active:not(:disabled),
.boton-peligro:active:not(:disabled),
.boton-exito:active:not(:disabled),
.boton-fantasma:active:not(:disabled) {
    transform: translateY(1px);
}

.boton:disabled,
.boton-principal:disabled,
.boton-secundario:disabled,
.boton-peligro:disabled,
.boton-exito:disabled,
.boton-fantasma:disabled {
    cursor: not-allowed;
    opacity: 0.7;
    filter: grayscale(0.12);
    box-shadow: none;
}

.boton-compacto,
.boton-pequeno {
    min-height: 34px;
    padding: 6px 10px;
    font-size: 0.78rem;
}

.enlace-sesion {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    color: var(--texto-secundario);
    font-size: var(--texto-secundario-tam);
    text-decoration: none;
}

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

.boton-principal {
    background: var(--acento);
    color: var(--texto-sobre-acento);
}

.boton-principal:hover:not(:disabled) {
    background: var(--acento-hover);
}

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

.boton-secundario:hover:not(:disabled) {
    border-color: var(--texto-tenue);
    background: var(--superficie-suave);
}

.boton-peligro {
    border-color: color-mix(in srgb, var(--peligro) 35%, transparent);
    background: color-mix(in srgb, var(--peligro) 10%, transparent);
    color: var(--peligro-texto);
}

.boton-peligro:hover:not(:disabled) {
    background: color-mix(in srgb, var(--peligro) 18%, transparent);
}

.boton-exito {
    border-color: color-mix(in srgb, var(--correcto) 30%, transparent);
    background: color-mix(in srgb, var(--correcto) 10%, transparent);
    color: var(--correcto-texto);
}

.boton-fantasma {
    border-color: transparent;
    background: transparent;
    color: var(--texto-secundario);
}

.boton-fantasma:hover:not(:disabled) {
    background: var(--superficie-elevada);
    color: var(--texto);
}

.mensaje {
    min-height: 30px;
    margin-bottom: 10px;
    color: var(--correcto);
    font-weight: 650;
}

.mensaje:not(:empty) {
    padding: var(--relleno-control-y) var(--relleno-control-x);
    border: 1px solid color-mix(in srgb, var(--correcto) 24%, transparent);
    border-radius: 9px;
    background: color-mix(in srgb, var(--correcto) 8%, transparent);
}

.mensaje-error,
.mensaje-error:not(:empty) {
    border-color: color-mix(in srgb, var(--peligro) 28%, transparent);
    background: color-mix(in srgb, var(--peligro) 8%, transparent);
    color: var(--peligro-texto);
}

.vacio {
    padding: var(--espacio-7) var(--espacio-5);
    border: 1px dashed var(--borde-fuerte);
    border-radius: var(--radio);
    color: var(--texto-secundario);
    text-align: center;
}

.dialogo {
    width: min(42rem, calc(100vw - 24px));
    max-height: calc(100dvh - 24px);
    padding: 0;
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio-grande);
    background: var(--superficie);
    color: var(--texto);
    box-shadow: var(--sombra-elevada);
}

.dialogo::backdrop {
    background: var(--fondo-modal);
}

.dialogo-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-4);
    margin-bottom: var(--espacio-5);
    padding-bottom: var(--espacio-4);
    border-bottom: 1px solid var(--borde);
}

.dialogo-cabecera h2 {
    margin-bottom: 0;
    font-size: var(--texto-h2);
}

.cerrar {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--texto-secundario);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}

.cerrar:hover {
    border-color: var(--borde);
    background: var(--superficie-elevada);
    color: var(--texto);
}

label,
legend {
    color: var(--texto-secundario);
    font-size: var(--texto-label);
    font-weight: 650;
}

input:not([type="checkbox"]):not([type="range"]),
select,
textarea {
    width: 100%;
    min-height: var(--altura-control);
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio-control);
    background: var(--campo-fondo);
    color: var(--texto);
    padding: var(--relleno-control-y) var(--espacio-3);
}

textarea {
    min-height: 6.5rem;
    resize: vertical;
}

input:not([type="checkbox"]):not([type="range"]):focus,
select:focus,
textarea:focus {
    border-color: var(--acento);
    outline: 2px solid var(--acento);
    outline-offset: 1px;
    box-shadow: 0 0 0 4px var(--acento-suave);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--texto);
    caret-color: var(--texto);
    box-shadow: 0 0 0 1000px var(--campo-fondo) inset;
    border-color: var(--borde-fuerte);
    transition: background-color 99999s ease-out;
}

input:disabled,
select:disabled,
textarea:disabled {
    opacity: 0.62;
    cursor: not-allowed;
}

.acciones-formulario {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--espacio-2);
    padding-top: var(--espacio-5);
    border-top: 1px solid var(--borde);
}

.estado-chip {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 10px;
    border-radius: var(--radio-pill);
    background: var(--superficie-elevada);
    color: var(--texto-secundario);
    font-size: var(--texto-badge);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

@media (max-width: 720px) {
    body:not(.pagina-dashboard) .barra-aplicacion {
        position: static;
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
        padding: 14px 18px;
    }

    body:not(.pagina-dashboard) .navegacion-principal {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body:not(.pagina-dashboard) .controles-preferencias {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body:not(.pagina-dashboard) .selector-preferencia {
        align-items: stretch;
        flex-direction: column;
        gap: 4px;
    }

    body:not(.pagina-dashboard) .selector-preferencia select {
        width: 100%;
    }

    body:not(.pagina-dashboard) .navegacion-principal a {
        padding-inline: 8px;
        text-align: center;
    }

    .cabecera-pagina,
    .contenido {
        width: min(100% - 32px, var(--ancho-contenido));
    }

    .cabecera-pagina {
        align-items: stretch;
        flex-direction: column;
        gap: var(--espacio-4);
        padding: var(--espacio-5) 0 var(--espacio-4);
    }

    .cabecera-pagina > .boton {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Shell compartido del dashboard. Las páginas conservan sus componentes internos. */
.pagina-dashboard {
    display: grid;
    grid-template-columns: 236px minmax(0, 1fr);
    min-width: 320px;
    min-height: 100vh;
    overflow-x: clip;
    background: var(--dashboard-fondo);
}

.barra-lateral-dashboard {
    position: sticky;
    top: 0;
    z-index: var(--z-sidebar);
    display: flex;
    width: 236px;
    height: 100dvh;
    min-height: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--espacio-5);
    overflow-x: hidden;
    overflow-y: auto;
    border: 0;
    border-right: 1px solid var(--borde);
    background: var(--dashboard-sidebar);
    padding: var(--espacio-5) var(--espacio-4) var(--espacio-4);
    box-shadow: 12px 0 36px color-mix(in srgb, var(--dashboard-sombra) 55%, transparent);
}

.barra-lateral-dashboard .identidad-aplicacion {
    display: flex;
    min-width: 0;
    gap: var(--espacio-3);
    padding: 0 var(--espacio-1) var(--espacio-4);
    border-bottom: 1px solid var(--borde);
    white-space: normal;
}

.barra-lateral-dashboard .identidad-aplicacion::before { display: none; }

[data-tema="clara"] .marca-dashboard,
[data-tema="dorada-clara"] .marca-dashboard {
    color: #fff;
}

.marca-dashboard {
    display: grid;
    width: 45px;
    height: 45px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: var(--radio);
    background: var(--dashboard-coral);
    /* Texto oscuro sobre los corales claros; blanco solo donde el fondo es oscuro. */
    color: #16110f;
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    box-shadow: 0 9px 22px color-mix(in srgb, var(--dashboard-coral) 28%, transparent);
}

.marca-contexto {
    display: grid;
    min-width: 0;
    gap: 2px;
    color: var(--texto);
    font-size: 0.92rem;
    font-weight: 750;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.marca-contexto:empty {
    display: none;
}

.marca-linea-principal {
    min-width: 0;
    font-size: 0.86rem;
    font-weight: 780;
}

.marca-linea-secundaria {
    min-width: 0;
    color: var(--texto-secundario);
    font-size: 0.75rem;
    font-weight: 600;
}

.barra-lateral-dashboard .navegacion-principal {
    display: grid;
    align-items: stretch;
    gap: var(--espacio-1);
}

.barra-lateral-dashboard .navegacion-principal a {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    min-width: 0;
    min-height: 44px;
    overflow-wrap: anywhere;
    padding: var(--espacio-2) var(--espacio-3);
    border: 1px solid transparent;
    border-radius: var(--radio-control);
    font-size: var(--texto-secundario-tam);
}

.barra-lateral-dashboard .navegacion-principal a::before {
    display: grid;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 8px;
    background: var(--dashboard-superficie-elevada);
    color: var(--texto-secundario);
    content: attr(data-icono);
    font-size: 0.85rem;
    font-weight: 850;
}

.barra-lateral-dashboard .navegacion-principal a:hover {
    border-color: var(--borde);
    background: var(--dashboard-superficie-elevada);
}

.barra-lateral-dashboard .navegacion-principal a[aria-current="page"] {
    border-color: color-mix(in srgb, var(--dashboard-coral) 25%, transparent);
    background: var(--dashboard-coral-suave);
    color: var(--texto);
}

.barra-lateral-dashboard .navegacion-principal a[aria-current="page"]::before {
    background: var(--dashboard-coral);
    color: #fff;
}

.barra-lateral-dashboard .controles-preferencias {
    display: grid;
    gap: var(--espacio-2);
    margin-top: auto;
    border-top: 1px solid var(--borde);
    padding: var(--espacio-4) var(--espacio-1) 0;
}

.barra-lateral-dashboard .selector-preferencia {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
}

.barra-lateral-dashboard .selector-preferencia select {
    width: 100%;
    min-width: 0;
}

.escenario-dashboard {
    min-width: 0;
    background:
        radial-gradient(circle at 82% 0%, var(--dashboard-coral-suave), transparent 28rem),
        var(--dashboard-fondo);
}

.pagina-dashboard .cabecera-pagina,
.pagina-dashboard .contenido,
.pagina-dashboard .sala-principal > .header,
.pagina-dashboard .deck-container {
    width: min(var(--ancho-contenido), calc(100% - 64px));
}

.pagina-dashboard .cabecera-pagina {
    align-items: center;
    padding: var(--espacio-6) 0 var(--espacio-5);
}

.pagina-dashboard .cabecera-pagina > * {
    min-width: 0;
}

.pagina-dashboard .cabecera-pagina h1,
.pagina-dashboard .cabecera-pagina p {
    overflow-wrap: anywhere;
}

.pagina-dashboard .cabecera-pagina h1 {
    font-size: var(--texto-h1);
}

.pagina-dashboard .sobrelinea { color: var(--dashboard-coral); }
.pagina-dashboard .contenido { min-width: 0; padding-bottom: var(--espacio-7); overflow-x: clip; }

.pagina-dashboard .boton-principal {
    background: var(--boton-principal-fondo, var(--dashboard-coral));
    color: var(--boton-principal-texto, #fff);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--boton-principal-fondo, var(--dashboard-coral)) 20%, transparent);
}

.pagina-dashboard .boton-principal:hover:not(:disabled) { background: var(--boton-principal-hover, var(--dashboard-coral-fuerte)); }

.pagina-dashboard .boton-secundario {
    border-color: color-mix(in srgb, var(--dashboard-azul) 34%, var(--borde));
    background: var(--dashboard-azul-suave);
    color: var(--dashboard-azul);
}

.pagina-dashboard .boton-secundario:hover:not(:disabled) {
    border-color: var(--dashboard-azul);
    background: color-mix(in srgb, var(--dashboard-azul) 18%, transparent);
}

.barra-movil,
.boton-menu-movil,
.boton-cerrar-menu-movil,
.velo-menu-movil {
    display: none;
}

@media (max-width: 768px) {
    .pagina-dashboard {
        display: block;
    }

    .pagina-dashboard.menu-abierto {
        overflow: hidden;
    }

    .barra-movil {
        position: sticky;
        top: 0;
        z-index: var(--z-drawer-barra);
        display: flex;
        align-items: center;
        gap: var(--espacio-3);
        min-height: 56px;
        padding: max(10px, env(safe-area-inset-top)) var(--espacio-4) 10px max(12px, env(safe-area-inset-left));
        border-bottom: 1px solid var(--borde);
        background: var(--dashboard-sidebar);
    }

    .barra-movil-marca {
        color: var(--texto);
        font-size: 0.92rem;
        font-weight: 850;
        letter-spacing: 0.06em;
        text-decoration: none;
    }

    .boton-menu-movil,
    .boton-cerrar-menu-movil {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        border: 1px solid var(--borde);
        border-radius: var(--radio);
        background: var(--dashboard-superficie-elevada);
        color: var(--texto);
        font-size: 1.2rem;
        line-height: 1;
        cursor: pointer;
        transition: background-color var(--transicion-ui), border-color var(--transicion-ui);
    }

    .velo-menu-movil {
        display: none;
        position: fixed;
        inset: 0;
        z-index: var(--z-overlay);
        background: rgb(0 0 0 / 0.46);
    }

    .pagina-dashboard.menu-abierto .velo-menu-movil,
    .pagina-portal.menu-abierto .velo-menu-movil {
        display: block;
    }

    .pagina-dashboard .barra-lateral-dashboard,
    .pagina-dashboard .barra-lateral-dashboard.barra-lateral-sesiones {
        position: fixed;
        top: 0;
        left: 0;
        z-index: var(--z-drawer);
        display: flex;
        width: min(85vw, 20rem);
        max-width: 100%;
        height: 100dvh;
        min-height: 100dvh;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 24px;
        overflow-x: hidden;
        overflow-y: auto;
        border-right: 1px solid var(--borde);
        border-bottom: 0;
        padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
        transform: translateX(-105%);
        transition: transform var(--duracion-drawer) ease;
        box-shadow: 12px 0 36px color-mix(in srgb, var(--dashboard-sombra) 55%, transparent);
    }

    .pagina-dashboard.menu-abierto .barra-lateral-dashboard {
        transform: translateX(0);
    }

    .pagina-dashboard .barra-lateral-dashboard .identidad-aplicacion {
        border-bottom: 1px solid var(--borde);
        padding: 0 6px 18px;
    }

    .pagina-dashboard .barra-lateral-dashboard .identidad-aplicacion > .marca-contexto {
        display: grid;
    }

    .pagina-dashboard .barra-lateral-dashboard .navegacion-principal {
        display: grid;
        flex: 1 1 auto;
        overflow: visible;
    }

    .pagina-dashboard .barra-lateral-dashboard .navegacion-principal a::before {
        display: grid;
    }

    .pagina-dashboard .barra-lateral-dashboard .controles-preferencias {
        display: grid;
        width: 100%;
        margin: auto 0 0;
        border-top: 1px solid var(--borde);
        padding: 18px 4px 0;
    }

    .pagina-dashboard .barra-lateral-dashboard .selector-preferencia {
        display: grid;
        grid-template-columns: 54px minmax(0, 1fr);
        width: 100%;
    }

    .pagina-dashboard .barra-lateral-dashboard .selector-preferencia select {
        width: 100%;
        min-width: 0;
    }

    .pagina-dashboard .cabecera-pagina,
    .pagina-dashboard .contenido,
    .pagina-dashboard .sala-principal > .header,
    .pagina-dashboard .deck-container {
        width: min(100% - 32px, var(--ancho-contenido));
    }

    .pagina-dashboard .cabecera-pagina {
        align-items: stretch;
        flex-direction: column;
        padding: var(--espacio-5) 0 var(--espacio-4);
    }

    .boton,
    .boton-principal,
    .boton-secundario,
    .boton-peligro,
    .boton-exito,
    .boton-fantasma {
        min-height: 44px;
    }

    .boton-compacto,
    .boton-pequeno {
        min-height: 38px;
    }

    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
    select,
    textarea {
        font-size: 16px;
    }
}

@media (max-height: 800px) {
    .pagina-dashboard .cabecera-pagina {
        padding: var(--espacio-4) 0 var(--espacio-3);
    }

    .pagina-dashboard .contenido {
        padding-bottom: var(--espacio-5);
    }
}

@media (min-width: 769px) {
    .pagina-dashboard .barra-lateral-dashboard {
        transform: none;
    }
}

.enlace-ayuda {
    display: inline-block;
    margin-top: 8px;
    color: var(--acento-texto);
    font-size: 0.92rem;
    text-decoration: none;
}

/* Un botón con el atributo hidden no debe verse: .boton fija display y, sin
   esta regla, anulaba el hidden que el JS usa para ocultar acciones sin permiso
   o sin sentido en ese momento (p. ej. «Nuevo centro» para un entrenador). */
.boton[hidden],
.boton-principal[hidden],
.boton-secundario[hidden],
.boton-peligro[hidden],
.boton-exito[hidden],
.boton-fantasma[hidden] {
    display: none !important;
}

/* Pestañas de la sección Entrenamientos (plantillas, biblioteca y semana). */
.barra-pestanas-seccion { display: flex; flex-wrap: wrap; gap: .6rem; margin: .5rem 0 1.4rem; }
.barra-pestanas-seccion .pestanas-entrenamiento { margin: 0; }
.pestanas-entrenamiento { display: inline-flex; gap: .35rem; padding: .35rem; border: 1px solid var(--borde); border-radius: 1rem; background: var(--dashboard-superficie); }
a.pestana { display: inline-block; border-radius: .72rem; padding: .72rem 1.05rem; color: var(--texto-secundario); font-weight: 750; text-decoration: none; }
a.pestana.activa { color: var(--texto); background: var(--dashboard-coral-suave); box-shadow: inset 0 0 0 1px var(--dashboard-coral); }

/* Salto al contenido: solo visible al recibir el foco con el teclado. */
.saltar-contenido {
    position: absolute;
    left: 8px;
    top: -60px;
    z-index: 2000;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--acento);
    color: var(--texto-sobre-acento);
    font-weight: 700;
    text-decoration: none;
}
.saltar-contenido:focus { top: 8px; }
main:focus { outline: none; }

/* Objetivos de pulsación más cómodos en enlaces sueltos y chips. */
.enlace-ayuda { display: inline-block; padding: 6px 0; min-height: 32px; }
.chip-participante { min-height: 32px; }
.barra-movil-marca { display: inline-flex; align-items: center; min-height: 32px; padding: 0 4px; }

/* Rótulos de grupo del menú lateral */
.navegacion-principal .menu-grupo {
    display: block;
    margin: 14px 12px 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .75;
}
@media (max-width: 900px) {
    .navegacion-principal .menu-grupo { display: none; }
}

/* ---------------------------------------------------------------------------
   Cuenta y apariencia al pie del menú (comunes a todas las pantallas).
   --------------------------------------------------------------------------- */
label[hidden] {
    display: none !important;
}

.barra-lateral-dashboard:has(.cuenta-lateral) .cuenta-supervision {
    display: none;
}

.cuenta-lateral {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    border: 1px solid var(--borde);
    border-radius: 14px;
    background: color-mix(in srgb, var(--superficie-elevada) 70%, transparent);
    padding: 10px 10px 10px 10px;
}

.cuenta-avatar {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--dashboard-coral), var(--dashboard-coral-fuerte));
    color: #fff;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.cuenta-datos {
    display: grid;
    min-width: 0;
    gap: 1px;
}

.cuenta-datos strong {
    overflow: hidden;
    color: var(--texto);
    font-size: 0.86rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cuenta-datos small {
    overflow: hidden;
    color: var(--texto-tenue);
    font-size: 0.75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cuenta-salir {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 9px;
    color: var(--texto-secundario);
    font-size: 1rem;
    text-decoration: none;
}

.cuenta-salir:hover,
.cuenta-salir:focus-visible {
    background: var(--dashboard-coral-suave);
    color: var(--dashboard-coral);
}

.barra-lateral-dashboard:has(.cuenta-lateral) .controles-preferencias {
    margin-top: 0;
    border-top: 0;
    padding-top: 0;
}

.controles-apariencia {
    position: relative;
}

.apariencia {
    position: relative;
}

.apariencia-boton {
    display: flex;
    width: 100%;
    min-height: 36px;
    align-items: center;
    gap: 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    padding: 6px 10px;
    color: var(--texto-secundario);
    font: inherit;
    font-size: 0.84rem;
    font-weight: 650;
    cursor: pointer;
}

.apariencia-cabecera .apariencia-boton {
    width: auto;
    border-color: var(--borde);
}

.apariencia-boton:hover,
.apariencia-boton[aria-expanded="true"] {
    border-color: var(--borde);
    background: var(--superficie-elevada);
    color: var(--texto);
}

.tema-muestra {
    position: relative;
    display: inline-block;
    width: 22px;
    height: 22px;
    flex: none;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--texto) 18%, transparent);
    border-radius: 7px;
    background: linear-gradient(135deg, var(--m-fondo) 0 50%, var(--m-superficie) 50% 100%);
}

.tema-muestra::after {
    position: absolute;
    right: 3px;
    bottom: 3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--m-acento);
    content: "";
}

.apariencia-panel {
    position: absolute;
    z-index: 40;
    width: 216px;
    border: 1px solid var(--borde-fuerte);
    border-radius: 14px;
    background: var(--superficie);
    box-shadow: 0 18px 44px var(--sombra-color), 0 2px 6px var(--sombra-color);
    padding: 12px;
}

.apariencia-lateral .apariencia-panel {
    bottom: calc(100% + 8px);
    left: 0;
}

.apariencia-cabecera .apariencia-panel {
    top: calc(100% + 8px);
    right: 0;
}

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

.apariencia-titulo {
    margin: 2px 2px 8px;
    color: var(--texto-tenue);
    font-size: 0.75rem;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.apariencia-titulo + .apariencia-temas + .apariencia-titulo,
.apariencia-temas + .apariencia-titulo {
    margin-top: 14px;
}

.apariencia-temas {
    display: grid;
    gap: 2px;
}

.apariencia-tema {
    display: flex;
    min-height: 34px;
    align-items: center;
    gap: 10px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    padding: 4px 8px;
    color: var(--texto-secundario);
    font: inherit;
    font-size: 0.86rem;
    text-align: left;
    cursor: pointer;
}

.apariencia-tema:hover {
    background: var(--superficie-elevada);
    color: var(--texto);
}

.apariencia-tema[aria-checked="true"] {
    border-color: color-mix(in srgb, var(--acento) 45%, transparent);
    background: var(--acento-suave);
    color: var(--texto);
    font-weight: 650;
}

.apariencia-tema[aria-checked="true"]::after {
    margin-left: auto;
    color: var(--acento-texto);
    content: "✓";
}

.apariencia-tamanos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    border-radius: 10px;
    background: var(--superficie-elevada);
    padding: 3px;
}

.apariencia-tamano {
    min-height: 34px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--texto-secundario);
    font: inherit;
    font-weight: 750;
    line-height: 1;
    cursor: pointer;
}

.apariencia-tamano-compacto {
    font-size: 0.78rem;
}

.apariencia-tamano-normal {
    font-size: 0.98rem;
}

.apariencia-tamano-grande {
    font-size: 1.2rem;
}

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

.apariencia-tamano[aria-checked="true"] {
    background: var(--superficie);
    box-shadow: 0 1px 3px var(--sombra-color);
    color: var(--texto);
}

.apariencia-boton:focus-visible,
.apariencia-tema:focus-visible,
.apariencia-tamano:focus-visible {
    outline: 2px solid var(--acento);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Ventanas (dialogos.js): más anchas, cabecera clara, botones abajo a la derecha
   y, en el móvil, hoja que sube desde abajo.
   --------------------------------------------------------------------------- */
dialog.dialogo-gym {
    width: min(600px, calc(100vw - 32px));
    max-width: none;
    max-height: min(88dvh, 860px);
    overflow: auto;
    border: 1px solid var(--borde-fuerte);
    border-radius: 20px;
    background: var(--superficie);
    color: var(--texto);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), 0 2px 8px var(--sombra-color);
    padding: 0;
}

dialog.dialogo-gym.dialogo-ancho {
    width: min(760px, calc(100vw - 32px));
}

dialog.dialogo-gym[open] {
    animation: dialogo-entrada 180ms ease-out;
}

dialog.dialogo-gym::backdrop {
    background: rgba(3, 8, 12, 0.62);
    backdrop-filter: blur(4px);
}

dialog.dialogo-gym > .dialogo-cabecera {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0;
    border-bottom: 1px solid var(--borde);
    background: var(--superficie);
    padding: 20px 24px 16px;
}

dialog.dialogo-gym > .dialogo-cabecera h2 {
    margin: 0;
    font-size: 1.3rem;
    letter-spacing: -0.01em;
}

.dialogo-cerrar {
    display: grid;
    width: 36px;
    height: 36px;
    flex: none;
    place-items: center;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--texto-secundario);
    font-size: 1rem;
    cursor: pointer;
}

.dialogo-cerrar:hover,
.dialogo-cerrar:focus-visible {
    background: var(--superficie-elevada);
    color: var(--texto);
}

dialog.dialogo-gym > form,
dialog.dialogo-gym > .lista-agenda,
dialog.dialogo-gym > p,
dialog.dialogo-gym > div:not(.dialogo-cabecera):not(.acciones-dialogo) {
    display: grid;
    max-width: none;
    gap: 16px;
    margin: 0;
    padding: 20px 24px;
}

dialog.dialogo-gym > form + form,
dialog.dialogo-gym > div + form {
    border-top: 1px solid var(--borde);
}

dialog.dialogo-gym label,
.campo-dialogo {
    display: grid;
    gap: 6px;
    color: var(--texto-secundario);
    font-size: 0.86rem;
    font-weight: 650;
}

dialog.dialogo-gym input:not([type="checkbox"]),
dialog.dialogo-gym select {
    min-height: 44px;
    border-radius: 10px;
    padding: 10px 12px;
    color: var(--texto);
    font-size: 1rem;
    font-weight: 500;
}

.campo-dialogo small {
    color: var(--texto-tenue);
    font-size: 0.8rem;
    font-weight: 500;
}

.descripcion-dialogo {
    margin: 0;
    color: var(--texto-secundario);
    line-height: 1.5;
}

.seccion-dialogo {
    margin: 8px 0 -4px;
    border-top: 1px solid var(--borde);
    padding-top: 16px;
    color: var(--texto);
    font-size: 0.95rem;
    font-weight: 750;
}

.checks-dialogo {
    display: grid;
    gap: 8px;
}

.checks-dialogo label {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--borde);
    border-radius: 10px;
    padding: 10px 12px;
    color: var(--texto);
    font-weight: 600;
}

.error-dialogo {
    margin: 0;
    border: 1px solid color-mix(in srgb, var(--peligro) 40%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--peligro) 12%, transparent);
    padding: 10px 12px;
    color: var(--texto);
}

.error-dialogo[hidden] {
    display: none;
}

dialog.dialogo-gym .acciones-dialogo {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin: 4px -24px -20px;
    border-top: 1px solid var(--borde);
    background: var(--superficie);
    padding: 14px 24px;
}

dialog.dialogo-gym > .acciones-dialogo {
    margin: 0;
}

dialog.dialogo-gym .acciones-dialogo .boton {
    min-width: 112px;
    min-height: 44px;
}

@keyframes dialogo-entrada {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 640px) {
    dialog.dialogo-gym,
    dialog.dialogo-gym.dialogo-ancho {
        width: 100vw;
        max-height: 92dvh;
        margin: auto 0 0;
        border-width: 1px 0 0;
        border-radius: 22px 22px 0 0;
    }

    dialog.dialogo-gym .acciones-dialogo .boton {
        flex: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    dialog.dialogo-gym[open] {
        animation: none;
    }
}

/* Confirmaciones (avisos.js) con el mismo estilo que el resto de ventanas. */
dialog.dialogo-confirmacion-comun {
    width: min(480px, calc(100vw - 32px));
    border-radius: 20px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
    padding: 0;
}

dialog.dialogo-confirmacion-comun::backdrop {
    background: rgba(3, 8, 12, 0.62);
    backdrop-filter: blur(4px);
}

dialog.dialogo-confirmacion-comun form {
    display: grid;
    gap: 0;
}

dialog.dialogo-confirmacion-comun .dialogo-cabecera {
    margin: 0;
    padding: 20px 24px 14px;
}

dialog.dialogo-confirmacion-comun .dialogo-cabecera h2 {
    font-size: 1.2rem;
}

dialog.dialogo-confirmacion-comun p {
    margin: 0;
    padding: 16px 24px 20px;
    line-height: 1.5;
}

dialog.dialogo-confirmacion-comun .acciones-formulario {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    border-top: 1px solid var(--borde);
    padding: 14px 24px;
}

dialog.dialogo-confirmacion-comun .acciones-formulario .boton {
    min-width: 112px;
    min-height: 44px;
}