/**
 * ESTILOS CENTRALIZADOS - SPORTINGER
 *
 * Este archivo contiene todos los estilos globales de la aplicación organizados por secciones.
 */

/***********************************************************************************/
/*                               Sección Global                                    */
/***********************************************************************************/

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Contenedor responsive genérico */
.content-main-wrapper {
    max-width: 1310px;
    margin: 0 auto;
    padding: 20px;
    width: 100%; /* 100% en móvil */
    overflow: visible;
}

/* En móvil pegamos el contenido a los bordes: solo dejamos 4px de
   margen horizontal para maximizar el ancho útil. El padding
   vertical se conserva (20px arriba y abajo) — el cambio afecta
   ÚNICAMENTE al margen derecho e izquierdo. Aplicado en el wrapper
   global -> impacta a todas las páginas del sistema sin tocarlas
   una por una. */
@media (max-width: 767.98px) {
    .content-main-wrapper {
        padding-left:  4px;
        padding-right: 4px;
    }
}

@media (min-width: 768px) {
    .content-main-wrapper {
        width: 90%; /* Tablets */
    }
}

@media (min-width: 992px) {
    .content-main-wrapper {
        width: 80%; /* Desktop normal */
    }
}

@media (min-width: 1200px) {
    .content-main-wrapper {
        width: 70%; /* Pantallas grandes */
    }
}

.div_contenido_principal {
    width: 100%;
    overflow: visible;
}

html {
    height: 100%;
}

body {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-gray);
    background-color: #ffffff;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    color: var(--title-gray);
    margin: 0;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.1rem; }
h6 { font-size: 1rem; }

/* Enlaces genéricos: usamos el azul corporativo (más sobrio y oscuro
   que el `#0d6efd` chillón que Bootstrap trae por defecto). Aplica a
   cualquier `<a>` que no tenga una clase con su propio color (`.btn`,
   `.nav-link`, `.dropdown-item`, etc. mantienen sus reglas específicas
   porque tienen mayor especificidad o vienen definidas después). */
a {
    color: var(--primary-blue);
}
a:hover {
    color: var(--primary-blue-hover);
}

/* Enlace estándar de ficha de participante — cualquier web añade
   `<a class="link-consulta-participante" data-tipo="1|2" data-id="N">…</a>`
   y el listener global (ver `fun_modal_ficha_participante()`) abre la
   ficha en la modal centralizada. Estilo: azul corporativo estándar
   + hover subrayado. */
.link-consulta-participante {
    color: var(--primary-blue);
    text-decoration: none;
    cursor: pointer;
}
.link-consulta-participante:hover {
    color: var(--primary-blue-hover);
    text-decoration: underline;
}

/* Modal genérica de "Ficha del participante" (emitida por
   `fun_modal_ficha_participante()`). Dimensiones amplias para que
   quepa la ficha completa con pestañas (Info / Redes / Componentes
   / Estadísticas / Logros). La ficha vive dentro de un <iframe>
   para aislar completamente su contexto JS/CSS/DOM. */
#modal-ficha-participante .modal-dialog {
    max-width: 1140px;
    width: min(1140px, calc(100vw - 30px));
    height: 95vh;
    margin: 2.5vh auto;
}

/* Móvil: en portátiles/smartphones `vh` cuenta la barra dinámica del
   navegador y la modal se sale por abajo. Usamos `dvh` (dynamic
   viewport height) que mide el alto REAL visible, y además pegamos la
   modal al ancho completo con un margen pequeño. */
@media (max-width: 767.98px) {
    #modal-ficha-participante .modal-dialog {
        width: calc(100vw - 12px);
        max-width: none;
        height: calc(100dvh - 12px);
        margin: 6px auto;
    }
}
#modal-ficha-participante .modal-content {
    height: 100%;
    overflow: hidden;
}
/* El iframe ocupa TODO el alto restante del modal-content.
   Usamos flex en el modal-content implícitamente vía este iframe
   con `flex: 1 1 auto` y un `min-height: 0` para que respete el
   contenedor. El scroll interno de la ficha lo maneja el propio
   iframe (el navegador le da sus barras). */
#modal-ficha-participante-iframe {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    height: 100%;
    border: 0;
    display: block;
}

/* ===============================================================
   `body.ficha-modal`: lo marca cualquier ficha pública que se abra
   siempre dentro de la modal genérica (`fun_modal_ficha_participante`
   en `includes/php_generic_objects.php`). Hoy la primera es
   `ficha_deportista_usr.php`; las futuras `profile_team_usr.php`,
   `profile_double_usr.php`, etc., solo tienen que poner la clase y
   heredan todo este tratamiento:

   - Vertical: cadena flex (`body`, `.content-main-wrapper`,
     `.div_contenido_principal`, el `<form>`, su `<fieldset>` y la
     `.tab-content`) con `flex: 1 1 auto` para que el fondo blanco
     llene todo el iframe que la aloja. Sin esto, la ficha solo
     mide lo que necesita y se ve un hueco gris por debajo.
   - Horizontal: anulamos los `max-width`/`width: X%` que
     `.content-main-wrapper` tiene por media query para la vista
     de página completa; aquí queremos ocupar todo el ancho del
     iframe.
   - Un pequeño colchón de 16 px (8 px en móvil) alrededor para
     que el contenido no quede pegado al borde. */
/* Importante: el `html` también debe tener `height: 100%`. Sin él, el
   `body` con `height: 100%` no tiene referencia y la cadena de
   `flex: 1 1 auto` interior no estira hasta el fondo del iframe. */
html:has(body.ficha-modal) {
    height: 100%;
}
body.ficha-modal {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
    padding: 16px;
    box-sizing: border-box;
}
@media (max-width: 767.98px) {
    body.ficha-modal { padding: 8px; }
}
body.ficha-modal .content-main-wrapper,
body.ficha-modal .div_contenido_principal,
body.ficha-modal form,
body.ficha-modal form > fieldset,
body.ficha-modal .tab-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
body.ficha-modal .tab-pane.active {
    flex: 1 1 auto;
}
body.ficha-modal .content-main-wrapper {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
body.ficha-modal .div_contenido_principal,
body.ficha-modal form,
body.ficha-modal form > fieldset,
body.ficha-modal .tab-content {
    width: 100%;
    max-width: none;
}

/* `body.ficha-consulta`: se marca en ficha_deportista.php y en
   profile_team.php cuando el visitante NO es el propietario de la
   ficha (visita pública o apertura desde la modal genérica). Oculta
   controles de edición que la vista de consulta no debe permitir —
   antes vivían con selectores `#modal-ficha-participante` en cada
   web de búsqueda, pero al pasar la ficha a iframe esos selectores
   ya no cruzan la barrera del iframe. Aquí la regla vive dentro de
   la propia ficha, así aplica tanto en modo modal como en visita
   pública directa por URL. */
body.ficha-consulta #componentes .form-check,
body.ficha-consulta #btn-nuevo-componente,
body.ficha-consulta #btn-nuevo-componente-bottom,
body.ficha-consulta #componentes .btn-eliminar-componente,
body.ficha-consulta #componentes .btn-baja,
body.ficha-consulta #componentes .btn-alta {
    display: none !important;
}

/* En móvil, los `.tab-pane` "de contenido" de las fichas (equipo
   y deportista) se estiran para aprovechar el máximo ancho. El
   wrapper de la web (`.content-main-wrapper`) mete `padding: 20px`
   en móvil; con `margin-left/right: -14px` compensamos y dejamos
   ~6px efectivos hasta el borde del iframe/pantalla. El
   `padding-left: 4px` interno pega el contenido al borde
   izquierdo, alineado con la foto del componente.
   El estiramiento se aplica al tab-pane COMPLETO (no al contenedor
   de listado interior) para que también afecte a estados vacíos —
   por ejemplo el literal "Sin información proporcionada" que vive
   fuera del container.
   Se excluyen a propósito las dos primeras pestañas de cada ficha
   (Datos personales / General + Localización), que son formularios
   estructurados y no queremos moverlos. */
@media (max-width: 767.98px) {
    #deporte,        /* ficha deportista → Experiencia */
    #componentes,    /* ficha equipo     → Componentes */
    #estadisticas,   /* deportista y equipo */
    #records,        /* ficha deportista → Records */
    #logros,         /* deportista y equipo */
    #redes,          /* deportista y equipo → Redes sociales */
    #seguridad {     /* ficha deportista → Seguridad (solo propietario) */
        margin-left: -14px;
        margin-right: -14px;
        padding-left: 4px;
    }
}

/***********************************************************************************/
/*                                   Tipografía                                    */
/***********************************************************************************/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/***********************************************************************************/
/*                     Variables css (Colores principales)                         */
/***********************************************************************************/

