/* ==========================================================================
   SIGEDE — Sistema de diseño
   Academia Jotuns Club S.A.S.

   Hoja única del panel. Antes el CSS vivía en un <style> de 130 líneas dentro
   de views/layout/header.php más un bloque propio en 16 vistas, con el token
   --main-color redeclarado en cada una: cambiar el azul institucional exigía
   editar 17 archivos y nada se cacheaba entre páginas.

   Orden del archivo:
     1. Tokens
     2. Base
     3. Estructura (shell, sidebar, encabezado de página)
     4. Estado — el elemento distintivo del sistema
     5. Componentes
     6. Formularios
     7. Utilidades
     8. Responsive
     9. Impresión y accesibilidad
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
    /* --- Marca ---------------------------------------------------------- */
    /* El azul institucional se conserva exacto; lo demás se construye a su
       alrededor. El ámbar es el color de acción de la app móvil: usarlo también
       aquí hace que web y app se lean como un mismo producto. */
    --jt-azul: #002D54;
    --jt-abismo: #001426;
    --jt-azul-claro: #0A4B84;
    --jt-ambar: #FF6B35;
    --jt-ambar-oscuro: #E4551F;

    /* --- Neutros -------------------------------------------------------- */
    --jt-hielo: #EEF2F6;
    --jt-nieve: #FFFFFF;
    --jt-linea: #DDE4EC;
    --jt-linea-suave: #EBF0F5;
    --jt-hover: #F5F8FB;
    --jt-tinta: #14202E;
    --jt-tinta-media: #4A5B6E;
    --jt-tinta-suave: #74849A;

    /* --- Semánticos ----------------------------------------------------- */
    /* Más profundos que los de Bootstrap: tienen que resistir dentro de una
       píldora pequeña sobre blanco sin perder contraste. */
    --jt-verde: #0B7A4B;
    --jt-verde-fondo: #E7F4EE;
    --jt-oro: #A16207;
    --jt-oro-fondo: #FDF3E2;
    --jt-rojo: #B42318;
    --jt-rojo-fondo: #FDECEA;
    --jt-info: #0E6E9E;
    --jt-info-fondo: #E6F2F8;
    --jt-gris: #64748B;
    --jt-gris-fondo: #F1F4F8;

    /* --- Tipografía ----------------------------------------------------- */
    /* Archivo para títulos y cifras (grotesca de marcador, cifras tabulares).
       Barlow para cuerpo e interfaz. Si el CDN de fuentes falla, el stack de
       respaldo mantiene una lectura coherente. */
    --jt-display: 'Archivo Variable', 'Archivo', 'Helvetica Neue', Arial, sans-serif;
    --jt-body: 'Barlow', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --jt-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, monospace;

    --jt-t-xs: 0.6875rem;   /* 11px — etiquetas, encabezados de tabla */
    --jt-t-sm: 0.8125rem;   /* 13px — cuerpo de tabla */
    --jt-t-base: 0.9375rem; /* 15px — cuerpo */
    --jt-t-lg: 1.125rem;    /* 18px */
    --jt-t-xl: 1.5rem;      /* 24px — título de página */
    --jt-t-cifra: 2rem;     /* 32px — cifras destacadas */

    /* --- Espacio y forma ------------------------------------------------ */
    --jt-r: 4px;            /* radio base: software, no periódico ni pastilla */
    --jt-r-lg: 8px;
    --jt-sombra: 0 1px 2px rgba(20, 32, 46, .06);
    --jt-sombra-alta: 0 8px 24px rgba(20, 32, 46, .12);
    --jt-sidebar: 248px;

    --jt-transicion: 140ms cubic-bezier(.2, .6, .3, 1);

    /* --- Compatibilidad --------------------------------------------------
       Nombres antiguos que todavía aparecen en atributos style= de las vistas
       que aún no se migraron al sistema. Se mantienen apuntando a los tokens
       nuevos para que nada quede sin color durante la transición; se pueden
       retirar cuando no queden usos (buscar "var(--main-color)"). */
    --main-color: var(--jt-azul);
    --secondary-color: var(--jt-azul-claro);
    --accent-color: var(--jt-ambar);
    --danger-color: var(--jt-rojo);
    --bg-light: var(--jt-hielo);
}

