/* ==================================================================
   MANAGER — hoja de estilos unica del panel.

   Sustituye a la pareja anterior:
     - assets/components/custom-css.php  (CSS estatico dentro de <style>,
       no cacheable por el navegador y cargado solo desde head.php)
     - assets/css/formularios.css

   Se carga desde head.php y desde login.php, de modo que todas las
   pantallas del manager reciben exactamente las mismas reglas. El orden
   interno importa: primero el tema general, y al final los componentes
   de formulario, que son los que deben poder matizar lo anterior.

   ESTILOS DE CADA PANTALLA (2026-09-30). Hasta ese dia cada pantalla
   traia los suyos en su propio <style>: 67 bloques en 43 ficheros, unas
   3.700 lineas. Estan todos aqui, al final de la hoja, cada uno bajo el
   nombre de su fichero, y limitados a su pantalla con

       :where(html[data-pantalla="entrenamientos-rutinas"]) .regla

   (la marca la pone manager/pantalla.php). El :where() no suma
   especificidad, asi que cada regla pesa lo mismo que en su pantalla.
   Los de los parciales que se incluyen en varias (modales, pies, el
   ojo de la contraseña) van sin limitar, igual que antes.

   Lo que se QUEDA en su fichero, a proposito: lo que lleva PHP dentro
   (textos traducidos en un content:, la foto del login) y los bloques
   que solo se pintan en un caso (la vista para la app, un rol).

   Un estilo nuevo de una pantalla va AQUI, con su :where(), no en un
   <style> en la pantalla.
   ================================================================== */

/* ------------------------------------------------------------------
   head.php  (todas las pantallas que lo cargan)
   Iba en un <style> de head.php, ANTES de esta hoja: por eso va aqui
   arriba y no al final, para que todo lo de abajo lo siga pisando.
   Limitado con :where(html[data-pantalla]) porque el login y
   recuperar cargan esta hoja pero NO head.php, y no tenian estas
   reglas (form { margin: 20px }, .btn { margin: 5px }...).
   ------------------------------------------------------------------ */
/* estilos para las tags (etiquetas) */
:where(html[data-pantalla]) .dt-search {
    display: none;
}

:where(html[data-pantalla]) .tag-container {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 5px;
    border-radius: 5px;
    min-height: 38px;
    align-items: center;
}

:where(html[data-pantalla]) .tag {
    background-color: #007bff;
    color: white;
    padding: 5px 10px;
    border-radius: 15px;
    display: flex;
    align-items: center;
}

:where(html[data-pantalla]) .tag .remove {
    margin-left: 8px;
    cursor: pointer;
}

/* Estilos para el dropdown */
:where(html[data-pantalla]) .dropdown-item.selected {
    background-color: #007bff;
    /* Color de fondo */
    color: white;
    /* Color del texto */
}