:root {
    /* Azules */
    --primary-blue: #1e5aa8;          /* azul corporativo más sobrio (antes era #0d6efd, muy saturado) */
    --primary-blue-hover: #164281;
    /* Cabeceras de secciones colapsables: giramos en torno al azul
       corporativo (--primary-blue #1e5aa8), un pelín más claro para
       que la banda ancha del header no pese tanto como un botón. */
    --section-header-blue: #3068b3;
    --section-header-blue-hover: #245f9d;
    --section-header-blue-dark: #1e5aa8;

    /* Grises */
    --title-gray: #2c3e50;
    --text-gray: #333333;
    --light-gray: #e9ecef;
    --bg-gray: #f8f9fa;
    /* Gris estándar para campos "solo consulta" (read-only). Se aplica
       vía la clase utility `.campo-solo-consulta` definida más abajo. */
    --campo-consulta-bg: #f4f5f7;
    /* Borde tenue a juego con el fondo "solo consulta". */
    --campo-consulta-border: #e4e6ea;

    /* Otros colores */
    --white: #ffffff;
    --card-bg: #f0f2f5;               /* fondo de las cards: mismo tono que la píldora activa de la toolbar */
    --success-green: #28a745;
    --success-green-hover: #218838;
    --danger-red: #cc4b47;            /* antes #d9534f; un pelín menos saturado */
    --danger-red-hover: #b93430;      /* antes #c9302c */

    /* Sombras */
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
}

/***********************************************************************************/
/*                            Header (Cabecera superior)                           */
/***********************************************************************************/

/* ============================================================
   HEADER — mismo color de fondo que el body (`--bg-gray`), para
   que cabecera y contenido queden integrados en un continuo.
   Logo tipográfico "sportinZer" con la Z en el azul corporativo,
   botones de icono en tono oscuro. La navbar de secciones
   (fun_toolbar) se pinta debajo con su propio estilo.
   ============================================================ */
.main-header {
    /* Header en azul corporativo con degradado vertical: arriba
       `--primary-blue` (#1e5aa8), abajo `--primary-blue-hover`
       (#164281). Así la parte inferior se fusiona con el
       `border-bottom` en `--primary-blue-hover` de forma natural.
       Todos los elementos internos (logo, iconos, hamburguesa)
       pasan a blanco por las reglas de abajo. */
    background: linear-gradient(to bottom, var(--primary-blue) 0%, var(--primary-blue-hover) 100%);
    color: #ffffff;
    padding: 12px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    border-bottom: 1px solid var(--primary-blue-hover);
}

.logo-container {
    display: flex;
    align-items: center;
}

.logo-link {
    text-decoration: none;
    display: flex;
    align-items: center;
    transition: opacity 0.2s ease;
}

.logo-link:hover {
    opacity: 0.85;
}

.logo-text {
    font-size: 1.75rem;
    font-weight: 800;
    /* `line-height: 1` para que la caja del texto NO tenga espacio
       extra arriba/abajo. Sin esto, el line-height por defecto
       (~1.2) hacía que el logo se viera visualmente desplazado
       hacia abajo respecto a la hamburguesa (que ya usa `line-height:
       1`). Con ambos a 1, el flex `align-items: center` del header
       los centra por su altura real. */
    line-height: 1;
    /* Header pasa a azul → logo íntegro (incluida la Z) en blanco. */
    color: #ffffff;
    letter-spacing: -0.5px;
    /* Sombra sutil: desplazamiento vertical 2px + difuminado 4px al
       25% de opacidad. Da una ligera sensación de elevación del
       logo sobre el fondo azul, sin efecto 3D marcado. */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}

.logo-text .logo-z {
    /* Color y fuente heredados del `.logo-text` padre (blanco sobre
       el fondo azul del header, misma tipografía que el resto del
       nombre). Solo se le sube un puntito el tamaño (1.1em) para
       que la "Z" sobresalga ligeramente. */
    color: inherit;
    font-size: 1.1em;
}

.logo-img {
    height: 40px;
    width: auto;
}

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

.header-icon-btn {
    background: transparent;
    border: none;
    /* Header azul → iconos blancos. */
    color: #ffffff;
    font-size: 1.35rem;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    border-radius: 50%;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-icon-btn:hover {
    /* Sobre header azul: hover blanco translúcido — se ve como una
       burbuja clara alrededor del icono, coherente con el resto de
       la cabecera. El icono se queda blanco (subir el tono a
       amarillo/similar rompería la paleta). */
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    transform: scale(1.05);
}

.header-icon-btn i {
    font-size: 1.25rem;
}

/* ============================================================
   Avatar de usuario en el header. Pastilla circular con la foto del
   usuario logueado (fallback a `bi-person-circle` si no hay foto o
   la carga falla) o el mismo icono genérico cuando no hay sesión.
   Sustituye a los antiguos iconos de "Entrar" y "Desconectar" del
   header, con lo que el modelo de sesión queda unificado en desktop
   y móvil: avatar sin sesión → login; con sesión → foto que lleva
   a `user_conf.php`. En móvil se activa `margin-left: auto` para
   empujarlo al extremo derecho del header.
   ============================================================ */
.header-user-avatar {
    display: inline-flex;
    width: 34px;
    height: 34px;
    /* Separación extra respecto a los iconos de Ayuda/Contactar
       (`.header-actions` ya tiene gap: 8px entre ítems; aquí lo
       ampliamos a 36px total). En móvil el media query pisa este
       margin-left con `auto` para pegar el avatar al borde derecho. */
    margin-left: 36px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.35);
    align-items: center;
    justify-content: center;
    color: #ffffff;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
    flex-shrink: 0;
}
.header-user-avatar:hover,
.header-user-avatar:focus {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.6);
    color: #ffffff;
}
.header-user-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.header-user-avatar-fallback {
    width: 100%;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    line-height: 1;
}

/* Variante "anónimo" (sin sesión): icono genérico arriba + etiqueta
   "Login" debajo. El enlace deja de ser un círculo compacto y pasa a
   columna con fondo transparente — así el icono mantiene su aspecto
   redondo y el texto queda alineado debajo sin invadirlo. */
.header-user-avatar--anon {
    width: auto;
    height: auto;
    border-radius: 8px;
    background: transparent;
    border: none;
    flex-direction: column;
    gap: 2px;
    padding: 2px 6px;
}
.header-user-avatar--anon:hover,
.header-user-avatar--anon:focus {
    background: rgba(255, 255, 255, 0.1);
    border-color: transparent;
}
.header-user-avatar--anon .header-user-avatar-fallback {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.35);
}
.header-user-avatar-label {
    font-size: 0.72rem;
    font-weight: 500;
    color: #ffffff;
    line-height: 1;
}

/* Enlace de cierre de sesión en `user_conf.php` — discreto, alineado
   a la izquierda sobre el margen del contenido, justo antes del título
   "Información usuario". Icono + texto en azul corporativo; hover con
   subrayado para marcarlo como clicable. */
.user-conf-logout-link {
    color: var(--primary-blue);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
}
.user-conf-logout-link:hover,
.user-conf-logout-link:focus {
    color: var(--primary-blue-hover);
    text-decoration: underline;
}
.user-conf-logout-link i {
    font-size: 1.05rem;
}

/***********************************************************************************/
/*                          Toolbar (Barra de navegación)                          */
/***********************************************************************************/

/* ============================================================
   TOOLBAR — integrada con el header, mismo fondo `--bg-gray`.
   Items horizontales tipo tabs (icono + texto en línea), estado
   activo indicado por subrayado azul + color azul en icono/texto.
   Look moderno tipo GitHub / Notion / Linear.
   ============================================================ */
.main-toolbar {
    background: transparent;   /* mismo fondo que el resto de la web */
    padding: 6px 0;            /* poco aire entre las líneas y los ítems */
    position: relative;
    border-top: 1px solid var(--light-gray);
    border-bottom: 1px solid var(--light-gray);
    margin-top: 24px;      /* aire entre header y toolbar */
    margin-bottom: 24px;   /* aire entre toolbar y contenido */
}

/* Título principal (h1) de cada página:
   - Móvil: SE VE (con la nav lateral cerrada, el título ayuda a saber
     dónde estás sin tener que abrir el drawer).
   - Desktop / tablet: se oculta (la toolbar horizontal con la sección
     activa marcada ya indica la ubicación — el h1 sería redundante).
   Reversible cambiando la media query. */
@media (min-width: 768px) {
    .h1.titulo1,
    .titulo1 {
        display: none;
    }
    /* Escape hatch: páginas concretas que sí quieren mostrar el título
       en desktop (p.ej. ficha_deportista.php) añaden el modificador
       .titulo1--visible al h1. */
    .h1.titulo1.titulo1--visible,
    .titulo1.titulo1--visible {
        display: block;
    }
}