/* ==========================================================================
   2. BASE
   ========================================================================== */

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

body {
    /* El fondo era un degradado de dos paradas. Plano: el color solo debe
       aparecer donde significa algo. */
    background: var(--jt-hielo);
    font-family: var(--jt-body);
    font-size: var(--jt-t-base);
    line-height: 1.5;
    color: var(--jt-tinta);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.jt-display {
    font-family: var(--jt-display);
    font-weight: 600;
    letter-spacing: -0.011em;
    color: var(--jt-azul);
}

a {
    color: var(--jt-azul-claro);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

a:hover {
    color: var(--jt-azul);
}

/* Foco visible y consistente: requisito de accesibilidad, no adorno. */
:focus-visible {
    outline: 2px solid var(--jt-ambar);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Cifras siempre tabulares: en una tabla de montos las columnas deben alinear. */
.jt-cifra,
td,
th,
.table {
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   3. ESTRUCTURA
   ========================================================================== */

#wrapper {
    display: flex;
    width: 100%;
    min-height: 100vh;
}

#content-wrapper {
    width: 100%;
    min-width: 0; /* permite que las tablas anchas hagan scroll y no desborden */
}

/* --- Sidebar ------------------------------------------------------------ */

#sidebar {
    min-width: var(--jt-sidebar);
    max-width: var(--jt-sidebar);
    min-height: 100vh;
    background: var(--jt-abismo);
    color: rgba(255, 255, 255, .82);
    z-index: 1050;
    display: flex;
    flex-direction: column;
    padding: 0;
    transition: margin-left var(--jt-transicion);
}

.jt-marca {
    padding: 22px 20px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    position: relative;
}

.jt-marca img {
    max-width: 104px;
    display: block;
}

.jt-marca__nombre {
    font-family: var(--jt-display);
    font-size: var(--jt-t-xs);
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
    margin-top: 10px;
}

.jt-nav {
    padding: 14px 12px 24px;
    overflow-y: auto;
    flex: 1;
}

/* Los grupos llevan etiqueta real: dicen de qué área es cada bloque en lugar
   de separarlos con una línea muda. */
.jt-nav__grupo {
    font-family: var(--jt-display);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .34);
    padding: 18px 10px 8px;
}

.jt-nav__grupo:first-child {
    padding-top: 4px;
}

#sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 10px;
    margin-bottom: 1px;
    border-radius: var(--jt-r);
    color: rgba(255, 255, 255, .78);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background var(--jt-transicion), color var(--jt-transicion);
}

#sidebar .nav-link:hover {
    background: rgba(255, 255, 255, .07);
    color: #fff;
}

#sidebar .nav-link.active {
    background: rgba(255, 107, 53, .13);
    border-left-color: var(--jt-ambar);
    color: #fff;
    font-weight: 600;
}

#sidebar .nav-link i {
    font-size: 1rem;
    width: 18px;
    text-align: center;
    opacity: .85;
    flex-shrink: 0;
}

#sidebar .nav-link.active i {
    color: var(--jt-ambar);
    opacity: 1;
}

/* Grupos plegables del menú (Entrenamiento, Competencias, Módulo médico) */
.jt-nav__sub {
    margin: 2px 0 6px 20px;
    padding-left: 12px;
    border-left: 1px solid rgba(255, 255, 255, .12);
    list-style: none;
}

.jt-nav__sub .nav-link {
    font-size: 0.8125rem;
    padding: 7px 10px;
    border-left: none;
}

.jt-nav__sub .nav-link.active {
    background: transparent;
    color: var(--jt-ambar);
}

/* El botón que pliega. Es un <button>, no un enlace: abre y cierra, no navega.
   Hay que devolverle a mano lo que el navegador le quita a los botones. */
#sidebar .jt-nav__toggle {
    width: 100%;
    background: none;
    border: none;
    border-left: 3px solid transparent;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

/* La flecha gira en lugar de cambiar de icono: así no hay un salto de forma
   entre los dos estados, y el giro dice hacia dónde va.

   El selector repite `#sidebar .nav-link i` a propósito: esa regla de arriba le
   da 18px de ancho y 1rem a los iconos, y gana por especificidad. Añadir la
   clase aquí la supera sin recurrir a `!important`, que es lo que después nadie
   sabe cómo deshacer. */