/* Estilos para el filtro del dropdown */
:where(html[data-pantalla]) .dropdown-filter {
    background-color: var(--n-sup-1, #191d25);
    border: 1px solid var(--n-borde, #2c3038);
}

/*Para que el main component siempre ocupe el espacio*/
:where(html[data-pantalla]) .content-wrapper {
    min-height: 89vh;
}

:where(html[data-pantalla]) form {
    margin-top: 20px;
    margin-bottom: 20px;
}

:where(html[data-pantalla]) .nav-item form.search {
    margin-top: 20px !important;
}

:where(html[data-pantalla]) .btn {
    margin: 5px;
}

/* Para los popups */
:where(html[data-pantalla]) .popup-oculto {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    overflow-y: auto;
    overflow-x: hidden;
}

:where(html[data-pantalla]) .popup-contenido {
    position: relative;
    margin: 50px auto;
    max-width: 600px;
    background: var(--n-fondo, black);
    padding: 50px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    text-align: center;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: calc(100% - 100px);
}

:where(html[data-pantalla]) .popup-contenido button {
    margin: 0 10px;
}

:where(html[data-pantalla]) .popup-contenido h3 {
    margin-bottom: 20px;
}

/* Estilo específico para móviles */
@media (max-width: 768px) {
    :where(html[data-pantalla]) .popup-contenido {
        max-width: calc(100% - 20px);
        height: calc(100% - 20px);
        margin: 10px auto;
    }
}

/* Scrollbar para navegadores basados en WebKit */
html:where([data-pantalla])::-webkit-scrollbar, :where(html[data-pantalla]) ::-webkit-scrollbar {
    width: 12px;
    /* Ancho del scrollbar */
}

html:where([data-pantalla])::-webkit-scrollbar-track, :where(html[data-pantalla]) ::-webkit-scrollbar-track {
    background: var(--n-fondo, black);
    /* Fondo del track (canal) */
}

html:where([data-pantalla])::-webkit-scrollbar-thumb, :where(html[data-pantalla]) ::-webkit-scrollbar-thumb {
    background-color: #159ee388;
    /* Color del scroll */
    border-radius: 6px;
    /* Bordes redondeados */
    border: 3px solid black;
    /* Espaciado alrededor del scroll */
}

/* Scrollbar para Firefox */
html:where([data-pantalla]) {
    scrollbar-width: thin;
    /* Grosor del scrollbar */
    scrollbar-color: #159ee388 black;
    /* Color del scroll y fondo */
}

/* Fallback portable for collapse arrows in sidebar menu.
   Some environments render MDI private glyphs as squares. */
:where(html[data-pantalla]) .sidebar .nav .nav-item .nav-link i.menu-arrow:before {
    content: "\f282" !important;
    font-family: "bootstrap-icons" !important;
    font-size: 0.8rem;
    line-height: 1;
}

:where(html[data-pantalla]) .sidebar .nav .nav-item .nav-link[aria-expanded="true"] i.menu-arrow:before {
    content: "\f286" !important;
}

/* Estilos del scrollbar dentro del iframe en functions.php*/


/* ==================================================================
   FUENTES DE MARCA

   Copia propia del panel, en assets/fonts/. NO se enlaza a las de
   Elementor a proposito: alli las rutas se guardan como URLs absolutas
   -"http://localhost/focus360/wp-content/uploads/..."- y en produccion
   apuntarian a ninguna parte. Con rutas relativas desde esta hoja, el
   panel no depende de WordPress, ni del dominio, ni del plugin.

   Si actualizas una fuente en la web, hay que reponer tambien el .woff
   de aqui: son dos copias y nada las sincroniza.

   Ojo con el peso de Myriad: el unico corte que existe es Light, y se
   declara como 400 porque es el que hace de texto normal en la web. Un
   <b> o un font-weight:700 sobre Myriad no tiene corte real y el
   navegador lo engorda por su cuenta (negrita sintetica).
   ================================================================== */

@font-face {
    font-family: "Copperplate";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("../fonts/Copperplate/OPTICopperplate-Light.woff") format("woff");
}

@font-face {
    font-family: "Copperplate";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/Copperplate/OPTICopperplate.woff") format("woff");
}

@font-face {
    font-family: "Copperplate";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/Copperplate/OPTICopperplate-Heavy.woff") format("woff");
}

@font-face {
    font-family: "Myriad Pro";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/MyriadPro/MyriadPro-Light.woff") format("woff");
}


    :root {
        /*
         * LAS DOS FUENTES DEL PANEL. Titulos en Copperplate, todo lo
         * demas en Myriad Pro. Usa siempre la variable, nunca el nombre
         * de la familia suelto: asi cambiar de fuente es tocar aqui.
         *
         * Copperplate solo trae mayusculas y versalitas -no tiene
         * minusculas de verdad-, asi que sirve para titulos y rotulos
         * cortos y no para texto corrido.
         */
        --font-titulos: "Copperplate", "Copperplate Gothic Light", Georgia, serif;
        --font-texto: "Myriad Pro", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

        /*
         * Bootstrap deriva de --bs-font-sans-serif el tipo de body, de
         * los botones y de los campos (--bs-body-font-family y
         * --bs-btn-font-family salen de ella). Redefinirla aqui es lo
         * que lleva Myriad a TODO el panel de una vez, en lugar de ir
         * persiguiendo selectores del tema uno a uno.
         *
         * Se conserva la cola de emoji del valor original de Bootstrap:
         * sin ella, los emoji de los avisos pierden su fuente de color.
         */
        --bs-font-sans-serif: "Myriad Pro", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

        --bg-main: #0B0D12;
        --bg-sidebar: #151922;
        --bg-card: #1B2029;
        --bg-input: #252B35;
        --border-soft: #343B49;

        --text-main: #F5F7FA;
        --text-muted: #8B95B7;

        --accent-orange: #F6AD72;
        --accent-yellow: #F5DE79;
        --accent-blue: #8FC5E1;

        --main-blue: #91C7E2;
        --main-green: #00D66B;
        --main-red: #FF4D5E;

        --button-blue: #91C7E2;
        --success-green: #00D66B;
        --danger-red: #FF4D5E;

        /* Blue form color */
        --form-color-1-bg: #518893;
        --form-color-1-border: #6CB0B4;

        /* Yellow form color */
        --form-color-2-bg: #B0A462;
        --form-color-2-border: #FEF4C9;

        /* Red form color */
        --form-color-3-bg: #CC7751;
        --form-color-3-border: #DFAA8C;

        --form-text-color: #202020;

        /*
         * GROSOR DEL BORDE DE LOS CAMPOS.
         *
         * Estuvo en 3px hasta el 2026-09-22. En un formulario corto pasa
         * desapercibido, pero el modal de Agregar horario tiene once campos
         * en tres filas y los bordes pesaban mas que el contenido: la rejilla
         * se leia como una reja. A 2px la firma del panel se mantiene -el
         * borde sigue siendo una linea clara y deliberada- y ademas coincide
         * con --form-asim-border-width, que es lo que ya usaban los
         * componentes nuevos; antes convivian dos grosores sin motivo.
         */
        --form-border-width: 2px;

        /*
         * LAS DOS VARIABLES DE ESQUINA. No son intercambiables.
         *
         * --form-radius-asim es LA forma del panel: arriba-izquierda recta,
         * arriba-derecha redondeada, abajo-derecha recta, abajo-izquierda
         * redondeada. El orden de border-radius es TL TR BR BL, de ahi el
         * "0 18px 0 18px". La usa todo lo que sea una caja completa: campos
         * de formulario, botones, bloques, avisos.
         *
         * --form-radius es solo una LONGITUD suelta, y existe unicamente para
         * las reglas que componen esquinas a mano, del tipo
         * "0 0 var(--form-radius) var(--form-radius)" (el desplegable de
         * Choices.js, que al abrirse debe quedar a ras con el campo). Meter
         * ahi un valor de cuatro componentes daria CSS invalido, asi que no
         * sustituyas una por otra.
         */
        /*
         * --form-asim-radio es el NUMERO del que sale la forma. Se saca aparte
         * para que --form-radius-asim y la utilidad .esquinas (al final del
         * archivo) no lleven el 18px escrito cada una por su lado: tocando
         * aqui cambia la esquina en todo el panel de una vez.
         */
        --form-asim-radio: 18px;
        --form-radius-asim: 0 var(--form-asim-radio) 0 var(--form-asim-radio);
        --form-radius: 10px;
        --form-asim-bg: #518893;
        --form-asim-bg-focus: #5e9aa6;
        --form-asim-border: #8FBBC6;
        --form-asim-border-focus: #b9d8e0;
        --form-asim-text: #fff;
        --form-asim-border-width: 2px;

        /*
         * Peso del texto que se escribe DENTRO de los campos. Va aparte del
         * 700 de botones, titulos y leyendas: ahi la negrita es intencionada,
         * pero en un campo editable cansa la vista y pesa demasiado frente al
         * placeholder. Si quieres afinarlo, este es el unico sitio que tocar.
         *
         * 400 = normal, el mismo peso que .form-control da por defecto. Bajar
         * a 300 solo tiene efecto si la fuente cargada trae ese corte; si no,
         * el navegador lo redondea a 400 y no se nota.
         */
        --form-asim-text-weight: 400;
    }

    body {
        background: var(--bg-main);
        color: var(--text-main);
        font-family: var(--font-texto);
    }

    .sidebar,
    .navbar,
    .navbar .navbar-brand-wrapper {
        background: var(--bg-sidebar);
    }

    .card,
    .table-wrapper,
    .panel {
        background: var(--bg-card);
        border: 1px solid var(--border-soft);
    }

    /*
     * ==================================================
     * MODO CLARO (2026-09-30, fase 3 tarea 2). Ver manager/tema.php.
     * ==================================================
     *
     * El panel nacio oscuro: la plantilla (style.css) y casi todo lo de
     * esta hoja llevan los grises escritos a mano. El claro se monta asi:
     *
     * 1. Las variables de arriba (--bg-*, --text-*, los acentos) se
     *    redefinen aqui debajo para claro.
     *
     * 2. Los grises sueltos de esta hoja van como
     *
     *        background-color: var(--n-sup-2, #2a2a2a);
     *
     *    Las --n-* SOLO existen en claro. En oscuro no estan definidas y
     *    cada regla cae en su valor de siempre, el que tenia escrito: por
     *    eso el oscuro no cambio ni un pixel al hacer esto. Son pocas y por
     *    papel, no por pantalla:
     *
     *        --n-fondo         el fondo de la pagina
     *        --n-sup-1         tarjetas, modales, barras fijas
     *        --n-sup-2         cajas dentro de una tarjeta, campos grises
     *        --n-sup-3         lo que va encima de eso, y el hover
     *        --n-borde, --n-borde-fuerte
     *        --n-texto, --n-texto-suave, --n-texto-tenue
     *        --n-velo          el RGB de los velos: rgba(var(--n-velo), .12)
     *                          es blanco translucido en oscuro y negro en claro
     *
     *    Un gris nuevo en esta hoja, con su --n-*. El blanco de un texto
     *    SOBRE un boton o una etiqueta de color no: ese es blanco en los dos.
     *
     * 3. Lo que la plantilla pinta a mano (el fondo negro del contenido,
     *    los titulos blancos, los desplegables...) se pisa en el bloque de
     *    abajo, con :where() para no ganar a nada mas que a la plantilla:
     *    los campos de color (.form-color-*) siguen mandando.
     *
     * Los campos de formulario de color, los botones y las etiquetas son
     * iguales en los dos modos.
     */
    html[data-tema="claro"] {
        --bg-main: #F2F4F7;
        --bg-sidebar: #FFFFFF;
        --bg-card: #FFFFFF;
        --bg-input: #F4F6F9;
        --border-soft: #D5DAE1;

        --text-main: #1D2330;
        --text-muted: #5B6475;

        /*
         * Los acentos, un punto mas oscuros: sobre blanco, el azul y el
         * verde de oscuro no se leen como texto (contraste < 2). Como fondo
         * de boton tambien ganan: el blanco del texto se lee mejor.
         */
        --accent-orange: #C46A1F;
        --accent-yellow: #A67C00;
        --accent-blue: #2A7DAB;

        --main-blue: #2A86B8;
        --main-green: #0B9A50;
        --main-red: #D93649;

        --button-blue: #2A86B8;
        --success-green: #0B9A50;
        --danger-red: #D93649;

        --n-fondo: #F2F4F7;
        --n-sup-1: #FFFFFF;
        --n-sup-2: #F4F6F9;
        --n-sup-3: #E7EBF0;
        --n-borde: #D5DAE1;
        --n-borde-fuerte: #AEB5BF;
        --n-texto: #1D2330;
        --n-texto-suave: #5B6475;
        --n-texto-tenue: #7A8494;
        --n-velo: 0, 0, 0;

        /*
         * Bootstrap. La plantilla deja --bs-body-color en blanco tambien en
         * su [data-bs-theme=light] (nacio oscura), y de ahi lo heredan las
         * tarjetas, las tablas y casi todo el texto.
         */
        --bs-body-color: #1D2330;
        --bs-body-color-rgb: 29, 35, 48;
        --bs-body-bg: #F2F4F7;
        --bs-emphasis-color: #000;
        --bs-secondary-color: #5B6475;
        --bs-tertiary-color: #7A8494;
        --bs-border-color: #D5DAE1;

        color-scheme: light;
    }

    :where(html[data-tema="claro"]) .table {
        --bs-table-color: #1D2330;
        --bs-table-bg: transparent;
        --bs-table-border-color: #D5DAE1;
    }

    :where(html[data-tema="claro"]) .table-hover tr:hover,
    :where(html[data-tema="claro"]) .table-hover td {
        color: var(--text-main);
    }

    :where(html[data-tema="claro"]) .table-striped tr:nth-child(odd) td,
    :where(html[data-tema="claro"]) .card .card-description,
    :where(html[data-tema="claro"]) .card .card-subtitle {
        color: var(--text-muted);
    }

    /* La plantilla, en claro. */
    :where(html[data-tema="claro"]) .content-wrapper,
    :where(html[data-tema="claro"]) .footer {
        background: var(--bg-main);
        color: var(--text-muted);
    }

    :where(html[data-tema="claro"]) .page-title,
    :where(html[data-tema="claro"]) .card .card-title {
        color: var(--text-main);
    }

    :where(html[data-tema="claro"]) .card {
        box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
    }

    :where(html[data-tema="claro"]) .dropdown-menu {
        background-color: #FFFFFF;
        border-color: var(--border-soft);
    }

    :where(html[data-tema="claro"]) .sidebar .nav .nav-item.active > .nav-link,
    :where(html[data-tema="claro"]) .sidebar .nav:not(.sub-menu) > .nav-item:hover:not(.nav-category):not(.account-dropdown) > .nav-link {
        background: var(--n-sup-3);
    }

    :where(html[data-tema="claro"]) .form-control {
        background-color: #FFFFFF;
        border-color: var(--border-soft);
        color: var(--text-main);
    }

    :where(html[data-tema="claro"]) select {
        background-color: #FFFFFF !important;
    }

    :where(html[data-tema="claro"]) .navbar .navbar-menu-wrapper {
        color: var(--text-main);
        /* La plantilla le pone una sombra negra grande, que en claro es una franja gris. */
        box-shadow: 0 1px 0 var(--border-soft);
    }

    :where(html[data-tema="claro"]) .sidebar {
        border-right: 1px solid var(--border-soft);
    }

    :where(html[data-tema="claro"]) .sidebar .nav .nav-item.active > .nav-link .menu-title,
    :where(html[data-tema="claro"]) .sidebar .nav.sub-menu .nav-item .nav-link.active {
        color: var(--text-main);
    }

    /*
     * Verde y ambar de Bootstrap: sobre blanco no se leen como texto. Se
     * oscurecen en su RGB, que es de donde salen .text-* y .bg-*.
     */
    html[data-tema="claro"] {
        --bs-success-rgb: 11, 154, 80;
        --bs-warning-rgb: 178, 106, 0;
    }

    :where(html[data-tema="claro"]) .btn-outline-secondary {
        color: var(--text-muted);
        border-color: var(--border-soft);
    }

    html[data-tema="claro"] body .nav-tabs .nav-link.active {
        background: #DCEEF8;
        border-color: #DCEEF8;
    }

    /* El logo de la barra lateral: menu.php pinta los dos y aqui se elige. */
    .mp-logo-claro,
    html[data-tema="claro"] .mp-logo-oscuro {
        display: none;
    }

    html[data-tema="claro"] .mp-logo-claro {
        display: inline;
    }

    /*
     * Los titulos, en Copperplate. Antes esta regla pedia "copperplate"
     * sin que ninguna @font-face la declarara: solo se veia en equipos
     * que tuvieran una fuente asi instalada -macOS trae una, Windows
     * no-, de modo que el panel cambiaba de aspecto segun el ordenador.
     *
     * label entra aqui a proposito, como rotulo del formulario, y no
     * como "texto". Copperplate lo pinta en versalitas.
     */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    label {
        font-family: var(--font-titulos);
    }

    /* ==================================================
       NORMAL FORM FIELDS
    ================================================== */

    /*
     * .form-libre = via de escape.
     *
     * Estas reglas usan !important, asi que una hoja posterior no puede
     * ganarles por orden de carga: solo por especificidad, lo que obliga a
     * encadenar clases y a repetir !important en la hoja que quiera otro
     * aspecto. Para no arrastrar eso, un campo marcado con .form-libre queda
     * FUERA de la imposicion y puede estilarse con reglas normales desde la
     * seccion COMPONENTES DE FORMULARIO, al final de esta misma hoja.
     *
     * Lo usa el formulario de Datos del Gimnasio (.input-gym).
     */
    input:not([type="hidden"]):not(.form-libre) :not([type="radio"]) :not([type="checkbox"]) :not([type="submit"]) :not([type="button"]),
    textarea:not(.form-libre),
    select:not(.form-libre) {
        color: var(--form-text-color) !important;
        border-width: var(--form-border-width) !important;
        border-style: solid !important;
        border-radius: var(--form-radius-asim) !important;
        box-shadow: none !important;
        outline: none !important;
    }

    /*
     * The selector above is retained for general compatibility,
     * while these selectors ensure normal Bootstrap fields receive
     * the expected radius and text color.
     */
    body input:not([type="hidden"]):not(.form-libre) :not([type="radio"]) :not([type="checkbox"]) :not([type="submit"]) :not([type="button"]),
    body textarea:not(.form-libre),
    body select:not(.form-libre),
    body .form-control:not(.form-libre),
    body .form-select:not(.form-libre) {
        border-radius: var(--form-radius-asim) !important;
    }

    /* Normal fields: blue */
    body input.form-color-1,
    body textarea.form-color-1,
    body select.form-color-1 {
        background-color: var(--form-color-1-bg) !important;
        border-color: var(--form-color-1-border) !important;
        color: var(--form-text-color) !important;
    }

    /* Normal fields: yellow */
    body input.form-color-2,
    body textarea.form-color-2,
    body select.form-color-2 {
        background-color: var(--form-color-2-bg) !important;
        border-color: var(--form-color-2-border) !important;
        color: var(--form-text-color) !important;
    }

    /* Normal fields: red */
    body input.form-color-3,
    body textarea.form-color-3,
    body select.form-color-3 {
        background-color: var(--form-color-3-bg) !important;
        border-color: var(--form-color-3-border) !important;
        color: var(--form-text-color) !important;
    }

    body input.form-color-1::placeholder,
    body input.form-color-2::placeholder,
    body input.form-color-3::placeholder,
    body textarea.form-color-1::placeholder,
    body textarea.form-color-2::placeholder,
    body textarea.form-color-3::placeholder {
        color: rgba(32, 32, 32, 0.72) !important;
        opacity: 1 !important;
    }

    body select.form-color-1 option {
        background-color: var(--form-color-1-bg);
        color: var(--form-text-color);
    }

    body select.form-color-2 option {
        background-color: var(--form-color-2-bg);
        color: var(--form-text-color);
    }

    body select.form-color-3 option {
        background-color: var(--form-color-3-bg);
        color: var(--form-text-color);
    }

    /* ==================================================
       CHOICES.JS WRAPPER
    ================================================== */

    /*
     * The Choices wrapper must stay transparent.
     * Only .choices__inner receives the visual field color.
     */
    body .choices.form-color-1,
    body .choices.form-color-2,
    body .choices.form-color-3 {
        width: 100%;
        background: transparent !important;
        border: 0 !important;
        border-radius: var(--form-radius) !important;
        padding: 0 !important;
        margin-bottom: 0;
        box-shadow: none !important;
    }

    body .choices.form-color-1 .choices__inner {
        background-color: var(--form-color-1-bg) !important;
        border-color: var(--form-color-1-border) !important;
    }

    body .choices.form-color-2 .choices__inner {
        background-color: var(--form-color-2-bg) !important;
        border-color: var(--form-color-2-border) !important;
    }

    body .choices.form-color-3 .choices__inner {
        background-color: var(--form-color-3-bg) !important;
        border-color: var(--form-color-3-border) !important;
    }

    body .choices .choices__inner {
        width: 100%;
        min-height: 46px;
        padding: 7px 10px;
        color: var(--form-text-color) !important;
        border-width: var(--form-border-width) !important;
        border-style: solid !important;
        border-radius: var(--form-radius-asim) !important;
        box-shadow: none !important;
        overflow: hidden;
    }

    body .choices .choices__list--single {
        color: var(--form-text-color) !important;
        padding: 3px 24px 3px 2px;
    }

    body .choices .choices__list--single .choices__item {
        color: var(--form-text-color) !important;
    }

    body .choices .choices__placeholder {
        color: rgba(32, 32, 32, 0.72) !important;
        opacity: 1 !important;
    }

    /* ==================================================
       CHOICES.JS INTERNAL SEARCH INPUT
    ================================================== */

    /*
     * The cloned input must remain transparent.
     * Otherwise it creates a second colored box inside the field.
     */
    body .choices .choices__input,
    body .choices .choices__input--cloned {
        background: transparent !important;
        background-color: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        color: var(--form-text-color) !important;
        box-shadow: none !important;
        outline: 0 !important;
        padding: 2px !important;
        margin-bottom: 0 !important;
    }

    body .choices .choices__input::placeholder,
    body .choices .choices__input--cloned::placeholder {
        color: rgba(32, 32, 32, 0.72) !important;
        opacity: 1 !important;
    }

    /* ==================================================
       CHOICES.JS MULTIPLE SELECT
    ================================================== */

    body .choices .choices__list--multiple {
        display: inline;
        background: transparent !important;
        border: 0 !important;
        padding: 0 !important;
    }

    body .choices .choices__list--multiple .choices__item {
        background: rgba(255, 255, 255, 0.24) !important;
        border: 1px solid rgba(255, 255, 255, 0.48) !important;
        border-radius: 8px !important;
        color: var(--form-text-color) !important;
        font-weight: 600;
        margin-right: 5px;
        margin-bottom: 3px;
    }

    body .choices .choices__list--multiple .choices__button {
        border-left-color: rgba(32, 32, 32, 0.4) !important;
        filter: brightness(0.25);
        opacity: 0.8;
    }

    /* ==================================================
       CHOICES.JS DROPDOWN
    ================================================== */

    body .choices.form-color-1 .choices__list--dropdown {
        background-color: var(--form-color-1-bg) !important;
        border-color: var(--form-color-1-border) !important;
    }

    body .choices.form-color-2 .choices__list--dropdown {
        background-color: var(--form-color-2-bg) !important;
        border-color: var(--form-color-2-border) !important;
    }

    body .choices.form-color-3 .choices__list--dropdown {
        background-color: var(--form-color-3-bg) !important;
        border-color: var(--form-color-3-border) !important;
    }

    body .choices .choices__list--dropdown {
        color: var(--form-text-color) !important;
        border-width: var(--form-border-width) !important;
        border-style: solid !important;
        border-radius: 0 0 var(--form-radius) var(--form-radius) !important;
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24);
        overflow: hidden;
        z-index: 1065;
    }

    body .choices .choices__list--dropdown .choices__list {
        background: transparent !important;
        border: 0 !important;
    }

    body .choices .choices__list--dropdown .choices__item {
        color: var(--form-text-color) !important;
    }

    body .choices .choices__list--dropdown .choices__item--selectable {
        background: transparent !important;
    }

    body .choices .choices__list--dropdown .choices__item--selectable.is-highlighted {
        background: rgba(255, 255, 255, 0.28) !important;
        color: #111111 !important;
    }

    /* Normal dropdown opening downward */
    body .choices.is-open:not(.is-flipped) .choices__inner {
        border-radius:
            var(--form-radius) var(--form-radius) 0 0 !important;
    }

    body .choices.is-open:not(.is-flipped) .choices__list--dropdown {
        border-radius:
            0 0 var(--form-radius) var(--form-radius) !important;
    }

    /* Dropdown opening upward */
    body .choices.is-open.is-flipped .choices__inner {
        border-radius:
            0 0 var(--form-radius) var(--form-radius) !important;
    }

    body .choices.is-open.is-flipped .choices__list--dropdown {
        border-radius:
            var(--form-radius) var(--form-radius) 0 0 !important;
    }

    body .choices:not(.is-open) .choices__inner {
        border-radius: var(--form-radius-asim) !important;
    }

    /* Choices arrow */
    body .choices[data-type*="select-one"]::after {
        border-color:
            var(--form-text-color) transparent transparent transparent;
    }

    body .choices[data-type*="select-one"].is-open::after {
        border-color:
            transparent transparent var(--form-text-color) transparent;
    }

    /*
     * LA FLECHA, TAMBIEN EN LOS DE SELECCION MULTIPLE (2026-08-22).
     *
     * Choices.js solo dibuja el ::after en `select-one`, asi que un campo
     * multiple —"Perfil de socios"— quedaba como un recuadro de color liso, sin
     * nada que dijera que se despliega. Al lado de "Idioma" y "Sexo", que si la
     * tienen, parecia un campo de texto averiado.
     *
     * Se copia la geometria de Choices en vez de inventar otra: mismo triangulo
     * por bordes, mismo sitio. Asi los dos tipos de campo se ven iguales.
     */
    body .choices[data-type*="select-multiple"]::after {
        content: "";
        height: 0;
        width: 0;
        border-style: solid;
        border-color: var(--form-text-color) transparent transparent transparent;
        border-width: 5px;
        position: absolute;
        right: 11.5px;
        top: 50%;
        margin-top: -2.5px;
        pointer-events: none;
    }

    body .choices[data-type*="select-multiple"].is-open::after {
        border-color: transparent transparent var(--form-text-color) transparent;
        margin-top: -7.5px;
    }

    /*
     * Sitio para la flecha: sin esto las etiquetas de los perfiles elegidos
     * pasan por debajo del triangulo.
     */
    body .choices[data-type*="select-multiple"] .choices__inner {
        padding-right: 28px;
    }

    /* ==================================================
       INPUT GROUPS
    ================================================== */

    body .input-group .input-group-text.form-color-1 {
        background-color: var(--form-color-1-bg) !important;
        border-color: var(--form-color-1-border) !important;
        color: var(--form-text-color) !important;
    }

    body .input-group .input-group-text.form-color-2 {
        background-color: var(--form-color-2-bg) !important;
        border-color: var(--form-color-2-border) !important;
        color: var(--form-text-color) !important;
    }

    body .input-group .input-group-text.form-color-3 {
        background-color: var(--form-color-3-bg) !important;
        border-color: var(--form-color-3-border) !important;
        color: var(--form-text-color) !important;
    }

    body .input-group .input-group-text {
        border-width: var(--form-border-width) !important;
        border-style: solid !important;
        border-radius: var(--form-radius) !important;
    }

    /*
     * Keep connected input-group elements joined while preserving
     * the 10px outer radius.
     */
    body .input-group> :not(:first-child):not(.dropdown-menu) {
        margin-left: calc(var(--form-border-width) * -1);
    }

    body .input-group> :first-child {
        border-top-left-radius: var(--form-radius) !important;
        border-bottom-left-radius: var(--form-radius) !important;
    }

    body .input-group> :last-child {
        border-top-right-radius: var(--form-radius) !important;
        border-bottom-right-radius: var(--form-radius) !important;
    }

    /* ==================================================
       DATE, TIME AND DISABLED FIELDS
    ================================================== */

    body input[type="date"]:not(.form-libre),
    body input[type="time"]:not(.form-libre),
    body input[type="datetime-local"]:not(.form-libre),
    body input[type="number"]:not(.form-libre),
    body input[type="email"]:not(.form-libre),
    body input[type="url"]:not(.form-libre),
    body input[type="password"]:not(.form-libre),
    body input[type="search"]:not(.form-libre),
    body input[type="text"]:not(.form-libre) {
        border-radius: var(--form-radius-asim) !important;
    }

    body input:disabled,
    body textarea:disabled,
    body select:disabled,
    body .choices.is-disabled .choices__inner {
        opacity: 0.72 !important;
        cursor: not-allowed !important;
    }

    /* ==================================================
       BUTTONS AND GENERAL UI
    ================================================== */

    /*
     * El texto de los botones de color va en variable desde el set de colores
     * (manager/colores.php): con un color claro elegido por el propietario el
     * blanco no se leeria. Sin set, las variables no existen y queda el de
     * siempre.
     */
    .btn-primary {
        background: var(--main-blue);
        border-color: var(--main-blue);
        color: var(--main-blue-texto, #FFFFFF);
    }

    .btn-warning,
    .btn-filter {
        background: var(--accent-orange);
        border-color: var(--accent-orange);
        color: var(--accent-orange-texto, #111111);
    }

    .text-muted,
    .table thead th,
    .menu-label {
        color: var(--text-muted);
    }

    .badge-highlight {
        background: #F1DA72;
        color: #111111;
    }

    .icon-success {
        color: var(--main-green);
    }

    .sidebar .sidebar-brand-wrapper {
        background: var(--bg-sidebar);
    }

    .sidebar .sidebar-brand-wrapper .sidebar-brand img {
        object-fit: contain;
        width: 100%;
    }

    body #modalRutinaPro .tab-button.active {
        color: var(--main-blue);
        border-bottom: 2px solid var(--main-blue);
    }

    /*
     * PESTAÑAS DE MODAL (2026-08-22).
     *
     * Las pestañas del alta de socio venian con `btn btn-primary` encima de
     * `nav-link`, y eso las pintaba con --button-blue (#91C7E2) y texto BLANCO:
     * un contraste de 1,9:1, por debajo del minimo legible, y ademas un azul
     * que no es ninguno de los tres colores de campo del panel, asi que
     * desentonaba con el formulario que hay justo debajo.
     *
     * La forma buena ya estaba en la casa: .permiso-tabs. Se replica aqui para
     * que valga en cualquier .nav-tabs del panel — inactiva discreta, activa
     * con el azul oscuro que ya se usaba—. Al quitar `btn btn-primary` del HTML
     * estas reglas son las que mandan.
     */
    body .nav-tabs {
        border-bottom: 1px solid var(--border-soft);
        gap: 2px;
    }

    body .nav-tabs .nav-link {
        border: none;
        border-bottom: 2px solid transparent;
        background: transparent;
        color: var(--text-muted);
    }

    body .nav-tabs .nav-link:hover {
        background: var(--bg-input);
        color: var(--text-main);
    }

    body .nav-tabs .nav-link.active {
        color: var(--main-blue);
        background: #06456c;
        border-color: #06456c;
        font-weight: 600;
    }

    /*
     * Pestañas separadas por una barrita.
     *
     * Va en una clase aparte y no en todo `.nav-tabs` porque solo hace falta
     * donde hay muchas y se parten en varias filas -Alimentos tiene diecisiete-:
     * ahí, sin separación, dos nombres largos seguidos se leen como uno solo.
     *
     * La barra es un ::after del <li> y no un `border-right` del enlace: el
     * borde se pegaría al fondo azul de la pestaña activa, y el pseudoelemento
     * queda en el hueco entre las dos.
     *
     * La última pestaña no la lleva. La última DE CADA FILA sí, y no hay forma
     * de evitarlo en CSS: dónde parte la fila lo decide el navegador según el
     * ancho, y no hay selector para «el que queda al final del renglón». Queda
     * una barrita suelta al borde derecho de las filas intermedias.
     */
    body .nav-tabs-separadas .nav-item {
        position: relative;
        padding-right: 9px;
    }

    body .nav-tabs-separadas .nav-item:last-child {
        padding-right: 0;
    }

    body .nav-tabs-separadas .nav-item:not(:last-child)::after {
        content: "";
        position: absolute;
        right: 4px;
        top: 50%;
        transform: translateY(-50%);
        height: 14px;
        width: 1px;
        background: var(--border-soft);
    }

    /*
     * Alimentos: dentro de una pestaña de grupo, la columna Grupo repetiría el
     * mismo valor en las veinticinco filas de la página. Es exactamente lo que
     * el cliente criticó de la columna Tipo, así que se esconde cuando el grupo
     * ya lo está diciendo la pestaña activa. La columna sigue en el DOM -no se
     * quita del <table>- para que DataTables no se descuadre al reordenar.
     */
    body .tabla-en-grupo thead th:nth-child(2),
    body .tabla-en-grupo tbody td:nth-child(2) {
        display: none;
    }

    body .horario-laboral-modal-notice {
        border: 1px dashed var(--main-blue);
        background: rgba(0, 153, 255, 0.08);
        color: #F2F2F2;
        border-radius: 12px;
        padding: 10px 14px;
        margin-bottom: 12px;
        font-size: 13px;
    }

    body .horario-dia-btn.active {
        background: var(--main-blue) !important;
        border-color: var(--main-blue) !important;
        color: #FFFFFF !important;
    }

    /* ==================================================
   CORRECCIÓN DE COLORES EN CHOICES SINGLE
================================================== */

    /* Color azul */
    body .choices.form-color-1[data-type="select-one"]>.choices__inner {
        background-color: var(--form-color-1-bg) !important;
        border: var(--form-border-width) solid var(--form-color-1-border) !important;
        color: var(--form-text-color) !important;
    }

    /* Color amarillo */
    body .choices.form-color-2[data-type="select-one"]>.choices__inner {
        background-color: var(--form-color-2-bg) !important;
        border: var(--form-border-width) solid var(--form-color-2-border) !important;
        color: var(--form-text-color) !important;
    }

    /* Color rojo */
    body .choices.form-color-3[data-type="select-one"]>.choices__inner {
        background-color: var(--form-color-3-bg) !important;
        border: var(--form-border-width) solid var(--form-color-3-border) !important;
        color: var(--form-text-color) !important;
    }

    /*
 * El valor seleccionado no debe tener su propio fondo.
 * Debe mostrar el color de .choices__inner.
 */
    body .choices[data-type="select-one"]>.choices__inner>.choices__list--single,
    body .choices[data-type="select-one"]>.choices__inner>.choices__list--single>.choices__item,
    body .choices[data-type="select-one"] .choices__list--single .choices__item.is-selected,
    body .choices[data-type="select-one"] .choices__list--single .choices__item.is-highlighted {
        background: transparent !important;
        background-color: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        color: var(--form-text-color) !important;
    }

    /* Quitar cualquier fondo heredado de todas las listas internas cerradas */
    body .choices[data-type="select-one"]:not(.is-open) .choices__list--single {
        background: transparent !important;
    }

    /* Mantener el texto seleccionado oscuro */
    body .choices[data-type="select-one"] .choices__list--single .choices__item {
        color: var(--form-text-color) !important;
    }

    /* Dropdown azul */
    body .choices.form-color-1[data-type="select-one"] .choices__list--dropdown,
    body .choices.form-color-1[data-type="select-one"] .choices__list[aria-expanded] {
        background-color: var(--form-color-1-bg) !important;
        border-color: var(--form-color-1-border) !important;
    }

    /* Dropdown amarillo */
    body .choices.form-color-2[data-type="select-one"] .choices__list--dropdown,
    body .choices.form-color-2[data-type="select-one"] .choices__list[aria-expanded] {
        background-color: var(--form-color-2-bg) !important;
        border-color: var(--form-color-2-border) !important;
    }

    /* Dropdown rojo */
    body .choices.form-color-3[data-type="select-one"] .choices__list--dropdown,
    body .choices.form-color-3[data-type="select-one"] .choices__list[aria-expanded] {
        background-color: var(--form-color-3-bg) !important;
        border-color: var(--form-color-3-border) !important;
    }

    /* Opciones del dropdown */
    body .choices[data-type="select-one"] .choices__list--dropdown .choices__item,
    body .choices[data-type="select-one"] .choices__list[aria-expanded] .choices__item {
        background: transparent !important;
        color: var(--form-text-color) !important;
    }

    /* Opción resaltada */
    body .choices[data-type="select-one"] .choices__list--dropdown .choices__item.is-highlighted,
    body .choices[data-type="select-one"] .choices__list[aria-expanded] .choices__item.is-highlighted {
        background-color: rgba(255, 255, 255, 0.25) !important;
        color: #111111 !important;
    }

    /* Buscador dentro del dropdown */
    body .choices[data-type="select-one"] .choices__list--dropdown .choices__input--cloned,
    body .choices[data-type="select-one"] .choices__list[aria-expanded] .choices__input--cloned {
        background-color: rgba(255, 255, 255, 0.22) !important;
        border: 1px solid rgba(32, 32, 32, 0.25) !important;
        color: var(--form-text-color) !important;
        border-radius: 7px !important;
    }

    /* Radio uniforme */
    body .choices[data-type="select-one"]>.choices__inner {
        border-radius: var(--form-radius-asim) !important;
    }

    .tab-content input.form-control,
    .tab-content select.form-select {
        height: 42px;
    }

    .dropdown-menu.show {
        transform: translate3d(0, 0, 0) !important;
    }

    div.dataTables_wrapper div.dataTables_paginate {
        justify-self: end;
    }

    .dataTables_wrapper .row:not(:last-child) {
        overflow-x: auto;
        overflow-y: visible;
    }

    .dt-layout-row .dt-layout-cell.dt-layout-full {
        overflow-x: auto;
        overflow-y: visible;
    }

    .dt-length {
        display: flex;
        gap: 10px;
    }

    textarea#detalle_nota {
        height: 80px;
    }

    .programa-actions button {
        transition: .25s all ease;
    }

    .programa-actions button:hover {
        transform: scale(1.3)
    }

    /* .dt-search{
        display: block !important;
    } */

    td.checkbox-20 input[type="checkbox"] {
        width: 20px;
        height: 20px;
    }

    .choices__inner {
        background-color: var(--n-sup-2, #2a3038) !important;
        color: var(--n-texto, white);
        border: none !important;
        text-align: left !important;
    }

    input.choices__input {
        background-color: var(--n-sup-2, #2a3038) !important;
        color: var(--n-texto, white);
        border: none !important;
    }

    .choices__list {
        /* background-color: #2a3038 !important; */
        background-color: #2a3038;
        color: var(--n-texto, white);
        border: none !important;
        text-align: left !important;
        z-index: 2 !important;
    }

    /*
     * EL DESPLEGABLE ABIERTO, POR ENCIMA DE LO QUE TENGA DEBAJO (2026-09-30).
     * El z-index 2 de arriba vale para todas las listas de Choices, tambien
     * la que se abre, y la cabecera de dias de FullCalendar va pegada con
     * z-index 3: en Horarios cortaba los filtros de empleados y salas. Es el
     * mismo 1065 que pide la regla de .choices__list--dropdown mas arriba, que
     * esta le pisaba.
     */
    .choices__list--dropdown,
    .choices__list[aria-expanded] {
        z-index: 1065 !important;
    }

    .choices__list--dropdown .choices__item--selectable.is-highlighted,
    .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
        background-color: var(--n-sup-3, #444e5c) !important;
    }

    span.obligatory {
        color: red;
    }

    .sidebar .sidebar-brand-wrapper .sidebar-brand.brand-logo-mini img,
    .navbar .navbar-brand-wrapper .navbar-brand.brand-logo-mini img {
        width: 35px;
        height: auto;
        object-fit: contain;
    }

    .navbar .navbar-menu-wrapper {
        justify-content: end;
    }

    @media(max-width: 990px) {}

    /* La columna de casillas de las acciones en bloque, a la derecha. */
    .th-checkbox,
    .td-checkbox {
        width: 48px;
        text-align: center;
    }

    .bulk-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: var(--n-sup-1, #191c24);
        color: var(--n-texto, #fff);
        padding: 10px 20px;
        z-index: 1050;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
    }

    .modal-content {
        background: var(--n-sup-1, #191919);
    }

    #calendarioGeneral,
    #calendario-horarios {
        overflow-x: auto;
    }

    #calendarioGeneral .fc-view-harness .fc-timeGridWeek-view,
    #calendario-horarios .fc-view-harness .fc-timeGridWeek-view {
        min-width: 800px;
    }


    .fc .fc-toolbar.fc-header-toolbar {
        flex-wrap: wrap;
    }

    .fc .fc-scroller-liquid-absolute,
    .fc .fc-scroller {
        overflow-y: auto !important;
    }

    .fc .fc-col-header-cell-cushion {
        font-weight: 400;
        text-decoration: none;
    }

    .fc .fc-daygrid-day-number {
        font-weight: 400;
        text-decoration: none;
        opacity: 0.4;
    }

    .fc-v-event .fc-event-main-frame {
        color: #343434;
    }

    .fc-v-event .fc-event-main {
        color: #454545;
    }

    .fc-timegrid-event-harness,
    .fc-daygrid-event-harness {
        cursor: pointer;
        transition: .25s all ease;
    }

    .fc-timegrid-event-harness:hover,
    .fc-daygrid-event-harness:hover {
        opacity: 0.9;
        transform: scale(1.03)
    }

    .fc-event-title.fc-sticky {
        font-weight: 600;
    }

    a.fc-event {
        overflow: hidden;
    }

    /* Avatar en horarios */
    .fc-emp-avatar {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        font-weight: 700;
        font-size: 11px;
        background: rgba(255, 255, 255, .9);
        color: #6e6e6e;
        border: 1px solid rgba(0, 0, 0, .15);
        margin-right: 6px;
    }

    .fc-emp-text {
        font-weight: 600;
        line-height: 1.1;
    }

    /*
     * Las lineas de la casilla del calendario de horarios: hora, empleado,
     * servicio, SOCIO y sala. Eran <span> sueltos sin estilo, asi que salian
     * corridos en un parrafo; cada uno va en su linea (2026-09-17).
     *
     * nowrap es lo que hace que sirvan el overflow y los puntos suspensivos:
     * sin el, el texto se parte y la casilla lo corta por la mitad de una
     * palabra en vez de rematarla con "..." (2026-09-18). Cuando hay sesiones
     * solapadas la columna baja de 40px, y ahi solo cabe el arranque del
     * nombre; el resto se lee pinchando la sesion.
     */
    .fc-event-custom-content .fc-event-line {
        display: block;
        line-height: 1.2;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /*
     * Al socio se le reconoce por la negrita y NO por un icono. El de
     * halterofilia que llevaba delante se veia como un borron a los 11px de
     * la casilla, y en una columna estrecha se comia el ancho que le tocaba
     * al nombre: quedaba el glifo solo, sin socio al lado (2026-09-18). En el
     * panel de detalle si lo lleva, porque ahi sobra sitio.
     */
    .fc-event-custom-content .fc-socio-line {
        font-weight: 600;
    }

    /*
     * CASILLA ESTRECHA, SOLO LA HORA DE INICIO (2026-09-28). «16:00 - 17:00»
     * pide unos 75px; por debajo salia «16:00 - 17:» y parecia una hora mal
     * escrita. Se mide la CASILLA y no la pantalla: la estrechez la pone el
     * numero de sesiones que coinciden, no el monitor.
     */
    .fc-event-custom-content {
        container-type: inline-size;
    }

    @container (max-width: 80px) {
        .fc-event-custom-content .fc-hora-fin {
            display: none;
        }
    }

    /*
     * AGENDA: LOS CALENDARIOS CON EL ASPECTO DEL PLANIFICADOR (fase 3, tarea 3,
     * 2026-09-30). Empleados -> Horarios y Actividades -> Horarios llevan
     * .mp-agenda en el contenedor; el JS comun es assets/js/agenda.js y la
     * guia, docs/horarios.md.
     *
     * Todo sale de las variables del tema: en oscuro cada regla cae en el gris
     * de siempre (las --n-* solo existen en claro) y el acento es el del set
     * de colores de quien mira. Lo que habia antes eran los colores por
     * defecto de FullCalendar: lineas blancas punteadas, «hoy» en amarillo y
     * casillas rellenas del color del servicio con el texto oscuro encima.
     */
    .fc {
        --fc-border-color: var(--n-borde, #333);
        --fc-page-bg-color: var(--n-sup-1, #191919);
        --fc-neutral-bg-color: var(--n-sup-3, #333);
        --fc-list-event-hover-bg-color: var(--n-sup-3, #333);
        --fc-today-bg-color: color-mix(in srgb, var(--main-blue) 9%, transparent);
        --fc-highlight-color: color-mix(in srgb, var(--main-blue) 18%, transparent);
        --fc-now-indicator-color: var(--accent-orange);
    }

    /* La caja de la semana del planificador (.week-container) */
    .mp-agenda {
        border: 1px solid var(--n-borde, #333);
        border-radius: 8px;
        background: var(--n-sup-2, #252525);
        padding: 15px;
        color: var(--n-texto, #e0e0e0);
    }

    .mp-agenda.fc .fc-toolbar.fc-header-toolbar {
        margin-bottom: 15px;
        gap: 10px;
    }

    .mp-agenda.fc .fc-toolbar-title {
        font-size: 1.35rem;
        color: var(--n-texto, #e0e0e0);
    }

    .mp-agenda.fc .fc-button {
        background: var(--n-sup-3, #333);
        border: 1px solid var(--n-borde, #444);
        color: var(--n-texto, #e0e0e0);
        box-shadow: none;
        font-size: .85rem;
        padding: .4rem .8rem;
        text-transform: none;
    }

    .mp-agenda.fc .fc-button:hover:not(:disabled) {
        background: color-mix(in srgb, var(--main-blue) 18%, var(--n-sup-3, #333));
        color: var(--n-texto, #e0e0e0);
    }

    .mp-agenda.fc .fc-button:focus,
    .mp-agenda.fc .fc-button-primary:not(:disabled):active:focus {
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--main-blue) 45%, transparent);
    }

    /*
     * La vista elegida: tinte y borde del acento, con el texto normal. Sin
     * texto encima del acento puro, el set de colores de cada uno no puede
     * dejarlo ilegible.
     */
    .mp-agenda.fc .fc-button-primary:not(:disabled).fc-button-active,
    .mp-agenda.fc .fc-button-primary:not(:disabled):active {
        background: color-mix(in srgb, var(--main-blue) 30%, var(--n-sup-3, #333));
        border-color: var(--main-blue);
        color: var(--n-texto, #e0e0e0);
    }

    .mp-agenda.fc .fc-button:disabled {
        opacity: .45;
    }

    /* La cabecera de cada dia, como la .day-header del planificador */
    .mp-agenda.fc .fc-col-header-cell {
        background: var(--n-sup-3, #333);
    }

    .mp-agenda.fc .fc-col-header-cell-cushion {
        display: block;
        padding: 8px 6px;
        color: var(--n-texto, #e0e0e0);
        font-size: 13px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .03em;
    }

    .mp-agenda.fc .fc-day-today .fc-col-header-cell-cushion {
        color: var(--accent-blue);
    }

    .mp-agenda.fc .fc-timegrid-slot-label-cushion,
    .mp-agenda.fc .fc-timegrid-axis-cushion,
    .mp-agenda.fc .fc-daygrid-day-number {
        color: var(--n-texto-suave, #a0a0a0);
        font-size: 12px;
        opacity: 1;
    }

    /* La media hora, una linea mas tenue y continua (era punteada y blanca) */
    .mp-agenda.fc .fc-timegrid-slot-minor {
        border-top-style: solid;
        border-top-color: color-mix(in srgb, var(--fc-border-color) 45%, transparent);
    }

    .mp-agenda.fc .fc-list-day-cushion {
        background: var(--n-sup-3, #333);
        color: var(--n-texto, #e0e0e0);
        text-transform: capitalize;
    }

    /*
     * LA TARJETA. FullCalendar escribe el color del evento en el propio
     * elemento: aqui se pisa con un tinte de ese color sobre la superficie y
     * una barra a la izquierda (el empleado o el monitor), como el
     * .event-item del planificador. El color llega en --ev-color y
     * --ev-barra (mpAgendaPintarEvento).
     */
    .mp-agenda.fc .fc-event.mp-evento {
        background: color-mix(in srgb, var(--ev-color, #6c757d) 22%, var(--n-sup-2, #252525)) !important;
        border: 1px solid color-mix(in srgb, var(--ev-color, #6c757d) 40%, var(--n-borde, #333)) !important;
        border-left: 4px solid var(--ev-barra, var(--ev-color, #6c757d)) !important;
        border-radius: 4px;
        box-shadow: none;
        color: var(--n-texto, #e0e0e0);
    }

    .mp-agenda.fc .mp-evento .fc-event-main,
    .mp-agenda.fc .mp-evento .fc-event-main-frame,
    .mp-agenda.fc .mp-evento .fc-event-time,
    .mp-agenda.fc .mp-evento .fc-event-title {
        color: var(--n-texto, #e0e0e0);
    }

    .mp-agenda.fc .fc-timegrid-event-harness:hover,
    .mp-agenda.fc .fc-daygrid-event-harness:hover {
        opacity: 1;
        transform: translateY(-1px);
    }

    .mp-agenda.fc .mp-evento:hover {
        background: color-mix(in srgb, var(--ev-color, #6c757d) 34%, var(--n-sup-2, #252525)) !important;
    }

    .mp-agenda .fc-event-custom-content .fc-room-line,
    .mp-agenda .fc-event-custom-content .fc-plazas-line {
        color: var(--n-texto-suave, #a0a0a0);
    }

    .mp-agenda .fc-event-custom-content.es-cancelada .fc-socio-line {
        text-decoration: line-through;
    }

    .mp-agenda .mp-evento-estado {
        display: inline-block;
        margin-top: 3px;
        padding: 0 6px;
        border-radius: 8px;
        background: color-mix(in srgb, var(--ev-color, #6c757d) 45%, var(--n-sup-2, #252525));
        font-size: 10px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .03em;
    }

    /*
     * LA VISTA «TARJETAS» (semanaTarjetas, un dayGridWeek): una columna por
     * dia con las sesiones una debajo de otra, como los .day-content del
     * planificador. El numero del dia ya va en la cabecera.
     */
    .mp-agenda .fc-semanaTarjetas-view .fc-daygrid-day-top {
        display: none;
    }

    .mp-agenda .fc-semanaTarjetas-view .fc-daygrid-day-frame {
        min-height: 180px;
        padding: 8px 6px;
    }

    .mp-agenda .fc-semanaTarjetas-view .fc-daygrid-day-events {
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin: 0;
    }

    .mp-agenda .fc-semanaTarjetas-view .fc-daygrid-event-harness {
        margin: 0 !important;
    }

    /*
     * Block y no flex: FullCalendar pinta la sesion con hora como «punto»
     * (fc-daygrid-dot-event, una fila flex) aunque se le pida bloque, y el
     * contenido -que mide su ancho con container-type- se quedaba en 0px: el
     * texto salia letra a letra y la pagina media 12.000px. Lo mismo en el
     * mes, que tambien es cuadricula de dias.
     */
    .mp-agenda .fc-daygrid-event.mp-evento {
        display: block;
        white-space: normal;
        padding: 4px 6px;
    }

    .mp-agenda .fc-dayGridMonth-view .fc-event-custom-content {
        font-size: 11px;
        line-height: 1.25;
    }

    .mp-agenda .fc-semanaTarjetas-view .fc-daygrid-event {
        margin: 0;
        padding: 6px 8px;
        white-space: normal;
        cursor: pointer;
    }

    .mp-agenda .fc-semanaTarjetas-view .fc-daygrid-day.fc-day-today {
        background: var(--fc-today-bg-color);
    }

    /* En la tarjeta cabe todo: el texto se parte en vez de cortarse con «…» */
    .mp-agenda .fc-semanaTarjetas-view .fc-event-custom-content,
    .mp-agenda .fc-list .fc-event-custom-content {
        font-size: 12px;
        line-height: 1.3;
        padding: 0;
    }

    .mp-agenda .fc-semanaTarjetas-view .fc-event-custom-content .fc-event-line,
    .mp-agenda .fc-list .fc-event-custom-content .fc-event-line {
        white-space: normal;
        overflow: visible;
    }

    .mp-agenda .fc-semanaTarjetas-view .fc-event-time-line {
        margin-bottom: 2px;
    }

    /* La semana no cabe en 1.366 con siete columnas legibles: se desplaza */
    .mp-agenda .fc-semanaTarjetas-view {
        min-width: 840px;
    }

    #calendarioGeneral.mp-agenda {
        overflow-x: auto;
    }

    /*
     * En la lista (movil) FullCalendar pinta el evento como fila: el tinte va
     * en la fila entera y el punto de color sobra, ya esta la barra.
     */
    .mp-agenda .fc-list .mp-evento td {
        background: transparent;
        border-color: var(--n-borde, #333);
    }

    .mp-agenda .fc-list .fc-list-event-dot {
        display: none;
    }

    /* La hora ya va en su columna de la lista: dentro de la tarjeta sobra */
    .mp-agenda .fc-list .fc-event-time-line {
        display: none;
    }

    .mp-agenda .fc-list .fc-list-day-text,
    .mp-agenda .fc-list .fc-list-day-side-text {
        color: var(--n-texto, #e0e0e0);
        text-decoration: none;
    }

    @media (max-width: 768px) {
        .mp-agenda {
            padding: 10px;
        }

        .mp-agenda.fc .fc-toolbar-title {
            font-size: 1.1rem;
        }
    }

    /* SPINNER */
    .sk-fading-circle {
        margin: 100px auto;
        width: 40px;
        height: 40px;
        position: relative;
    }

    .sk-fading-circle .sk-circle {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
    }

    .sk-fading-circle .sk-circle:before {
        content: '';
        display: block;
        margin: 0 auto;
        width: 15%;
        height: 15%;
        background-color: var(--n-sup-3, #333);
        border-radius: 100%;
        -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
        animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
    }

    .sk-fading-circle .sk-circle2 {
        -webkit-transform: rotate(30deg);
        -ms-transform: rotate(30deg);
        transform: rotate(30deg);
    }

    .sk-fading-circle .sk-circle3 {
        -webkit-transform: rotate(60deg);
        -ms-transform: rotate(60deg);
        transform: rotate(60deg);
    }

    .sk-fading-circle .sk-circle4 {
        -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
    }

    .sk-fading-circle .sk-circle5 {
        -webkit-transform: rotate(120deg);
        -ms-transform: rotate(120deg);
        transform: rotate(120deg);
    }

    .sk-fading-circle .sk-circle6 {
        -webkit-transform: rotate(150deg);
        -ms-transform: rotate(150deg);
        transform: rotate(150deg);
    }

    .sk-fading-circle .sk-circle7 {
        -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    .sk-fading-circle .sk-circle8 {
        -webkit-transform: rotate(210deg);
        -ms-transform: rotate(210deg);
        transform: rotate(210deg);
    }

    .sk-fading-circle .sk-circle9 {
        -webkit-transform: rotate(240deg);
        -ms-transform: rotate(240deg);
        transform: rotate(240deg);
    }

    .sk-fading-circle .sk-circle10 {
        -webkit-transform: rotate(270deg);
        -ms-transform: rotate(270deg);
        transform: rotate(270deg);
    }

    .sk-fading-circle .sk-circle11 {
        -webkit-transform: rotate(300deg);
        -ms-transform: rotate(300deg);
        transform: rotate(300deg);
    }

    .sk-fading-circle .sk-circle12 {
        -webkit-transform: rotate(330deg);
        -ms-transform: rotate(330deg);
        transform: rotate(330deg);
    }

    .sk-fading-circle .sk-circle2:before {
        -webkit-animation-delay: -1.1s;
        animation-delay: -1.1s;
    }

    .sk-fading-circle .sk-circle3:before {
        -webkit-animation-delay: -1s;
        animation-delay: -1s;
    }

    .sk-fading-circle .sk-circle4:before {
        -webkit-animation-delay: -0.9s;
        animation-delay: -0.9s;
    }

    .sk-fading-circle .sk-circle5:before {
        -webkit-animation-delay: -0.8s;
        animation-delay: -0.8s;
    }

    .sk-fading-circle .sk-circle6:before {
        -webkit-animation-delay: -0.7s;
        animation-delay: -0.7s;
    }

    .sk-fading-circle .sk-circle7:before {
        -webkit-animation-delay: -0.6s;
        animation-delay: -0.6s;
    }

    .sk-fading-circle .sk-circle8:before {
        -webkit-animation-delay: -0.5s;
        animation-delay: -0.5s;
    }

    .sk-fading-circle .sk-circle9:before {
        -webkit-animation-delay: -0.4s;
        animation-delay: -0.4s;
    }

    .sk-fading-circle .sk-circle10:before {
        -webkit-animation-delay: -0.3s;
        animation-delay: -0.3s;
    }

    .sk-fading-circle .sk-circle11:before {
        -webkit-animation-delay: -0.2s;
        animation-delay: -0.2s;
    }

    .sk-fading-circle .sk-circle12:before {
        -webkit-animation-delay: -0.1s;
        animation-delay: -0.1s;
    }

    @-webkit-keyframes sk-circleFadeDelay {

        0%,
        39%,
        100% {
            opacity: 0;
        }

        40% {
            opacity: 1;
        }
    }

    @keyframes sk-circleFadeDelay {

        0%,
        39%,
        100% {
            opacity: 0;
        }

        40% {
            opacity: 1;
        }
    }

    /* GLOBAL SPINNER LOADER */
    .global-loader-overlay {
        position: fixed;
        inset: 0;
        z-index: 99999;
        background: rgba(66, 66, 66, .75);
        display: flex;
        align-items: center;
        justify-content: center;

        opacity: 0;
        visibility: hidden;
        pointer-events: none;

        transition: opacity .2s ease, visibility .2s ease;
    }

    .global-loader-overlay.is-visible {
        opacity: 1;
        visibility: visible;
        pointer-events: all;
    }

    /* Caja opcional */
    .global-loader-box .sk-fading-circle {
        width: 70px;
        height: 70px;
        position: relative;
    }

    .sk-fading-circle {
        width: 70px;
        height: 70px;
    }

    .global-loader-box .sk-fading-circle .sk-circle:before {
        background-color: #fff;
    }

    /* Horario laboral en calendario del modal */
    #calendario-horarios .fc-non-business {
        background: rgba(120, 120, 120, 0.28) !important;
    }

    #calendario-horarios .fc-timegrid-slot {
        cursor: pointer;
    }

    #calendario-horarios .fc-timegrid-slot:hover {
        background: rgba(255, 102, 0, 0.08);
    }

    #calendario-horarios .fc-non-business,
    #calendario-horarios .fc-non-business * {
        cursor: not-allowed !important;
    }

    .horario-laboral-modal-notice {
        border: 1px dashed rgba(255, 102, 0, 0.45);
        background: rgba(255, 102, 0, 0.08);
        color: #f2f2f2;
        border-radius: 12px;
        padding: 10px 14px;
        margin-bottom: 12px;
        font-size: 13px;
    }


    .js-image-dropzone {
        border: 2px dashed #ccc;
        padding: 20px;
        text-align: center;
        border-radius: 8px;
        background-color: var(--n-sup-2, #2a3038);
        cursor: pointer;
        transition: border-color 0.25s ease, background-color 0.25s ease;
        min-height: 240px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .js-image-dropzone:hover,
    .js-image-dropzone.is-dragover {
        border-color: #007bff;
        background-color: var(--n-sup-3, #343a40);
    }

    .js-image-dropzone-hint {
        color: var(--n-texto-suave, #bdbdbd);
        margin-bottom: 10px;
    }

    .js-image-dropzone-error {
        color: red;
        display: none;
        margin-top: 10px;
    }

    /*
     * EL BOTON DE QUITAR LA IMAGEN (2026-08-27).
     *
     * Hasta ahora una imagen mal elegida no se podia deshacer: el recuadro solo
     * sabia recibir, y volver atras pasaba por cerrar el modal y perder lo
     * escrito. El componente le engancha esta aspa arriba a la derecha, y la
     * ensena solo cuando hay algo que quitar -si no, seria un boton que no hace
     * nada sobre un recuadro vacio-.
     *
     * position:relative en el recuadro es lo que la ancla; el recuadro es un
     * flex y el aspa se saca del flujo para que no le abra hueco a la izquierda
     * de la vista previa.
     */
    .js-image-dropzone {
        position: relative;
    }

    .js-image-dropzone-quitar {
        position: absolute;
        top: 6px;
        right: 6px;
        z-index: 2;
        display: none;
        width: 26px;
        height: 26px;
        padding: 0;
        line-height: 1;
        border: 0;
        border-radius: 50%;
        background: rgba(0, 0, 0, .6);
        color: #fff;
        font-size: 14px;
        cursor: pointer;
        transition: background-color .2s ease;
    }

    .js-image-dropzone-quitar:hover {
        background: #dc3545;
    }

    /*
     * LA MINIATURA SE ENCOGE CON SU RECUADRO.
     *
     * Estaba clavada a 200x200. En un modal-lg la columna del dropzone deja 194
     * px utiles, asi que la imagen se salia 28 px por la derecha del recuadro
     * punteado —medido en Empleados > Categorias, donde lo vio el usuario—. No
     * rompia nada: solo se veia mal.
     *
     * `width: 200px` + `max-width: 100%` da los 200 de siempre donde hay sitio y
     * el ancho del hueco donde no. El cuadrado se mantiene con `aspect-ratio` en
     * vez de una altura fija: con `height: 200px` a secas, al encogerse el ancho
     * la miniatura se deformaria a rectangulo.
     *
     * `object-fit: cover` se queda: recorta para llenar, que es lo que hace que
     * una foto apaisada y una vertical se vean igual de ordenadas en la lista.
     */
    .js-image-preview {
        width: 200px;
        max-width: 100%;
        aspect-ratio: 1 / 1;
        height: auto;
        object-fit: cover;
        border-radius: 10px;
        margin: auto;
        display: none;
    }

    .global-cropper-stage {
        width: 100%;
        min-height: 420px;
        background: #f3f3f3;
        border: 1px solid #ddd;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #globalImageCropModal {
        z-index: 1065;
    }

    #globalCropperImage {
        display: block;
        max-width: 100%;
    }

    .global-cropper-preview {
        width: 220px;
        height: 220px;
        overflow: hidden;
        border: 1px solid #ddd;
        background: #fff;
        margin: 0 auto;
    }

    /*
     * FILTRO DESDE–HASTA (fase 3, tarea 4, 2026-09-30). El componente de las
     * pantallas de dinero: mp_filtro_fechas() en manager/filtro-fechas.php, el
     * JS en assets/js/filtro-fechas.js, la guia en docs/filtro-fechas.md.
     *
     * Los dos campos y los atajos en una fila que se parte sola: en 1.366 cabe
     * entero al lado de un titulo; en movil los atajos bajan debajo. El atajo
     * encendido lleva el acento del set de colores de quien mira.
     */
    .filtro-fechas {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: 8px 16px;
    }

    .filtro-fechas-campos {
        display: flex;
        gap: 8px;
    }

    .filtro-fechas-campo {
        display: flex;
        flex-direction: column;
        gap: 2px;
        margin: 0;
        font-size: 0.8rem;
        color: var(--n-texto-suave, #bdbdbd);
    }

    /* Los campos del panel llevan letra grande: con menos, el año se corta. */
    .filtro-fechas-campo input {
        width: 12.5rem;
    }

    .filtro-fechas-atajos {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
    }

    .filtro-fechas-atajos .btn {
        margin: 0;
    }

    /*
     * Al pulsarlo, Bootstrap deja el botón en gris relleno (el :focus del tema)
     * y parece desactivado. Se queda solo el contorno para el teclado.
     */
    .filtro-fechas-atajos .btn:focus:not(.active),
    .filtro-fechas-atajos .btn:active:not(.active) {
        background: transparent;
        color: inherit;
        box-shadow: none;
    }

    .filtro-fechas-atajos .btn:focus-visible {
        outline: 2px solid var(--main-blue);
        outline-offset: 1px;
    }

    .filtro-fechas-atajos .btn.active {
        background: var(--main-blue);
        border-color: var(--main-blue);
        /* Blanco en claro, casi negro en oscuro: el acento de oscuro es claro. */
        color: var(--n-sup-1, #111);
    }

    .filtro-fechas-titulo {
        font-size: 0.8rem;
        color: var(--n-texto-suave, #bdbdbd);
        margin-right: 2px;
    }

    /* En móvil los dos campos se reparten el ancho; si no, «Hasta» se sale. */
    @media (max-width: 575.98px) {
        .filtro-fechas-campos {
            flex: 1 1 100%;
            min-width: 0;
        }

        .filtro-fechas-campo {
            flex: 1 1 0;
            min-width: 0;
        }

        .filtro-fechas-campo input {
            width: 100%;
            min-width: 0;
            font-size: 0.85rem;
            padding-left: 8px;
            padding-right: 6px;
        }

        /* La fecha sale en Copperplate, que es muy ancha: en móvil, la de texto. */
        .filtro-fechas-campo input::-webkit-datetime-edit {
            font-family: var(--font-texto);
            letter-spacing: 0;
        }
    }

/* ==================================================================
   COMPONENTES DE FORMULARIO
   (antes assets/css/formularios.css — va al final para poder matizar
   el tema general sin recurrir a !important)
   ================================================================== */

/*
 * La paleta y la esquina asimetrica se declaran como variables en
 * assets/components/custom-css.php (:root), que es el sitio donde ya vivian
 * --form-radius, --form-color-* y compania. Aqui solo se consumen, para no
 * tener los mismos hex escritos en dos archivos.
 *
 *   --form-radius-asim   0 18px 0 18px   (la firma: dos esquinas rectas)
 *   --form-asim-bg       #518893
 *   --form-asim-border   #8FBBC6
 *   --form-asim-text     #fff
 */


.caja_marron {
    background: #ad6a4b;
    color: #fff;
    border: 3px solid #d38d6c;
    border-radius: var(--form-radius-asim);
    font-weight: 700;
    font-size: 15px;
    padding: 12px 28px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.25),
        0 2px 4px rgba(0,0,0,.15);
    transition: all .25s ease;
}

.boton-azul {
    background: var(--form-asim-bg);
    color: var(--form-asim-text);
    border: var(--form-asim-border-width) solid var(--form-asim-border);
    border-radius: var(--form-radius-asim);
    font-weight: 700;
    font-size: 15px;
    padding: 12px 28px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.25),
        0 2px 4px rgba(0,0,0,.15);
    transition: all .25s ease;
}

.input-azul {
    background: var(--form-asim-bg);
    color: var(--form-asim-text);
    border: var(--form-asim-border-width) solid var(--form-asim-border);
    border-radius: var(--form-radius-asim);
    font-weight: var(--form-asim-text-weight);
    font-size: 15px;
    padding: 12px 28px;
}

/* ------------------------------------------------------------------
   Datos del Gimnasio (centro/centro-datos-gimnasio.php)
   ------------------------------------------------------------------ */

.gym-cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 8px;
}

.gym-titulo {
    margin: 0;
    font-weight: 700;
}

/* Nombre + logo del gimnasio en la barra superior (header.php). */
.navbar-gym {
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: default;
}

/*
 * EN MOVIL, QUE ENVUELVA (2026-08-05).
 *
 * Esta fila es la mas cargada del panel y solo para el administrador: selector
 * de gimnasio + "Administracion general" + su nombre + el logo. Sin envolver,
 * en un movil de 390px el rotulo acababa en el pixel 453 y el nombre en el 485;
 * se cortaban en seco y sin barra de desplazamiento, porque el contenedor los
 * recorta en vez de dejar rodar la pagina.
 *
 * Ya pasaba antes de ensanchar el selector -medido: 453 con el tope viejo de
 * 260-, pero el ensanche lo empeoraba 66px, asi que se arregla aqui.
 *
 * Solo por debajo de 992px, que es donde el tema ya convierte la barra en dos
 * filas y hay sitio para una tercera. La altura la vuelve a medir el JS que
 * mantiene --mp-navbar-h, asi que crecer no tapa el contenido.
 */
@media (max-width: 991px) {
    .navbar-gym {
        flex-wrap: wrap;
        row-gap: 8px;
    }

    /* Que quepa en la fila en vez de imponerle 340px a una pantalla de 390. */
    .navbar-gym-selector {
        max-width: 100%;
    }
}

/*
 * El nombre del gimnasio: Copperplate y verde oliva.
 *
 * Es un ROTULO DE MARCA, no un dato de la pantalla, y con la tipografia de
 * titulos se lee como tal. Copperplate no tiene minusculas de verdad -solo
 * mayusculas y versalitas-, asi que "DEMO-Gym" sale en versalitas; para un
 * nombre corto de una barra superior es justo el efecto que se busca, y por eso
 * lleva mas letter-spacing: apretada se lee peor que separada.
 *
 * El oliva es --form-color-2-bg, el mismo de los campos amarillos del panel: es
 * el unico verde apagado de la paleta. --main-green (#00D66B) es un verde de
 * "correcto", que aqui diria algo que no es.
 *
 * Con esto los tres rotulos de la barra van cada uno por su lado: gimnasio en
 * oliva, usuario en naranja y la chapa de administrador en azul.
 */
.navbar-gym-nombre {
    font-family: var(--font-titulos);
    font-weight: 700;
    font-size: 17px;
    letter-spacing: 1.2px;
    white-space: nowrap;
    color: var(--form-color-2-bg, #B0A462);
}

/*
 * Logo apaisado. Se fija SOLO la altura y se deja width:auto para que el
 * navegador calcule el ancho a partir de la proporcion real: un 1000x500
 * ocupa 84x42, un cuadrado 42x42. max-width es solo un tope de seguridad
 * por si alguien sube un logo desproporcionadamente ancho, y como recorta
 * en lugar de deformar, object-fit:contain lo deja en caja.
 */
.navbar-gym-logo {
    display: block;
    height: 42px;
    width: auto;
    max-width: 240px;
    object-fit: contain;
    object-position: left center;
}

@media (max-width: 576px) {
    .navbar-gym-logo {
        height: 32px;
        max-width: 150px;
    }
}

/*
 * Selector de gimnasio del administrador (header.php).
 *
 * Se estiliza para que parezca la etiqueta que era antes y no un campo de
 * formulario: sin borde en reposo, y solo al pasar por encima se insinua que se
 * puede pulsar. La flecha se dibuja a mano porque appearance:none quita la del
 * sistema.
 */
.navbar-gym-selector {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 5px 30px 5px 10px;
    /*
     * Mismo aspecto que .navbar-gym-nombre: para el administrador este selector
     * ES el nombre del gimnasio, y si uno fuera Copperplate oliva y el otro no,
     * el rotulo cambiaria de cara segun quien mire.
     */
    font-family: var(--font-titulos);
    font-weight: 700;
    font-size: 17px;
    letter-spacing: 1.2px;
    color: var(--form-color-2-bg, #B0A462);
    cursor: pointer;
    /*
     * 340 y no 260 (2026-08-05). "Todos los gimnasios" ocupa 280px en
     * Copperplate a 17px con 1,2 de espaciado, y con el padding lateral el
     * control solo dejaba 220: se leia "Todos los gimna" y ahi acababa. Los 340
     * son esos 280 mas los 40 de padding, mas un margen.
     *
     * No se toca ni el cuerpo ni el espaciado para hacerlo caber: este rotulo es
     * el mismo que ven los demas en .navbar-gym-nombre, y encogerlo solo para el
     * administrador lo dejaria de otro tamaño que el de todos.
     *
     * El tope sigue existiendo porque el nombre de un gimnasio lo escribe el
     * cliente y puede ser mas largo que cualquier cuenta que echemos aqui. Para
     * ese caso esta el recorte de abajo.
     */
    max-width: 340px;
    /*
     * Lo que no quepa, con puntos suspensivos. Un <select> recorta a hueso por
     * defecto: cortaba la palabra por la mitad y parecia que faltaba texto por
     * un fallo, no por falta de sitio.
     */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
                      linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
    background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.navbar-gym-selector:hover {
    border-color: var(--border-soft);
    background-color: var(--bg-input);
}

/*
 * LOS DOS ATAJOS QUE NO SON UN CENTRO: «Todos los centros» y «Biblioteca».
 *
 * Estaban dentro del desplegable de centros, entre los clientes, y eso decia lo
 * que no es: que se entra en ellos igual que se entra en AndFit. Uno es el panel
 * que los mira a todos y el otro el almacen de contenido; ninguno tiene socios.
 *
 * Por eso NO comparten el aspecto de .navbar-gym-selector, que es el rotulo de
 * marca del centro en contexto -Copperplate, oliva, grande-. Estos son botones
 * de navegacion: cuerpo de texto, mas pequenos y en gris, para que se lean como
 * otra cosa. El que corresponde se enciende, y asi la barra dice ademas donde
 * estas.
 */
.navbar-gym-atajo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1px solid var(--border-soft);
    border-radius: 6px;
    font-size: 13px;
    line-height: 1;
    white-space: nowrap;
    color: var(--text-muted);
    text-decoration: none;
    transition: background-color .15s, border-color .15s, color .15s;
}

.navbar-gym-atajo:hover {
    background-color: var(--bg-input);
    border-color: var(--accent-blue, #8FC5E1);
    color: var(--accent-blue, #8FC5E1);
}

/* Donde estas ahora. */
.navbar-gym-atajo.activo {
    background-color: var(--bg-input);
    border-color: var(--accent-blue, #8FC5E1);
    color: var(--accent-blue, #8FC5E1);
    font-weight: 600;
}

.navbar-gym-atajo i {
    font-size: 15px;
}

.navbar-gym-selector:focus {
    outline: none;
    border-color: var(--accent-blue, #8FC5E1);
}

/* El desplegable abierto lo pinta el sistema: sin fondo propio saldria blanco. */
/*
 * La LISTA desplegada vuelve a la fuente del cuerpo.
 *
 * Copperplate solo tiene versalitas, y una lista de veinte gimnasios en
 * versalitas se lee bastante peor que el rotulo suelto de la barra. El rotulo es
 * marca; la lista es un menu para elegir.
 */
.navbar-gym-selector option {
    background: var(--bg-card);
    color: var(--text-main);
    font-family: var(--font-texto);
    font-size: 14px;
    letter-spacing: normal;
}

/*
 * Rotulo del administrador, en el sitio donde los demas ven el logo del
 * gimnasio (header.php). El administrador no pertenece a ningun centro, asi que
 * no lleva la identidad visual de ninguno.
 *
 * Va en caja con borde en vez de como texto suelto para que ocupe un lugar
 * comparable al del logo y la barra no cambie de altura segun quien entre.
 */
/*
 * «ADMINISTRACIÓN GENERAL»: es una ETIQUETA, no un boton.
 *
 * Llevaba recuadro azul, y desde que al lado hay dos atajos de verdad -«Todos
 * los centros» y «Biblioteca», que tambien son recuadros- parecia el tercero.
 * Quien lo pulsara no pasaria nada, que es la peor clase de boton.
 *
 * Se le quita la caja: en esta barra, RECUADRO = SE PUEDE PULSAR. Lo que queda
 * es el color azul, que es lo que la distinguia de los otros dos rotulos -el
 * centro en oliva y el usuario en naranja- y sigue diciendo lo mismo sin
 * disfrazarse de mando.
 */
.navbar-admin-general {
    display: inline-block;
    padding: 7px 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--accent-blue, #8FC5E1);
    /* Sin cursor de mano ni hover: no hay nada que pulsar aqui. */
    cursor: default;
}

@media (max-width: 576px) {
    .navbar-admin-general {
        padding: 5px 4px;
        font-size: 10px;
        letter-spacing: .8px;
    }
}

/*
 * Quien esta dentro, en la barra superior (header.php).
 *
 * En NARANJA porque los otros dos rotulos de la barra ya estan cogidos: el
 * nombre del gimnasio va en --text-main y la chapa del administrador en
 * --accent-blue. Con el tercer acento los tres se distinguen sin leerlos.
 *
 * No lleva recuadro, al reves que la chapa de administrador: eso es un aviso
 * -"estas fuera de un gimnasio concreto"- y esto es una etiqueta permanente que
 * sale en todas las pantallas. Un recuadro mas compitiendo cansaria la vista.
 */
.navbar-usuario {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--accent-orange, #F6AD72);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .2px;
    white-space: nowrap;
    cursor: default;
}

.navbar-usuario .mdi {
    font-size: 19px;
    line-height: 1;
}

/*
 * En movil se queda el icono y desaparece el nombre.
 *
 * La barra ya lleva el nombre del gimnasio y su logo; con el nombre de la
 * persona ademas, en 360 px se sale de la pantalla o empuja al logo fuera. El
 * icono solo sigue diciendo que hay alguien identificado, y el nombre completo
 * esta a un toque en el title.
 */
@media (max-width: 767px) {
    .navbar-usuario-nombre {
        display: none;
    }
}

/*
 * Focus360: el bloque del administrador, al PRINCIPIO del menu.
 *
 * Separado del resto y con su propio color porque no es "otra seccion del
 * gimnasio": mira TODOS los gimnasios a la vez, que es lo contrario de lo que
 * hace el resto del panel. Conviene que se note al primer vistazo para no
 * confundir lo que se esta mirando.
 */
.sidebar .nav .nav-item.nav-category-focus360 {
    color: var(--accent-blue, #8FC5E1);
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

/*
 * La raya que separa el bloque del resto del menu.
 *
 * Va DEBAJO y no encima. Estuvo en el borde de arriba de la categoria
 * "Focus360" mientras el bloque era el ultimo del menu; al subirlo al primer
 * puesto el 2026-09-06 esa misma raya quedaba pegada a lo alto de la barra,
 * separando el bloque de nada.
 *
 * Se cuelga de la categoria "Menu" que va justo despues, y por eso lleva el
 * hermano adyacente: asi solo aparece cuando delante hay de verdad un bloque
 * Focus360, o sea para el administrador. Al propietario y al empleado, que
 * abren el menu directamente por "Menu", no les sale ninguna raya suelta.
 */
.sidebar .nav .nav-item.menu-items-focus360 + .nav-item.nav-category {
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px solid rgba(var(--n-velo, 255, 255, 255), .12);
}

.sidebar .nav .nav-item.menu-items-focus360 > .nav-link .menu-icon i {
    color: var(--accent-blue, #8FC5E1);
}

.sidebar .nav .nav-item.menu-items-focus360 > .nav-link .menu-title {
    font-weight: 600;
}

/* Cierre de sesion, al final del menu lateral. */
.menu-logout {
    margin-top: 8px;
}

.menu-logout .nav-link .menu-icon i {
    color: var(--danger-red);
}

.gym-selector {
    min-width: 260px;
}

.gym-bloque {
    border: var(--form-asim-border-width) solid var(--form-asim-border);
    border-radius: var(--form-radius-asim);
    padding: 18px 24px 6px 24px;
    margin-bottom: 26px;
}

.gym-bloque-titulo {
    float: none;
    width: auto;
    background: var(--form-asim-bg);
    color: var(--form-asim-text);
    border: var(--form-asim-border-width) solid var(--form-asim-border);
    border-radius: var(--form-radius-asim);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .4px;
    text-transform: uppercase;
    padding: 6px 22px;
    margin-bottom: 14px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .25),
        0 2px 4px rgba(0, 0, 0, .15);
}

/*
 * Sin !important a proposito.
 *
 * custom-css.php impone radio, color y borde a todos los campos con
 * !important, y se inyecta despues de esta hoja. En vez de pelearlo
 * encadenando clases y repitiendo !important, los controles llevan la clase
 * .form-libre, que los deja fuera de esa imposicion. Los valores salen de las
 * variables --form-asim-* declaradas en ese mismo archivo, para no tener la
 * paleta escrita en dos sitios.
 *
 * Si un campo de aqui aparece de pronto con las esquinas a 10px, lo que falta
 * es la clase .form-libre en el HTML, no un !important en el CSS.
 */
.input-gym {
    background: var(--form-asim-bg);
    color: var(--form-asim-text);
    border: var(--form-asim-border-width) solid var(--form-asim-border);
    border-radius: var(--form-radius-asim);
    font-weight: var(--form-asim-text-weight);
    font-size: 15px;
    padding: 10px 22px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
    transition: all .25s ease;
}

.input-gym:focus {
    background: var(--form-asim-bg-focus);
    color: var(--form-asim-text);
    border-color: var(--form-asim-border-focus);
    box-shadow: 0 0 0 .2rem rgba(143, 187, 198, .35);
}

.input-gym::placeholder {
    color: rgba(255, 255, 255, .6);
    font-weight: 400;
}

.input-gym:disabled,
.input-gym[readonly] {
    background: #3f6b73;
    color: rgba(255, 255, 255, .75);
    border-style: dashed;
}

/* El desplegable nativo hereda el fondo del panel, no el del control. */
.input-gym option {
    background: #2a3a3f;
    color: var(--form-asim-text);
}

.gym-nota {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    font-style: italic;
    opacity: .7;
}

/*
 * La contrasena de ahora, debajo de la nueva (2026-09-19).
 *
 * Van dentro de la misma casilla de la ficha -son un solo gesto: cambiarla- y
 * la raya de la izquierda es lo que dice que el segundo campo pertenece al
 * primero y no es un dato mas del centro.
 */
.gym-pass-actual {
    margin-top: 10px;
    padding-left: 10px;
    border-left: 2px solid var(--form-asim-border);
}

.gym-pass-actual label {
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
    opacity: .85;
}

.gym-logo-box {
    border: var(--form-asim-border-width) dashed var(--form-asim-border);
    border-radius: var(--form-radius-asim);
    padding: 14px;
}

.gym-logo-preview {
    display: block;
    max-width: 100%;
    max-height: 140px;
    width: auto;
    margin-bottom: 12px;
    border-radius: 0 12px 0 12px;
}

.gym-logo-vacio {
    display: block;
    margin-bottom: 12px;
    font-size: 13px;
    font-style: italic;
    opacity: .6;
}

.gym-aviso {
    background: #ad6a4b;
    color: #fff;
    border: 3px solid #d38d6c;
    border-radius: var(--form-radius-asim);
    font-weight: 700;
    padding: 16px 28px;
}

@media (max-width: 768px) {
    .gym-bloque {
        padding: 14px 14px 4px 14px;
    }

    .gym-selector {
        min-width: 100%;
    }
}


/* ==================================================================
   REGLA HUERFANA RESCATADA — desactivada a proposito.

   Vivia en assets/css/custom-css.php, un archivo que segun el historial
   de git NUNCA estuvo enlazado: head.php siempre cargo el custom-css.php
   de assets/components/, no este. La clase .custom-table-responsive si
   se usa, y en 34 paginas del panel, pero su estilo no se ha aplicado
   jamas.

   Se conserva aqui al borrar el archivo para no perder la intencion. NO
   se activa porque hacerlo cambiaria la maquetacion de esas 34 pantallas
   de una vez, y eso es una decision que no toca tomar al limpiar. Para
   habilitarla basta con descomentarla y revisar como quedan las tablas.

   .custom-table-responsive div.dt-container div.dt-layout-row:not(.dt-layout-table) {
       display: flex !important;
       flex-direction: column;
       gap: 5px;
       align-items: start;
       flex-wrap: wrap;
   }
   ================================================================== */

/* ==================================================================
   .gym-dropzone — el componente de arrastrar y soltar, vestido de gimnasio

   .js-image-dropzone (arriba, sobre la linea 1086) es el recuadro que ya usan
   Socios, Empleados y Entrenamientos: alto fijo de 240px, fondo oscuro propio
   y esquinas de 8px. Ese aspecto no encaja en las fichas de Mi Gimnasio, que
   son cajas bajas, sin fondo propio y con la esquina asimetrica.

   Este modificador solo cambia el aspecto; el comportamiento -clic, arrastrar,
   soltar, vista previa y recorte- sigue siendo el del componente compartido.

   Va con doble clase (0,2,0) para ganarle a .js-image-dropzone (0,1,0) sin
   recurrir a !important, y se declara aqui abajo para quedar ademas por detras
   en el orden del archivo.
   ================================================================== */

.js-image-dropzone.gym-dropzone {
    border: var(--form-asim-border-width) dashed var(--form-asim-border);
    border-radius: var(--form-radius-asim);
    background-color: transparent;
    padding: 14px;
    text-align: left;
    align-items: stretch;

    /*
     * 120px, no los 240px del componente original -que descuadran una ficha- ni
     * 0. Con 0, un logo apaisado dejaba un recuadro de dos dedos de alto: como
     * destino donde soltar un archivo es incomodo hasta sabiendo que esta ahi.
     */
    min-height: 120px;
    justify-content: center;
}

.js-image-dropzone.gym-dropzone:hover,
.js-image-dropzone.gym-dropzone.is-dragover {
    border-color: var(--form-asim-border-focus);
    background-color: rgba(255, 255, 255, .04);
}


/*
 * Aqui hubo un .td-etiquetas que le ponia max-width: 220px a la columna de
 * Categorias del listado de Empleados. Se retira: con tres o mas badges el
 * contenido se salia de la celda y se montaba encima de la columna de Permiso,
 * que es peor que la tabla ancha que venia a arreglar. El sitio se gano
 * quitando la columna DNI / NIE del listado -el dato esta en la ficha- en vez
 * de estrechar nada.
 */

/*
 * La vista previa dentro del recuadro. El componente la muestra con jQuery
 * .show(), que pone display en linea, asi que aqui no se toca esa propiedad:
 * solo el tamano y la esquina.
 */
.gym-dropzone .gym-logo-preview {
    max-height: 160px;
    object-fit: contain;
    align-self: flex-start;
}

/*
 * Imagen de sala en el listado de Areas.
 *
 * Antes iba con estilos en linea desde el PHP que arma la fila. La miniatura la
 * genera WordPress; aqui solo se acota el hueco que ocupa en la tabla.
 */
.area-img {
    display: block;
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 0 10px 0 10px;
}

/* Miniatura de anuncio en la rejilla de tarjetas. */
.anuncio-img {
    display: block;
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: var(--form-radius-asim);
}

/* ==================================================================
   .esquinas — LA FORMA, SIN EL COLOR

   Todo lo que hasta ahora llevaba la esquina asimetrica (.boton-azul,
   .input-azul, .caja_marron, .form-libre...) traia ademas su fondo, su
   borde y su color de texto en el mismo paquete. Eso sirve para crear un
   componente nuevo, pero no para dar la forma a algo que YA tiene su
   aspecto: una .card del panel, un .alert de Bootstrap, una tabla.

   Esta clase hace solo eso: recorta las esquinas y no toca nada mas. El
   elemento conserva el fondo que ya trae, venga del tema o de donde sea.

       <div class="card esquinas"> ... </div>
       <div class="alert alert-warning esquinas"> ... </div>

   Sobre el !important: no lleva, a proposito. manager.css se enlaza al
   final del <head> (head.php), asi que ante una regla de vendors con la
   misma especificidad gana esta por orden de carga. Si en algun sitio no
   se aplica sera porque la regla de enfrente es MAS especifica; la salida
   entonces es escribirla mas concreta (.card.esquinas), no meter
   !important — que es justo la guerra de la que salimos.
   ================================================================== */

.esquinas {
    /*
     * El radio se declara aqui como variable local en vez de usar
     * --form-radius-asim directamente: asi los modificadores de abajo solo
     * tienen que cambiar el numero, sin repetir la formula de las cuatro
     * esquinas cada uno.
     */
    --esq: var(--form-asim-radio);
    border-radius: 0 var(--esq) 0 var(--esq);
}

/* Espejo. Util para parejas de cajas enfrentadas, que juntas cierran. */
.esquinas-espejo {
    --esq: var(--form-asim-radio);
    border-radius: var(--esq) 0 var(--esq) 0;
}

/* Tamaños. Se combinan con las dos de arriba: class="esquinas esquinas-sm" */
.esquinas-sm { --esq: 10px; }
.esquinas-lg { --esq: 26px; }

/*
 * Para cuando el contenido tiene fondo propio y asoma por la curva:
 * cabeceras de tarjeta, imagenes a sangre, tablas rayadas.
 *
 * NO se lo pongas a algo que contenga desplegables (dropdowns de Bootstrap,
 * Choices.js, tooltips): overflow:hidden tambien los recorta a ellos y el
 * menu queda cortado dentro de la caja.
 */
.esquinas-recorta {
    overflow: hidden;
}


/* ==================================================================
   .mp-color-icono — el color del icono de catalogo (selector-icono.php)

   La muestra va a lo ANCHO y el boton «Sin color» debajo. En una fila no
   caben: la columna mide 145px dentro del modal y el flex dejaba el
   <input type="color"> en 29x41 px, mas alto que ancho y con pinta de
   rendija. Medido en el navegador, no estimado.
   ================================================================== */

.mp-color-icono {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    align-items: stretch;
}

/*
 * EL COLOR OCUPA EL RECUADRO ENTERO (2026-08-06).
 *
 * Antes llevaba `padding: 4px`, y ese hueco dejaba ver el FONDO del campo —que
 * en el panel es uno de los tres colores rotados, casi siempre naranja—. O sea
 * que alrededor de la muestra aparecia un marco de 5px de otro color que no
 * pintaba nada: se leia como un borde desproporcionado, y encima competia con
 * el color que se acababa de elegir, que es lo unico que ese control tiene que
 * enseñar.
 *
 * Ahora el padding es 0 y el swatch llena el control. El campo conserva su
 * borde de 1px, igual que los demas, asi que sigue pareciendo un campo del
 * panel; lo que desaparece es el relleno de en medio.
 */
.mp-color-icono .js-color-icono {
    width: 100%;
    height: 42px;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
}

/*
 * Las dos mitades del recuadro nativo. Sin esto el navegador pinta su propio
 * marco gris dentro del control y se ven dos bordes, el suyo y el del panel.
 */
.mp-color-icono .js-color-icono::-webkit-color-swatch-wrapper {
    padding: 0;
}

/*
 * El swatch hereda LA FORMA DEL CAMPO, no un radio propio.
 *
 * Los campos del panel son asimetricos (`0 18px`). Con un `border-radius: 6px`
 * fijo, la esquina redondeada del campo quedaba muy por fuera de la del color y
 * el marco se veia mas grueso por un lado que por otro — que es la mitad de lo
 * que daba sensacion de borde ancho.
 */
.mp-color-icono .js-color-icono::-webkit-color-swatch {
    border: none;
    border-radius: inherit;
}

.mp-color-icono .js-color-icono::-moz-color-swatch {
    border: none;
    border-radius: inherit;
}

/*
 * El boton «Sin color» necesita su propio borde: el tema del panel deja TODOS
 * los botones con border-color transparente, asi que un btn-outline-* se ve
 * como texto suelto y no parece pulsable. Medido: 1px solid rgba(0,0,0,0).
 *
 * Va con doble clase (0,2,0) para ganarle a .btn-outline-secondary sin
 * !important, y solo dentro del componente: los botones del resto del panel
 * siguen como estaban.
 */
.mp-color-icono .js-color-icono-limpiar {
    border-color: var(--form-asim-border);
    background: transparent;
    font-size: 13px;
    padding: 4px 10px;
}

.mp-color-icono .js-color-icono-limpiar:hover {
    border-color: var(--form-asim-border-focus);
    background: rgba(255, 255, 255, .07);
}

/*
 * Subopciones dentro del modal de permisos (centro/modals.php).
 *
 * Sangradas y con una guia a la izquierda para que se lea que cuelgan del modulo
 * de arriba y no son otro modulo mas. Sin esto la lista de 38 interruptores era
 * un muro plano.
 */
.permiso-subopciones {
    margin: -6px 0 18px 18px;
    padding-left: 14px;
    border-left: 2px solid var(--border-soft);
}

.permiso-subopciones .form-check-label {
    font-size: 14px;
    color: var(--text-muted);
}

/*
 * Pestañas del reparto de permisos (assets/components/permisos-modulos.php).
 *
 * Con 9 modulos y 38 subopciones, todo seguido eran casi cincuenta interruptores
 * en columna: para llegar a Cuestionarios habia que recorrer el modulo entero.
 */
.permiso-tabs {
    border-bottom: 1px solid var(--border-soft);
    gap: 2px;
    flex-wrap: wrap;
}

.permiso-tabs .nav-link {
    padding: 7px 12px;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    font-size: 14px;
    color: var(--text-muted);
}

.permiso-tabs .nav-link:hover {
    color: var(--text-main);
    background: var(--bg-input);
}

.permiso-tabs .nav-link.active {
    background: transparent;
    border-bottom-color: var(--accent-blue);
    color: var(--text-main);
    font-weight: 600;
}

/*
 * El punto dice si ese modulo esta concedido, sin abrir la pestaña. Sin el hay
 * que recorrerlas una a una para saber que tiene el perfil, que es justo lo que
 * las pestañas venian a evitar.
 */
.permiso-tab-punto {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: 6px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--border-soft);
    vertical-align: middle;
}

.permiso-tab-punto.esta {
    background: var(--main-green);
    border-color: var(--main-green);
}

.permiso-tab-content {
    padding-top: 18px;
    min-height: 210px;
}

/* ============================================================
   LA CABECERA NO DEBE TAPAR EL CONTENIDO EN MOVIL (2026-08-04)
   ============================================================

   El tema fija .main-panel { padding-top: 70px } dando por hecho que la barra
   superior mide siempre 70px. Y no: por debajo de 992px el propio tema convierte
   .navbar-collapse en una SEGUNDA FILA, la barra crece —140px medidos en un
   movil de 390px— y el padding se queda corto. Resultado: los primeros 70px de
   cada pantalla quedan debajo de la cabecera. Se veia en la primera tarjeta de
   Inicio, cortada por arriba.

   NO SE PONE UN 140px FIJO. Lo que hace crecer la barra es el selector de
   gimnasio, que SOLO ve el administrador: con un valor fijo, al propietario y al
   empleado se les abriria un hueco en blanco de 70px que no le corresponde.

   Asi que la altura la mide el navegador y la deja en --mp-navbar-h; el 70px de
   aqui es el respaldo por si ese JS no llegara a correr.

   Solo por debajo de 992px: de ahi para arriba el calculo del tema es correcto y
   no hay que tocarlo. */
@media (max-width: 991px) {
    .main-panel {
        padding-top: var(--mp-navbar-h, 70px);
    }
}

/* ============================================================
   LA INSIGNIA GRIS ERA BLANCA SOBRE BLANCA (2026-08-05)
   ============================================================

   .bg-secondary en este tema no es gris oscuro: el navegador calcula
   rgb(228,234,236), casi blanco. Y .badge de Bootstrap trae color: #fff. Las
   dos juntas dan un recuadro claro con el texto del mismo color -contraste
   1,06:1, ilegible-. Se veia en la columna Cuotas del listado de socios, en
   "Sin plan" y en "Cancelada".

   El resto del panel ya lo esquivaba escribiendo `badge bg-secondary text-dark`
   a mano en cada sitio: diecisiete veces. Esto lo arregla de una y evita que
   la decimoctava vuelva a nacer invisible.

   Solo .badge, no todo .bg-secondary: fuera de las insignias ese fondo se usa
   en sitios donde el color de texto ya viene puesto. */
.badge.bg-secondary {
    color: var(--form-text-color);
}

/* ============================================================
   .tabla-ancha - la tabla que no cabe (2026-08-22)
   ============================================================

   La usan dos pantallas de Plataforma:

     - Listados, que pone una fila por centro y una columna por cosa contada:
       22 columnas fijas, unos 2.460 px.
     - Centros, que con las columnas del plan contratado se va a 1.690 px. Esa
       ya no cabia antes -el boton "Entrar" caia en el 1.446-, y ahi el corte no
       era estetico: el boton no se podia PULSAR, porque un ancestro recorta y
       la pagina no desplaza.

   Ninguna de las dos cabe en 1.440.

   QUIEN SCROLLEA NO ES ESTA CLASE

   DataTables 2 envuelve la tabla en .dt-container > .dt-layout-row >
   .dt-layout-cell, y esa ultima YA trae overflow-x: auto suyo. Comprobado en
   el navegador: la caja mide 1.088 y su scrollWidth 2.458, y el scroll llega
   hasta "Mediciones" sin que la pagina se mueva.

   El overflow de aqui es la red de seguridad para cuando la tabla NO acaba
   siendo un DataTable -si useDatatable() no llega a existir, que es justo lo
   que pasa cuando el bundle pisa jQuery; ver el comentario de footer.php-.
   Sin el, esos 2.460 px desbordan la pagina entera y se llevan de paseo al
   menu y a la cabecera.

   POR QUE UNA CLASE NUEVA Y NO ARREGLAR .custom-table-responsive

   Esa clase esta en 34 pantallas del panel y nunca ha tenido overflow en
   escritorio -su unica regla vive en style.css:25154, dentro de un
   @media (max-width: 991px), y ademas dice `overflow-x: visible !important`,
   que es lo contrario-. Darselo ahora las cambiaria las 34 de golpe, y esa no
   es decision que tome la pantalla que necesitaba el scroll. */
.tabla-ancha {
    overflow-x: auto;
}

/* Las cabeceras no se parten en dos lineas: con 21 etiquetas del tipo "Planes
   nutricionales" una tabla con saltos ocuparia media pantalla de alto antes de
   la primera cifra. */
.tabla-ancha table th {
    white-space: nowrap;
}

/* ------------------------------------------------------------------
   La primera columna se queda quieta

   Sin esto, al desplazarte a la derecha para llegar a "Mediciones" pierdes de
   vista el nombre del centro: quedan seis filas de numeros sin saber de quien
   es cada una, que es tanto como no tener tabla. Es exactamente el defecto por
   el que se giro esta pantalla, y girarla sola no lo arregla.

   El fondo tiene que ser opaco y del color de la tarjeta: si se deja
   transparente, las celdas que pasan por debajo se ven a traves.

   z-index 2 en el cuerpo y 3 en cabecera y pie, para que la esquina de arriba
   a la izquierda quede por encima de las celdas que le pasan por debajo.
   ------------------------------------------------------------------ */
.tabla-ancha table th:first-child,
.tabla-ancha table td:first-child {
    position: sticky;
    left: 0;
    background-color: var(--bg-card);
    z-index: 2;
}

.tabla-ancha table thead th:first-child,
.tabla-ancha table tfoot th:first-child {
    z-index: 3;
}

/* El !important es solo para la cabecera, y hace falta: DataTables pone
   `position: relative` sobre table.dataTable thead > tr > th -lo necesita para
   colgar de ahi la flechita de ordenar-, gana, y la celda "Centro" se quedaba
   sin pegar mientras el cuerpo y el pie si lo hacian; al desplazarte veias los
   nombres de los centros bajo una cabecera que ya no era la suya.

   Sobreescribirlo no rompe la flecha: sticky tambien crea bloque contenedor,
   asi que el elemento absoluto de dentro sigue colocandose igual. Comprobado
   en el navegador. */
.tabla-ancha table thead th:first-child {
    position: sticky !important;
}


/* ==================================================================
   .tabla-acciones-fijas — el menu de ACCIONES no se va por la derecha

   EL PROBLEMA (2026-09-18)

   Los listados del panel no caben en una pantalla de 1.366, que es la de un
   portatil corriente. Medido ahi: Programas se pasa 237 px, Socios activos
   213, Ejercicios 42 y Empleados 509. Lo que se sale es SIEMPRE la derecha, y
   ahi es donde esta el menu de acciones: en Programas y en Ejercicios
   desaparecia entero, asi que la fila no se podia operar.

   Desplazarse SI se podia -.dt-layout-cell trae su propio overflow-x: auto-,
   pero la barra queda al pie de veinticinco filas: hay que bajar toda la tabla
   para descubrir que existe. Desde arriba parece que las columnas no estan.

   LA SOLUCION: la ultima columna se queda pegada a la derecha y el resto de la
   tabla se desplaza por debajo. El menu esta siempre a la vista, y no hay que
   decidir que columna sobra en cada pantalla -que en Empleados, con 509 px de
   exceso, habria significado quitar columnas de datos-.

   Es la idea de .tabla-ancha (ahi arriba) mirando al otro lado: aquella fija
   la PRIMERA columna para no perder de vista de quien es cada fila; esta fija
   la ULTIMA para no perder el boton.

   QUIEN DESPLAZA. Igual que en .tabla-ancha: manda .dt-layout-cell, que es el
   ancestro con overflow y el que sticky toma de referencia. El overflow-x de
   aqui es la red de seguridad para cuando la tabla NO llega a ser un DataTable
   -si el bundle pisa jQuery y useDatatable() no existe; ver footer.php-.

   El fondo tiene que ser OPACO y del color de la tarjeta, o las celdas que
   pasan por debajo se transparentan. La sombra de la izquierda es lo que avisa
   de que hay tabla escondida ahi debajo.
   ================================================================== */
.tabla-acciones-fijas {
    overflow-x: auto;
}

.tabla-acciones-fijas table th:last-child,
.tabla-acciones-fijas table td:last-child {
    position: sticky;
    right: 0;
    background-color: var(--bg-card);
    z-index: 2;
}

/*
 * La cabecera por encima del cuerpo, que si no las celdas le pasan por
 * delante al desplazar. Y el !important por lo mismo que en .tabla-ancha:
 * DataTables pone `position: relative` sobre table.dataTable thead > tr > th
 * y gana, de modo que la cabecera se quedaba sin pegar mientras el cuerpo si
 * lo hacia.
 */
.tabla-acciones-fijas table thead th:last-child {
    position: sticky !important;
    z-index: 3;
}

.tabla-acciones-fijas table th:last-child::after,
.tabla-acciones-fijas table td:last-child::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 6px;
    transform: translateX(-100%);
    background: linear-gradient(to left, rgba(0, 0, 0, .25), transparent);
    pointer-events: none;
}

/*
 * CON LA CASILLA DETRAS (Programas y Ejercicios)
 *
 * En esas dos la ultima columna no es el menu sino la casilla de acciones en
 * bloque, asi que hay que pegar las DOS. La penultima se ancla a la derecha
 * dejando libre el ancho de la casilla, y por eso ese ancho se fija aqui: si
 * no lo fijaramos habria que adivinarlo, y un pixel de mas la solapa.
 *
 * En Socios activos y en Empleados la casilla va al PRINCIPIO de la fila, no
 * al final, y por eso a esas dos les basta la regla de arriba.
 */
.tabla-acciones-fijas.con-seleccion {
    --ancho-casilla: 3rem;
}

/*
 * EL PADDING VA A CERO, Y NO ES CAPRICHO (2026-09-18).
 *
 * En una celda de tabla el `width` NO incluye el padding, aunque Bootstrap
 * ponga box-sizing: border-box a todo. Medido aqui: la casilla ya traia
 * `width: 48px` de la regla .th-checkbox de mas arriba y ocupaba 64 -48 mas
 * los 8 de padding de cada lado-, y al pedirle 4rem paso a ocupar 84, no 64.
 *
 * Mientras el ancho real no coincida con --ancho-casilla, la columna de
 * ACCIONES se ancla donde no es y la casilla se le monta encima: se veia
 * "Accione" en vez de "Acciones", tapada 20 px. Con el padding a cero el
 * ancho total ES la variable, y las dos columnas encajan sin hueco ni solape.
 * La casilla no se descoloca porque .th-checkbox ya la centra.
 */
.tabla-acciones-fijas.con-seleccion table th:last-child,
.tabla-acciones-fijas.con-seleccion table td:last-child {
    width: var(--ancho-casilla);
    min-width: var(--ancho-casilla);
    padding-left: 0;
    padding-right: 0;
}

.tabla-acciones-fijas.con-seleccion table th:nth-last-child(2),
.tabla-acciones-fijas.con-seleccion table td:nth-last-child(2) {
    position: sticky;
    right: var(--ancho-casilla);
    background-color: var(--bg-card);
    z-index: 2;
}

.tabla-acciones-fijas.con-seleccion table thead th:nth-last-child(2) {
    position: sticky !important;
    z-index: 3;
}

/* La sombra la pinta la primera columna pegada, que aqui es la penultima. */
.tabla-acciones-fijas.con-seleccion table th:last-child::after,
.tabla-acciones-fijas.con-seleccion table td:last-child::after {
    display: none;
}

.tabla-acciones-fijas.con-seleccion table th:nth-last-child(2)::after,
.tabla-acciones-fijas.con-seleccion table td:nth-last-child(2)::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 6px;
    transform: translateX(-100%);
    background: linear-gradient(to left, rgba(0, 0, 0, .25), transparent);
    pointer-events: none;
}


/* ==================================================================
   .mp-boton-preview — el botón «Previsualizar» del campo de vídeo

   Nació el 2026-09-12 como un `btn btn-outline-secondary` dentro de un
   `.input-group`, y se veía mal por dos motivos que conviene no repetir:

   1. El `.input-group` NO junta nada en este panel. La sección de tema
      impone `border-radius: var(--form-radius-asim) !important` a todo
      `.form-control`, y Bootstrap junta las cajas quitándole el radio a
      las de en medio. Con ese !important no puede, así que quedaban una
      píldora de color y un ladrillo pegado, sin relación entre ellos.
   2. `btn-outline-secondary` es gris claro. Sobre el fondo oscuro del
      panel y al lado de un campo de color, el botón era la cosa más
      llamativa de la fila, y es la menos importante.

   Ahora es un botón discreto que toma su color del campo al que sirve:
   el mismo azul del formulario, más apagado, y la forma de la casa vía
   `.esquinas`. No lleva !important y no hace falta, porque no compite
   con la sección de tema: esa solo alcanza a input, textarea y select.
   ================================================================== */

.mp-boton-preview {
    /*
     * `flex: 0 0 auto` para que no se estire ni se encoja: el que manda el
     * ancho es el campo, que es donde se escribe. Sin esto, en la columna
     * estrecha de un modal el botón le robaba sitio a la URL.
     */
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 16px;
    background: transparent;
    color: var(--form-asim-border);
    border: 2px solid var(--form-asim-border);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.mp-boton-preview:hover:not(:disabled),
.mp-boton-preview:focus-visible:not(:disabled) {
    background: var(--form-asim-bg);
    border-color: var(--form-asim-border-focus);
    color: var(--form-asim-text);
}

/*
 * Apagado: se ATENÚA, no se pinta de gris.
 *
 * Un gris relleno sobre fondo oscuro pesa más que el botón encendido, que es
 * justo al revés de lo que tiene que pasar. Con opacidad baja el botón sigue
 * siendo el mismo objeto y se lee «todavía no», no «botón roto». Es la misma
 * receta que la hoja ya usa para los campos deshabilitados (opacity .72).
 */
.mp-boton-preview:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/*
 * En un hueco estrecho el botón se queda SOLO con el ojo.
 *
 * Los campos de vídeo viven en `col-md-6` dentro de modales, y por debajo de
 * unos 1200px la palabra «Previsualizar» empuja la URL hasta dejarla en un
 * par de centímetros. El icono solo se entiende —el `title` lo dice— y deja
 * el ancho para lo que importa.
 */
@media (max-width: 1199.98px) {
    .mp-boton-preview-texto {
        display: none;
    }
}

/*
 * BIBLIOTECA: EL NOMBRE Y LOS TIPOS PARTEN LINEA (2026-09-16).
 *
 * La plantilla pone `white-space: nowrap` a todo `.table td`, y en esta tabla
 * los nombres son largos de verdad —«ABDUCCION CON EXTENSION DE CADERA... -
 * BAND LYING ABDUCTION WITH HIP EXTENSION»—. La columna del nombre llegaba a
 * 785 px, la tabla a 1.401 en una tarjeta de 1.098, y «Centros que ya lo
 * tienen» y los botones de ACCIONES quedaban fuera de la pantalla, sin barra
 * que avisara de que estaban ahi.
 *
 * Solo esta tabla: la regla de la plantilla la usan decenas de pantallas.
 */
.tabla-biblioteca td:nth-child(1),
.tabla-biblioteca td:nth-child(3) {
    white-space: normal;
    line-height: 1.35;
}

.tabla-biblioteca td:nth-child(1) {
    min-width: 14rem;
}

.tabla-biblioteca td:nth-child(3) .badge {
    margin: 2px 0;
}

/* ==================================================================
   .campo-unidad — LA UNIDAD, DENTRO DEL CAMPO (2026-09-22)

   Hasta ahora «Plazas totales», «Target», «Duración» y «Asistencias
   reales» se pintaban con un `.input-group` de Bootstrap: el número en
   una caja y la unidad («plazas», «mins.») en OTRA caja pegada al lado.
   Con el borde grueso del panel eso se lee como dos campos distintos,
   no como un campo con su unidad, y en el modal de Agregar horario —que
   ya lleva tres filas de campos— la fila parecía partida.

   Aquí la unidad es un rótulo suelto colocado ENCIMA del campo, a la
   derecha. El campo vuelve a ser uno solo y la unidad se lee como lo que
   es: una aclaración, no un dato que se escriba.

   - `pointer-events: none` para que pulsar sobre la palabra siga
     llevando el foco al campo.
   - Se esconden las flechitas de `input[type=number]`: se dibujan en ese
     mismo borde derecho y se solaparían con el texto. El campo se sigue
     tecleando igual y las flechas de teclado ↑↓ siguen funcionando.
   - El hueco reservado va en una variable porque no todas las unidades
     miden lo mismo: «personas» no cabe donde cabe «mins.».

   LAS TRES TALLAS. El hueco no puede salir de la longitud del texto —CSS no
   sabe medirlo—, así que se elige al escribir el campo:

     .campo-unidad--corto   una o dos letras   g, %, cm, mm, kg
     .campo-unidad          de tres a seis     kg., años, mins., plazas
     .campo-unidad--largo   más de seis        personas

   No es cosmética: en Mediciones hay catorce campos en `col-lg-3` y en el
   modal de dietas la caja de gramos mide 130px en total. Reservar ahí los
   4,75rem del hueco normal para una «g» deja el número sin sitio —que es
   justo el defecto que el componente venía a quitar—.
   ================================================================== */
.campo-unidad {
    --campo-unidad-hueco: 4.75rem;
    position: relative;
}

.campo-unidad--corto {
    --campo-unidad-hueco: 2.5rem;
}

.campo-unidad--largo {
    --campo-unidad-hueco: 6rem;
}

.campo-unidad > .form-control {
    padding-right: var(--campo-unidad-hueco);
    -moz-appearance: textfield;
    appearance: textfield;
}

.campo-unidad > .form-control::-webkit-outer-spin-button,
.campo-unidad > .form-control::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.campo-unidad__texto {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 0.85rem;
    line-height: 1;
    white-space: nowrap;
    color: var(--form-text-color);
    opacity: 0.72;
}

/*
 * Ejercicios: el nombre es lo que se busca con la vista, y en MAYÚSCULAS y
 * con la traducción detrás («… - MACHINE HIP ABDUCTOR») ocupa. Sin mínimo,
 * DataTables lo dejaba en una columna de una palabra por línea (2026-09-24).
 * El fallo de fondo era otro —una columna oculta que corría los anchos, ver
 * entrenamientos-ejercicios.php—, pero el mínimo se queda.
 */
#tabla-ejercicios th.th-nombre,
#tabla-ejercicios tbody td:nth-child(2) {
    min-width: 240px;
}

/*
 * LA BANDERITA DEL IDIOMA (2026-09-27). Ver manager/idiomas.php.
 *
 * En la barra del panel, un desplegable; en el login y la recuperacion, las
 * cuatro en fila, porque quien no lee español tiene que ver la suya sin abrir
 * nada. La bandera es un SVG de flag-icons, no un emoji (Windows no los dibuja);
 * el codigo va al lado para quien no reconoce la bandera.
 */
.mp-idioma__boton {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 8px;
    text-decoration: none;
    color: inherit;
    font-weight: 600;
    font-size: 0.85rem;
}

.mp-idioma__bandera {
    width: 1.33em;
    line-height: 1;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.mp-idioma .dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mp-idioma-fila {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px 12px;
    margin-bottom: 1rem;
    font-size: 0.85rem;
}

.mp-idioma-fila a {
    color: inherit;
    opacity: 0.7;
    text-decoration: none;
    white-space: nowrap;
}

.mp-idioma-fila a:hover,
.mp-idioma-fila a.activo {
    opacity: 1;
    font-weight: 600;
}

/*
 * EL INTERRUPTOR CLARO / OSCURO (2026-09-30). Ver mp_tema_boton() en
 * manager/tema.php.
 *
 * Una pastilla con el sol a la izquierda y la luna a la derecha; la bolita
 * tapa el icono del lado del modo puesto (en oscuro, a la derecha sobre la
 * luna) y deja ver el otro, que es adonde se va al pulsar. Todo sale de
 * html[data-tema]: el JS solo cambia el atributo.
 */
.mp-tema-boton {
    display: flex;
    align-items: center;
    padding: 0 8px;
    text-decoration: none;
}

.mp-tema-boton__pista {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 52px;
    height: 26px;
    padding: 0 7px;
    border-radius: 13px;
    background: #2A3038;
    border: 1px solid var(--border-soft);
    font-size: 0.75rem;
    line-height: 1;
    transition: background-color 0.2s ease;
}

.mp-tema-boton__sol {
    color: #F5DE79;
}

.mp-tema-boton__luna {
    color: #B9C4E0;
}

.mp-tema-boton__bola {
    position: absolute;
    top: 2px;
    left: 28px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #F5F7FA;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    transition: left 0.2s ease;
}

html[data-tema="claro"] .mp-tema-boton__pista {
    background: #E7EBF0;
}

html[data-tema="claro"] .mp-tema-boton__sol {
    color: #C48A00;
}

html[data-tema="claro"] .mp-tema-boton__luna {
    color: #5B6475;
}

html[data-tema="claro"] .mp-tema-boton__bola {
    left: 2px;
    background: #FFFFFF;
}

.mp-tema-boton:focus-visible .mp-tema-boton__pista {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .mp-tema-boton__pista,
    .mp-tema-boton__bola {
        transition: none;
    }
}

/*
 * EL SET DE COLORES (2026-09-30). Ver manager/colores.php.
 *
 * El icono de la paleta en la barra, y el editor: los sets hechos como
 * tarjetas con sus cinco muestras, y debajo un selector por color.
 */
.mp-colores-boton {
    display: flex;
    align-items: center;
    padding: 0 8px;
    font-size: 1.15rem;
    color: var(--text-muted);
    text-decoration: none;
}

.mp-colores-boton:hover,
.mp-colores-boton:focus-visible {
    color: var(--text-main);
}

.mp-colores-para {
    color: var(--text-muted);
    margin-bottom: 14px;
}

.mp-colores-sets {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: 8px;
    margin-bottom: 18px;
}

.mp-colores-set {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    border: 1px solid var(--border-soft);
    border-radius: var(--form-radius-asim);
    background: var(--bg-input);
    color: var(--text-main);
    text-align: left;
    cursor: pointer;
}

.mp-colores-set:hover,
.mp-colores-set:focus-visible {
    border-color: var(--accent-blue);
}

.mp-colores-set__muestras {
    display: flex;
    height: 18px;
    border-radius: 4px;
    overflow: hidden;
}

.mp-colores-set__muestras span {
    flex: 1;
}

.mp-colores-set__nombre {
    font-size: 0.85rem;
}

.mp-colores-lista {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mp-colores-fila {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
}

/* Las etiquetas del modal son texto de lista, no rotulos de formulario. */
.mp-colores-fila label {
    margin: 0;
    font-family: var(--font-texto);
    font-size: 0.95rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    color: var(--text-main);
    cursor: pointer;
}

.mp-colores-fila input[type="color"] {
    width: 46px;
    height: 32px;
    padding: 2px;
    border: 1px solid var(--border-soft);
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
}

.mp-colores-aviso {
    margin: 14px 0 0;
    color: var(--accent-orange);
}


/* ------------------------------------------------------------------
   actividades/actividades-asistencias.php
   Estaba en su propio <style>; trasladado el 2026-09-30.
   ------------------------------------------------------------------ */
:where(html[data-pantalla="actividades/actividades-asistencias"]) .dt-search {
    display: none !important;
}

:where(html[data-pantalla="actividades/actividades-asistencias"]) .th-foto,
:where(html[data-pantalla="actividades/actividades-asistencias"]) .td-foto {
    width: 70px;
    text-align: center;
}

:where(html[data-pantalla="actividades/actividades-asistencias"]) .th-acciones,
:where(html[data-pantalla="actividades/actividades-asistencias"]) .td-acciones {
    width: 120px;
    text-align: right;
}


/* ------------------------------------------------------------------
   actividades/actividades-esfuerzos.php
   Estaba en su propio <style>; trasladado el 2026-09-30.
   ------------------------------------------------------------------ */
:where(html[data-pantalla="actividades/actividades-esfuerzos"]) .dt-search {
    display: none !important;
}


/* ------------------------------------------------------------------
   actividades/actividades-tipos.php
   Estaba en su propio <style>; trasladado el 2026-09-30.
   ------------------------------------------------------------------ */
:where(html[data-pantalla="actividades/actividades-tipos"]) .dt-search {
    display: none !important;
}


/* ------------------------------------------------------------------
   centro/centro-permisos.php
   Estaba en su propio <style>; trasladado el 2026-09-30.
   ------------------------------------------------------------------ */
:where(html[data-pantalla="centro/centro-permisos"]) .th-icon,
:where(html[data-pantalla="centro/centro-permisos"]) .td-icon,
:where(html[data-pantalla="centro/centro-permisos"]) .th-checkbox,
:where(html[data-pantalla="centro/centro-permisos"]) .td-checkbox {
    text-align: left;
    width: 65px;
}

@media(min-width: 600px){
    :where(html[data-pantalla="centro/centro-permisos"]) .modal-dialog{
        width: 600px;
    }
}


/* ------------------------------------------------------------------
   clases-virtuales.php
   Estaba en su propio <style>; trasladado el 2026-09-30.
   ------------------------------------------------------------------ */
/* Estilo para el contenedor de etiquetas */
:where(html[data-pantalla="clases-virtuales"]) .badge-etiqueta {
    display: inline-block;
    background-color: #e0e0e0;
    color: #333;
    padding: 4px 10px;
    margin: 2px;
    border-radius: 16px;
    font-size: 12px;
    line-height: 1.4;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.2s ease;
    cursor: default;
    border: 1px solid #d0d0d0;
}

:where(html[data-pantalla="clases-virtuales"]) .badge-etiqueta:hover {
    background-color: #d0d0d0;
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

:where(html[data-pantalla="clases-virtuales"]) .etiquetas-container {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    min-height: 32px;
    /* Altura mínima para celdas vacías */
}

:where(html[data-pantalla="clases-virtuales"]) table.dataTable tbody td {
    word-wrap: break-word;
    white-space: normal;
    vertical-align: middle;
    /* Mejor alineación vertical */
}

:where(html[data-pantalla="clases-virtuales"]) #popupNuevo .tag-container {
    padding: 0;
}

:where(html[data-pantalla="clases-virtuales"]) #popupNuevo .tag-container>.choices {
    width: 100%;
}


/* ------------------------------------------------------------------
   cuestionarios.php
   Estaba en su propio <style>; trasladado el 2026-09-30.
   ------------------------------------------------------------------ */
:where(html[data-pantalla="cuestionarios"]) .dt-search{
    display: block !important;
}


/* ------------------------------------------------------------------
   dietas/dietas-diarias.php
   Estaba en su propio <style>; trasladado el 2026-09-30.
   ------------------------------------------------------------------ */
/* Las reglas del editor de dieta viajaron con el a modal_dieta.php. */

/*
 * La rejilla de «Añadir a un plan». Son las mismas clases y las mismas
 * medidas que el calendario de planes-nutricionales.php a propósito: el
 * usuario está eligiendo un día de un plan, y tiene que ver lo mismo que
 * ve en la pantalla de Planes.
 */
:where(html[data-pantalla="dietas/dietas-diarias"]) .semana-caja { border: 1px solid rgba(var(--n-velo, 255, 255, 255),.12); border-radius: .5rem; padding: 1rem; margin-bottom: 1rem; }
:where(html[data-pantalla="dietas/dietas-diarias"]) .semana-dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .5rem; }
@media (max-width: 992px) { :where(html[data-pantalla="dietas/dietas-diarias"]) .semana-dias { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
:where(html[data-pantalla="dietas/dietas-diarias"]) .dia-caja { border: 1px dashed rgba(var(--n-velo, 255, 255, 255),.2); border-radius: .4rem; padding: .6rem; min-height: 118px;
            display: flex; flex-direction: column; justify-content: space-between; }
:where(html[data-pantalla="dietas/dietas-diarias"]) .dia-caja.con-dieta { border-style: solid; border-color: rgba(76,175,80,.55); background: rgba(76,175,80,.07); }
:where(html[data-pantalla="dietas/dietas-diarias"]) .dia-caja.elegible { cursor: pointer; }
:where(html[data-pantalla="dietas/dietas-diarias"]) .dia-caja.elegido { border-style: solid; border-color: rgba(33,150,243,.85); background: rgba(33,150,243,.14); }
:where(html[data-pantalla="dietas/dietas-diarias"]) .dia-caja .dia-titulo { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; opacity: .65; }
:where(html[data-pantalla="dietas/dietas-diarias"]) .dia-caja .dia-dieta { font-size: .86rem; font-weight: 600; line-height: 1.2; margin: .35rem 0; }
:where(html[data-pantalla="dietas/dietas-diarias"]) .dia-caja .dia-kcal { font-size: .76rem; opacity: .75; font-variant-numeric: tabular-nums; }
:where(html[data-pantalla="dietas/dietas-diarias"]) .dia-caja .dia-libre { font-size: .8rem; opacity: .45; margin: .35rem 0; }


/* ------------------------------------------------------------------
   dietas/planes-nutricionales.php
   Estaba en su propio <style>; trasladado el 2026-09-30.
   ------------------------------------------------------------------ */
:where(html[data-pantalla="dietas/planes-nutricionales"]) .semana-caja { border: 1px solid rgba(var(--n-velo, 255, 255, 255),.12); border-radius: .5rem; padding: 1rem; margin-bottom: 1rem; }
:where(html[data-pantalla="dietas/planes-nutricionales"]) .semana-dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .5rem; }
@media (max-width: 992px) { :where(html[data-pantalla="dietas/planes-nutricionales"]) .semana-dias { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
:where(html[data-pantalla="dietas/planes-nutricionales"]) .dia-caja { border: 1px dashed rgba(var(--n-velo, 255, 255, 255),.2); border-radius: .4rem; padding: .6rem; min-height: 118px;
            display: flex; flex-direction: column; justify-content: space-between; }
:where(html[data-pantalla="dietas/planes-nutricionales"]) .dia-caja.con-dieta { border-style: solid; border-color: rgba(76,175,80,.55); background: rgba(76,175,80,.07); }
:where(html[data-pantalla="dietas/planes-nutricionales"]) .dia-caja .dia-titulo { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; opacity: .65; }
:where(html[data-pantalla="dietas/planes-nutricionales"]) .dia-caja .dia-dieta { font-size: .86rem; font-weight: 600; line-height: 1.2; margin: .35rem 0; }
:where(html[data-pantalla="dietas/planes-nutricionales"]) .dia-caja .dia-kcal { font-size: .76rem; opacity: .75; font-variant-numeric: tabular-nums; }
:where(html[data-pantalla="dietas/planes-nutricionales"]) .dia-caja .dia-libre { font-size: .8rem; opacity: .45; margin: .35rem 0; }
/* La marca de los dias que llevan su propia version de la dieta. */
:where(html[data-pantalla="dietas/planes-nutricionales"]) .dia-caja .dia-propia { font-size: .72rem; color: #4fc3f7; margin-top: .2rem; }
:where(html[data-pantalla="dietas/planes-nutricionales"]) .lista-dietas { max-height: 320px; overflow-y: auto; }
:where(html[data-pantalla="dietas/planes-nutricionales"]) .lista-dietas .list-group-item { cursor: pointer; }


/* ------------------------------------------------------------------
   empleados/categorias.php
   Estaba en su propio <style>; trasladado el 2026-09-30.
   ------------------------------------------------------------------ */
:where(html[data-pantalla="empleados/categorias"]) .th-icon,
:where(html[data-pantalla="empleados/categorias"]) .td-icon,
:where(html[data-pantalla="empleados/categorias"]) .th-checkbox,
:where(html[data-pantalla="empleados/categorias"]) .td-checkbox {
    text-align: left;
    width: 65px;
}

:where(html[data-pantalla="empleados/categorias"]) #filtraje .choices,
:where(html[data-pantalla="empleados/categorias"]) #filtraje select.form-select {
    min-height: 50px;
}

@media(min-width: 600px) {
    :where(html[data-pantalla="empleados/categorias"]) .modal-dialog {
        width: 800px;
    }
}


/* ------------------------------------------------------------------
   empleados/empleados.php
   Estaba en su propio <style>; trasladado el 2026-09-30.
   ------------------------------------------------------------------ */
:where(html[data-pantalla="empleados/empleados"]) .th-icon,
:where(html[data-pantalla="empleados/empleados"]) .td-icon {
    text-align: left;
    width: 65px;
}

:where(html[data-pantalla="empleados/empleados"]) #filtraje .choices,
:where(html[data-pantalla="empleados/empleados"]) #filtraje select.form-select {
    min-height: 50px;
}

@media(max-width: 768px) {
    :where(html[data-pantalla="empleados/empleados"]) .fc-timeGridWeek-view .fc-event-title.fc-sticky {
        display: none;
    }
}


/* ------------------------------------------------------------------
   empleados/perfil-empleado.php
   Estaba en su propio <style>; trasladado el 2026-09-30.
   ------------------------------------------------------------------ */
:where(html[data-pantalla="empleados/perfil-empleado"]) .content-wrapper {
    padding-bottom: 100px;
}

:where(html[data-pantalla="empleados/perfil-empleado"]) .content-wrapper .choices {
    margin-bottom: 0;
}

/* .horario-laboral-card {
    border: 1px solid rgba(var(--n-velo, 255, 255, 255), 0.08);
    border-radius: 18px;
    background: var(--n-sup-1, #191c24);
} */

:where(html[data-pantalla="empleados/perfil-empleado"]) .horario-laboral-days {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

:where(html[data-pantalla="empleados/perfil-empleado"]) .horario-dia-btn {
    border-radius: 999px;
    min-width: 46px;
    height: 42px;
    font-weight: 600;
}

:where(html[data-pantalla="empleados/perfil-empleado"]) .horario-dia-btn.active {
    background: #ff6600 !important;
    border-color: #ff6600 !important;
    color: #fff !important;
}

:where(html[data-pantalla="empleados/perfil-empleado"]) .horario-laboral-toolbar {
    border: 1px dashed rgb(245 245 245 / 45%);
    background: rgb(242 242 242 / 8%);
    border-radius: 16px;
    padding: 16px;
}

:where(html[data-pantalla="empleados/perfil-empleado"]) .horario-dia-card {
    border: 1px solid rgba(var(--n-velo, 255, 255, 255), 0.08);
    border-radius: 16px;
    background: var(--n-sup-1, #20232d);
    padding: 16px;
    margin-bottom: 12px;
}

:where(html[data-pantalla="empleados/perfil-empleado"]) .horario-dia-card.is-empty {
    opacity: 0.75;
}

:where(html[data-pantalla="empleados/perfil-empleado"]) .horario-range-row {
    display: flex;
    gap: 10px;
    align-items: end;
    margin-bottom: 10px;
}

:where(html[data-pantalla="empleados/perfil-empleado"]) .horario-range-row .form-control {
    min-width: 120px;
}

:where(html[data-pantalla="empleados/perfil-empleado"]) .horario-empty-message {
    border: 1px dashed rgba(var(--n-velo, 255, 255, 255), 0.18);
    border-radius: 12px;
    padding: 12px;
    color: var(--n-texto-suave, #aaa);
    font-size: 13px;
}

@media(max-width: 768px) {
    :where(html[data-pantalla="empleados/perfil-empleado"]) .horario-range-row {
        flex-wrap: wrap;
    }

    :where(html[data-pantalla="empleados/perfil-empleado"]) .horario-range-row .form-control,
:where(html[data-pantalla="empleados/perfil-empleado"]) .horario-range-row .btn {
        width: 100%;
    }
}

@media(max-width:500px) {
    /* .content-wrapper {
        padding-bottom: 200px;
    } */
}


/* ------------------------------------------------------------------
   empleados/servicios.php
   Estaba en su propio <style>; trasladado el 2026-09-30.
   ------------------------------------------------------------------ */
:where(html[data-pantalla="empleados/servicios"]) .th-icon,
:where(html[data-pantalla="empleados/servicios"]) .td-icon,
:where(html[data-pantalla="empleados/servicios"]) .th-checkbox,
:where(html[data-pantalla="empleados/servicios"]) .td-checkbox {
    text-align: left;
    width: 65px;
}

:where(html[data-pantalla="empleados/servicios"]) #filtraje .choices,
:where(html[data-pantalla="empleados/servicios"]) #filtraje select.form-select {
    min-height: 50px;
}


/* ------------------------------------------------------------------
   entrenamientos-deportes.php
   Estaba en su propio <style>; trasladado el 2026-09-30.
   ------------------------------------------------------------------ */
:where(html[data-pantalla="entrenamientos-deportes"]) .dt-search {
    display: none !important;
}


/* ------------------------------------------------------------------
   entrenamientos-ejercicios.php
   Estaba en su propio <style>; trasladado el 2026-09-30.
   ------------------------------------------------------------------ */
:where(html[data-pantalla="entrenamientos-ejercicios"]) .modal-content {
    background-color: var(--n-sup-1, #1e1e1e);
    /* Fondo oscuro para el modal */
    color: #e0e0e0;
    /* Texto claro en el modal */
}

:where(html[data-pantalla="entrenamientos-ejercicios"]) .modal-header,
:where(html[data-pantalla="entrenamientos-ejercicios"]) .modal-footer {
    border-color: var(--n-borde, #333);
    /* Bordes más oscuros */
}

:where(html[data-pantalla="entrenamientos-ejercicios"]) .btn-close {
    filter: invert(1);
    /* Invertir el color del botón de cierre para que sea visible */
}

:where(html[data-pantalla="entrenamientos-ejercicios"]) .tag-container2 {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 5px;
    border-radius: 5px;
    min-height: 38px;
    align-items: center;
}

:where(html[data-pantalla="entrenamientos-ejercicios"]) .tag2 {
    background-color: #007bff;
    color: white;
    padding: 5px 10px;
    border-radius: 15px;
    display: flex;
    align-items: center;
}

:where(html[data-pantalla="entrenamientos-ejercicios"]) .tag2 .remove {
    margin-left: 8px;
    cursor: pointer;
}

:where(html[data-pantalla="entrenamientos-ejercicios"]) .form-control,
:where(html[data-pantalla="entrenamientos-ejercicios"]) .form-select,
:where(html[data-pantalla="entrenamientos-ejercicios"]) .form-textarea {
    background-color: var(--n-sup-2, #2d2d2d);
    /* Fondo oscuro para inputs */
    color: #e0e0e0;
    /* Texto claro en inputs */
    border-color: #444;
    /* Bordes oscuros para inputs */
}

:where(html[data-pantalla="entrenamientos-ejercicios"]) .form-control:focus,
:where(html[data-pantalla="entrenamientos-ejercicios"]) .form-select:focus,
:where(html[data-pantalla="entrenamientos-ejercicios"]) .form-textarea:focus {
    background-color: var(--n-sup-3, #3d3d3d);
    /* Fondo más claro al enfocar */
    border-color: #666;
    /* Borde más claro al enfocar */
    color: #e0e0e0;
    /* Texto claro */
}

/* Estilos personalizados adicionales */
:where(html[data-pantalla="entrenamientos-ejercicios"]) .btn-outline-secondary {
    color: var(--n-texto, #e0e0e0);
    /* Texto claro */
    border-color: #666;
    /* Borde oscuro */
}

:where(html[data-pantalla="entrenamientos-ejercicios"]) .btn-outline-secondary:hover {
    background-color: var(--n-sup-3, #666);
    /* Fondo oscuro al pasar el mouse */
    color: #e0e0e0;
    /* Texto claro */
}

:where(html[data-pantalla="entrenamientos-ejercicios"]) .nav-tabs .nav-link {
    color: var(--n-texto, #e0e0e0);
    /* Texto claro en las pestañas */
    background-color: #2d2d2d;
    /* Fondo oscuro para las pestañas */
    border-color: #444;
    /* Borde oscuro */
}

:where(html[data-pantalla="entrenamientos-ejercicios"]) .nav-tabs .nav-link.active {
    background-color: var(--n-sup-1, #1e1e1e);
    /* Fondo oscuro para la pestaña activa */
    border-color: #444;
    /* Borde oscuro */
    color: #ff5722;
    /* Color primario para la pestaña activa */
}

:where(html[data-pantalla="entrenamientos-ejercicios"]) .info-icon {
    color: var(--n-texto-suave, #999);
    /* Color gris para íconos de información */
}

:where(html[data-pantalla="entrenamientos-ejercicios"]) .char-count {
    color: var(--n-texto-suave, #999);
    /* Color gris para el contador de caracteres */
}

:where(html[data-pantalla="entrenamientos-ejercicios"]) .info-icon {
    cursor: help;
    margin-left: 4px;
    color: var(--n-texto-suave, #999);
}

:where(html[data-pantalla="entrenamientos-ejercicios"]) .image-preview {
    background-color: var(--n-sup-2, #2d2d2d);
    /* Fondo oscuro para la previsualización de imágenes */
}

:where(html[data-pantalla="entrenamientos-ejercicios"]) .image-preview {
    width: 60%;
    aspect-ratio: 4/3;
    background-color: var(--n-sup-2, #2d2d2d);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 8px;

}

:where(html[data-pantalla="entrenamientos-ejercicios"]) .image-preview img {
    max-width: 60%;
    max-height: 100%;
    object-fit: contain;
}

/* Estilo para el contenedor de etiquetas */
:where(html[data-pantalla="entrenamientos-ejercicios"]) .badge-etiqueta {
    display: inline-block;
    background-color: #e0e0e0;
    color: #333;
    padding: 4px 10px;
    margin: 2px;
    border-radius: 16px;
    font-size: 12px;
    line-height: 1.4;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.2s ease;
    cursor: default;
    border: 1px solid #d0d0d0;
}

:where(html[data-pantalla="entrenamientos-ejercicios"]) .badge-etiqueta:hover {
    background-color: #d0d0d0;
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

:where(html[data-pantalla="entrenamientos-ejercicios"]) .etiquetas-container {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    min-height: 32px;
    /* Altura mínima para celdas vacías */
}

:where(html[data-pantalla="entrenamientos-ejercicios"]) table.dataTable tbody td {
    word-wrap: break-word;
    white-space: normal;
    vertical-align: middle;
    /* Mejor alineación vertical */
}

/* .th-checkbox, */
/* .td-checkbox  */
:where(html[data-pantalla="entrenamientos-ejercicios"]) .th-icon,
:where(html[data-pantalla="entrenamientos-ejercicios"]) .td-icon {
    text-align: left;
    width: 65px;
}

:where(html[data-pantalla="entrenamientos-ejercicios"]) .th-checkbox span.dt-column-order {
    display: none;
}

:where(html[data-pantalla="entrenamientos-ejercicios"]) #filtraje .choices,
:where(html[data-pantalla="entrenamientos-ejercicios"]) #filtraje select.form-select {
    min-height: 50px;
}

:where(html[data-pantalla="entrenamientos-ejercicios"]) #modalEjercicio .choices {
    width: 100%;
}

:where(html[data-pantalla="entrenamientos-ejercicios"]) .image-drop-edit {
    position: relative;
    border: 2px dashed var(--n-borde, #444);
    border-radius: 8px;
    transition: border-color 0.2s ease, background-color 0.2s ease;
    cursor: pointer;
}

:where(html[data-pantalla="entrenamientos-ejercicios"]) .image-drop-edit.drag-over {
    border-color: #007bff;
    background-color: var(--n-sup-3, #343a40);
}

:where(html[data-pantalla="entrenamientos-ejercicios"]) .drop-hint-edit {
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
    text-align: center;
    font-size: 13px;
    color: #bdbdbd;
    background: rgba(0, 0, 0, 0.45);
    padding: 6px 8px;
    border-radius: 6px;
    pointer-events: none;
}


/* ------------------------------------------------------------------
   entrenamientos-grupo-muscular.php
   Estaba en su propio <style>; trasladado el 2026-09-30.
   ------------------------------------------------------------------ */
:where(html[data-pantalla="entrenamientos-grupo-muscular"]) .dt-search {
    display: none !important;
}


/* ------------------------------------------------------------------
   entrenamientos-programas-tipo.php
   Estaba en su propio <style>; trasladado el 2026-09-30.
   ------------------------------------------------------------------ */
:where(html[data-pantalla="entrenamientos-programas-tipo"]) .dt-search {
    display: none !important;
}


/* ------------------------------------------------------------------
   entrenamientos-programas.php
   Estaba en su propio <style>; trasladado el 2026-09-30.
   ------------------------------------------------------------------ */
:where(html[data-pantalla="entrenamientos-programas"]) .popup-contenido button.btn-sm {
  margin: 10px 10px 0 10px;
}

:where(html[data-pantalla="entrenamientos-programas"]) .btn-scroll {
  scrollbar-color: #666 transparent;
  /* Firefox */
  scroll-behavior: smooth;
}


:where(html[data-pantalla="entrenamientos-programas"]) #btnCrearPrograma {
  display: none !important;
}

:where(html[data-pantalla="entrenamientos-programas"]) #example_wrapper .dt-search {
  display: block !important;
}

/* Estructura jerárquica deseada:
  1. modalRutinaPro (z-index más alto)
  2. addEventModal 
  3. miModal (z-index más bajo)
  4. ModalEditar (z-index igual al crear para que no se pueda hacer las dos funciones al mismo tiempo, por precaución)
*/

/* Modal principal (el más importante) */
/* Configuración principal */
:where(html[data-pantalla="entrenamientos-programas"]) #modalRutinaPro {
  z-index: 1060 !important;
}

:where(html[data-pantalla="entrenamientos-programas"]) #addEventModal {
  z-index: 1055 !important;
}

:where(html[data-pantalla="entrenamientos-programas"]) #miModal {
  z-index: 1050 !important;
}

:where(html[data-pantalla="entrenamientos-programas"]) #ModalEditar {
  z-index: 1050 !important;
}

/* Backdrops inteligentes */
:where(html[data-pantalla="entrenamientos-programas"]) .modal-backdrop {
  position: fixed;
  z-index: 1040 !important;
}

/* Cuando modalRutinaPro está abierto */
/* body.modal-open #modalRutinaPro~.modal-backdrop {
  z-index: 1059 !important;
} */

/* Cuando addEventModal está abierto (y modalRutinaPro no) */
:where(html[data-pantalla="entrenamientos-programas"]) body.modal-open:not(.show #modalRutinaPro) #addEventModal~.modal-backdrop {
  z-index: 1054 !important;
}

/* Cuando solo miModal está abierto */
:where(html[data-pantalla="entrenamientos-programas"]) body.modal-open:not(.show #modalRutinaPro):not(.show #addEventModal) #miModal~.modal-backdrop {
  z-index: 1049 !important;
}

/*misma condición que al crear */
:where(html[data-pantalla="entrenamientos-programas"]) body.modal-open:not(.show #modalRutinaPro):not(.show #addEventModal) #ModalEditar~.modal-backdrop {
  z-index: 1049 !important;
}

/* Ocultar backdrops de modales no activos */
/* .modal:not(.show)~.modal-backdrop {
  display: none !important;
} */

:where(html[data-pantalla="entrenamientos-programas"]) .image-upload-container2 {
  border: 2px dashed #ccc;
  /* Borde discontinuo */
  padding: 20px;
  /* Espaciado interno */
  text-align: center;
  /* Centrar el contenido */
  border-radius: 8px;
  /* Bordes redondeados */
  background-color: #2A3038;
  /* Fondo claro */
  cursor: pointer;
  /* Cambiar el cursor al pasar el mouse */
  transition: border-color 0.3s ease;
  /* Transición suave */
}

:where(html[data-pantalla="entrenamientos-programas"]) .image-upload-container2:hover {
  border-color: #007bff;
  /* Cambiar color del borde al pasar el mouse */
}

:where(html[data-pantalla="entrenamientos-programas"]) .image-upload-container2 p {
  margin-bottom: 10px;
  /* Espacio debajo del texto */
  color: #666;
  /* Color del texto */
}

:where(html[data-pantalla="entrenamientos-programas"]) .listado-ejercicios {
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

:where(html[data-pantalla="entrenamientos-programas"]) .list-group-item {
  cursor: pointer;
  background-color: var(--n-sup-3, #666);
}

:where(html[data-pantalla="entrenamientos-programas"]) .list-group-item:hover {
  background-color: #f8f9fa;
}

:where(html[data-pantalla="entrenamientos-programas"]) .dropzone {
  border: 2px dashed #ccc;
  padding: 20px;
  text-align: center;
  color: var(--n-texto-tenue, #666);
  font-size: 16px;
  cursor: pointer;
  min-height: 150px;
  /* Altura mínima */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

:where(html[data-pantalla="entrenamientos-programas"]) .dropzone p {
  margin: 0;
  /* Eliminar el margen por defecto del párrafo */
}

/* Estilos generales */
:where(html[data-pantalla="entrenamientos-programas"]) body {
  font-family: Arial, sans-serif;
  /* background-color: #1a1a1a; */
  color: #e0e0e0;
}

/* Estilos para las pestañas */
:where(html[data-pantalla="entrenamientos-programas"]) .nav-tabs .nav-link.active {
  color: var(--main-blue);
  border-bottom: 2px solid var(--main-blue);
  border-top: none;
  border-left: none;
  border-right: none;
  background-color: transparent;
}

:where(html[data-pantalla="entrenamientos-programas"]) .nav-tabs .nav-link {
  color: var(--n-texto-suave, #a0a0a0);
  border: none;
}

/* Estilos para el planificador */
:where(html[data-pantalla="entrenamientos-programas"]) .week-container {
  margin-bottom: 20px;
  border: 1px solid var(--n-borde, #333);
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--n-sup-2, #252525);
}

:where(html[data-pantalla="entrenamientos-programas"]) .week-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  background-color: var(--n-sup-2, #2c2c2c);
  border-bottom: 1px solid var(--n-borde, #333);
}

:where(html[data-pantalla="entrenamientos-programas"]) .week-title {
  font-weight: 500;
  margin: 0;
  color: var(--n-texto, #e0e0e0);
}

:where(html[data-pantalla="entrenamientos-programas"]) .week-actions {
  display: flex;
  gap: 10px;
}

:where(html[data-pantalla="entrenamientos-programas"]) .week-days {
  display: flex;
  flex-wrap: wrap;
  padding: 15px;
  gap: 10px;
}

:where(html[data-pantalla="entrenamientos-programas"]) .day-container {
  flex: 1;
  min-width: 120px;
  border: 1px solid var(--n-borde, #333);
  border-radius: 4px;
  background-color: var(--n-sup-2, #2a2a2a);
}

:where(html[data-pantalla="entrenamientos-programas"]) .day-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background-color: var(--n-sup-3, #333);
  border-bottom: 1px solid var(--n-borde, #444);
}

:where(html[data-pantalla="entrenamientos-programas"]) .day-title {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--n-texto, #e0e0e0);
}

:where(html[data-pantalla="entrenamientos-programas"]) .day-content {
  padding: 10px;
  min-height: 100px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  position: relative;
}

/*
 * ARRASTRAR EVENTOS ENTRE DIAS (2026-08-26).
 *
 * Los eventos del planificador se creaban y se duplicaban, pero no habia
 * forma de moverlos de dia: no existia ni una linea de arrastre en toda la
 * pantalla. Se resuelve con el sortable de jQuery UI, que ya carga esta
 * misma pantalla en la linea ~1686 -y que usa igual modal_crear_rutinas.php-.
 *
 * El helper se saca al <body> a proposito: .week-container tiene
 * overflow:hidden y recorta cualquier cosa que se salga de la semana, asi
 * que arrastrando dentro del contenedor la tarjeta desaparecia a mitad de
 * camino.
 */
:where(html[data-pantalla="entrenamientos-programas"]) .event-item {
  cursor: grab;

  /*
   * Sin esto, arrastrar la tarjeta selecciona su texto en vez de moverla:
   * es lo que se ve en el video del 2026-08-25, con "Dia 2" y "Dia 3" en
   * azul de seleccion despues de intentar arrastrar.
   */
  user-select: none;
  -webkit-user-select: none;
}

:where(html[data-pantalla="entrenamientos-programas"]) .event-item.ui-sortable-helper {
  cursor: grabbing;
  z-index: 2000;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.55);
  opacity: 0.95;
}

/* El boton de "Mas opciones" no arrastra: abre su menu. */
:where(html[data-pantalla="entrenamientos-programas"]) .event-item .event-actions {
  cursor: default;
}

:where(html[data-pantalla="entrenamientos-programas"]) .event-placeholder {
  border: 1px dashed var(--main-blue);
  border-radius: 4px;
  background-color: rgba(0, 123, 255, 0.06);
  margin-bottom: 8px;
}

/*
 * Mientras se arrastra, el dia de destino se marca. Sin esto no se ve donde
 * va a caer la tarjeta: los dias vacios son un rectangulo gris igual que el
 * fondo.
 */
:where(html[data-pantalla="entrenamientos-programas"]) .day-content.day-content-activo {
  outline: 1px dashed var(--n-borde, #555);
  outline-offset: -4px;
}

/* Estilos para filas seleccionables */
:where(html[data-pantalla="entrenamientos-programas"]) .week-container.selected {
  border: 2px solid #007bff;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
}

:where(html[data-pantalla="entrenamientos-programas"]) .week-checkbox {
  margin-right: 10px;
}

/* Estilos para botones de acción */
:where(html[data-pantalla="entrenamientos-programas"]) .action-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--n-texto-suave, #a0a0a0);
  transition: color 0.2s;
}

:where(html[data-pantalla="entrenamientos-programas"]) .action-btn:hover {
  color: var(--main-blue);
}

:where(html[data-pantalla="entrenamientos-programas"]) .action-btn.delete:hover {
  color: #dc3545;
}

:where(html[data-pantalla="entrenamientos-programas"]) .action-btn.duplicate:hover {
  color: #007bff;
}

/* Estilos para el botón de añadir semana */
:where(html[data-pantalla="entrenamientos-programas"]) #btn-add-week {
  color: var(--main-blue);
  font-weight: 500;
}

:where(html[data-pantalla="entrenamientos-programas"]) #btn-add-week:hover {
  color: var(--main-blue);
}

/* Estilos para el botón de añadir evento */
:where(html[data-pantalla="entrenamientos-programas"]) .add-event-btn {
  color: var(--main-blue);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
}

:where(html[data-pantalla="entrenamientos-programas"]) .add-event-btn:hover {
  color: var(--main-blue);
}

/* Estilos para los controles de expansión */
:where(html[data-pantalla="entrenamientos-programas"]) .expand-controls {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  margin-left: -20px;
}

:where(html[data-pantalla="entrenamientos-programas"]) .expand-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--n-texto-tenue, #666);
  font-size: 18px;
  padding: 5px;
}

:where(html[data-pantalla="entrenamientos-programas"]) .expand-btn:hover {
  color: var(--n-texto-suave, #a0a0a0);
}

:where(html[data-pantalla="entrenamientos-programas"]) .week-outer-container {
  position: relative;
  padding-left: 20px;
  margin-bottom: 20px;
}

/* Estilos para el modal de añadir evento */
:where(html[data-pantalla="entrenamientos-programas"]) #addEventModal .modal-content {
  background-color: var(--n-sup-2, #2a2a2a);
  color: var(--n-texto, #e0e0e0);
  border: 1px solid var(--n-borde, #444);
}

:where(html[data-pantalla="entrenamientos-programas"]) #addEventModal .modal-header {
  border-bottom: none;
}

:where(html[data-pantalla="entrenamientos-programas"]) #addEventModal .modal-footer {
  border-top: none;
}

:where(html[data-pantalla="entrenamientos-programas"]) #addEventModal .btn-primary {
  background-color: var(--main-blue);
  border-color: var(--main-blue);
}

:where(html[data-pantalla="entrenamientos-programas"]) #addEventModal .btn-primary:hover {
  background-color: var(--main-blue);
  border-color: var(--main-blue);
}

:where(html[data-pantalla="entrenamientos-programas"]) #addEventModal .btn-secondary {
  background-color: var(--n-sup-3, #444);
  border-color: var(--n-borde, #444);
}

:where(html[data-pantalla="entrenamientos-programas"]) #addEventModal .form-select,
:where(html[data-pantalla="entrenamientos-programas"]) #addEventModal .form-control {
  background-color: var(--n-sup-3, #333);
  border-color: var(--n-borde, #444);
  color: var(--n-texto, #e0e0e0);
}

:where(html[data-pantalla="entrenamientos-programas"]) #addEventModal .form-select:focus,
:where(html[data-pantalla="entrenamientos-programas"]) #addEventModal .form-control:focus {
  border-color: var(--main-blue);
  /* box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25); */
  background-color: #333;
  color: var(--n-texto, #e0e0e0);
}

/* Estilos para que el modal se muestre por encima de otros modales */
:where(html[data-pantalla="entrenamientos-programas"]) #addEventModal {
  z-index: 1060;
}

:where(html[data-pantalla="entrenamientos-programas"]) .modal-backdrop.show:nth-of-type(2) {
  z-index: 1055;
}

/* Añadir estos estilos para los eventos */
:where(html[data-pantalla="entrenamientos-programas"]) .event-item {
  background-color: var(--n-sup-2, #2a2a2a);
  border-radius: 4px;
  padding: 8px 12px;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  border-left: 3px solid transparent;
}

:where(html[data-pantalla="entrenamientos-programas"]) .event-info {
  flex-grow: 1;
}

:where(html[data-pantalla="entrenamientos-programas"]) .event-type {
  font-weight: 500;
  font-size: 14px;
  color: var(--main-blue);
}

:where(html[data-pantalla="entrenamientos-programas"]) .event-title {
  font-size: 13px;
  color: var(--n-texto, #e0e0e0);
}

:where(html[data-pantalla="entrenamientos-programas"]) .event-actions {
  display: flex;
  gap: 5px;
}

:where(html[data-pantalla="entrenamientos-programas"]) .event-actions button {
  padding: 0;
  color: var(--n-texto-suave, #a0a0a0);
}

:where(html[data-pantalla="entrenamientos-programas"]) .event-actions button:hover {
  color: var(--main-blue);
}

:where(html[data-pantalla="entrenamientos-programas"]) .event-actions .delete-event:hover {
  color: #dc3545;
}

/* Para el dropdown del buscador de Programas */
:where(html[data-pantalla="entrenamientos-programas"]) #ProgramaDropdown {
  position: absolute;
  z-index: 1000;
  background-color: var(--n-sup-3, #333);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
  border: 1px solid var(--n-borde, #444);
  color: var(--n-texto, #e0e0e0);
}

:where(html[data-pantalla="entrenamientos-programas"]) #ProgramaDropdown .dropdown-item {
  padding: 0.5rem 1rem;
  cursor: pointer;
  color: var(--n-texto, #e0e0e0);
}

:where(html[data-pantalla="entrenamientos-programas"]) #ProgramaDropdown .dropdown-item:hover {
  background-color: var(--n-sup-3, #444);
}

:where(html[data-pantalla="entrenamientos-programas"]) #ProgramaDropdown .text-muted {
  color: var(--n-texto-suave, #a0a0a0) !important;
}

/* Estilos para campos con borde naranja */
:where(html[data-pantalla="entrenamientos-programas"]) .form-control:focus,
:where(html[data-pantalla="entrenamientos-programas"]) .form-select:focus {
  border-color: var(--main-blue);
  /* box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25); */
}

/* Estilos para los contenedores de imágenes */
:where(html[data-pantalla="entrenamientos-programas"]) .image-upload-container {
  border: 2px dashed var(--n-borde, #444);
  cursor: pointer;
  background-color: var(--n-sup-3, #333);
}

:where(html[data-pantalla="entrenamientos-programas"]) .image-upload-container:hover {
  border-color: var(--main-blue);
}

/* Estilos para los radio buttons */
:where(html[data-pantalla="entrenamientos-programas"]) .form-check-input:checked {
  background-color: var(--main-blue);
  border-color: var(--main-blue);
}

:where(html[data-pantalla="entrenamientos-programas"]) .form-check-input {
  background-color: var(--n-sup-3, #333);
  border-color: var(--n-borde, #444);
}

/* Estilos para campos requeridos */
:where(html[data-pantalla="entrenamientos-programas"]) .form-label:has(+ .form-control[required]),
:where(html[data-pantalla="entrenamientos-programas"]) .form-label:has(+ .form-select[required]),
:where(html[data-pantalla="entrenamientos-programas"]) .form-label:has(+ .input-group .form-control[required]),
:where(html[data-pantalla="entrenamientos-programas"]) .form-label:has(+ .input-group .form-select[required]),
:where(html[data-pantalla="entrenamientos-programas"]) .form-label:has(+ .campo-unidad .form-control[required]) {
  position: relative;
}

:where(html[data-pantalla="entrenamientos-programas"]) .form-label:has(+ .form-control[required])::before,
:where(html[data-pantalla="entrenamientos-programas"]) .form-label:has(+ .form-select[required])::before,
:where(html[data-pantalla="entrenamientos-programas"]) .form-label:has(+ .input-group .form-control[required])::before,
:where(html[data-pantalla="entrenamientos-programas"]) .form-label:has(+ .input-group .form-select[required])::before,
:where(html[data-pantalla="entrenamientos-programas"]) .form-label:has(+ .campo-unidad .form-control[required])::before {
  content: "*";
  color: var(--main-blue);
  margin-right: 4px;
}

/* Estilos específicos para las imágenes del evento en directo */
:where(html[data-pantalla="entrenamientos-programas"]) .image-upload-container button {
  font-size: 12px;
  padding: 0.25rem 0.5rem;
  background-color: var(--n-sup-3, #444);
  border-color: var(--n-borde, #555);
  color: var(--n-texto, #e0e0e0);
}

:where(html[data-pantalla="entrenamientos-programas"]) .image-upload-container button:hover {
  background-color: var(--n-sup-3, #555);
  border-color: var(--n-borde-fuerte, #666);
}

/* Estilos para los botones de acción de selección múltiple */
:where(html[data-pantalla="entrenamientos-programas"]) #acciones-seleccion .btn-danger {
  background-color: #dc3545;
  border-color: #dc3545;
}

:where(html[data-pantalla="entrenamientos-programas"]) #acciones-seleccion .btn-primary {
  background-color: #007bff;
  border-color: #007bff;
}


/* Estilos para el botón de cerrar del modal */
:where(html[data-pantalla="entrenamientos-programas"]) .btn-close {
  color: var(--n-texto, #fff);
  opacity: 0.8;
}

:where(html[data-pantalla="entrenamientos-programas"]) .btn-close:hover {
  opacity: 1;
}

/* Asegurar que las pestañas dentro del modal funcionen correctamente */
:where(html[data-pantalla="entrenamientos-programas"]) .modal .nav-tabs .nav-link {
  z-index: 1052 !important;
}

/* Añadir estos estilos al final del archivo */

/* Estilos para los ejercicios del Programa */
:where(html[data-pantalla="entrenamientos-programas"]) .Programa-programas {
  max-height: 400px;
  overflow-y: auto;
  padding-right: 10px;
}

:where(html[data-pantalla="entrenamientos-programas"]) .section-title {
  color: var(--main-blue);
  font-weight: 500;
  margin-bottom: 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--n-borde, #444);
}

:where(html[data-pantalla="entrenamientos-programas"]) .programa-item {
  padding: 8px;
  margin-bottom: 5px;
  background-color: var(--n-sup-3, #333);
  border-radius: 4px;
  font-size: 14px;
}

/* Los tres iconos de la línea en fila; si no, con el lápiz se apilan */
:where(html[data-pantalla="entrenamientos-programas"]) .programa-actions {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

:where(html[data-pantalla="entrenamientos-programas"]) .programa-actions button {
  color: var(--n-texto-suave, #a0a0a0);
}

:where(html[data-pantalla="entrenamientos-programas"]) .programa-actions button:hover {
  color: var(--main-blue);
}

/* Estilos para los tooltips */
:where(html[data-pantalla="entrenamientos-programas"]) .Programa-tooltip,
:where(html[data-pantalla="entrenamientos-programas"]) .event-tooltip {
  position: fixed;
  background-color: var(--n-sup-2, #2a2a2a);
  border: 1px solid var(--n-borde, #444);
  border-radius: 4px;
  padding: 10px;
  max-width: 300px;
  z-index: 1070;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);

  display: none;
}

:where(html[data-pantalla="entrenamientos-programas"]) .tooltip-section {
  margin-bottom: 10px;
}

:where(html[data-pantalla="entrenamientos-programas"]) .tooltip-section:last-child {
  margin-bottom: 0;
}

:where(html[data-pantalla="entrenamientos-programas"]) .tooltip-section-title {
  color: var(--main-blue);
  font-weight: 500;
  margin-bottom: 5px;
  font-size: 14px;
}

:where(html[data-pantalla="entrenamientos-programas"]) .tooltip-programa {
  color: var(--n-texto, #e0e0e0);
  font-size: 13px;
  padding: 2px 0;
}

/* Estilos para el menú contextual */
:where(html[data-pantalla="entrenamientos-programas"]) .context-menu {
  position: fixed;
  background-color: var(--n-sup-2, #2a2a2a);
  border: 1px solid var(--n-borde, #444);
  border-radius: 4px;
  padding: 5px 0;
  min-width: 150px;
  z-index: 1070;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

:where(html[data-pantalla="entrenamientos-programas"]) .context-menu-item {
  padding: 8px 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--n-texto, #e0e0e0);
  font-size: 14px;
}

:where(html[data-pantalla="entrenamientos-programas"]) .context-menu-item:hover {
  background-color: var(--n-sup-3, #333);
}

:where(html[data-pantalla="entrenamientos-programas"]) .context-menu-item i {
  font-size: 16px;
}

/* Ajustar el estilo del botón de más opciones */
:where(html[data-pantalla="entrenamientos-programas"]) .more-options {
  padding: 0;
  color: var(--n-texto-suave, #a0a0a0);
  opacity: 0.7;
}

:where(html[data-pantalla="entrenamientos-programas"]) .more-options:hover {
  color: var(--main-blue);
  opacity: 1;
}

/* Estilos para el botón de guardar */
:where(html[data-pantalla="entrenamientos-programas"]) #btn-guardar-planificador {
  background-color: var(--main-blue);
  border-color: var(--main-blue);
}

:where(html[data-pantalla="entrenamientos-programas"]) #btn-guardar-planificador:hover {
  background-color: var(--main-blue);
  border-color: var(--main-blue);
}

/* Estilos para el indicador de carga */
:where(html[data-pantalla="entrenamientos-programas"]) .loading-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 20px;
  border-radius: 5px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
}

:where(html[data-pantalla="entrenamientos-programas"]) .loading-indicator p {
  margin-top: 10px;
  font-weight: 500;
}

:where(html[data-pantalla="entrenamientos-programas"]) .spinner-border {
  width: 3rem;
  height: 3rem;
}

/* Estilo para el contenedor de etiquetas */
:where(html[data-pantalla="entrenamientos-programas"]) .badge-etiqueta {
  display: inline-block;
  background-color: #e0e0e0;
  color: #333;
  padding: 4px 10px;
  margin: 2px;
  border-radius: 16px;
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.2s ease;
  cursor: default;
  border: 1px solid #d0d0d0;
}

:where(html[data-pantalla="entrenamientos-programas"]) .badge-etiqueta:hover {
  background-color: #d0d0d0;
  transform: translateY(-1px);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

:where(html[data-pantalla="entrenamientos-programas"]) .etiquetas-container {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  min-height: 32px;
  /* Altura mínima para celdas vacías */
}

:where(html[data-pantalla="entrenamientos-programas"]) table.dataTable tbody td {
  word-wrap: break-word;
  white-space: normal;
  vertical-align: middle;
  /* Mejor alineación vertical */
}

:where(html[data-pantalla="entrenamientos-programas"]) #formulario .tag-container {
  padding: 0;
}

:where(html[data-pantalla="entrenamientos-programas"]) #formulario .tag-container>.choices {
  width: 100%;
}

:where(html[data-pantalla="entrenamientos-programas"]) #formulario .dt-search {
  display: block;
}

:where(html[data-pantalla="entrenamientos-programas"]) #addEventModal .modal-body {
  padding: 0 26px;
}

:where(html[data-pantalla="entrenamientos-programas"]) .accordion .list-group-item {
  background-color: var(--n-sup-1, #191919);
}

:where(html[data-pantalla="entrenamientos-programas"]) .accordion .list-group-item:hover {
  background-color: var(--n-sup-1, #191919);
}


/* ------------------------------------------------------------------
   entrenamientos-rutinas-tipo.php
   Estaba en su propio <style>; trasladado el 2026-09-30.
   ------------------------------------------------------------------ */
:where(html[data-pantalla="entrenamientos-rutinas-tipo"]) .dt-search {
    display: none !important;
}


/* ------------------------------------------------------------------
   entrenamientos-rutinas.php
   Estaba en su propio <style>; trasladado el 2026-09-30.
   ------------------------------------------------------------------ */
:where(html[data-pantalla="entrenamientos-rutinas"]) input.choices__input{
    width: 100% !important;
}

/* Estilos específicos para el modal */
:where(html[data-pantalla="entrenamientos-rutinas"]) #exerciseModal .modal-content {
    background-color: var(--n-sup-2, #2d2d2d);
    /* Fondo del modal */
    color: #ffffff;
    /* Texto en blanco */
}

:where(html[data-pantalla="entrenamientos-rutinas"]) #exerciseModal .modal-header {
    border-bottom: 1px solid var(--n-borde, #444);
    /* Borde inferior del header */
}

:where(html[data-pantalla="entrenamientos-rutinas"]) #exerciseModal .modal-footer {
    border-top: 1px solid var(--n-borde, #444);
    /* Borde superior del footer */
}

:where(html[data-pantalla="entrenamientos-rutinas"]) #exerciseModal .exercise-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding: 10px;
    background-color: var(--n-sup-3, #3a3a3a);
    /* Fondo de cada ejercicio */
    border-radius: 5px;
}

:where(html[data-pantalla="entrenamientos-rutinas"]) #exerciseModal .exercise-item span {
    font-size: 16px;
}

:where(html[data-pantalla="entrenamientos-rutinas"]) #exerciseModal .btn-info {
    background-color: #17a2b8;
    /* Color del botón Info */
    border: none;
}

:where(html[data-pantalla="entrenamientos-rutinas"]) #exerciseModal .btn-secondary {
    background-color: #6c757d;
    /* Color del botón Ojo */
    border: none;
}

:where(html[data-pantalla="entrenamientos-rutinas"]) #exerciseModal .btn-sm {
    padding: 5px 10px;
    font-size: 14px;
}

:where(html[data-pantalla="entrenamientos-rutinas"]) #exerciseModal .bloque-label {
    color: var(--n-texto, #ffffff);
    margin-bottom: 15px;
    display: block;
    text-align: center;
    /* Centrar el texto */
    font-weight: bold;
    /* Texto en negrita */
}

/* Estilos para la tabla */
:where(html[data-pantalla="entrenamientos-rutinas"]) #seriesTable {
    width: 100%;
    margin-top: 15px;
}

:where(html[data-pantalla="entrenamientos-rutinas"]) #seriesTable th,
:where(html[data-pantalla="entrenamientos-rutinas"]) #seriesTable td {
    text-align: center;
}

/* Estilo para el contenedor de etiquetas */
:where(html[data-pantalla="entrenamientos-rutinas"]) .badge-etiqueta {
    display: inline-block;
    background-color: #e0e0e0;
    color: #333;
    padding: 4px 10px;
    margin: 2px;
    border-radius: 16px;
    font-size: 12px;
    line-height: 1.4;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.2s ease;
    cursor: default;
    border: 1px solid #d0d0d0;
}

:where(html[data-pantalla="entrenamientos-rutinas"]) .badge-etiqueta:hover {
    background-color: #d0d0d0;
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

:where(html[data-pantalla="entrenamientos-rutinas"]) .etiquetas-container {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    min-height: 32px;
    /* Altura mínima para celdas vacías */
}

:where(html[data-pantalla="entrenamientos-rutinas"]) table.dataTable tbody td {
    word-wrap: break-word;
    white-space: normal;
    vertical-align: middle;
    /* Mejor alineación vertical */
}

:where(html[data-pantalla="entrenamientos-rutinas"]) .dropdown-item.selected {
    background-color: #007bff;
    /* Color de fondo */
    color: white;
    /* Color del texto */
}

:where(html[data-pantalla="entrenamientos-rutinas"]) .dropdown-filter {
    background-color: var(--n-sup-1, #191d25);
    border: 1px solid var(--n-borde, #2c3038);
}

:where(html[data-pantalla="entrenamientos-rutinas"]) .search i {
    color: var(--n-texto-suave, gray);
    /* Cambia el color a gris */
    pointer-events: none;
    /* Evita que el ícono interfiera con el clic en el input */
}

/* Estilos para las pestañas */
:where(html[data-pantalla="entrenamientos-rutinas"]) .tabs {
    display: flex;
    margin-bottom: 10px;
}

/*
 * Aqui habia un z-index para #videoModal, que se va con el modal
 * (2026-09-01). Ver la nota de mas abajo, donde estaba su HTML.
 */

:where(html[data-pantalla="entrenamientos-rutinas"]) .modal#popup-nuevo {
    z-index: 1081;
    /* Asegúrate de que este valor sea mayor que el del modal existente */
}

/*
 * Aqui habia un z-index para #videoModal3, el modal de video de
 * modal_ejercicios.php. Se va con el (2026-09-01): el compartido
 * -#previewVideoModal- lo pinta Bootstrap por encima de lo demas sin
 * necesidad de que cada pantalla le suba el z-index a mano.
 */

:where(html[data-pantalla="entrenamientos-rutinas"]) .tab-button {
    flex: 1;
    padding: 10px;
    cursor: pointer;
    border: 1px solid #ccc;

    text-align: center;
}


:where(html[data-pantalla="entrenamientos-rutinas"]) .tab-content {
    display: none;
}

/* Ajustes para pantallas más pequeñas */
/* CSS personalizado */
:where(html[data-pantalla="entrenamientos-rutinas"]) .modal-custom-size {
    max-width: 1400px;
    /* Puedes ajustar este valor según tus necesidades */
}

@media (max-width: 1400px) {
    :where(html[data-pantalla="entrenamientos-rutinas"]) .modal-custom-size {
        max-width: 90%;
        /* Ocupa el 90% del ancho de la pantalla en dispositivos más pequeños */
    }
}

:where(html[data-pantalla="entrenamientos-rutinas"]) .tab-content.active {
    display: block;
}

:where(html[data-pantalla="entrenamientos-rutinas"]) .image-upload-container2 {
    border: 2px dashed #ccc;
    /* Borde discontinuo */
    padding: 20px;
    /* Espaciado interno */
    text-align: center;
    /* Centrar el contenido */
    border-radius: 8px;
    /* Bordes redondeados */
    background-color: #2A3038;
    /* Fondo claro */
    cursor: pointer;
    /* Cambiar el cursor al pasar el mouse */
    transition: border-color 0.3s ease;
    /* Transición suave */
}

:where(html[data-pantalla="entrenamientos-rutinas"]) .image-upload-container2:hover {
    border-color: #007bff;
    /* Cambiar color del borde al pasar el mouse */
}

:where(html[data-pantalla="entrenamientos-rutinas"]) .image-upload-container2 p {
    margin-bottom: 10px;
    /* Espacio debajo del texto */
    color: #666;
    /* Color del texto */
}

:where(html[data-pantalla="entrenamientos-rutinas"]) .listado-ejercicios {
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

:where(html[data-pantalla="entrenamientos-rutinas"]) .list-group-item {
    cursor: pointer;
    background-color: var(--n-sup-3, #666);
}

:where(html[data-pantalla="entrenamientos-rutinas"]) .list-group-item:hover {
    background-color: #f8f9fa;
}

:where(html[data-pantalla="entrenamientos-rutinas"]) .dropzone {
    border: 2px dashed #ccc;
    padding: 20px;
    text-align: center;
    color: var(--n-texto-tenue, #666);
    font-size: 16px;
    cursor: pointer;
    min-height: 150px;
    /* Altura mínima */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

:where(html[data-pantalla="entrenamientos-rutinas"]) .dropzone p {
    margin: 0;
    /* Eliminar el margen por defecto del párrafo */
}

:where(html[data-pantalla="entrenamientos-rutinas"]) .ejercicio-arrastrado {
    padding: 12px;
    margin: 8px 0;
    background-color: var(--n-sup-2, #2A3038);
    border: 1px solid var(--n-borde, #444);
    border-radius: 5px;
    cursor: move;
    width: 100%;
    color: var(--n-texto, #fff);
    flex-direction: column;
}

:where(html[data-pantalla="entrenamientos-rutinas"]) .ejercicio-thumbnail {
    width: 65px;
    height: 65px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

:where(html[data-pantalla="entrenamientos-rutinas"]) .ejercicio-thumbnail img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

:where(html[data-pantalla="entrenamientos-rutinas"]) .ejercicio-check {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

:where(html[data-pantalla="entrenamientos-rutinas"]) .botones-ejercicio {
    display: flex;
    gap: 5px;
}

:where(html[data-pantalla="entrenamientos-rutinas"]) .series-info {
    font-size: 0.9rem;
    color: var(--n-texto-suave, #adb5bd);
}

:where(html[data-pantalla="entrenamientos-rutinas"]) .detalles-ejercicio {
    margin-top: 10px;
    padding: 10px;
    background-color: var(--n-sup-3, #343a40);
    border: 1px solid var(--n-borde, #444);
    border-radius: 5px;
    width: 100%;
    color: var(--n-texto, #ddd);
}

:where(html[data-pantalla="entrenamientos-rutinas"]) .serie-detalle {
    margin-bottom: 10px;
    padding: 10px;
    background-color: var(--n-sup-2, #2A3038);
    border: 1px solid var(--n-borde, #444);
    border-radius: 5px;
}

:where(html[data-pantalla="entrenamientos-rutinas"]) .btn-expandir {
    border-color: var(--n-borde, #555);
    color: var(--n-texto-suave, #aaa);
    padding: 0px 8px;
    margin-top: -5px;
}

:where(html[data-pantalla="entrenamientos-rutinas"]) .btn-expandir:hover {
    background-color: var(--n-sup-3, #444);
    color: var(--n-texto, #fff);
}

:where(html[data-pantalla="entrenamientos-rutinas"]) .btn-outline-info,
:where(html[data-pantalla="entrenamientos-rutinas"]) .btn-outline-warning,
:where(html[data-pantalla="entrenamientos-rutinas"]) .btn-outline-danger {
    border-color: var(--n-borde, #444);
    background-color: transparent;
    padding: 2px 6px;
}

:where(html[data-pantalla="entrenamientos-rutinas"]) .btn-outline-info {
    color: #0dcaf0;
}

:where(html[data-pantalla="entrenamientos-rutinas"]) .btn-outline-warning {
    color: #ffc107;
}

:where(html[data-pantalla="entrenamientos-rutinas"]) .btn-outline-danger {
    color: #dc3545;
}

:where(html[data-pantalla="entrenamientos-rutinas"]) .btn-outline-info:hover {
    background-color: #0dcaf020;
}

:where(html[data-pantalla="entrenamientos-rutinas"]) .btn-outline-warning:hover {
    background-color: #ffc10720;
}

:where(html[data-pantalla="entrenamientos-rutinas"]) .btn-outline-danger:hover {
    background-color: #dc354520;
}

:where(html[data-pantalla="entrenamientos-rutinas"]) .popup-contenido button.btn-sm {
    margin: 10px 10px 0 10px;
}

:where(html[data-pantalla="entrenamientos-rutinas"]) .ejercicio-arrastrado {
    padding: 12px;
    margin: 8px 0;
    background-color: var(--n-sup-2, #2A3038);
    border: 1px solid var(--n-borde, #444);
    border-radius: 5px;
    cursor: move;
    width: 100%;
    color: var(--n-texto, #fff);
    flex-direction: column;
}

:where(html[data-pantalla="entrenamientos-rutinas"]) .ejercicio-thumbnail {
    width: 45px;
    height: 45px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

:where(html[data-pantalla="entrenamientos-rutinas"]) .ejercicio-thumbnail img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}

:where(html[data-pantalla="entrenamientos-rutinas"]) .ejercicio-check {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

:where(html[data-pantalla="entrenamientos-rutinas"]) .botones-ejercicio {
    display: flex;
    gap: 5px;
}

:where(html[data-pantalla="entrenamientos-rutinas"]) .series-info {
    font-size: 0.9rem;
    color: var(--n-texto-suave, #adb5bd);
}

:where(html[data-pantalla="entrenamientos-rutinas"]) .detalles-ejercicio {
    margin-top: 10px;
    padding: 10px;
    background-color: var(--n-sup-3, #343a40);
    border: 1px solid var(--n-borde, #444);
    border-radius: 5px;
    width: 100%;
    color: var(--n-texto, #ddd);
}

:where(html[data-pantalla="entrenamientos-rutinas"]) .serie-detalle {
    margin-bottom: 10px;
    padding: 10px;
    background-color: var(--n-sup-2, #2A3038);
    border: 1px solid var(--n-borde, #444);
    border-radius: 5px;
}

:where(html[data-pantalla="entrenamientos-rutinas"]) .btn-expandir {
    border-color: var(--n-borde, #555);
    color: var(--n-texto-suave, #aaa);
    padding: 0px 8px;
    margin-top: -5px;
}

:where(html[data-pantalla="entrenamientos-rutinas"]) .btn-expandir:hover {
    background-color: var(--n-sup-3, #444);
    color: var(--n-texto, #fff);
}

:where(html[data-pantalla="entrenamientos-rutinas"]) .btn-outline-info,
:where(html[data-pantalla="entrenamientos-rutinas"]) .btn-outline-warning,
:where(html[data-pantalla="entrenamientos-rutinas"]) .btn-outline-danger {
    border-color: var(--n-borde, #444);
    background-color: transparent;
    padding: 2px 6px;
}

:where(html[data-pantalla="entrenamientos-rutinas"]) .btn-outline-info {
    color: #0dcaf0;
}

:where(html[data-pantalla="entrenamientos-rutinas"]) .btn-outline-warning {
    color: #ffc107;
}

:where(html[data-pantalla="entrenamientos-rutinas"]) .btn-outline-danger {
    color: #dc3545;
}

:where(html[data-pantalla="entrenamientos-rutinas"]) .btn-outline-info:hover {
    background-color: #0dcaf020;
}

:where(html[data-pantalla="entrenamientos-rutinas"]) .btn-outline-warning:hover {
    background-color: #ffc10720;
}

:where(html[data-pantalla="entrenamientos-rutinas"]) .btn-outline-danger:hover {
    background-color: #dc354520;
}

:where(html[data-pantalla="entrenamientos-rutinas"]) .bloque-container {
    background-color: var(--n-sup-2, #2A3038);
    border-color: var(--n-borde, #444) !important;
    width: 100%;
    /* Ancho del 80% del contenedor padre */
    max-width: 1200px;
    /* No se expandirá más allá de 1200px */
    margin: 0 auto;
    /* Centra el contenedor */
}

:where(html[data-pantalla="entrenamientos-rutinas"]) .bloque-container input {
    background-color: var(--n-sup-3, #343a40) !important;
    border-color: var(--n-borde, #444) !important;
    color: var(--n-texto, #fff) !important;
}

:where(html[data-pantalla="entrenamientos-rutinas"]) .bloque-container .input-group-text {
    background-color: var(--n-sup-3, #343a40) !important;
    border-color: var(--n-borde, #444) !important;
    color: var(--n-texto, #fff) !important;
}

:where(html[data-pantalla="entrenamientos-rutinas"]) #socios .dt-search {
    display: block;
}

:where(html[data-pantalla="entrenamientos-rutinas"]) .accordion .list-group-item {
    background-color: var(--n-sup-1, #191919);
}

:where(html[data-pantalla="entrenamientos-rutinas"]) .accordion .list-group-item:hover {
    background-color: var(--n-sup-1, #191919);
}


/* ------------------------------------------------------------------
   entrenamientos-tipo.php
   Estaba en su propio <style>; trasladado el 2026-09-30.
   ------------------------------------------------------------------ */
:where(html[data-pantalla="entrenamientos-tipo"]) .dt-search {
    display: none !important;
}


/* ------------------------------------------------------------------
   socios/perfil-socio.php
   Estaba en su propio <style>; trasladado el 2026-09-30.
   ------------------------------------------------------------------ */
:where(html[data-pantalla="socios/perfil-socio"]) .content-wrapper {
    padding-bottom: 100px;
}

:where(html[data-pantalla="socios/perfil-socio"]) .content-wrapper .choices {
    margin-bottom: 0;
}

@media(max-width:500px) {
    /* .content-wrapper {
        padding-bottom: 200px;
    } */
}


/* ------------------------------------------------------------------
   socios/socios-baja.php
   Estaba en su propio <style>; trasladado el 2026-09-30.
   ------------------------------------------------------------------ */
:where(html[data-pantalla="socios/socios-baja"]) .th-icon,
:where(html[data-pantalla="socios/socios-baja"]) .td-icon,
:where(html[data-pantalla="socios/socios-baja"]) .th-checkbox,
:where(html[data-pantalla="socios/socios-baja"]) .td-checkbox {
    text-align: left;
    width: 65px;
}

:where(html[data-pantalla="socios/socios-baja"]) #filtraje .choices,
:where(html[data-pantalla="socios/socios-baja"]) #filtraje select.form-select {
    min-height: 50px;
}


/* ------------------------------------------------------------------
   socios/socios-perfiles.php
   Estaba en su propio <style>; trasladado el 2026-09-30.
   ------------------------------------------------------------------ */
:where(html[data-pantalla="socios/socios-perfiles"]) .th-icon,
:where(html[data-pantalla="socios/socios-perfiles"]) .td-icon,
:where(html[data-pantalla="socios/socios-perfiles"]) .th-checkbox,
:where(html[data-pantalla="socios/socios-perfiles"]) .td-checkbox {
    text-align: left;
    width: 65px;
}


/* ------------------------------------------------------------------
   socios/socios-potenciales.php
   Estaba en su propio <style>; trasladado el 2026-09-30.
   ------------------------------------------------------------------ */
:where(html[data-pantalla="socios/socios-potenciales"]) .th-icon,
:where(html[data-pantalla="socios/socios-potenciales"]) .td-icon,
:where(html[data-pantalla="socios/socios-potenciales"]) .th-checkbox,
:where(html[data-pantalla="socios/socios-potenciales"]) .td-checkbox {
    text-align: left;
    width: 65px;
}

:where(html[data-pantalla="socios/socios-potenciales"]) #filtraje .choices,
:where(html[data-pantalla="socios/socios-potenciales"]) #filtraje select.form-select {
    min-height: 50px;
}


/* ------------------------------------------------------------------
   actividades/actividades.php
   Estaba en su propio <style>; trasladado el 2026-09-30.
   ------------------------------------------------------------------ */
:where(html[data-pantalla="actividades/actividades"]) .th-icon,
:where(html[data-pantalla="actividades/actividades"]) .td-icon,
:where(html[data-pantalla="actividades/actividades"]) .th-checkbox,
:where(html[data-pantalla="actividades/actividades"]) .td-checkbox {
    text-align: left;
    width: 65px;
}

:where(html[data-pantalla="actividades/actividades"]) #filtraje .choices,
:where(html[data-pantalla="actividades/actividades"]) #filtraje select.form-select {
    min-height: 50px;
}

:where(html[data-pantalla="actividades/actividades"]) .fc .fc-toolbar.fc-header-toolbar {
    flex-wrap: wrap;
    gap: 10px;
}

@media(max-width: 768px) {
    :where(html[data-pantalla="actividades/actividades"]) #modalActividadesHorario .modal-dialog {
        margin-top: 10px;
    }

    :where(html[data-pantalla="actividades/actividades"]) .fc-timeGridWeek-view .fc-event-title.fc-sticky {
        display: none;
    }
}


/* ------------------------------------------------------------------
   empleados/horarios.php
   Estaba en su propio <style>; trasladado el 2026-09-30.
   ------------------------------------------------------------------ */
:where(html[data-pantalla="empleados/horarios"]) form textarea.form-control {
    height: 100px;
}

:where(html[data-pantalla="empleados/horarios"]) .th-icon,
:where(html[data-pantalla="empleados/horarios"]) .td-icon,
:where(html[data-pantalla="empleados/horarios"]) .th-checkbox,
:where(html[data-pantalla="empleados/horarios"]) .td-checkbox {
    text-align: left;
    width: 65px;
}

:where(html[data-pantalla="empleados/horarios"]) #filtraje .choices,
:where(html[data-pantalla="empleados/horarios"]) #filtraje select.form-select {
    min-height: 50px;
}

:where(html[data-pantalla="empleados/horarios"]) #cardHorarioEmpleadoSeleccionado {
    background: rgba(255, 255, 255, 0.03);
}

:where(html[data-pantalla="empleados/horarios"]) .horario-laboral-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(110px, 1fr));
    gap: 10px;
}

:where(html[data-pantalla="empleados/horarios"]) .horario-laboral-dia {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.04);
}

:where(html[data-pantalla="empleados/horarios"]) .horario-laboral-dia-title {
    font-weight: 700;
    margin-bottom: 8px;
}

:where(html[data-pantalla="empleados/horarios"]) .horario-laboral-rango {
    display: inline-block;
    width: 100%;
    margin-bottom: 6px;
    padding: 5px 7px;
    border-radius: 8px;
    background: rgba(255, 102, 0, 0.14);
    color: #f2f2f2;
    font-size: 12px;
}

:where(html[data-pantalla="empleados/horarios"]) .horario-laboral-empty {
    color: rgba(var(--n-velo, 255, 255, 255), 0.6);
    font-size: 13px;
}

@media(max-width: 768px) {
    :where(html[data-pantalla="empleados/horarios"]) .horario-laboral-grid {
        grid-template-columns: 1fr;
    }
}

:where(html[data-pantalla="empleados/horarios"]) .fc .fc-toolbar.fc-header-toolbar {
    flex-wrap: wrap;
    gap: 10px;
}

:where(html[data-pantalla="empleados/horarios"]) .fc .fc-toolbar.fc-header-toolbar {
    flex-wrap: wrap;
    gap: 10px;
}

:where(html[data-pantalla="empleados/horarios"]) .fc-event-custom-content {
    font-size: 11px;
    line-height: 1.15;
    padding: 2px 3px;
    white-space: normal;
}

:where(html[data-pantalla="empleados/horarios"]) .fc-event-line {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

:where(html[data-pantalla="empleados/horarios"]) .fc-event-time-line {
    font-weight: 700;
}

:where(html[data-pantalla="empleados/horarios"]) .fc-employee-color-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 1px solid rgba(var(--n-velo, 255, 255, 255), .85);
    margin-right: 4px;
    vertical-align: middle;
}

:where(html[data-pantalla="empleados/horarios"]) .fc-room-line {
    opacity: .95;
    font-size: 10px;
}

/* Labor schedule layer for general calendar */
:where(html[data-pantalla="empleados/horarios"]) #calendarioGeneral.is-labor-filtered .fc-non-business {
    background: rgba(120, 120, 120, 0.28) !important;
}

:where(html[data-pantalla="empleados/horarios"]) #calendarioGeneral.is-labor-filtered .fc-timegrid-slot {
    cursor: pointer;
}

:where(html[data-pantalla="empleados/horarios"]) #calendarioGeneral.is-labor-filtered .fc-timegrid-slot:hover {
    background: rgba(255, 102, 0, 0.08);
}

:where(html[data-pantalla="empleados/horarios"]) #calendarioGeneral.is-labor-filtered .fc-non-business,
:where(html[data-pantalla="empleados/horarios"]) #calendarioGeneral.is-labor-filtered .fc-non-business * {
    cursor: not-allowed !important;
}

:where(html[data-pantalla="empleados/horarios"]) #horarioGeneralLaboralNotice {
    border: 1px dashed rgba(255, 102, 0, 0.45);
    background: rgba(255, 102, 0, 0.08);
    color: #f2f2f2;
    border-radius: 12px;
    padding: 10px 14px;
    margin-bottom: 12px;
    font-size: 13px;
}

@media(max-width: 768px) {
    :where(html[data-pantalla="empleados/horarios"]) #modalAgregarHorario .modal-dialog {
        margin-top: 10px;
    }

    :where(html[data-pantalla="empleados/horarios"]) .fc-timeGridWeek-view .fc-event-title.fc-sticky {
        display: none;
    }
}


/* ------------------------------------------------------------------
   socios/socios-activos.php
   Estaba en su propio <style>; trasladado el 2026-09-30.
   ------------------------------------------------------------------ */
:where(html[data-pantalla="socios/socios-activos"]) .th-icon,
:where(html[data-pantalla="socios/socios-activos"]) .td-icon,
:where(html[data-pantalla="socios/socios-activos"]) .th-checkbox,
:where(html[data-pantalla="socios/socios-activos"]) .td-checkbox {
    text-align: left;
    width: 65px;
}

:where(html[data-pantalla="socios/socios-activos"]) #filtraje .choices,
:where(html[data-pantalla="socios/socios-activos"]) #filtraje select.form-select {
    min-height: 50px;
}


/* ------------------------------------------------------------------
   socios/modulosDePerfil/entrenamiento.php
   Estaba en su propio <style>; trasladado el 2026-09-30.
   ------------------------------------------------------------------ */
:where(html[data-pantalla="socios/perfil-socio"]) .entrenadores-div .dt-search {
  display: block !important;
}

:where(html[data-pantalla="socios/perfil-socio"]) .dt-container {
  overflow: auto hidden;
}

/* Seguimiento de un programa (acciones_entrenamientos_socios.php?action=seguimiento_programa) */
:where(html[data-pantalla="socios/perfil-socio"]) .seg-resumen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: .75rem;
  margin-bottom: 1rem;
  font-size: .85rem;
}

:where(html[data-pantalla="socios/perfil-socio"]) .seg-resumen > div {
  border: 1px solid rgba(128, 128, 128, .3);
  border-radius: .5rem;
  padding: .6rem .8rem;
}

:where(html[data-pantalla="socios/perfil-socio"]) .seg-num {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
}

:where(html[data-pantalla="socios/perfil-socio"]) .seg-num small {
  font-size: .9rem;
  font-weight: 400;
}

:where(html[data-pantalla="socios/perfil-socio"]) .seg-semana {
  margin: 1.2rem 0 .5rem;
}

:where(html[data-pantalla="socios/perfil-socio"]) .seg-dia {
  border: 1px solid rgba(128, 128, 128, .3);
  border-radius: .5rem;
  margin-bottom: .4rem;
}

:where(html[data-pantalla="socios/perfil-socio"]) .seg-dia > summary,
:where(html[data-pantalla="socios/perfil-socio"]) .seg-dia-plano {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .5rem .75rem;
}

:where(html[data-pantalla="socios/perfil-socio"]) .seg-dia > summary {
  cursor: pointer;
  list-style: none;
}

:where(html[data-pantalla="socios/perfil-socio"]) .seg-dia > summary::-webkit-details-marker {
  display: none;
}

:where(html[data-pantalla="socios/perfil-socio"]) .seg-futuro {
  opacity: .6;
}

:where(html[data-pantalla="socios/perfil-socio"]) .seg-fecha {
  min-width: 115px;
  font-size: .85rem;
}

:where(html[data-pantalla="socios/perfil-socio"]) .seg-rutina {
  flex: 1;
  font-weight: 600;
}

:where(html[data-pantalla="socios/perfil-socio"]) .seg-ejercicios {
  list-style: none;
  margin: 0;
  padding: 0 .75rem .6rem 2rem;
  font-size: .9rem;
}

:where(html[data-pantalla="socios/perfil-socio"]) .seg-ejercicios li {
  padding: .15rem 0;
}

:where(html[data-pantalla="socios/perfil-socio"]) .seg-ejercicios .seg-bloque {
  margin-top: .4rem;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  opacity: .7;
}


/* ------------------------------------------------------------------
   socios/modulosDePerfil/mediciones.php
   Estaba en su propio <style>; trasladado el 2026-09-30.
   ------------------------------------------------------------------ */
:where(html[data-pantalla="socios/perfil-socio"]) .chart-wrapper {
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

:where(html[data-pantalla="socios/perfil-socio"]) .ultimos-resultados-cards .card {
    min-height: 135px;
}


/* ------------------------------------------------------------------
   socios/modulosDePerfil/tests.php
   Estaba en su propio <style>; trasladado el 2026-09-30.
   ------------------------------------------------------------------ */
:where(html[data-pantalla="socios/perfil-socio"]) .chart-wrapper {
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

:where(html[data-pantalla="socios/perfil-socio"]) .ultimos-resultados-cards .card {
    min-height: 135px;
}


/* ------------------------------------------------------------------
   footer-de-acciones.php
   Estaba en su propio <style>; trasladado el 2026-09-30.
   ------------------------------------------------------------------ */
:where(html[data-pantalla="socios/perfil-socio"]) .fixed-footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: var(--n-sup-1, #191c24);
    color: var(--n-texto, white);
    z-index: 1000;
    padding: 10px 20px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
}

:where(html[data-pantalla="socios/perfil-socio"]) .fixed-footer .btn {
    margin-right: 10px;
}

:where(html[data-pantalla="socios/perfil-socio"]) footer.footer {
    display: none;
}

:where(html[data-pantalla="socios/perfil-socio"]) .col {
    width: fit-content;
}

@media(max-width:500px) {
    :where(html[data-pantalla="socios/perfil-socio"]) .fixed-footer {
        flex-wrap: wrap;
        align-self: center;
        justify-content: space-around;
    }

    :where(html[data-pantalla="socios/perfil-socio"]) .fixed-footer .col {
        padding: 5px;
    }

    :where(html[data-pantalla="socios/perfil-socio"]) .fixed-footer button,
:where(html[data-pantalla="socios/perfil-socio"]) .fixed-footer form,
:where(html[data-pantalla="socios/perfil-socio"]) .fixed-footer a {
        width: 100% !important;
    }

    :where(html[data-pantalla="socios/perfil-socio"]) .fixed-footer span.btn-text {
        display: none;
    }
}


/* ------------------------------------------------------------------
   footer-de-acciones-empleados.php
   Estaba en su propio <style>; trasladado el 2026-09-30.
   ------------------------------------------------------------------ */
:where(html[data-pantalla="empleados/perfil-empleado"]) .fixed-footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: var(--n-sup-1, #191c24);
    color: var(--n-texto, white);
    z-index: 1000;
    padding: 10px 20px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
}

:where(html[data-pantalla="empleados/perfil-empleado"]) .fixed-footer .btn {
    margin-right: 10px;
}

:where(html[data-pantalla="empleados/perfil-empleado"]) footer.footer {
    display: none;
}

:where(html[data-pantalla="empleados/perfil-empleado"]) .col {
    width: fit-content;
}

@media(max-width:500px) {
    :where(html[data-pantalla="empleados/perfil-empleado"]) .fixed-footer {
        flex-wrap: wrap;
        align-self: center;
        justify-content: space-around;
    }

    :where(html[data-pantalla="empleados/perfil-empleado"]) .fixed-footer .col {
        padding: 5px;
    }

    :where(html[data-pantalla="empleados/perfil-empleado"]) .fixed-footer button,
:where(html[data-pantalla="empleados/perfil-empleado"]) .fixed-footer form,
:where(html[data-pantalla="empleados/perfil-empleado"]) .fixed-footer a {
        width: 100% !important;
    }

    :where(html[data-pantalla="empleados/perfil-empleado"]) .fixed-footer span.btn-text {
        display: none;
    }
}


/* ------------------------------------------------------------------
   modal_videos.php
   Estaba en su propio <style>; trasladado el 2026-09-30.
   ------------------------------------------------------------------ */
/* Estilos para el ícono de búsqueda */
:where(html[data-pantalla="clases-virtuales"]) .search i {
  color: var(--n-texto-suave, gray);
  /* Cambia el color a gris */
  pointer-events: none;
  /* Evita que el ícono interfiera con el clic en el input */
}

/* Estilos para el input de archivo personalizado */
:where(html[data-pantalla="clases-virtuales"]) .custom-file-input {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Espacio entre el botón y el texto */
}

/* Estilos para el botón personalizado */
:where(html[data-pantalla="clases-virtuales"]) #customButton {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

:where(html[data-pantalla="clases-virtuales"]) #customButton:hover {
  background-color: #0056b3;
}

/* Estilos para el nombre del archivo */
:where(html[data-pantalla="clases-virtuales"]) #fileName {
  font-size: 14px;
  color: var(--n-texto-tenue, #666);
}

/* Estilo personalizado para el botón deshabilitado */
:where(html[data-pantalla="clases-virtuales"]) .btn-outline-secondary:disabled {
  background-color: #f8f9fa;
  /* Fondo claro */
  border-color: #ccc;
  /* Borde gris */
  color: #999;
  /* Texto gris */
  cursor: not-allowed;
  /* Cursor "no permitido" */
}

/* Estilos para el contenedor de carga de imágenes */
:where(html[data-pantalla="clases-virtuales"]) .image-upload-container {
  border: 2px dashed #ccc;
  /* Borde discontinuo */
  padding: 20px;
  /* Espaciado interno */
  text-align: center;
  /* Centrar el contenido */
  border-radius: 8px;
  /* Bordes redondeados */
  background-color: #2a3038;
  /* Fondo claro */
  cursor: pointer;
  /* Cambiar el cursor al pasar el mouse */
  transition: border-color 0.3s ease;
  /* Transición suave */
}

:where(html[data-pantalla="clases-virtuales"]) .image-upload-container:hover {
  border-color: #007bff;
  /* Cambiar color del borde al pasar el mouse */
}

:where(html[data-pantalla="clases-virtuales"]) .image-upload-container p {
  margin-bottom: 10px;
  /* Espacio debajo del texto */
  color: #666;
  /* Color del texto */
}


/* ------------------------------------------------------------------
   dietas/modal_dieta.php  (en: dietas/dietas-diarias, dietas/planes-nutricionales)
   Estaba en su propio <style>; trasladado el 2026-09-30.
   ------------------------------------------------------------------ */
/* Lo justo para el modal de dieta; el resto sale de manager.css */
:where(html[data-pantalla="dietas/dietas-diarias"], html[data-pantalla="dietas/planes-nutricionales"]) .comida-caja { border: 1px solid rgba(var(--n-velo, 255, 255, 255),.12); border-radius: .5rem; padding: 1rem; margin-bottom: 1rem; }
:where(html[data-pantalla="dietas/dietas-diarias"], html[data-pantalla="dietas/planes-nutricionales"]) .comida-caja .comida-nombre { max-width: 320px; }
:where(html[data-pantalla="dietas/dietas-diarias"], html[data-pantalla="dietas/planes-nutricionales"]) .item-linea { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; padding: .35rem 0; border-top: 1px solid rgba(var(--n-velo, 255, 255, 255),.06); }
:where(html[data-pantalla="dietas/dietas-diarias"], html[data-pantalla="dietas/planes-nutricionales"]) .item-linea .item-nombre { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/*
 * 130px y no menos: con 92 el "100" salia cortado. Desde que la "g" va
 * DENTRO del campo (.campo-unidad--corto) el hueco de la unidad se come
 * 2,5rem de esos 130, asi que estrecharlo ahora seria volver al defecto
 * de entonces por otro camino.
 */
:where(html[data-pantalla="dietas/dietas-diarias"], html[data-pantalla="dietas/planes-nutricionales"]) .item-linea .item-gramos { width: 130px; flex: 0 0 auto; }
/*
 * El comentario va en su propia linea, no en el hueco que quede: los macros
 * son texto largo con white-space:nowrap y, metido al lado, aplastaba el
 * nombre del alimento en cuanto la pantalla bajaba de 1400px.
 */
:where(html[data-pantalla="dietas/dietas-diarias"], html[data-pantalla="dietas/planes-nutricionales"]) .item-linea .item-comentario { flex: 1 0 100%; font-size: .85rem; }
/* El de la comida entera: mas alto que el de la linea porque aqui se
   escriben frases, no coletillas. */
:where(html[data-pantalla="dietas/dietas-diarias"], html[data-pantalla="dietas/planes-nutricionales"]) .comida-comentario { font-size: .85rem; resize: vertical; }
:where(html[data-pantalla="dietas/dietas-diarias"], html[data-pantalla="dietas/planes-nutricionales"]) .item-macros { font-variant-numeric: tabular-nums; white-space: nowrap; }
:where(html[data-pantalla="dietas/dietas-diarias"], html[data-pantalla="dietas/planes-nutricionales"]) .buscador-items { max-height: 260px; overflow-y: auto; }
:where(html[data-pantalla="dietas/dietas-diarias"], html[data-pantalla="dietas/planes-nutricionales"]) .buscador-items .list-group-item { cursor: pointer; }
:where(html[data-pantalla="dietas/dietas-diarias"], html[data-pantalla="dietas/planes-nutricionales"]) .objetivo-barra { height: 6px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; }
:where(html[data-pantalla="dietas/dietas-diarias"], html[data-pantalla="dietas/planes-nutricionales"]) .objetivo-barra span { display: block; height: 100%; }


/* ------------------------------------------------------------------
   assets/components/confirmar-borrado.php  (global)
   Estaba en su propio <style>; trasladado el 2026-09-30.
   ------------------------------------------------------------------ */
/*
 * La banda roja se hace con el propio título de SweetAlert, no con HTML
 * inyectado: así el aviso sigue siendo un SweetAlert normal —con su foco, su
 * Escape y su accesibilidad— y no un cuadro pintado a mano.
 */
.mp-swal-borrar {
    padding-top: 0 !important;
    overflow: hidden;
}

.mp-swal-borrar .swal2-title {
    display: block;
    width: 100%;
    margin: 0 0 1rem 0;
    padding: .9rem 1.25rem;

    background: #dc3545;
    color: #fff;

    font-size: 1.05rem;
    font-weight: 600;
    text-align: left;
}

.mp-swal-borrar .swal2-html-container {
    margin-top: 0;
    padding: 0 1.5rem;
}

/*
 * Sin el icono grande de warning: el modal que se toma como referencia no lo
 * tiene, y con la banda roja arriba sería decir dos veces lo mismo ocupando
 * media ventana.
 */
.mp-swal-borrar .swal2-icon {
    display: none !important;
}


/* ------------------------------------------------------------------
   assets/components/custom-js.php  (global)
   Estaba en su propio <style>; trasladado el 2026-09-30.
   ------------------------------------------------------------------ */
#previewVideoModal {
    z-index: 1070;
}

#verEjercicioModal {
    z-index: 1070;
}

/* Cuadrado y a 260: mas grande empuja los videos fuera de la vista. */
#verEjercicioModal .ver-ej-media {
    aspect-ratio: 1 / 1;
    height: 260px;
    max-width: 100%;
    margin: 0 auto;
    border: 1px dashed rgba(255, 255, 255, .35);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: rgba(0, 0, 0, .15);
}

#verEjercicioModal .ver-ej-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff;
}

#verEjercicioModal .ver-ej-vacio {
    opacity: .6;
    text-align: center;
}

#verEjercicioModal .ver-ej-player iframe,
#verEjercicioModal .ver-ej-player video {
    width: 100%;
    height: 360px;
    border: 0;
    background: var(--n-fondo, #000);
    border-radius: 12px;
}


/* ------------------------------------------------------------------
   assets/components/ojo-password.php  (global)
   Estaba en su propio <style>; trasladado el 2026-09-30.
   ------------------------------------------------------------------ */
/*
 * El botón va DENTRO del campo, no al lado: al lado obligaría a tocar el
 * ancho de cada columna que ya está maquetada, y en las de `col-md-4` el
 * campo se quedaría sin sitio.
 */
.mp-pass-envoltura {
    position: relative;
    display: block;
}

.mp-pass-envoltura > input {
    /* Hueco para el botón, que si no tapa el final de lo escrito. */
    padding-right: 2.6rem !important;
}

.mp-pass-ojo {
    position: absolute;
    top: 50%;
    right: .55rem;
    transform: translateY(-50%);
    z-index: 3;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 1.9rem;
    height: 1.9rem;
    padding: 0;

    border: 0;
    background: transparent;
    color: var(--bs-secondary-color, #9aa0a6);

    cursor: pointer;
    line-height: 1;
}

.mp-pass-ojo:hover,
.mp-pass-ojo:focus-visible {
    color: var(--bs-body-color, #e9ecef);
}

.mp-pass-ojo .mdi {
    font-size: 1.15rem;
}


/* ------------------------------------------------------------------
   modal_crear_rutinas.php  (en: entrenamientos-programas, entrenamientos-rutinas)
   Estaba en su propio <style>; trasladado el 2026-09-30.
   ------------------------------------------------------------------ */
/* Estilos específicos para el modal */
:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #exerciseModal .modal-content {
    background-color: var(--n-sup-2, #2d2d2d);
    /* Fondo del modal */
    color: #ffffff;
    /* Texto en blanco */
}

:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #exerciseModal .modal-header {
    border-bottom: 1px solid var(--n-borde, #444);
    /* Borde inferior del header */
}

:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #exerciseModal .modal-footer {
    border-top: 1px solid var(--n-borde, #444);
    /* Borde superior del footer */
}

:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #exerciseModal .exercise-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding: 10px;
    background-color: var(--n-sup-3, #3a3a3a);
    /* Fondo de cada ejercicio */
    border-radius: 5px;
}

:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #exerciseModal .exercise-item span {
    font-size: 16px;
}

:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #exerciseModal .btn-info {
    background-color: #17a2b8;
    /* Color del botón Info */
    border: none;
}

/* Contenedor principal */
:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) .image-upload-container-rutina {
    position: relative;
    border: 2px dashed #ccc;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    transition: border-color 0.3s;
    margin-bottom: 15px;
}

:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) .image-upload-container-rutina:hover {
    border-color: var(--main-blue);
}

/* Contenedor de previsualización */
:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) .image-preview-container {
    width: 100%;
    max-height: 300px;
    /* Altura máxima */
    border-radius: 8px;
    border: 2px solid var(--main-blue);
    margin-top: 10px;
    display: none;
    overflow: hidden;
    /* Ocultar cualquier desbordamiento */
}

/* Imagen dentro del contenedor */
:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) .image-preview-rutina {
    display: block;
    max-width: 100%;
    /* Máximo ancho del contenedor */
    max-height: 300px;
    /* Máxima altura */
    width: auto;
    /* Mantener proporción */
    height: auto;
    /* Mantener proporción */
    margin: 0 auto;
    /* Centrar horizontalmente */
    object-fit: contain;
    /* Mostrar imagen completa */
}

/* Eliminamos el contenedor de scroll ya que no es necesario */
:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) .image-preview-scroll {
    display: contents;
    /* Eliminar este div o usar display: contents */
}

/* Texto de arrastrar y soltar */
:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) .drag-text {
    margin-bottom: 15px;
    color: var(--n-texto-tenue, #666);
}

/* Botón de subir */
:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) .upload-btn-rutina {
    width: 100%;
}

/* Mensaje de error */
:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) .error-message {
    color: #dc3545;
    margin-top: 5px;
    display: none;
}

:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) .image-upload-container-rutina.dragover {
    border-color: #33adff;
}

:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) .drag-text {
    color: var(--main-blue);
    margin-bottom: 10px;
}

:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) .error-message {
    color: #d32f2f !important;
}

:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) .upload-btn-rutina {
    background-color: var(--main-blue) !important;
    border-color: var(--main-blue) !important;
    color: white !important;
    margin-top: 15px;
}

:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) .upload-btn-rutina:hover {
    background-color: #007ae5 !important;
    border-color: #007ae5 !important;
}

:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #exerciseModal .btn-secondary {
    background-color: #6c757d;
    /* Color del botón Ojo */
    border: none;
}

:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #exerciseModal .btn-sm {
    padding: 5px 10px;
    font-size: 14px;
}

:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #exerciseModal .bloque-label {
    color: var(--n-texto, #ffffff);
    margin-bottom: 15px;
    display: block;
    text-align: center;
    /* Centrar el texto */
    font-weight: bold;
    /* Texto en negrita */
}

/* Estilos para la tabla */
:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #seriesTable {
    width: 100%;
    margin-top: 15px;
}

:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #seriesTable th,
:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #seriesTable td {
    text-align: center;
}

/* Estilos específicos para el modal - Todos anidados bajo #modalRutinaPro */
:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #modalRutinaPro .modal-content {
    color: var(--n-texto, #ffffff);
}

:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #modalRutinaPro .modal-header {
    border-bottom: 1px solid var(--n-borde, #444);
}

:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #modalRutinaPro .modal-footer {
    border-top: 1px solid var(--n-borde, #444);
}

:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #modalRutinaPro .exercise-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding: 10px;
    background-color: var(--n-sup-3, #3a3a3a);
    border-radius: 5px;
}

:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #modalRutinaPro .exercise-item span {
    font-size: 16px;
}

:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #modalRutinaPro .btn-info {
    background-color: #17a2b8;
    border: none;
}

:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #modalRutinaPro .btn-secondary {
    background-color: #6c757d;
    border: none;
}

:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #modalRutinaPro .btn-sm {
    padding: 5px 10px;
    font-size: 14px;
}

:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #modalRutinaPro .bloque-label {
    color: var(--n-texto, #ffffff);
    margin-bottom: 15px;
    display: block;
    text-align: center;
    font-weight: bold;
}

:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #modalRutinaPro #seriesTable {
    width: 100%;
    margin-top: 15px;
}

:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #modalRutinaPro #seriesTable th,
:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #modalRutinaPro #seriesTable td {
    text-align: center;
}

/* Todos los demás estilos anidados bajo #modalRutinaPro */
:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #modalRutinaPro .dropdown-item.selected {
    background-color: #007bff;
    color: white;
}

:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #modalRutinaPro .dropdown-filter {
    background-color: var(--n-sup-1, #191d25);
    border: 1px solid var(--n-borde, #2c3038);
}

:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #modalRutinaPro .search i {
    color: var(--n-texto-suave, gray);
    pointer-events: none;
}

:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #modalRutinaPro .tabs {
    display: flex;
    margin-bottom: 10px;
}

/* Estilos específicos para los botones de pestaña en modalRutinaPro */
:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #modalRutinaPro .tab-button {
    flex: 1;
    padding: 10px;
    cursor: pointer;
    border: none;
    /* Eliminamos el borde completo */
    border-bottom: 2px solid transparent;
    /* Preparamos para el efecto activo */
    text-align: center;
    color: var(--n-texto-suave, #a0a0a0);
    /* Color para pestañas inactivas */
    background-color: transparent;
    transition: all 0.3s ease;
}

:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #modalRutinaPro .tab-button.active {
    color: var(--main-blue);
    /* Color naranja para pestaña activa */
    border-bottom: 2px solid var(--main-blue);
    /* Línea inferior naranja */
    font-weight: bold;
    /* Opcional: texto en negrita para activo */
}

:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #modalRutinaPro .tab-button:hover {
    color: var(--main-blue);
    /* Color naranja al pasar el mouse */
}

:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #modalRutinaPro .tab-content {
    display: none;
}


:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #modalRutinaPro .modal-custom-size {
    max-width: 1400px;
}

@media (max-width: 1400px) {
    :where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #modalRutinaPro .modal-custom-size {
        max-width: 90%;
    }
}

:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #modalRutinaPro .tab-content.active {
    display: block;
}

:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #modalRutinaPro .image-upload-container2 {
    border: 2px dashed #ccc;
    padding: 20px;
    text-align: center;
    border-radius: 8px;
    background-color: var(--n-sup-2, #2A3038);
    cursor: pointer;
    transition: border-color 0.3s ease;
}

:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #modalRutinaPro .image-upload-container2:hover {
    border-color: #007bff;
}

:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #modalRutinaPro .image-upload-container2 p {
    margin-bottom: 10px;
    color: var(--n-texto-tenue, #666);
}

:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #modalRutinaPro .listado-ejercicios {
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #modalRutinaPro .list-group-item {
    cursor: pointer;
    background-color: var(--n-sup-3, #666);
}

:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #modalRutinaPro .list-group-item:hover {
    background-color: #f8f9fa;
}

:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #modalRutinaPro .dropzone {
    border: 3px dashed var(--main-blue);
    /* Tu color naranja */
    padding: 25px;
    text-align: center;
    color: #0081cc;
    /* Naranja más oscuro para texto */
    font-size: 16px;
    cursor: pointer;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 2px 4px rgba(0, 145, 255, 0.1);
    margin: 10px 0;
    position: relative;
    overflow: hidden;
}

/* Efecto hover */
:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #modalRutinaPro .dropzone:hover {
    box-shadow: 0 4px 8px rgba(0, 145, 255, 0.15);
}

/* Efecto cuando se está arrastrando */
:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #modalRutinaPro .dropzone.dragover {
    background-color: #ffe0cc;
    border-color: #0081cc;
    animation: pulse 1.5s infinite;
    /* Animación de pulso */
}

/* Animación de pulso */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 153, 255, 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(0, 153, 255, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(0, 195, 255, 0);
    }
}

/* Texto */
:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #modalRutinaPro .dropzone p {
    margin: 0;
    font-weight: 600;
    font-size: 18px;
    color: var(--main-blue);
    transition: all 0.3s ease;
}

/* Icono */
:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #modalRutinaPro .dropzone .dropzone-icon {
    font-size: 40px;
    color: var(--main-blue);
    margin-bottom: 12px;
    transition: all 0.3s ease;
}

/* Efecto hover para icono y texto */
:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #modalRutinaPro .dropzone:hover p,
:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #modalRutinaPro .dropzone:hover .dropzone-icon {
    transform: translateY(-2px);
}

/* Efecto activo */
:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #modalRutinaPro .dropzone:active {
    transform: scale(0.98);
}

/* Degradado sutil (opcional) */
:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #modalRutinaPro .dropzone::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--main-blue), #0099ff);
    opacity: 0.3;
}

:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #modalRutinaPro .dropzone p {
    margin: 0;
}

:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #modalRutinaPro .ejercicio-arrastrado {
    padding: 12px;
    margin: 8px 0;
    background-color: var(--n-sup-2, #2A3038);
    border: 1px solid var(--n-borde, #444);
    border-radius: 5px;
    cursor: move;
    width: 100%;
    color: var(--n-texto, #fff);
    flex-direction: column;
}

:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #modalRutinaPro .ejercicio-thumbnail {
    width: 65px;
    height: 65px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #modalRutinaPro .ejercicio-thumbnail img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #modalRutinaPro .ejercicio-check {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #modalRutinaPro .botones-ejercicio {
    display: flex;
    gap: 5px;
}

:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #modalRutinaPro .series-info {
    font-size: 0.9rem;
    color: var(--n-texto-suave, #adb5bd);
}

:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #modalRutinaPro .detalles-ejercicio {
    margin-top: 10px;
    padding: 10px;
    background-color: var(--n-sup-3, #343a40);
    border: 1px solid var(--n-borde, #444);
    border-radius: 5px;
    width: 100%;
    color: var(--n-texto, #ddd);
}

:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #modalRutinaPro .serie-detalle {
    margin-bottom: 10px;
    padding: 10px;
    background-color: var(--n-sup-2, #2A3038);
    border: 1px solid var(--n-borde, #444);
    border-radius: 5px;
}

:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #modalRutinaPro .btn-expandir {
    border-color: var(--n-borde, #555);
    color: var(--n-texto-suave, #aaa);
    padding: 0px 8px;
    margin-top: -5px;
}

:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #modalRutinaPro .btn-expandir:hover {
    background-color: var(--n-sup-3, #444);
    color: var(--n-texto, #fff);
}

:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #modalRutinaPro .btn-outline-info,
:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #modalRutinaPro .btn-outline-warning,
:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #modalRutinaPro .btn-outline-danger {
    border-color: var(--n-borde, #444);
    background-color: transparent;
    padding: 2px 6px;
}

:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #modalRutinaPro .btn-outline-info {
    color: #0dcaf0;
}

:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #modalRutinaPro .btn-outline-warning {
    color: #ffc107;
}

:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #modalRutinaPro .btn-outline-danger {
    color: #dc3545;
}

:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #modalRutinaPro .btn-outline-info:hover {
    background-color: #0dcaf020;
}

:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #modalRutinaPro .btn-outline-warning:hover {
    background-color: #ffc10720;
}

:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #modalRutinaPro .btn-outline-danger:hover {
    background-color: #dc354520;
}

:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #modalRutinaPro .bloque-container {
    background-color: var(--n-sup-2, #2A3038);
    border-color: var(--n-borde, #444) !important;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #modalRutinaPro .bloque-container input {
    background-color: var(--n-sup-3, #343a40) !important;
    border-color: var(--n-borde, #444) !important;
    color: var(--n-texto, #fff) !important;
}

:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #modalRutinaPro .bloque-container .input-group-text {
    background-color: var(--n-sup-3, #343a40) !important;
    border-color: var(--n-borde, #444) !important;
    color: var(--n-texto, #fff) !important;
}

:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #form-rutina-pro .tag-container {
    padding: 0;
}

:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #form-rutina-pro .tag-container>.choices {
    width: 100%;
}

:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #dynamic-ejercicios .ej-list {
    min-height: 80px;
    padding: 10px;
    border: 1px dashed rgba(var(--n-velo, 255, 255, 255), .15);
    border-radius: 10px;
}

:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #modalRutinaPro .dropzone {
    height: 100%;
    justify-content: flex-start;
}

/* Superseries */
:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) .rutina-bulk-toolbar {
    display: none;
    border: 1px dashed var(--main-blue);
    border-radius: 10px;
    padding: 10px;
    margin: 10px 0;
    background: rgba(255, 102, 0, 0.08);
}

:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) .rutina-bulk-toolbar.is-active {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) .rutina-ej-check-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 8px;
    white-space: nowrap;
}

:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) .rutina-ej-check {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) .rutina-superserie-group {
    border: 2px solid var(--main-blue);
    background: rgba(0, 149, 255, 0.06);
    border-radius: 14px;
    margin: 16px 0;
    /* overflow: hidden; */
    box-shadow: 0 0 0 1px rgba(0, 149, 255, 0.12);
}

:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) .rutina-superserie-header {
    background: rgba(0, 149, 255, 0.18);
    padding: 12px;
    border-bottom: 1px solid rgba(0, 149, 255, 0.4);
}

:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) .rutina-superserie-body {
    min-height: 82px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.18);
}

:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) .rutina-superserie-body .ejercicio-arrastrado {
    margin-left: 0;
    border-left: 4px solid var(--main-blue) !important;
    background: rgba(255, 255, 255, 0.04);
}

/* Es el único sitio donde salen las series de la superserie: que se vea */
:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) .rutina-superserie-meta {
    font-size: 14px;
    margin-top: 2px;
}

/* Campo que ya no se edita aquí porque lo fija la superserie */
:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) .mp-campo-heredado {
    opacity: 0.65;
    cursor: not-allowed;
    font-style: italic;
}

/* Al venir desde el lápiz de un ejercicio en Programas, para no perderlo de vista */
:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) .ejercicio-arrastrado.rutina-ej-foco {
    outline: 2px solid var(--main-yellow, #ffc107);
    outline-offset: 2px;
    animation: rutinaEjFoco 1.2s ease-in-out 2;
}

@keyframes rutinaEjFoco {
    0%, 100% { background: transparent; }
    50% { background: rgba(255, 193, 7, 0.18); }
}

:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) .rutina-superserie-drag-handle {
    cursor: move;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    color: var(--main-blue);
    font-size: 20px;
}

:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) .btn-crear-superserie:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) .ej-placeholder,
:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) .bloque-placeholder,
:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) .rutina-superserie-placeholder {
    border: 2px dashed #dfdfdf !important;
    background: rgba(228, 228, 228, 0.12) !important;
    border-radius: 12px;
    min-height: 70px;
    min-width: 100% !important;
    max-width: 100% !important;
    margin: 10px 0;
}

:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) .ui-sortable-helper {
    opacity: 0.92;
    transform: scale(1.01);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
    z-index: 3000 !important;
}

:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) .rutina-external-ejercicio-helper {
    background: var(--n-sup-1, #212529);
    color: var(--n-texto, #fff);
    border: 2px solid var(--main-blue);
    border-radius: 12px;
    padding: 12px;
    min-width: 260px;
    max-width: 420px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
    z-index: 4000 !important;
}

:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) .rutina-external-ejercicio-helper .helper-title {
    font-weight: 700;
    font-size: 14px;
}

:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) .rutina-external-ejercicio-helper .helper-sub {
    font-size: 12px;
    color: #7ac5ff;
}

:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) .rutina-superserie-group.is-drop-target {
    box-shadow: 0 0 0 3px rgba(0, 149, 255, 0.45);
    background: rgba(0, 149, 255, 0.10);
    outline: 2px dashed var(--main-blue);
    outline-offset: -6px;
}

:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) .rutina-superserie-body.ui-sortable-hover,
:where(html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) .rutina-superserie-body:hover {
    outline: 2px dashed var(--main-blue);
    outline-offset: -6px;
    background: rgba(0, 149, 255, 0.12);
}


/* ------------------------------------------------------------------
   modal_ejercicios.php  (en: entrenamientos-ejercicios, entrenamientos-programas, entrenamientos-rutinas)
   Estaba en su propio <style>; trasladado el 2026-09-30.
   ------------------------------------------------------------------ */
/* Estilos para el ícono de búsqueda */
:where(html[data-pantalla="entrenamientos-ejercicios"], html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) .search i {
  color: var(--n-texto-suave, gray);
  /* Cambia el color a gris */
  pointer-events: none;
  /* Evita que el ícono interfiera con el clic en el input */
}

/* Estilos para el input de archivo personalizado */
:where(html[data-pantalla="entrenamientos-ejercicios"], html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) .custom-file-input {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Espacio entre el botón y el texto */
}

/* Estilos para el botón personalizado */
:where(html[data-pantalla="entrenamientos-ejercicios"], html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #customButton {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

:where(html[data-pantalla="entrenamientos-ejercicios"], html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #customButton:hover {
  background-color: #0056b3;
}

/* Estilos para el nombre del archivo */
:where(html[data-pantalla="entrenamientos-ejercicios"], html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #fileName {
  font-size: 14px;
  color: var(--n-texto-tenue, #666);
}

/* Estilo personalizado para el botón deshabilitado */
:where(html[data-pantalla="entrenamientos-ejercicios"], html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) .btn-outline-secondary:disabled {
  background-color: #f8f9fa;
  /* Fondo claro */
  border-color: #ccc;
  /* Borde gris */
  color: #999;
  /* Texto gris */
  cursor: not-allowed;
  /* Cursor "no permitido" */
}

/* Estilos para el contenedor de carga de imágenes */
:where(html[data-pantalla="entrenamientos-ejercicios"], html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) .image-upload-container,
:where(html[data-pantalla="entrenamientos-ejercicios"], html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) .image-upload-container-edit {
  border: 2px dashed #ccc;
  /* Borde discontinuo */
  padding: 20px;
  /* Espaciado interno */
  text-align: center;
  /* Centrar el contenido */
  border-radius: 8px;
  /* Bordes redondeados */
  background-color: #2a3038;
  /* Fondo claro */
  cursor: pointer;
  /* Cambiar el cursor al pasar el mouse */
  transition: border-color 0.3s ease;
  /* Transición suave */

  display: flex;
  justify-content: center;
  flex-direction: column;
}

:where(html[data-pantalla="entrenamientos-ejercicios"], html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) .image-upload-container:hover,
:where(html[data-pantalla="entrenamientos-ejercicios"], html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) .image-upload-container-edit:hover {
  border-color: #007bff;
  /* Cambiar color del borde al pasar el mouse */
}

:where(html[data-pantalla="entrenamientos-ejercicios"], html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) .image-upload-container p {
  margin-bottom: 10px;
  /* Espacio debajo del texto */
  color: #666;
  /* Color del texto */
}

:where(html[data-pantalla="entrenamientos-ejercicios"], html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #form-nuevo input:not([type="checkbox"]),
:where(html[data-pantalla="entrenamientos-ejercicios"], html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #form-nuevo select {
  min-height: 44px;
}

:where(html[data-pantalla="entrenamientos-ejercicios"], html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #form-nuevo .tag-container {
  padding: 0;
}

/* #form-nuevo .choices__inner {
  padding: 0 7.5px;
} */

:where(html[data-pantalla="entrenamientos-ejercicios"], html[data-pantalla="entrenamientos-programas"], html[data-pantalla="entrenamientos-rutinas"]) #form-nuevo .tag-container>.choices {
  width: 100%;
}

/* ===================================================== Entrada con QR ==
 * Mi Centro → Entrada con QR y Entradas de hoy (2026-10-04).
 * El QR va siempre sobre blanco, también en tema oscuro: un lector necesita
 * contraste, y un QR claro sobre oscuro muchos móviles no lo leen.
 */
.entrada-qr-caja {
  display: inline-block;
  width: 260px;
  max-width: 100%;
  padding: 12px;
  background: #fff;
  border-radius: 12px;
}

.entrada-qr-caja svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Quien no está al día, bien visible en la lista de recepción. */
tr.entrada-aviso td {
  background-color: rgba(255, 193, 7, 0.14);
}


/* ------------------------------------------------------------------
   PANTALLAS DE ACCESO: login.php y recuperar.php (2026-10-07)

   La foto del restaurante de fondo con una capa oscura encima, y la
   tarjeta de cristal oscuro sobre ella. El dorado es el del logo. Los
   campos llevan .form-libre y .no-form-color para quedar fuera de los
   colores del panel (azul, oliva, teja), que aqui no pintan nada.
   ------------------------------------------------------------------ */
body.mp-acceso {
    --acceso-oro: #E9B949;
    --acceso-oro-2: #C98F1E;
    --acceso-texto: #F5F1EA;
    --acceso-suave: rgba(245, 241, 234, .68);
    background: #120E0A;
}

body.mp-acceso .auth.login-bg {
    background:
        linear-gradient(160deg, rgba(14, 10, 6, .55) 0%, rgba(14, 10, 6, .82) 100%),
        url("../images/auth/fondo-acceso.webp") center center / cover no-repeat fixed !important;
    min-height: 100vh;
    padding: 24px 16px;
}

body.mp-acceso .mp-acceso__caja {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    padding: 8px 0 0;
    color: var(--acceso-texto);
    background: rgba(18, 14, 10, .72) !important;
    border: 1px solid rgba(233, 185, 73, .28);
    border-radius: 0 28px 0 28px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

body.mp-acceso .mp-acceso__logo {
    display: block;
    margin: 0 auto;
    padding: 28px 32px 0;
    max-width: 100%;
    height: auto;
}

body.mp-acceso .card-body {
    padding: 24px 36px 32px !important;
}

body.mp-acceso .mp-idioma-fila {
    justify-content: center;
    margin-bottom: 1.25rem;
}

body.mp-acceso .mp-idioma-fila a {
    color: var(--acceso-suave);
}

body.mp-acceso .card-title {
    color: var(--acceso-oro) !important;
    text-align: center !important;
    font-size: 1.5rem;
    letter-spacing: .04em;
    margin-bottom: 1.5rem !important;
}

body.mp-acceso p {
    color: var(--acceso-suave);
}

body.mp-acceso label {
    color: var(--acceso-suave) !important;
    font-size: .78rem;
    letter-spacing: .06em;
    margin-bottom: .4rem;
}

body.mp-acceso .form-group {
    margin-bottom: 1.1rem;
}

body.mp-acceso .form-control.mp-acceso__campo {
    height: 46px;
    color: var(--acceso-texto) !important;
    background: rgba(255, 255, 255, .07) !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    border-radius: 0 14px 0 14px !important;
    box-shadow: none !important;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

body.mp-acceso .form-control.mp-acceso__campo::placeholder {
    color: rgba(245, 241, 234, .35) !important;
}

body.mp-acceso .form-control.mp-acceso__campo:focus {
    background: rgba(255, 255, 255, .1) !important;
    border-color: var(--acceso-oro) !important;
    box-shadow: 0 0 0 3px rgba(233, 185, 73, .2) !important;
}

/* El autocompletado de Chrome pinta su propio fondo claro encima. */
body.mp-acceso .mp-acceso__campo:-webkit-autofill {
    -webkit-text-fill-color: var(--acceso-texto);
    -webkit-box-shadow: 0 0 0 1000px #2a241c inset !important;
    caret-color: var(--acceso-texto);
}

body.mp-acceso .mp-pass-ojo {
    color: var(--acceso-suave);
}

body.mp-acceso .mp-pass-ojo:hover,
body.mp-acceso .mp-pass-ojo:focus-visible {
    color: var(--acceso-oro);
}

body.mp-acceso .mp-acceso__boton {
    margin-top: .6rem;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1E1508 !important;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: .02em;
    background: linear-gradient(135deg, var(--acceso-oro), var(--acceso-oro-2)) !important;
    border: 0 !important;
    border-radius: 0 14px 0 14px !important;
    box-shadow: 0 8px 22px rgba(201, 143, 30, .35);
    transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}

body.mp-acceso .mp-acceso__boton:hover,
body.mp-acceso .mp-acceso__boton:focus-visible {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(201, 143, 30, .45);
}

body.mp-acceso .mp-acceso__enlace {
    display: inline-block;
    margin-top: 1.4rem;
    color: var(--acceso-suave);
    font-size: .9rem;
    text-decoration: none;
    transition: color .2s ease;
}

body.mp-acceso .mp-acceso__enlace:hover,
body.mp-acceso .mp-acceso__enlace:focus-visible {
    color: var(--acceso-oro);
}

body.mp-acceso .alert {
    font-size: .9rem;
    border-radius: 0 14px 0 14px;
}

@media (max-width: 480px) {
    body.mp-acceso .card-body {
        padding: 20px 22px 26px !important;
    }

    body.mp-acceso .mp-acceso__logo {
        padding: 22px 22px 0;
    }
}


/* ------------------------------------------------------------------
   MENSAJES DE QRMENU (2026-10-07): el sobre de la barra de arriba y el
   buzón del propietario (mensajes.php). Ver mensajes-funciones.php.
   ------------------------------------------------------------------ */
.mp-sobre {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 10px;
    color: inherit;
}

.mp-sobre .mdi {
    font-size: 1.35rem;
    line-height: 1;
}

.mp-sobre__punto {
    position: absolute;
    top: 50%;
    right: 6px;
    margin-top: -14px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--main-red, #FF4D5E);
    box-shadow: 0 0 0 2px var(--bg-sidebar, #151922);
    animation: mp-sobre-latido 2s ease-in-out infinite;
}

@keyframes mp-sobre-latido {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.25); }
}

@media (prefers-reduced-motion: reduce) {
    .mp-sobre__punto { animation: none; }
}

.mp-buzon {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mp-buzon__item + .mp-buzon__item {
    border-top: 1px solid var(--border-soft, #343B49);
}

.mp-buzon__cabeza {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    color: inherit;
    text-decoration: none;
}

.mp-buzon__cabeza:hover {
    color: inherit;
    background: rgba(127, 127, 127, .08);
}

.mp-buzon__punto {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: transparent;
}

.mp-buzon__item.nuevo .mp-buzon__punto {
    background: var(--main-red, #FF4D5E);
}

.mp-buzon__asunto {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mp-buzon__item.nuevo .mp-buzon__asunto,
.mp-buzon__item.abierto .mp-buzon__asunto {
    font-weight: 700;
}

.mp-buzon__fecha {
    flex: none;
    font-size: .8rem;
    color: var(--text-muted, #8B95B7);
}

.mp-buzon__cuerpo {
    padding: 0 20px 18px 40px;
    white-space: normal;
    overflow-wrap: anywhere;
}

.mp-buzon__cuerpo p:last-child {
    margin-bottom: 0;
}

/* Plataforma → Mensajes: la casilla del correo en letra normal (no la de las etiquetas) y un cuadro de texto que se vea. */
.mp-msg-casilla {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-family: var(--font-texto) !important;
    font-size: .95rem !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-variant: normal !important;
    cursor: pointer;
}

textarea.form-control.mp-msg-cuerpo {
    min-height: 160px;
    resize: vertical;
}