/* ============================================================
   MENÚ MÓVIL — botón hamburger en el header + drawer lateral con
   la misma navegación que la toolbar horizontal. El drawer se
   desliza desde la izquierda al pulsar el hamburger; se cierra al
   pulsar el overlay, la X, o Escape. En desktop está todo oculto.
   ============================================================ */
.mobile-menu-btn {
    display: none;   /* visible solo en móvil (media query abajo) */
    background: transparent;
    border: none;
    /* Header azul → hamburguesa en blanco. */
    color: #ffffff;
    font-size: 1.7rem;
    cursor: pointer;
    padding: 4px 8px;
    margin-right: 6px;
    border-radius: 8px;
    line-height: 1;
    transition: background 0.15s ease;
}
.mobile-menu-btn:hover {
    background: rgba(0, 0, 0, 0.05);
}

.mobile-drawer-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1099;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.mobile-drawer-overlay.open {
    display: block;
    opacity: 1;
}

.mobile-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 78%;
    max-width: 320px;
    background: #ffffff;
    z-index: 1100;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: 2px 0 16px rgba(0, 0, 0, 0.18);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.mobile-drawer.open {
    transform: translateX(0);
}

.mobile-drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--light-gray);
}
.mobile-drawer-brand {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--title-gray);
    letter-spacing: -0.5px;
}
.mobile-drawer-brand .logo-z {
    color: var(--primary-blue);
}
.mobile-drawer-close {
    background: transparent;
    border: none;
    color: var(--title-gray);
    font-size: 1.15rem;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 8px;
    line-height: 1;
    transition: background 0.15s ease;
}
.mobile-drawer-close:hover {
    background: rgba(0, 0, 0, 0.05);
}

.mobile-drawer-nav {
    display: flex;
    flex-direction: column;
    padding: 8px;
    gap: 2px;
}
.mobile-drawer-item {
    position: relative;
    padding: 14px 16px;
    text-decoration: none;
    color: var(--title-gray);
    font-size: 1rem;
    font-weight: 500;
    border-radius: 8px;
    transition: background 0.15s ease;
}
.mobile-drawer-item:hover {
    background: rgba(0, 0, 0, 0.04);
    color: var(--title-gray);
}
.mobile-drawer-item.active {
    /* Mismo par (fondo + texto) que la toolbar horizontal en
       desktop: gris `#f0f2f5` + azul `--primary-blue`, para que
       el usuario móvil vea la misma paleta al abrir el drawer. */
    background: #f0f2f5;
    color: var(--primary-blue);
    font-weight: 600;
}
.mobile-drawer-item .toolbar-notif-dot {
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
}

/* Activación por pantalla */
@media (max-width: 767.98px) {
    /* En móvil reducimos el padding horizontal del header (30px → 10px)
       para que el hamburger quede pegado al borde izquierdo y el logo
       respire sin apretarse contra los iconos de la derecha. */
    .main-header {
        padding-left: 10px;
        padding-right: 10px;
        justify-content: flex-start;
        gap: 10px;
    }
    /* Hamburger VISIBLE en móvil. Abre el drawer lateral, que ya no
       duplica las opciones de la toolbar (esas están en la toolbar
       horizontal, scrollable), solo contiene las opciones "de
       utilidad": Ayuda, Contactar y Desconectar/Entrar. */
    .mobile-menu-btn {
        display: block;
        font-size: 2rem;
        padding: 6px 10px;
        margin-right: 2px;
    }
    /* Los iconos de Ayuda y Contactar del header pasan al drawer en
       móvil para dejar aire a la toolbar horizontal. El avatar sí se
       mantiene porque ocupa poco y es el acceso rápido a sesión /
       perfil. !important porque `.header-icon-btn` lleva
       `display: flex` y algún navegador respeta la base si la
       cascada no juega a favor. */
    .header-icon-btn-ayuda,
    .header-icon-btn-contacto {
        display: none !important;
    }
    /* En móvil queremos el avatar pegado al borde derecho del header.
       Como el header es `flex-start`, es el contenedor
       `.header-actions` entero el que debe irse al final; aplicarlo
       sobre el avatar no sirve, porque está dentro de ese
       contenedor y éste sigue apretado al logo. Dentro del
       `.header-actions`, el `margin-left` extra del avatar
       (36px en desktop) se neutraliza para que quede pegado al
       borde derecho con solo el `margin-right` de aire. */
    .header-actions {
        margin-left: auto;
    }
    .header-user-avatar {
        margin-left: 0;
        margin-right: 2px;
    }
}

/* Separador entre las opciones de menú principales del drawer y las
   opciones "de utilidad" que agrupamos abajo (Ayuda, Contacto,
   Desconectar). Mismo tono gris que el border-bottom de
   .mobile-drawer-header para que se lea como parte del mismo sistema.
   Se anulan explícitamente los estilos que Bootstrap aplica a <hr>
   (background-color, opacity, height) para evitar líneas dobles. */
.mobile-drawer-sep {
    border: 0;
    border-top: 1px solid var(--light-gray);
    background: transparent;
    opacity: 1;
    height: 0;
    margin: 8px 16px;
}

.toolbar-nav {
    display: flex;
    justify-content: center;
    gap: 4px;
    flex-wrap: wrap;
    padding: 0 20px;
}

.toolbar-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    background: transparent;
    border: none;
    color: var(--title-gray);
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
    cursor: pointer;
    position: relative;
    border-radius: 999px;   /* pill / píldora en los extremos */
    font-weight: 500;
    font-size: 0.95rem;
}

.toolbar-item:hover {
    background: rgba(0, 0, 0, 0.04);
}

.toolbar-item.active {
    /* Gris neutro `#f0f2f5` de siempre en el fondo (el
       `#f8f9fa` de las tarjetas quedaba demasiado suave para
       destacar el ítem seleccionado en la toolbar) y azul
       corporativo `--primary-blue` en el texto — más vivo que
       el `--primary-blue-hover` para contrastar bien con el
       gris `--title-gray` que llevan los ítems no activos.
       En móvil la toolbar horizontal se oculta y su lugar lo
       toma el drawer (`.mobile-drawer-item`), con estilo propio. */
    background: #f0f2f5;
    color: var(--primary-blue);
    font-weight: 600;
}

.toolbar-item i {
    font-size: 1.15rem;
    font-weight: 400;
}

.toolbar-item-text {
    font-size: 0.95rem;
}

/* Indicador de scroll de la toolbar (barrita bajo los ítems). Oculto
   por defecto; el JS de `fun_toolbar()` lo activa en móvil cuando los
   ítems desbordan horizontalmente. El `thumb` tiene `will-change` para
   que el navegador composite el translateX en GPU y el seguimiento del
   dedo sea fluido. Paleta en escala de grises: track `--light-gray`
   (mismo `#e9ecef` que los bordes superior/inferior de la toolbar) y
   thumb `#adb5bd` — gris claramente más oscuro, para que destaque sin
   romper con el conjunto. */
.toolbar-scroll-track {
    display: none;
    position: relative;
    height: 3px;
    margin: 4px 14px 0;
    /* Carril invisible: solo se ve el thumb deslizándose. Lo dejamos
       `transparent` en lugar de pintarlo de blanco para que la
       barrita quede limpia encima de cualquier fondo. */
    background: transparent;
    border-radius: 3px;
    overflow: hidden;
}
.toolbar-scroll-thumb {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 20px;                            /* se recalcula por JS */
    background: #adb5bd;
    border-radius: 3px;
    transform: translateX(0);
    will-change: transform;
    transition: transform 0.08s linear;
}

@media (max-width: 768px) {
    /* Scroll horizontal: si los 6 ítems no caben a la vez, el usuario
       los arrastra con el dedo (patrón de "tabs scrollables" tipo
       chips). `flex-wrap: nowrap` fuerza una sola fila y
       `overflow-x: auto` habilita el swipe. La scrollbar nativa se
       oculta — iOS Safari no la deja estilizar — y en su lugar se
       pinta la barrita `.toolbar-scroll-track` como indicador visual. */
    .toolbar-nav {
        gap: 4px;
        padding: 0 10px;
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;              /* Firefox */
    }
    .toolbar-nav::-webkit-scrollbar {
        display: none;                      /* Chrome / Safari / Edge */
    }
    .toolbar-item {
        flex: 0 0 auto;                     /* ancho natural, sin estirar */
        flex-direction: column;
        gap: 2px;
        padding: 10px 14px;
        min-width: unset;
    }
    .toolbar-item i {
        font-size: 1.35rem;
    }
    /* Mismo tamaño que los botones del submenú en móvil
       (`.btn-nav-ficha`, 0.85rem). */
    .toolbar-item-text {
        font-size: 0.85rem;
        white-space: nowrap;                /* evita cortar "Entretenimiento" */
    }
}