#sidebar .nav-link i.jt-nav__flecha {
    font-size: .7rem;
    width: auto;
    opacity: .5;
    transition: transform var(--jt-transicion);
}

#sidebar .jt-nav__toggle.abierto .jt-nav__flecha {
    transform: rotate(180deg);
}

/* Un grupo abierto se distingue del cerrado sin gritar: el enlace ACTIVO de
   dentro ya lleva el ámbar, y marcar los dos competiría por la atención. */
#sidebar .jt-nav__toggle.abierto {
    color: #fff;
}

@media (prefers-reduced-motion: reduce) {
    #sidebar .nav-link i.jt-nav__flecha {
        transition: none;
    }
}

/* Pie del sidebar: identidad del usuario y salida, siempre en el mismo sitio. */
.jt-sesion {
    padding: 14px 16px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    display: flex;
    align-items: center;
    gap: 10px;
}

.jt-sesion__avatar {
    width: 34px;
    height: 34px;
    border-radius: var(--jt-r);
    background: rgba(255, 255, 255, .1);
    display: grid;
    place-items: center;
    font-family: var(--jt-display);
    font-weight: 600;
    font-size: 0.8125rem;
    color: #fff;
    flex-shrink: 0;
}

.jt-sesion__datos {
    min-width: 0;
    flex: 1;
    line-height: 1.25;
}

.jt-sesion__nombre {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.jt-sesion__rol {
    font-size: var(--jt-t-xs);
    color: rgba(255, 255, 255, .48);
}

.jt-sesion__salir {
    color: rgba(255, 255, 255, .55);
    padding: 6px;
    border-radius: var(--jt-r);
    line-height: 1;
}

.jt-sesion__salir:hover {
    color: var(--jt-ambar);
    background: rgba(255, 255, 255, .07);
}

/* --- Área de contenido -------------------------------------------------- */

.jt-main {
    padding: 26px 28px 56px;
    max-width: 1440px;
}

/* Encabezado de página: mismo bloque en las 18 vistas del panel.
   Antecedente + título + una línea de contexto, y las acciones a la derecha. */
.jt-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding-bottom: 18px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--jt-linea);
}

.jt-page-head__eyebrow {
    font-family: var(--jt-display);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--jt-tinta-suave);
    margin-bottom: 5px;
}

.jt-page-head h1 {
    font-size: var(--jt-t-xl);
    font-weight: 650;
    margin: 0;
    line-height: 1.15;
}

.jt-page-head__sub {
    font-size: var(--jt-t-sm);
    color: var(--jt-tinta-media);
    margin: 5px 0 0;
    max-width: 62ch;
}

.jt-page-head__acciones {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

/* Botón de menú en móvil */
#btn-menu-mobile {
    display: none;
    margin: 12px 0 0 12px;
    border: 1px solid var(--jt-linea);
    background: var(--jt-nieve);
    color: var(--jt-azul);
    border-radius: var(--jt-r);
    padding: 7px 11px;
}

.overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 20, 38, .55);
    z-index: 1040;
}

.overlay.active {
    display: block;
}

/* ==========================================================================
   4. ESTADO — elemento distintivo del sistema
   --------------------------------------------------------------------------
   El estado de un registro (Activo, Pendiente, En Revisión, Vencido, Pagado)
   es el dato que el personal consulta primero. Se codifica dos veces: como
   filo izquierdo de 3px en la fila o tarjeta, legible al recorrer una tabla
   larga sin leer texto, y como píldora cuadrada con el mismo token.

   Un solo lenguaje en deportistas, finanzas, egresos, comprobantes y
   solicitudes.
   ========================================================================== */

.jt-estado {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: 3px;
    font-family: var(--jt-display);
    font-size: var(--jt-t-xs);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    border: 1px solid transparent;
}

.jt-estado::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.jt-estado--ok     { color: var(--jt-verde); background: var(--jt-verde-fondo); border-color: rgba(11, 122, 75, .18); }
.jt-estado--espera { color: var(--jt-oro);   background: var(--jt-oro-fondo);   border-color: rgba(161, 98, 7, .18); }
.jt-estado--alerta { color: var(--jt-rojo);  background: var(--jt-rojo-fondo);  border-color: rgba(180, 35, 24, .18); }
.jt-estado--info   { color: var(--jt-info);  background: var(--jt-info-fondo);  border-color: rgba(14, 110, 158, .18); }
.jt-estado--neutro { color: var(--jt-gris);  background: var(--jt-gris-fondo);  border-color: rgba(100, 116, 139, .18); }