/***********************************************************************************/
/*                                Footer (Pie de página)                           */
/***********************************************************************************/

.main-footer {
    background-color: #495057;
    color: var(--white);
    padding: 30px 20px;
    text-align: center;
    margin-top: auto;
    flex-shrink: 0;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
}

.footer-text {
    font-size: 0.9rem;
    margin: 0;
    opacity: 0.9;
}

.footer-links {
    margin-top: 15px;
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.footer-link {
    color: var(--white);
    text-decoration: none;
    font-size: 0.9rem;
    opacity: 0.9;
    transition: opacity 0.3s ease;
}

.footer-link:hover {
    opacity: 1;
    text-decoration: underline;
}

/***********************************************************************************/
/*                                       Botones                                   */
/***********************************************************************************/

/* Definición de los botones*/

/* Botón Volver */

/* Botón "Volver" — replica el aspecto pill de un `.toolbar-item` en
   estado hover: pastilla (border-radius 999px), sin borde de trazo,
   fondo gris muy suave, tipografía idéntica a la de la toolbar
   (0.95rem / weight 500 / color `--title-gray`). Se coloca arriba a
   la izquierda del contenido principal para facilitar la navegación
   hacia atrás dentro del wizard.
   Al pasar el puntero por encima, se oscurece ligeramente para dar
   feedback (mismo escalón de gris que usa la toolbar en hover, pero
   partiendo de un base ya "activo"). */
.btn-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.04);
    border: none;
    color: var(--title-gray);
    padding: 8px 20px;
    border-radius: 999px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    text-decoration: none;
    margin-bottom: 20px;
}

.btn-back:hover {
    background: rgba(0, 0, 0, 0.08);
    color: var(--title-gray);
}

.btn-back i {
    font-size: 1.1rem;
}

/* Botones — reseteo de subrayado.
   Los mismos estilos se usan tanto en <button> como en <a>. Los <a>
   heredan el subrayado por defecto del navegador; lo neutralizamos aquí
   para todas las variantes de botón del proyecto (mantenemos el color
   blanco del texto, sin decoración). */
.btn-azul,
.btn-gris,
.btn-rojo,
.btn-azul-grande,
.btn-verde-grande,
.btn-rojo-grande,
.btn-azul:hover,
.btn-gris:hover,
.btn-rojo:hover,
.btn-azul-grande:hover,
.btn-verde-grande:hover,
.btn-rojo-grande:hover {
    text-decoration: none;
    color: var(--white);
}

/* Botón Azul */

.btn-azul {
    background-color: var(--primary-blue);
    color: var(--white);
    border: 1px solid var(--primary-blue);
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    box-sizing: border-box;
}

.btn-azul:hover {
    background-color: var(--primary-blue-hover);
    border-color: var(--primary-blue-hover);
}

/* Botón Rojo */

.btn-rojo {
    background-color: #dc3545;
    color: var(--white);
    border: 1px solid #dc3545;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    box-sizing: border-box;
}

.btn-rojo:hover {
    background-color: #c82333;
    border-color: #bd2130;
}

/* Botón Azul Grande (Guardar) */

.btn-azul-grande {
    background-color: var(--primary-blue);
    color: var(--white);
    border: 1px solid var(--primary-blue);
    padding: 10px 40px;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    text-align: center;
}