/* Filo de estado en filas de tabla y tarjetas */
.jt-fila--ok     { box-shadow: inset 3px 0 0 var(--jt-verde); }
.jt-fila--espera { box-shadow: inset 3px 0 0 var(--jt-oro); }
.jt-fila--alerta { box-shadow: inset 3px 0 0 var(--jt-rojo); }
.jt-fila--info   { box-shadow: inset 3px 0 0 var(--jt-info); }
.jt-fila--neutro { box-shadow: inset 3px 0 0 var(--jt-linea); }

/* ==========================================================================
   5. COMPONENTES
   ========================================================================== */

/* --- Tarjeta ------------------------------------------------------------ */

.card,
.jt-card {
    background: var(--jt-nieve);
    border: 1px solid var(--jt-linea);
    border-radius: var(--jt-r-lg);
    box-shadow: none;
}

.card-header,
.jt-card__head {
    background: transparent;
    border-bottom: 1px solid var(--jt-linea-suave);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.jt-card__titulo {
    font-family: var(--jt-display);
    font-size: 0.875rem;
    font-weight: 650;
    color: var(--jt-azul);
    margin: 0;
    letter-spacing: -0.005em;
}

.card-body {
    padding: 18px;
}

/* --- Cifra destacada ----------------------------------------------------
   Trato de marcador: cifra grande en Archivo con cifras tabulares y una
   etiqueta pequeña de tracking amplio. Es el vocabulario del deporte, y
   además hace comparables las columnas de dinero. */

.jt-metrica {
    background: var(--jt-nieve);
    border: 1px solid var(--jt-linea);
    border-radius: var(--jt-r-lg);
    padding: 16px 18px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.jt-metrica__label {
    font-family: var(--jt-display);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--jt-tinta-suave);
    display: flex;
    align-items: center;
    gap: 6px;
}

.jt-metrica__valor {
    font-family: var(--jt-display);
    font-size: var(--jt-t-cifra);
    font-weight: 650;
    line-height: 1.05;
    color: var(--jt-azul);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.jt-metrica__pie {
    font-size: var(--jt-t-xs);
    color: var(--jt-tinta-suave);
    margin-top: 2px;
}

.jt-metrica--ok     .jt-metrica__valor { color: var(--jt-verde); }
.jt-metrica--alerta .jt-metrica__valor { color: var(--jt-rojo); }
.jt-metrica--espera .jt-metrica__valor { color: var(--jt-oro); }

/* --- Tabla -------------------------------------------------------------- */

.table {
    --bs-table-bg: transparent;
    margin-bottom: 0;
    font-size: var(--jt-t-sm);
    color: var(--jt-tinta);
    border-color: var(--jt-linea-suave);
}

.table > thead {
    font-family: var(--jt-display);
    font-size: var(--jt-t-xs);
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--jt-tinta-suave);
}

.table > thead th {
    background: var(--jt-hover);
    border-bottom: 1px solid var(--jt-linea);
    padding: 10px 14px;
    white-space: nowrap;
    font-weight: 600;
}

.table > tbody td {
    padding: 12px 14px;
    vertical-align: middle;
    border-bottom: 1px solid var(--jt-linea-suave);
}

.table > tbody tr:last-child td {
    border-bottom: 0;
}

.table > tbody tr:hover {
    background: var(--jt-hover);
}

.jt-tabla__principal {
    font-weight: 600;
    color: var(--jt-azul);
}

.jt-tabla__secundario {
    font-size: var(--jt-t-xs);
    color: var(--jt-tinta-suave);
}

/* Las tablas anchas hacen scroll dentro de su contenedor; la página nunca. */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* --- Estado vacío ------------------------------------------------------- */

.jt-vacio {
    text-align: center;
    padding: 46px 24px;
    color: var(--jt-tinta-suave);
}

.jt-vacio i {
    font-size: 1.75rem;
    color: var(--jt-linea);
    display: block;
    margin-bottom: 10px;
}

.jt-vacio__titulo {
    font-family: var(--jt-display);
    font-weight: 600;
    color: var(--jt-tinta-media);
    font-size: 0.875rem;
}

.jt-vacio__ayuda {
    font-size: var(--jt-t-sm);
    margin-top: 3px;
}

/* --- Botones ------------------------------------------------------------
   Un solo color de acción. Todo lo demás es contorno o texto: si todo grita,
   nada se oye. */

.btn {
    --bs-btn-focus-box-shadow: none;
    font-family: var(--jt-display);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: .01em;
    border-radius: var(--jt-r);
    padding: 8px 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: background var(--jt-transicion), border-color var(--jt-transicion), color var(--jt-transicion);
}

.btn-primary,
.btn-jt {
    background: var(--jt-ambar);
    border: 1px solid var(--jt-ambar);
    color: #fff;
}

.btn-primary:hover,
.btn-jt:hover,
.btn-primary:focus,
.btn-jt:focus {
    background: var(--jt-ambar-oscuro);
    border-color: var(--jt-ambar-oscuro);
    color: #fff;
}

.btn-jt-azul {
    background: var(--jt-azul);
    border: 1px solid var(--jt-azul);
    color: #fff;
}

.btn-jt-azul:hover {
    background: var(--jt-abismo);
    border-color: var(--jt-abismo);
    color: #fff;
}

.btn-outline-secondary,
.btn-jt-linea {
    background: var(--jt-nieve);
    border: 1px solid var(--jt-linea);
    color: var(--jt-tinta-media);
}

.btn-outline-secondary:hover,
.btn-jt-linea:hover {
    background: var(--jt-hover);
    border-color: var(--jt-tinta-suave);
    color: var(--jt-azul);
}

.btn-danger {
    background: var(--jt-rojo);
    border: 1px solid var(--jt-rojo);
    color: #fff;
}

.btn-danger:hover {
    background: #96190F;
    border-color: #96190F;
    color: #fff;
}

.btn-success {
    background: var(--jt-verde);
    border: 1px solid var(--jt-verde);
    color: #fff;
}

.btn-success:hover {
    background: #08633C;
    border-color: #08633C;
    color: #fff;
}

.btn-sm {
    padding: 5px 10px;
    font-size: var(--jt-t-xs);
}

.btn-lg {
    padding: 11px 20px;
    font-size: 0.9375rem;
}

/* Botón de solo icono: siempre cuadrado y con aria-label en el HTML. */
.jt-btn-icono {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--jt-linea);
    background: var(--jt-nieve);
    color: var(--jt-tinta-media);
    border-radius: var(--jt-r);
    transition: var(--jt-transicion);
}