.btn-azul-grande:hover {
    background-color: var(--primary-blue-hover);
    border-color: var(--primary-blue-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.contenedor-boton-guardar {
    margin-top: 30px;
}

.btn-azul-grande i {
    margin-right: 8px;
}

/* Botón Verde Grande (Aceptar) — mismo estilo base que btn-azul-grande, solo
   cambia el color. Se usa en pantallas donde varios botones grandes coexisten
   y se necesita reforzar semántica con color (por ejemplo, en register_send
   con Aceptar/Devolver/Rechazar apilados). */

.btn-verde-grande {
    background-color: var(--success-green);
    color: var(--white);
    border: 1px solid var(--success-green);
    padding: 10px 40px;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    text-align: center;
}

.btn-verde-grande:hover {
    background-color: var(--success-green-hover);
    border-color: var(--success-green-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.btn-verde-grande i {
    margin-right: 8px;
}

/* Botón Rojo Grande (Rechazar) — mismo criterio que btn-verde-grande. */

.btn-rojo-grande {
    background-color: var(--danger-red);
    color: var(--white);
    border: 1px solid var(--danger-red);
    padding: 10px 40px;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    text-align: center;
}

.btn-rojo-grande:hover {
    background-color: var(--danger-red-hover);
    border-color: var(--danger-red-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.btn-rojo-grande i {
    margin-right: 8px;
}

/* Botón Gris */

.btn-gris {
    background-color: #6c757d;
    color: var(--white);
    border: 1px solid #6c757d;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    box-sizing: border-box;
}

.btn-gris:hover {
    background-color: #5a6268;
    border-color: #5a6268;
}

/* ═══════════════════════════════════════════════════════════════
   VARIANTES "SUAVES" DE BOTÓN — .btn-azul.btn-suave / .btn-gris.btn-suave
   ═══════════════════════════════════════════════════════════════

   Segundo estilo de botón. Baja la densidad visual (fondo pálido +
   borde apagado + texto en tono oscuro del propio color) para que
   el botón no compita con las cabeceras rellenas del brand cuando
   ambos están juntos en pantalla. Uso previsto: acciones que viven
   dentro de secciones de contenido con cabeceras de color sólido
   (p. ej. grupos, jornadas, filtros).

   Padding y font-size fijos: pisan explícitamente el `.btn-sm` de
   Bootstrap, para que un botón con `btn-suave` se vea igual tenga
   o no la clase `btn-sm` — así el "look 2" es uniforme en la web
   independientemente de las otras clases del botón. */

.btn-azul.btn-suave {
    background-color: #aec6e9;
    border-color: #b0c5df;
    color: #0f325f;
    padding: 8px 16px !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    -webkit-font-smoothing: antialiased;
}
.btn-azul.btn-suave:hover {
    background-color: #8fb2d9;
    border-color: #8ca9cd;
    color: #0a2a50;
}
.btn-azul.btn-suave:focus,
.btn-azul.btn-suave:active {
    background-color: #8fb2d9;
    border-color: #8ca9cd;
    color: #0a2a50;
    box-shadow: 0 0 0 0.2rem rgba(30, 90, 168, 0.25);
}
/* Iconos: heredan `color: currentColor` para que se pinten con el
   mismo tono azul oscuro del texto (evita que Bootstrap Icons con
   `text-white` heredado del sólido `.btn-azul` los saque en blanco). */
.btn-azul.btn-suave i {
    color: inherit;
}

/* Variante compacta del `.btn-azul.btn-suave` — misma paleta azul
   corporativa (fondo, borde y texto), pero con padding y font-size
   más pequeños para botones secundarios o "de acción menor" donde el
   botón normal se ve demasiado protagonista (por ejemplo, enlaces a
   la clasificación desde la cabecera de una liga, o el botón
   "Detalles" en la línea del día/hora de un partido en modo
   consulta).
   Se define como clase SEPARADA (no `.btn-azul.btn-suave.btn-mini`)
   para evitar chocar con los `!important` del `.btn-azul.btn-suave`,
   que forzarían padding 8px 16px y font-size 1rem. Con esta clase
   propia el consumidor deja de aplicar `.btn-azul .btn-suave` y usa
   solo esta. */
.btn-azul-suave-mini {
    /* Reset explícito para que `<button>` y `<a>` (que llevan
       user-agent styles distintos) se rendericen idénticos con esta
       clase. Sin estos resets, un `<button>` puede acabar con altura
       intrínseca, font-family de sistema o margin del navegador que
       no lleva un `<a>`.
       `padding`, `font-size` y `line-height` van con `!important`
       porque otras clases utilitarias que se combinan con esta (por
       ejemplo `.ms-2`, o overrides scoped) han demostrado poder
       filtrarse — con `!important` garantizamos que el look interno
       sea idéntico en `<button>` y en `<a>` sin importar el contexto. */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    margin: 0;
    font-family: inherit !important;
    vertical-align: middle !important;
    background-color: #aec6e9 !important;
    border: 1px solid #b0c5df !important;
    color: #0f325f !important;
    padding: 5px 12px !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    border-radius: 0.25rem !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-azul-suave-mini:hover,
.btn-azul-suave-mini:focus,
.btn-azul-suave-mini:active {
    background-color: #8fb2d9;
    border-color: #8ca9cd;
    color: #0a2a50;
    text-decoration: none;
}
.btn-azul-suave-mini i {
    color: inherit;
}

/* Variante aún más pequeña de `.btn-azul-suave-mini` — misma paleta,
   mismo reset entre `<button>` y `<a>`, pero con padding y font-size
   un puntito por debajo. Se usa en contextos donde la variante mini
   todavía se ve demasiado protagonista (ej.: botón "Detalles" en la
   línea del día/hora de un partido en modo consulta). Clase
   independiente (no compone con `.btn-azul-suave-mini`) para evitar
   pelearse con sus `!important`. */
.btn-azul-suave-mini2 {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    margin: 0;
    font-family: inherit !important;
    vertical-align: middle !important;
    background-color: #aec6e9 !important;
    border: 1px solid #b0c5df !important;
    color: #0f325f !important;
    padding: 3px 9px !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    border-radius: 0.25rem !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-azul-suave-mini2:hover,
.btn-azul-suave-mini2:focus,
.btn-azul-suave-mini2:active {
    background-color: #8fb2d9 !important;
    border-color: #8ca9cd !important;
    color: #0a2a50 !important;
    text-decoration: none !important;
}
.btn-azul-suave-mini2 i {
    color: inherit;
}

/* Variante compacta del botón rojo suave — mismo criterio de diseño
   que `.btn-azul-suave-mini` pero con la paleta roja del
   `.btn-rojo.btn-suave` corporativo. Padding pequeño, font-size
   reducido y `aspect-ratio: 1/1` porque el uso típico es un botón
   cuadrado con solo el icono papelera (por ejemplo "Eliminar
   emparejamiento" en `competition_games.php`).
   Clase INDEPENDIENTE de `.btn-rojo.btn-suave` — el consumidor deja
   de aplicar `.btn-rojo .btn-suave` y usa SOLO esta. Con `!important`
   en las propiedades visuales para que nada las pise, siguiendo el
   mismo patrón que `.btn-azul-suave-mini` / `.btn-azul-suave-mini2`. */
.btn-rojo-suave-mini {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    margin: 0;
    font-family: inherit !important;
    vertical-align: middle !important;
    background-color: #e5b0b0 !important;
    border: 1px solid #d59898 !important;
    color: #7a1a1a !important;
    padding: 5px 12px !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    border-radius: 0.25rem !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-rojo-suave-mini:hover,
.btn-rojo-suave-mini:focus,
.btn-rojo-suave-mini:active {
    background-color: #d99898 !important;
    border-color: #c07878 !important;
    color: #5c1010 !important;
    text-decoration: none !important;
}
.btn-rojo-suave-mini i {
    color: inherit;
}

/* Variante compacta del `.btn-gris.btn-suave` — mismo criterio de
   diseño que `.btn-azul-suave-mini` y `.btn-rojo-suave-mini` pero
   con la paleta gris corporativa. Se usa en botones secundarios que
   con el tamaño normal se ven demasiado voluminosos: por ejemplo
   los dropdowns "Opciones" de partido de Liga y Emparejamientos
   (`.liga-btn-opciones`, `.emp-btn-opciones`, `.partido-btn-opciones`).
   Clase INDEPENDIENTE de `.btn-gris.btn-suave` — el consumidor deja
   de aplicar `.btn-gris .btn-suave` y usa SOLO esta. Todos los
   valores con `!important` para no pelearse con overrides
   posteriores. */
.btn-gris-suave-mini {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    margin: 0;
    font-family: inherit !important;
    vertical-align: middle !important;
    background-color: #cdd1d6 !important;
    border: 1px solid #b6bbc1 !important;
    color: #3d454b !important;
    padding: 5px 12px !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    border-radius: 0.25rem !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-gris-suave-mini:hover,
.btn-gris-suave-mini:focus,
.btn-gris-suave-mini:active {
    background-color: #b1b6bb !important;
    border-color: #969ca2 !important;
    color: #2a2f33 !important;
    text-decoration: none !important;
}
.btn-gris-suave-mini i {
    color: inherit;
}

.btn-gris.btn-suave {
    background-color: #cdd1d6;
    border-color: #b6bbc1;
    color: #3d454b;
    padding: 8px 16px !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    -webkit-font-smoothing: antialiased;
}
.btn-gris.btn-suave:hover {
    background-color: #b1b6bb;
    border-color: #969ca2;
    color: #2a2f33;
}
.btn-gris.btn-suave:focus,
.btn-gris.btn-suave:active {
    background-color: #b1b6bb;
    border-color: #969ca2;
    color: #2a2f33;
    box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.25);
}
.btn-gris.btn-suave i {
    color: inherit;
}
/* Estado `.show` del dropdown Bootstrap (`btn-suave` en un
   `.dropdown-toggle` que despliega su menú) — mantiene el look
   suave en vez de volver al gris denso del brand. */
.btn-gris.btn-suave.show {
    background-color: #b1b6bb;
    border-color: #969ca2;
    color: #2a2f33;
}

/* Variante grande del `.btn-azul.btn-suave`. Hereda del
   `.btn-azul-grande` original la maquetación (width:100%, flex,
   padding generoso, font-size 1.1rem) — aquí sólo se pisan los
   colores para alinear con el look suave. Los `!important` son
   necesarios porque `.btn-azul-grande` fija color y padding
   propios y ganaría por orden de aparición si no los forzamos. */
.btn-azul-grande.btn-suave {
    background-color: #aec6e9 !important;
    border-color: #b0c5df !important;
    color: #0f325f !important;
    font-weight: 600 !important;
    -webkit-font-smoothing: antialiased;
}
.btn-azul-grande.btn-suave:hover {
    background-color: #8fb2d9 !important;
    border-color: #8ca9cd !important;
    color: #0a2a50 !important;
}
.btn-azul-grande.btn-suave:focus,
.btn-azul-grande.btn-suave:active {
    background-color: #8fb2d9 !important;
    border-color: #8ca9cd !important;
    color: #0a2a50 !important;
    box-shadow: 0 0 0 0.2rem rgba(30, 90, 168, 0.25) !important;
}
.btn-azul-grande.btn-suave i {
    color: inherit;
}

/* Variante suave del `.btn-rojo` — mismo enfoque cromático que las
   variantes azul y gris: fondo pálido, borde apagado, texto en tono
   oscuro del propio color. Se usa en botones de "Eliminar" (con
   label o solo con icono `bi-trash`). Los iconos heredan
   `color: currentColor` para que se pinten con el rojo oscuro del
   texto. */
.btn-rojo.btn-suave {
    background-color: #e5b0b0;
    border-color: #d59898;
    color: #7a1a1a;
    padding: 8px 16px !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    -webkit-font-smoothing: antialiased;
}
.btn-rojo.btn-suave:hover {
    background-color: #d99898;
    border-color: #c07878;
    color: #5c1010;
}
.btn-rojo.btn-suave:focus,
.btn-rojo.btn-suave:active {
    background-color: #d99898;
    border-color: #c07878;
    color: #5c1010;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}
.btn-rojo.btn-suave i {
    color: inherit;
}

/* Variante grande del `.btn-rojo.btn-suave` — usada en botones de
   acción crítica como "Rechazar" en `register_send`. Hereda del
   `.btn-rojo-grande` la maquetación (width:100%, flex, padding
   generoso) y se pisan sólo los colores para alinear con el look
   suave. */
.btn-rojo-grande.btn-suave {
    background-color: #e5b0b0 !important;
    border-color: #d59898 !important;
    color: #7a1a1a !important;
    font-weight: 600 !important;
    -webkit-font-smoothing: antialiased;
}
.btn-rojo-grande.btn-suave:hover {
    background-color: #d99898 !important;
    border-color: #c07878 !important;
    color: #5c1010 !important;
}
.btn-rojo-grande.btn-suave:focus,
.btn-rojo-grande.btn-suave:active {
    background-color: #d99898 !important;
    border-color: #c07878 !important;
    color: #5c1010 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}
.btn-rojo-grande.btn-suave i {
    color: inherit;
}

/* Variante grande del `.btn-verde.btn-suave` — usada en botones de
   acción positiva como "Aceptar" en `register_send`. Hereda del
   `.btn-verde-grande` la maquetación (width:100%, flex, padding
   generoso) y se pisan sólo los colores para alinear con el look
   suave. Misma lógica que `.btn-rojo-grande.btn-suave`. */
.btn-verde-grande.btn-suave {
    background-color: #bfe3bf !important;
    border-color: #a3cfa3 !important;
    color: #1a5a1a !important;
    font-weight: 600 !important;
    -webkit-font-smoothing: antialiased;
}
.btn-verde-grande.btn-suave:hover {
    background-color: #a3cfa3 !important;
    border-color: #86b586 !important;
    color: #114511 !important;
}
.btn-verde-grande.btn-suave:focus,
.btn-verde-grande.btn-suave:active {
    background-color: #a3cfa3 !important;
    border-color: #86b586 !important;
    color: #114511 !important;
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25) !important;
}
.btn-verde-grande.btn-suave i {
    color: inherit;
}

/* Botón naranja (variante grande + suave). Se usa para acciones
   intermedias / "en espera" como "Pendiente de pago" en
   `register_send`, donde el verde (Aceptar) ya está ocupado y
   necesitamos un color que comunique "aún no cerrado". Mismo chasis
   que `.btn-verde-grande` / `.btn-rojo-grande`: width:100%, flex,
   padding generoso. La paleta suave se alinea con los otros botones
   suaves del proyecto. */
.btn-naranja-grande {
    background-color: #e68a3a;
    color: var(--white);
    border: 1px solid #e68a3a;
    padding: 10px 40px;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    text-align: center;
}
.btn-naranja-grande:hover {
    background-color: #cc7520;
    border-color: #cc7520;
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}
.btn-naranja-grande i {
    margin-right: 8px;
}
.btn-naranja-grande.btn-suave {
    background-color: #f3cfa5 !important;
    border-color: #e6b480 !important;
    color: #8a4b10 !important;
    font-weight: 600 !important;
    -webkit-font-smoothing: antialiased;
}
.btn-naranja-grande.btn-suave:hover {
    background-color: #e6b480 !important;
    border-color: #cc9558 !important;
    color: #6b3808 !important;
}
.btn-naranja-grande.btn-suave:focus,
.btn-naranja-grande.btn-suave:active {
    background-color: #e6b480 !important;
    border-color: #cc9558 !important;
    color: #6b3808 !important;
    box-shadow: 0 0 0 0.2rem rgba(230, 138, 58, 0.25) !important;
}
.btn-naranja-grande.btn-suave i {
    color: inherit;
}


/* Clase auxiliar para eventos JavaScript */
.btn-configurar-tabla {
    /* Clase usada para selector jQuery - sin estilos adicionales */
    cursor: pointer;
}

/* Estilos para paginación - alineados con el azul corporativo del
   proyecto (`--primary-blue`), mismo tono que los botones `btn-azul`
   y el resto de acentos azules. El disabled queda en gris estándar. */
.pagination .page-item.disabled .page-link {
    background-color: #e5e7e9;
    border-color: #d0d3d6;
    color: #6c757d;
}

.pagination .page-item.active .page-link {
    background-color: var(--primary-blue);
    border-color: var(--primary-blue);
    color: white;
}

.pagination .page-link {
    color: var(--primary-blue);
    border-color: #d0d3d6;
}

.pagination .page-link:hover {
    color: var(--primary-blue-hover);
    background-color: #e9ecef;
    border-color: #d0d3d6;
}

/* Media queries - Adaptación a móvil */
@media (max-width: 768px) {
    .btn-azul,
    .btn-rojo,
    .btn-gris {
        padding: 10px 20px;
        font-size: 1rem;
        height: 44px;
        gap: 10px;
    }
}

/***********************************************************************************/
/*                                      Imágenes                                   */
/***********************************************************************************/

/* Imagen Formulario (seleccionar/consultar) */

.img-formulario {
    max-height: 200px;
    border-radius: 8px;
    border: 2px solid var(--light-gray);
    object-fit: cover;
}

/* Imagen con el borde redondo y gris */

.img-busqueda-gris {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--light-gray);
    flex-shrink: 0;
}

/* Imagen con el borde redondo y azul */

.img-busqueda-azul {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--primary-blue);
    flex-shrink: 0;
}

/***********************************************************************************/
/*                                 Marco Expande Colapsa                           */
/***********************************************************************************/

/* Contenedor de sección expandible - Marco que se expande/contrae */
.collapsible-section {
    margin-bottom: 12px;
    border: 1px solid var(--section-header-blue);
    border-radius: 8px;
    background-color: #f8f9fa;
}

/* Cabecera del marco expandible (azul claro con letra blanca) */
.collapsible-header {
    background: linear-gradient(135deg, var(--section-header-blue) 0%, var(--section-header-blue-dark) 100%);
    color: white !important;
    padding: 15px;
    border-radius: 7px 7px 0 0;
    cursor: pointer;
    user-select: none;
}

.collapsible-header:hover {
    background: linear-gradient(135deg, var(--section-header-blue-hover) 0%, var(--section-header-blue-dark) 100%);
}

.collapsible-header h4,
.collapsible-header h5,
.collapsible-header h6,
.collapsible-header * {
    color: white !important;
}

/* Contenido del marco expandible */
.collapsible-body {
    overflow: visible;
    padding: 15px;
    transition: opacity 0.3s ease;
    opacity: 1;
}

/* En móvil los bodies de las estructuras (`.collapsible-section` con
   una clase `.estructura-*`) reducen su padding lateral a 4px para
   aprovechar mejor el ancho horizontal. El padding vertical se
   preserva. Esto es una convención transversal del proyecto — cualquier
   página que use bloques de estructura la hereda sin duplicar el CSS. */
@media (max-width: 767.98px) {
    .collapsible-section[class*="estructura-"] > .collapsible-body {
        padding-left: 4px;
        padding-right: 4px;
    }
}

/* Utilitarias transversales para mostrar contenido distinto entre
   escritorio y móvil sin duplicar CSS por componente. Uso típico: un
   botón con dos etiquetas — larga para escritorio, corta para móvil —
   una envuelta en `.solo-desktop` y otra en `.solo-mobile`. El elemento
   ocultado deja de ocupar espacio en el flujo. */
.solo-mobile { display: none; }
@media (max-width: 767.98px) {
    .solo-desktop { display: none; }
    .solo-mobile  { display: inline; }
}

/* Estado colapsado del contenido */
.collapsible-body.collapsed {
    max-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    opacity: 0;
}


/* Ocultar secciones hijas cuando el padre está colapsado */
.collapsed .collapsible-section {
    display: none !important;
}

/* Ícono chevron con transición suave */
.collapse-icon {
    transition: transform 0.3s ease;
}

.collapsed .collapse-icon {
    transform: rotate(-90deg);
}


/***********************************************************************************/
/*                                 Panel Plegable                                  */
/***********************************************************************************/

/*
 * Panel plegable estándar del proyecto — bloque con fondo blanco,
 * radio suave y sombra ligera, con una cabecera clicable que
 * expande/colapsa el cuerpo interior mediante el helper JS
 * `toggleSeccion` (que aplica la clase `.collapsible-body.collapsed`
 * definida más arriba en este mismo archivo).
 *
 * Introducido inicialmente para las webs de búsqueda (search_player,
 * search_teams, search_competitions, statistics, search_ads) — se
 * generaliza aquí porque va a reutilizarse en más secciones de la
 * plataforma.
 *
 * Estructura HTML esperada:
 *
 *   <div class="panel-plegable">
 *       <div class="panel-plegable-header" onclick="toggleSeccion('<id>')">
 *           <h5 class="panel-plegable-title">
 *               <i class="bi bi-chevron-down collapse-icon rotated me-2"></i>
 *               Título
 *           </h5>
 *       </div>
 *       <div class="collapsible-body" id="contenido-<id>">
 *           <!-- contenido -->
 *       </div>
 *   </div>
 *
 * Cuando el cuerpo está colapsado (`.collapsible-body.collapsed`) la
 * cabecera se ajusta a menos padding vertical y radio completo para
 * quedar como una barra cerrada compacta.
 */

.panel-plegable {
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
    overflow: hidden;
}

.panel-plegable-header {
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-hover) 100%);
    color: white;
    border-radius: 10px 10px 0 0;
    padding: 20px 25px;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
}

.panel-plegable-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: white;
    display: flex;
    align-items: center;
}

/* Cuerpo del panel: hereda el comportamiento de colapso de
   `.collapsible-body`. Le damos el padding lateral estándar que
   este panel usa (25px) — más generoso que el 15px del
   `.collapsible-body` genérico, por consistencia visual con el
   look "tarjeta blanca". */
.panel-plegable > .collapsible-body {
    padding: 25px;
}

/* Con el cuerpo colapsado (solo se ve la cabecera), reducimos el
   padding vertical del header y redondeamos las cuatro esquinas
   para que la barra del título quede compacta. Usa `:has()` (CSS
   estándar, soportado por navegadores modernos). */
.panel-plegable:has(> .collapsible-body.collapsed) .panel-plegable-header {
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 10px;
}


/***********************************************************************************/
/*                               Contenedor con Sombra                             */
/***********************************************************************************/

/* Contenedor de información, el cual contiene sombreado exterior */

.contenedor-sombra {
    background-color: var(--card-bg);
    border-radius: 12px;
    padding: 30px;
    margin: 20px auto;
    max-width: 1400px;
    box-shadow: var(--shadow-sm);
}

/* Contenedor de información con sombreado y padding reducido (para fichas más compactas) */

.contenedor-sombra-mini {
    background-color: var(--card-bg);
    border-radius: 12px;
    padding: 15px;
    margin: 20px auto;
    max-width: 1400px;
    box-shadow: var(--shadow-sm);
}

/* Contenedor con borde azul (sin sombra). Se usa en las "secciones
   de acceso" (Información, Mis equipos, Mis competiciones, etc.):
   fondo SIN colorear para que solo destaque el borde azul, no la
   propia superficie. */

.contenedor-borde-azul {
    background-color: var(--white);
    border-radius: 12px;
    padding: 30px;
    margin: 20px auto;
    max-width: 1400px;
    border: 2px solid var(--primary-blue);
}


/* Cajita blanca con sombra suave que envuelve controles de filtro
   por encima de un listado (checkboxes, selects, botón "Filtrar",
   etc.). Se usa en las webs de listado con filtros arriba
   — p.ej. ads_list, competition_ply_application. Nombre: `.filter-section`. */

.filter-section {
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    padding: 15px 20px;
    margin-bottom: 28px;
}


/***********************************************************************************/
/*                             Tarjetas clicables                                  */
/***********************************************************************************/

/*
 * Familia `.tarjeta-clicable-*`: tarjetas de la lista de resultados
 * pensadas para ser pulsadas por el usuario. Base sobria (fondo gris
 * muy claro + borde apenas visible) que no llama la atención cuando
 * hay muchas en pantalla; el "premio" visual llega en el hover, con
 * una sombra suave y un pequeño desplazamiento hacia arriba que
 * indican "esto se puede pulsar".
 *
 * Variantes:
 *   - `.tarjeta-clicable-foto-1` — la primera de las variantes con
 *     foto asociada. Se usa hoy en las webs de búsqueda de
 *     participantes (search_player, search_teams) y se irá
 *     desplegando en otras webs que muestren tarjetas del mismo
 *     tono. Habrá una segunda variante con foto (`-foto-2`) más
 *     adelante — se añadirá aquí cuando aparezca.
 *
 * Todo elemento hijo que quiera participar del hover (por ejemplo
 * la foto o los botones que viven dentro de la tarjeta) puede
 * seleccionarse a partir de la clase padre — así se evita hacer
 * variantes específicas por cada web.
 */

.tarjeta-clicable-foto-1 {
    background-color: #f8f9fa;
    border: 1px solid #eef0f2;
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 15px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.tarjeta-clicable-foto-1:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

/*
 * Foto del "sujeto" de la tarjeta (deportista, equipo, competición…).
 * Contorno redondo y borde gris estándar para que se lea siempre
 * como "retrato/emblema" sin importar el tipo de tarjeta.
 *
 *   - `.tarjeta-clicable-foto-1-img`          → el `<img>` real
 *     (con `object-fit: cover` para recortar sin deformar).
 *   - `.tarjeta-clicable-foto-1-img-fallback` → el icono que se
 *     pinta cuando la foto no existe o falla al cargar. Redondo
 *     también, con el mismo tamaño y borde que la imagen.
 */
.tarjeta-clicable-foto-1-img,
.tarjeta-clicable-foto-1-img-fallback {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid #e9ecef;
}

.tarjeta-clicable-foto-1-img {
    object-fit: cover;
}

.tarjeta-clicable-foto-1-img-fallback {
    background-color: #e9ecef;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Bootstrap Icons no tiene variantes de peso, así que para dar
       la sensación de trazo más fino reducimos el tamaño del glyph
       manteniendo el contenedor a 80×80. Más aire alrededor = menos
       peso visual, sin cambiar el tamaño del bloque. */
    font-size: 38px;
    color: #6c757d;
}


/*
 * Variante `.tarjeta-clicable-foto-2` — pensada para las CABECERAS
 * de una web (por ejemplo el bloque "quién es esta competición" que
 * hay al principio de las páginas de gestión).
 *
 * Diferencias respecto a la variante 1:
 *   - Fondo gris un pelín más oscuro para diferenciarla del listado.
 *   - Borde de la foto en el AZUL corporativo oscuro (en vez del gris
 *     estándar) — refuerza el estatus de "cabecera / identidad" del
 *     sujeto.
 *   - NO es clicable — es un bloque de "identidad", no una acción. Por
 *     eso NO lleva `cursor: pointer` ni efecto hover. Al pasar el
 *     ratón por encima no ocurre nada (a pesar del prefijo "clicable"
 *     del nombre, que se mantiene por coherencia con la familia
 *     `tarjeta-clicable-foto-*`).
 */

.tarjeta-clicable-foto-2 {
    background-color: #eef0f3;
    border: 1px solid #dfe4ea;
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 15px;
}

/*
 * Foto del sujeto de la tarjeta variante 2 — contorno redondo con
 * borde en el azul corporativo oscuro para reforzar la identidad
 * del sujeto de la cabecera.
 *
 *   - `.tarjeta-clicable-foto-2-img`          → el `<img>` real.
 *   - `.tarjeta-clicable-foto-2-img-fallback` → el icono placeholder.
 */
.tarjeta-clicable-foto-2-img,
.tarjeta-clicable-foto-2-img-fallback {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 1px solid var(--primary-blue-hover);
}

.tarjeta-clicable-foto-2-img {
    object-fit: cover;
}

.tarjeta-clicable-foto-2-img-fallback {
    background-color: #e9ecef;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Mismo criterio que en `.tarjeta-clicable-foto-1-img-fallback`:
       reducimos el glyph para dar sensación de trazo más fino sin
       cambiar el tamaño del bloque (80×80). */
    font-size: 38px;
    color: #6c757d;
}


/*
 * Variante `.tarjeta-clicable-foto-3` — mismo look visual que la
 * `-foto-1` (fondo gris muy claro, borde apenas visible, foto con
 * borde gris) pero NO clicable: sin `cursor: pointer` ni efecto
 * hover. Se usa cuando queremos el aspecto ligero del listado pero
 * el bloque no dispara acción: por ejemplo tarjetas informativas
 * de estado, resúmenes o cabeceras sombras que no llevan al mismo
 * énfasis "identidad" que aporta la `-foto-2` (con borde azul).
 *
 * Reutiliza las mismas sub-clases de foto de la variante 1:
 *   - `.tarjeta-clicable-foto-3-img`          → el `<img>` real.
 *   - `.tarjeta-clicable-foto-3-img-fallback` → el icono placeholder.
 */
.tarjeta-clicable-foto-3 {
    background-color: #f8f9fa;
    border: 1px solid #eef0f2;
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 15px;
}

.tarjeta-clicable-foto-3-img,
.tarjeta-clicable-foto-3-img-fallback {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid #e9ecef;
}

.tarjeta-clicable-foto-3-img {
    object-fit: cover;
}

.tarjeta-clicable-foto-3-img-fallback {
    background-color: #e9ecef;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Mismo criterio de trazo fino que en las otras variantes: el
       glyph se pinta más pequeño que el contenedor para dar aire. */
    font-size: 38px;
    color: #6c757d;
}


/***********************************************************************************/
/*   Logros — tarjeta en las pestañas "Logros" de ficha_deportista, profile_team    */
/*   y profile_double. Layout horizontal fijo:                                       */
/*     [Icono podium (1º/2º/3º)]  ·  [Logo competición]  ·  Título + subtítulo       */
/*   El icono podium solo se pinta para las tres primeras posiciones (oro/plata/    */
/*   bronce); a partir del 4º puesto la tarjeta arranca directamente con el logo.   */
/***********************************************************************************/
.logro-podium-wrap {
    /* Separación entre icono podium y logo — un pelín más de
       margen del anterior 20px sin pasarse para que no rompa
       la caja horizontal en móvil. */
    margin-right: 28px;
}
.logro-podium-icono {
    font-size: 1.7rem;
    line-height: 1;
}
.logro-logo-wrap {
    /* El logo de la competición ocupa un círculo fijo de 48x48
       (mismo estándar redondo que usamos en el resto de fichas
       para fotos de perfil). Con `align-items: center` en el
       flex padre queda centrado verticalmente respecto al
       bloque de texto (nombre + posición) y visualmente cubre
       su altura, cumpliendo lo pedido en el diseño. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.logro-comp-logo {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.logro-comp-logo-fallback {
    background-color: #e9ecef;
    color: #6c757d;
    font-size: 1.5rem;
}
.logro-info {
    /* Aire entre el logo y el bloque de texto. */
    margin-left: 12px;
    /* Nombre + posición apilados verticalmente; con `flex-grow: 1`
       ocupan el ancho restante. `min-width: 0` permite que un
       nombre muy largo haga ellipsis correctamente si aplicase. */
    min-width: 0;
}


/***********************************************************************************/
/*                                 Botones Wizard                                  */
/***********************************************************************************/

.wizard-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 30px 0;
    gap: 15px;
}

.wizard-step {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wizard-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--light-gray);
    color: var(--text-gray);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.wizard-step.active .wizard-circle {
    background-color: var(--primary-blue);
    color: var(--white);
}

.wizard-step.completed .wizard-circle {
    background-color: var(--success-green);
    color: var(--white);
}

.wizard-label {
    font-size: 0.9rem;
    color: var(--text-gray);
}

.wizard-step.active .wizard-label {
    font-weight: 600;
    color: var(--primary-blue);
}

.wizard-arrow {
    font-size: 1.2rem;
    color: var(--light-gray);
}

/***********************************************************************************/
/*                                Elemento pestaña                                 */
/***********************************************************************************/

/* Aspecto de los objetos tipo: Pestañas */

.nav-tabs {
    background-color: transparent;
    border-bottom: none;
    display: flex;
    gap: 5px;
    margin-bottom: 0;
}

.nav-tabs .nav-link {
    background-color: var(--white);
    border: 2px solid var(--light-gray);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    color: var(--text-gray);
    padding: 12px 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
    position: relative;
}

.nav-tabs .nav-link:hover {
    color: var(--primary-blue);
    background-color: var(--white);
}

.nav-tabs .nav-link.active {
    color: var(--primary-blue);
    background-color: var(--white);
    border: 2px solid var(--primary-blue);
    border-bottom: none;
    font-weight: 600;
    z-index: 1;
}

/* Contenido de las pestañas con fondo blanco */
.tab-content {
    background-color: var(--white);
    border: 2px solid var(--light-gray);
    border-radius: 0 0 8px 8px;
    padding: 20px;
}

/***********************************************************************************/
/*                                  Texto Avisos                                   */
/***********************************************************************************/

/* Textos explicativos. Tipo: no hay registros, o aclaraciones de funcionalidad */

.texto-aviso {
    background-color: #d1ecf1;
    color: #0c5460;
    padding: 15px 20px;
    border-radius: 8px;
    display: block;
    margin: 15px 0;
    line-height: 1.6;
}

.texto-aviso i {
    font-size: 1.3rem;
}

/***********************************************************************************/
/*                                    Títulos                                      */
/***********************************************************************************/

/* Título 1 - Principal el más grande */

.titulo1 {
    text-align: center;
    /* Antes usaba `--title-gray` (#2c3e50), demasiado oscuro. Bajamos
       a un gris medio azulado para que el título respire y no compita
       con el contenido. */
    color: #48545f;
    font-weight: 600;
    margin-bottom: 15px;
    /* font-size delegado a Bootstrap (usar con clase .h1, .h2, etc.) */
}

/* Título 2 - Secundario */

.titulo2 {
    color: #666666;
    font-weight: 400;
    margin-bottom: 15px;
    text-align: center;
    /* font-size delegado a Bootstrap (usar con clase .h5, .h6, etc.) */
}

/* Título 3 - Terciario */

.titulo3 {
    color: #666666;
    font-weight: 600;
    margin-bottom: 10px;
    /* font-size delegado a Bootstrap (usar con clase .h6, etc.) */
}

/***********************************************************************************/
/*                                     Textos                                      */
/***********************************************************************************/

/* Texto 1 - Habitual (campos, listas, etc.) */

.texto1 {
    font-size: 1rem;
    color: var(--text-gray);
    line-height: 1.6;
}

/* Texto 2 - Texto secundario/detalles (más pequeño y gris) */

.texto2 {
    font-size: 0.9rem;
    color: #6c757d;
    line-height: 1.5;
}

/* Texto en negrita 1 - Para nombres destacados en fichas */

.texto-negrita-1 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--title-gray);
    line-height: 1.4;
    margin: 0;
}

/* Texto 3 - Igual que texto1 (reservado para futuro) */

.texto3 {
    font-size: 1rem;
    color: var(--text-gray);
    line-height: 1.6;
}

/***********************************************************************************/
/*                              Ventanas Modales                                   */
/***********************************************************************************/

/* Cabecera de modal - Azul con degradado (usa la paleta corporativa
   `--primary-blue` → `--primary-blue-hover` para mantenerse siempre
   sincronizado con el resto de azules del sistema). */
.modal-header {
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-hover) 100%);
    color: white;
    border-bottom: none;
}

/* Override global de .btn-primary de Bootstrap para que use nuestro
   azul corporativo sobrio en lugar del azul brillante por defecto
   (#0d6efd). Aplica a TODAS las webs sin tener que tocarlas una por una. */
.btn-primary {
    background-color: var(--primary-blue);
    border-color: var(--primary-blue);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--primary-blue-hover);
    border-color: var(--primary-blue-hover);
}
.btn-primary:focus {
    box-shadow: 0 0 0 0.25rem rgba(30, 90, 168, 0.4);
}