.jt-btn-icono:hover {
    background: var(--jt-azul);
    border-color: var(--jt-azul);
    color: #fff;
}

.jt-acciones {
    display: inline-flex;
    gap: 5px;
}

/* --- Pestañas ----------------------------------------------------------- */

.nav-tabs {
    border-bottom: 1px solid var(--jt-linea);
    gap: 2px;
}

.nav-tabs .nav-link {
    font-family: var(--jt-display);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--jt-tinta-suave);
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 9px 14px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.nav-tabs .nav-link:hover {
    color: var(--jt-azul);
    background: transparent;
    border-bottom-color: var(--jt-linea);
}

.nav-tabs .nav-link.active {
    color: var(--jt-azul);
    background: transparent;
    border-bottom-color: var(--jt-ambar);
}

/* Contador dentro de una pestaña */
.jt-conteo {
    font-size: 10px;
    font-weight: 600;
    background: var(--jt-gris-fondo);
    color: var(--jt-tinta-media);
    border-radius: 3px;
    padding: 1px 5px;
    font-variant-numeric: tabular-nums;
}

.nav-link.active .jt-conteo {
    background: var(--jt-azul);
    color: #fff;
}

/* --- Avisos ------------------------------------------------------------- */

.alert {
    border: 1px solid transparent;
    border-left-width: 3px;
    border-radius: var(--jt-r);
    padding: 12px 14px;
    font-size: var(--jt-t-sm);
}