.modal-header .modal-title {
    color: white;
    font-size: 1.5rem;
    font-weight: 600;
}

/* Botón de cerrar modal - versión blanca para headers oscuros */
.modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/***********************************************************************************/
/*                      Campos "solo consulta" (estándar global)                   */
/***********************************************************************************/

/* Clase utility para pintar cualquier campo (input, select, textarea)
   con el gris estándar de "solo consulta / read-only" del proyecto.
   Uso: se aplica EXPLÍCITAMENTE al elemento cuando queramos marcarlo
   como no editable — no dependemos del atributo `disabled` porque
   Bootstrap pisa esa regla y da problemas.

   Ejemplos:
     <select class="form-select campo-solo-consulta" disabled>
     <input  class="form-control campo-solo-consulta" readonly>

   El color vive en la variable `--campo-consulta-bg` (arriba, en
   `:root`) — para cambiarlo en toda la web, se toca ahí una vez. */
.campo-solo-consulta,
.form-control[readonly],
.form-control:disabled,
.form-select:disabled,
textarea[readonly],
textarea:disabled,
input[readonly],
input:disabled,
fieldset[disabled] .form-control,
fieldset[disabled] .form-select,
fieldset[disabled] textarea,
fieldset[disabled] input {
    background-color: var(--campo-consulta-bg) !important;
    border-color: var(--campo-consulta-border) !important;
}