.alert-success { background: var(--jt-verde-fondo); border-color: var(--jt-verde); color: #085434; }
.alert-danger  { background: var(--jt-rojo-fondo);  border-color: var(--jt-rojo);  color: #85190F; }
.alert-warning { background: var(--jt-oro-fondo);   border-color: var(--jt-oro);   color: #6F4405; }
.alert-info    { background: var(--jt-info-fondo);  border-color: var(--jt-info);  color: #0A4E70; }

/* --- Modal -------------------------------------------------------------- */

.modal-content {
    border: 0;
    border-radius: var(--jt-r-lg);
    box-shadow: var(--jt-sombra-alta);
}

.modal-header {
    border-bottom: 1px solid var(--jt-linea-suave);
    padding: 16px 20px;
}

.modal-title {
    font-family: var(--jt-display);
    font-size: 1rem;
    font-weight: 650;
    color: var(--jt-azul);
}

.modal-body { padding: 20px; }

/*
 * Modales largos: el cuerpo se desplaza y la cabecera y el pie quedan fijos.
 *
 * Bootstrap ya trae .modal-dialog-scrollable, pero deja de funcionar si el
 * propio .modal-body lleva la clase .row: eso lo convierte en contenedor flex
 * y el overflow no se aplica como se espera. El formulario de lesion tiene
 * veinte campos y se cortaba en "Adjunto" sin forma de bajar.
 *
 * Esta regla no depende de esa maquinaria: fija el alto y activa el scroll.
 */
.modal-dialog-scrollable .modal-content { max-height: calc(100vh - 3.5rem); }

.modal-dialog-scrollable .modal-body {
    overflow-y: auto;
    max-height: calc(100vh - 14rem);
}

.modal-footer {
    border-top: 1px solid var(--jt-linea-suave);
    padding: 14px 20px;
}

/* --- Buscador ----------------------------------------------------------- */

.jt-buscador {
    position: relative;
    max-width: 420px;
}

.jt-buscador i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--jt-tinta-suave);
    pointer-events: none;
    font-size: 0.875rem;
}

.jt-buscador .form-control {
    padding-left: 34px;
}

/* --- Acceso -------------------------------------------------------------
   Pantallas de entrada (panel, portal del acudiente, recuperación). Cada una
   traía su propio degradado y su propia tarjeta: tres puertas distintas para
   el mismo edificio, y ninguna se parecía al panel que hay detrás.

   Un solo panel: bloque de marca a la izquierda, formulario a la derecha. En
   pantalla estrecha se apilan. */

body.jt-auth {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: 32px 16px;
}

.jt-auth__panel {
    width: 100%;
    max-width: 860px;
    display: grid;
    grid-template-columns: 5fr 6fr;
    background: var(--jt-nieve);
    border: 1px solid var(--jt-linea);
    border-radius: var(--jt-r-lg);
    box-shadow: var(--jt-sombra-alta);
    overflow: hidden;
}

/* Lado de marca: aquí el azul institucional ocupa un plano completo, en lugar
   de repartirse en bordes y botones por toda la interfaz. */
.jt-auth__marca {
    background: var(--jt-azul);
    padding: 36px 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.jt-auth__logo {
    max-height: 76px;
    width: auto;
    align-self: flex-start;
}

/* Filo ámbar: el mismo recurso que marca el estado en las filas del panel. */
.jt-auth__filo {
    width: 40px;
    height: 3px;
    background: var(--jt-ambar);
    border-radius: 2px;
}

.jt-auth__sistema {
    font-family: var(--jt-display);
    font-size: 1.5rem;
    font-weight: 650;
    letter-spacing: -0.015em;
    line-height: 1.2;
    color: #fff;
    margin: 0;
}

.jt-auth__lema {
    font-size: var(--jt-t-sm);
    color: rgba(255, 255, 255, .72);
    max-width: 26ch;
    margin: 0;
}

.jt-auth__pie {
    margin-top: auto;
    padding-top: 20px;
    font-size: var(--jt-t-xs);
    color: rgba(255, 255, 255, .55);
}

/* --- Lado del formulario --- */

.jt-auth__form {
    padding: 36px 32px;
}

.jt-auth__titulo {
    font-size: var(--jt-t-lg);
    font-weight: 650;
    margin: 0 0 3px;
}

.jt-auth__ayuda {
    font-size: var(--jt-t-sm);
    color: var(--jt-tinta-suave);
    margin: 0 0 22px;
}

/* Campo con icono. La etiqueta se mantiene visible: el placeholder solo
   completa, nunca sustituye al nombre del dato. */
.jt-auth__campo {
    position: relative;
}

.jt-auth__campo .form-control {
    padding-left: 34px;
}

.jt-auth__icono {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--jt-tinta-suave);
    font-size: 0.875rem;
    pointer-events: none;
}

.jt-auth__ojo {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: none;
    border-radius: var(--jt-r);
    color: var(--jt-tinta-suave);
    cursor: pointer;
}

.jt-auth__ojo:hover {
    color: var(--jt-azul);
}

.jt-auth__campo .form-control[type="password"],
.jt-auth__campo .form-control[type="text"].jt-auth__clave {
    padding-right: 38px;
}

/* ==========================================================================
   6. FORMULARIOS
   ========================================================================== */

.form-label {
    font-family: var(--jt-display);
    font-size: var(--jt-t-xs);
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--jt-tinta-media);
    margin-bottom: 5px;
}

.form-control,
.form-select {
    border: 1px solid var(--jt-linea);
    border-radius: var(--jt-r);
    padding: 8px 12px;
    font-size: var(--jt-t-base);
    color: var(--jt-tinta);
    background-color: var(--jt-nieve);
    transition: border-color var(--jt-transicion), box-shadow var(--jt-transicion);
}

.form-control::placeholder {
    color: var(--jt-tinta-suave);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--jt-azul-claro);
    box-shadow: 0 0 0 3px rgba(10, 75, 132, .12);
}

.form-control:disabled,
.form-select:disabled {
    background: var(--jt-hover);
    color: var(--jt-tinta-suave);
}

.form-check-input:checked {
    background-color: var(--jt-azul);
    border-color: var(--jt-azul);
}

.form-check-input:focus {
    border-color: var(--jt-azul-claro);
    box-shadow: 0 0 0 3px rgba(10, 75, 132, .12);
}

.form-text {
    font-size: var(--jt-t-xs);
    color: var(--jt-tinta-suave);
}

.input-group-text {
    background: var(--jt-hover);
    border-color: var(--jt-linea);
    color: var(--jt-tinta-suave);
    font-size: var(--jt-t-sm);
}

/* Título de sección dentro de un formulario largo */
.jt-form-seccion {
    font-family: var(--jt-display);
    font-size: var(--jt-t-xs);
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--jt-tinta-suave);
    padding-bottom: 8px;
    margin: 26px 0 16px;
    border-bottom: 1px solid var(--jt-linea);
}

.jt-form-seccion:first-of-type {
    margin-top: 0;
}

/* ==========================================================================
   7. UTILIDADES
   ========================================================================== */

.text-main       { color: var(--jt-azul) !important; }
.bg-main         { background-color: var(--jt-azul) !important; }
.jt-tinta-media  { color: var(--jt-tinta-media) !important; }
.jt-tinta-suave  { color: var(--jt-tinta-suave) !important; }
.jt-linea-top    { border-top: 1px solid var(--jt-linea); }
.jt-mono         { font-family: var(--jt-mono); font-size: 0.8125rem; }

/* Monto en pesos: siempre alineado a la derecha y tabular. */
.jt-monto {
    font-family: var(--jt-display);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.jt-monto--negativo { color: var(--jt-rojo); }
.jt-monto--positivo { color: var(--jt-verde); }

/* ==========================================================================
   8. RESPONSIVE
   ========================================================================== */

@media (max-width: 991.98px) {
    .jt-main { padding: 18px 16px 48px; }
    .jt-page-head { margin-bottom: 18px; }
}

@media (max-width: 767.98px) {
    #sidebar {
        margin-left: calc(var(--jt-sidebar) * -1);
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
    }

    #sidebar.active { margin-left: 0; }

    #btn-menu-mobile { display: inline-flex; }

    .jt-main { padding: 14px 12px 42px; }

    .jt-page-head h1 { font-size: 1.25rem; }

    .jt-page-head__acciones { width: 100%; }

    /* En pantalla estrecha las acciones de fila se envuelven en lugar de
       desbordar: eran cinco botones-icono en una sola línea. */
    .jt-acciones { flex-wrap: wrap; }

    .jt-metrica__valor { font-size: 1.625rem; }

    /* Acceso: el panel se apila y la marca se reduce a una cabecera. */
    body.jt-auth { padding: 20px 12px; }

    .jt-auth__panel {
        grid-template-columns: 1fr;
        max-width: 420px;
    }

    .jt-auth__marca {
        align-items: center;
        text-align: center;
        gap: 12px;
        padding: 24px;
    }

    .jt-auth__logo { align-self: center; max-height: 60px; }

    .jt-auth__lema { max-width: none; }

    .jt-auth__pie { margin-top: 4px; padding-top: 0; }

    .jt-auth__form { padding: 24px; }
}