/* Radios y checkboxes en modo "solo consulta": la combinación de
   disabled + checked de Bootstrap los pinta tan apagados que apenas
   se nota cuál es la opción elegida. Devolvemos contraste para que
   la opción seleccionada quede clara.

   La regla NO se aplica a los `.form-check-input` sin marcar — esos
   siguen con su estilo apagado por defecto. */
.form-check-input:disabled:checked,
fieldset[disabled] .form-check-input:checked {
    background-color: var(--primary-blue) !important;
    border-color: var(--primary-blue) !important;
    opacity: 1 !important;
}


/***********************************************************************************/
/*                      Inputs para Configuración                                  */
/***********************************************************************************/

/* Input de texto pequeño para números (orden, puntuación, posición) */
.input-text-mini {
    width: 60px;
    padding: 5px 8px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 1rem;
    color: var(--text-gray);
    text-align: center;
}

.input-text-mini:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.1);
}

/* Input de texto grande que ocupa el 100% del contenedor */
.input-text-grande {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 1rem;
    color: var(--text-gray);
}

.input-text-grande:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.1);
}

/* Lista/select grande que ocupa el 100% del contenedor */
.lista-grande {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 1rem;
    color: var(--text-gray);
    background-color: #fff;
}

.lista-grande:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.1);
}