/* ==========================================================================
   9. IMPRESIÓN Y ACCESIBILIDAD
   ========================================================================== */

@media print {
    #sidebar,
    #btn-menu-mobile,
    .overlay,
    .jt-page-head__acciones,
    .no-print {
        display: none !important;
    }

    body { background: #fff; }

    .jt-main { padding: 0; max-width: none; }

    .card, .jt-card { border-color: #ccc; }
}

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

/* ========================================================================
   CONFIGURACIÓN — índice lateral y módulos
   ------------------------------------------------------------------------
   La pantalla era un scroll único de catorce campos, tres subidas de archivo
   y tres catálogos, todos con el mismo peso visual: no había forma de saber
   dónde estabas ni qué faltaba por completar.

   Se divide en módulos por TAREA (no por formulario) y se les antepone un
   índice fijo que, además de navegar, dice el estado de cada uno. Ese estado
   es el motivo de que el índice exista: quien entra aquí casi siempre viene
   a comprobar si algo está configurado, no a leer.
   ======================================================================== */

.jt-config {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

.jt-config__indice {
    position: sticky;
    top: 18px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.jt-config__enlace {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
    border-radius: var(--jt-r);
    border-left: 2px solid transparent;
    color: var(--jt-tinta-media);
    text-decoration: none;
    font-size: var(--jt-t-sm);
    line-height: 1.25;
    transition: background var(--jt-transicion), color var(--jt-transicion);
}

.jt-config__enlace:hover {
    background: var(--jt-hover);
    color: var(--jt-azul);
}

.jt-config__enlace.is-activo {
    background: var(--jt-hover);
    border-left-color: var(--jt-ambar);
    color: var(--jt-azul);
    font-weight: 600;
}

/* Punto de estado: verde si el módulo está completo, ámbar si falta algo.
   Es un punto y no un número porque el número exacto ya está en la sección. */
.jt-config__punto {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: var(--jt-verde);
}

.jt-config__punto--pendiente { background: var(--jt-oro); }

.jt-config__modulo {
    /* Sin esto, el anclaje deja el título pegado al borde de la ventana. */
    scroll-margin-top: 18px;
}

.jt-config__modulo + .jt-config__modulo { margin-top: 20px; }

.jt-config__ayuda {
    font-size: var(--jt-t-sm);
    color: var(--jt-tinta-media);
    margin: 0 0 16px;
    max-width: 64ch;
}

/* Lista de catálogo: sedes, categorías y deportes. */
.jt-catalogo {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--jt-linea-suave);
}

.jt-catalogo li {
    padding: 8px 2px;
    border-bottom: 1px solid var(--jt-linea-suave);
    font-size: var(--jt-t-sm);
}

.jt-catalogo--vacio {
    color: var(--jt-tinta-suave);
    font-style: italic;
}

@media (max-width: 991.98px) {
    .jt-config {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    /* En pantalla estrecha el índice pasa a ser una fila deslizable arriba:
       ocupa poco y sigue sirviendo de resumen de estado. */
    .jt-config__indice {
        position: static;
        flex-direction: row;
        overflow-x: auto;
        gap: 6px;
        padding-bottom: 4px;
    }

    .jt-config__enlace {
        border-left: 0;
        border-bottom: 2px solid transparent;
        white-space: nowrap;
    }

    .jt-config__enlace.is-activo {
        border-left-color: transparent;
        border-bottom-color: var(--jt-ambar);
    }
}