/* Item de comunicación en el listado de "Respuestas del organizador"
   (register_send.php). Da algo de aire vertical entre elementos consecutivos
   para que los botones papelera de distintas comunicaciones no queden
   pegados. Solo separa items adyacentes — el primero no lleva margen. */

.comunicacion-item + .comunicacion-item {
    margin-top: 12px;
}

/***********************************************************************************/
/*                        Cabecera de tabla — look "limpio"                        */
/***********************************************************************************/
/* Convención transversal para cabeceras de tabla que queremos leer como
   etiquetas de columna en lugar de una franja de color:
     - sin fondo (transparente, para que se lea sobre el fondo de la
       tarjeta/modal que la contiene),
     - texto en gris oscuro corporativo `#353b42` y peso bold,
     - separada del cuerpo por un borde inferior sutil `#dee2e6`.
   Neutraliza las variables `--bs-table-*` de Bootstrap 5, que con la
   clase `.table` inyectan color de fondo y de texto propios con
   especificidad alta (por eso los `!important`).
   Se aplica al elemento `<table>`: la regla estiliza `thead tr/th`. */
.tabla-cabecera-limpia thead tr {
    background: transparent !important;
}
.tabla-cabecera-limpia thead th {
    background: transparent !important;
    --bs-table-bg: transparent !important;
    color: #353b42 !important;
    border-color: transparent !important;
    border-bottom: 1px solid #dee2e6 !important;
    font-weight: 700 !important;
}