/* ── Variables globales ───────────────────────────────────────────────── */
:root {
    --bg-base: #1A1F2B;
    --bg-secondary: #252B38;
    --bg-tertiary: #2E3547;
    --text-primary: #E5E7EB;
    --text-secondary: #9CA3AF;
    --text-muted: #6B7280;
    --accent: #CCFF00;
    --accent-hover: #B8E600;
    --accent-dim: rgba(204, 255, 0, 0.12);
    --danger: #FF4D4D;
    --danger-dim: rgba(255, 77, 77, 0.12);
    --success: #34D399;
    --success-dim: rgba(52, 211, 153, 0.12);
    --warning: #FBBF24;
    --warning-dim: rgba(251, 191, 36, 0.12);
    --border: rgba(255, 255, 255, 0.07);
    --shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
    --radius: 10px;
    --radius-lg: 14px;
}

/* ── Modo claro ───────────────────────────────────────────────────────── */
html.light {
    --bg-base: #F0F4F8;
    --bg-secondary: #FFFFFF;
    --bg-tertiary: #E8EDF3;
    --text-primary: #1A1F2B;
    --text-secondary: #4B5563;
    --text-muted: #9CA3AF;
    --accent: #4F7A00;
    --accent-hover: #3D6000;
    --accent-dim: rgba(79, 122, 0, 0.10);
    --danger: #DC2626;
    --danger-dim: rgba(220, 38, 38, 0.10);
    --success: #059669;
    --success-dim: rgba(5, 150, 105, 0.10);
    --warning: #D97706;
    --warning-dim: rgba(217, 119, 6, 0.10);
    --border: rgba(0, 0, 0, 0.08);
    --shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

/* ── Reset ────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ── Base ─────────────────────────────────────────────────────────────── */
body {
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
    background: var(--bg-base);
    color: var(--text-primary);
    min-height: 100vh;
    min-height: 100dvh;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
    font-family: 'Space Grotesk', 'Segoe UI', Arial, sans-serif;
    font-weight: 700;
    color: var(--text-primary);
}

/* ── Auth ─────────────────────────────────────────────────────────────── */
.auth-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--bg-base);
    background-image:
        radial-gradient(ellipse at 20% 50%, rgba(204, 255, 0, 0.04) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 20%, rgba(204, 255, 0, 0.03) 0%, transparent 50%);
}

.auth-card {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: 2.5rem 2rem;
    width: 100%;
    max-width: 420px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
}

.auth-card h1 {
    text-align: center;
    margin-bottom: 0.25rem;
    font-size: 1.6rem;
    color: var(--text-primary);
}

.auth-card .subtitle {
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 1.8rem;
}

/* ── Formularios ──────────────────────────────────────────────────────── */
.form-group {
    margin-bottom: 1.1rem;
}

.form-group label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
    color: var(--text-secondary);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.65rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.95rem;
    font-family: 'Inter', sans-serif;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--text-muted);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(204, 255, 0, 0.1);
}

.form-group select option {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

/* ── Botones ──────────────────────────────────────────────────────────── */
.btn {
    display: inline-block;
    padding: 0.65rem 1.4rem;
    border: none;
    border-radius: var(--radius);
    font-size: 0.9rem;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
    letter-spacing: 0.01em;
}

.btn:active {
    transform: translateY(1px);
}

.btn-primary {
    background: var(--accent);
    color: #0F1117;
    width: 100%;
    text-align: center;
}

.btn-primary:hover {
    background: var(--accent-hover);
    box-shadow: 0 0 16px rgba(204, 255, 0, 0.25);
}

.btn-secondary {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

.btn-secondary:hover {
    background: var(--bg-secondary);
    border-color: rgba(255, 255, 255, 0.15);
}

.btn-danger {
    background: var(--danger);
    color: #fff;
}

.btn-danger:hover {
    background: #e63e3e;
}

.btn-sm {
    padding: 0.35rem 0.8rem;
    font-size: 0.8rem;
}

/* ── Alertas ──────────────────────────────────────────────────────────── */
.auth-link {
    text-align: center;
    margin-top: 1.2rem;
    font-size: 0.88rem;
    color: var(--text-secondary);
}

.auth-link a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
}

.alert {
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.alert-error {
    background: var(--danger-dim);
    color: var(--danger);
    border: 1px solid rgba(255, 77, 77, 0.25);
}

.alert-success {
    background: var(--success-dim);
    color: var(--success);
    border: 1px solid rgba(52, 211, 153, 0.25);
}

/* ── Layout ───────────────────────────────────────────────────────────── */
.layout {
    display: flex;
    height: 100vh;      /* respaldo para navegadores sin soporte de dvh */
    height: 100dvh;     /* altura de viewport DINAMICA -- en movil, 100vh no
                           cuenta con que la barra de direcciones del
                           navegador aparece/desaparece al hacer scroll, lo
                           que recorta contenido o genera scroll raro (causa
                           sospechada de "hay que forzar vista de escritorio
                           para verlo bien"). 100dvh se ajusta sola. Se
                           declara DESPUES de 100vh a proposito: los
                           navegadores que no entienden dvh ignoran esa linea
                           y se quedan con vh; los que si lo entienden usan
                           la ultima declaracion valida (dvh). */
    overflow: hidden;   /* evita que el body cree su propio scroll global */
}

.sidebar {
    width: 240px;
    background: var(--bg-secondary);
    border-right: 1px solid var(--border);
    color: var(--text-primary);
    padding: 1.5rem 0;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    height: 100%;       /* ocupa toda la altura del layout, fija */
    overflow-y: auto;   /* por si el propio menu llegara a ser mas alto que
                           la pantalla (muchos enlaces): scrollea el menu
                           solo, nunca desaparece "Cerrar sesion". */
}

.sidebar .logo {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    padding: 0 1.5rem 1.5rem;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.sidebar .logo span {
    color: var(--accent);
}

.sidebar nav {
    margin-top: 1rem;
    flex: 1;
}

.sidebar nav a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1.5rem;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
    border-left: 3px solid transparent;
}

.sidebar nav a:hover {
    background: var(--accent-dim);
    color: var(--text-primary);
    border-left-color: var(--accent);
}

.sidebar nav a.active {
    background: var(--accent-dim);
    color: var(--accent);
    border-left-color: var(--accent);
    font-weight: 600;
}

.sidebar .user-info {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border);
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.sidebar .user-info strong {
    display: block;
    color: var(--text-primary);
    font-size: 0.88rem;
    margin-bottom: 0.2rem;
}

.sidebar .logout {
    padding: 0.75rem 1.5rem;
    border-top: 1px solid var(--border);
}

.sidebar .logout a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.85rem;
    transition: color 0.15s;
}

.sidebar .logout a:hover {
    color: var(--danger);
}

.main-content {
    flex: 1;
    padding: 2rem;
    padding-top: 4.5rem;
    overflow-y: auto;
    background: var(--bg-base);
}

.page-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
}

/* ── Cards ────────────────────────────────────────────────────────────── */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.2rem;
    margin-bottom: 2rem;
}

.card {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}

.card-stat .number {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--accent);
}

.card-stat .label {
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin-top: 0.2rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Tablas ───────────────────────────────────────────────────────────── */
.table-wrapper {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

thead th {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    padding: 0.85rem 1rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--border);
}

tbody tr {
    border-bottom: 1px solid var(--border);
    transition: background 0.15s;
}

tbody tr:last-child {
    border-bottom: none;
}

tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

tbody td {
    padding: 0.85rem 1rem;
    color: var(--text-primary);
}

/* ── Badges ───────────────────────────────────────────────────────────── */
.badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.badge-admin {
    background: var(--danger-dim);
    color: var(--danger);
}

.badge-tirador {
    background: var(--success-dim);
    color: var(--success);
}

.badge-entrenador {
    background: var(--accent-dim);
    color: var(--accent);
}

/* ── Toggle tema ──────────────────────────────────────────────────────── */
.theme-toggle {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1.5rem;
    color: var(--text-muted);
    font-size: 0.85rem;
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    font-family: 'Inter', sans-serif;
    transition: color 0.15s;
    border-top: 1px solid var(--border);
}

.theme-toggle:hover {
    color: var(--text-primary);
}

.theme-toggle .toggle-track {
    width: 34px;
    height: 18px;
    border-radius: 9px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    position: relative;
    transition: background 0.2s;
    flex-shrink: 0;
}

.theme-toggle .toggle-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--text-muted);
    position: absolute;
    top: 2px;
    left: 2px;
    transition: transform 0.2s, background 0.2s;
}

html.light .theme-toggle .toggle-track {
    background: var(--accent-dim);
    border-color: var(--accent);
}

html.light .theme-toggle .toggle-thumb {
    transform: translateX(16px);
    background: var(--accent);
}

/* ── Responsive móvil ─────────────────────────────────────────────────── */

/* Botón hamburguesa — solo visible en móvil */
.menu-toggle {
    display: none;
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 200;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    font-size: 1.2rem;
    color: var(--text-primary);
    box-shadow: var(--shadow);
}

/* Overlay oscuro cuando sidebar está abierto */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 150;
}

.sidebar-overlay.active {
    display: block;
}

@media (max-width: 768px) {

    /* Mostrar botón hamburguesa */
    .menu-toggle {
        display: block;
    }

    /* Sidebar oculto por defecto, desliza desde la izquierda */
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        z-index: 160;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        width: 260px;
    }

    .sidebar.open {
        transform: translateX(0);
    }

    /* Main content ocupa todo el ancho */
    .main-content {
        padding: 1rem;
        padding-top: 5rem;
        width: 100%;
    }

    /* Layout en columna */
    .layout {
        flex-direction: column;
    }

    /* Cards grid — 2 columnas en móvil */
    .cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
        margin-bottom: 1rem;
    }

    /* Tablas con scroll horizontal -- mejorado (Fase 1 responsive, sesion
       posterior a la 6 ago 2026): scroll tactil suave en iOS/Android, y la
       PRIMERA columna se queda fija al deslizar, para no perder de vista a
       que fila/persona corresponde cada dato mientras se mira el resto.
       La conversion completa a "tarjetas apiladas" (sin necesitar deslizar
       en absoluto) necesita tocar el HTML de cada vista (atributos
       data-label por celda) -- queda para la Fase 1.5, pantalla por
       pantalla, no es posible solo con CSS. */
    .table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table {
        min-width: 600px;
        font-size: 0.85rem;
    }

    thead th,
    tbody td {
        padding: 0.6rem 0.7rem;
    }

    thead th:first-child,
    tbody td:first-child {
        position: sticky;
        left: 0;
        z-index: 1;
        background: var(--bg-secondary);
        box-shadow: 2px 0 4px rgba(0, 0, 0, 0.15);
    }

    thead th:first-child {
        background: var(--bg-tertiary);
        z-index: 2;
    }

    /* Page title más pequeño */
    .page-title {
        font-size: 1.2rem;
        margin-bottom: 1rem;
    }

    /* Grids de 2 columnas → 1 columna. NOTA (Fase 1 responsive, sesion
       posterior a la 6 ago 2026): esta lista es un parche por patron
       literal, no una solucion general -- cualquier grid-template-columns
       inline que no este aqui EXACTO se queda tal cual y puede desbordar la
       pantalla (le paso a "280px 1fr" en Mi Perfil). Si aparece otra
       pantalla rota igual, buscar su patron de columnas exacto y añadirlo
       aqui, o mejor, cambiar esa vista a una clase CSS en vez de estilo
       inline (mas robusto a largo plazo, pendiente para la Fase 1.5).
    */
    [style*="grid-template-columns:1fr 1fr"],
    [style*="grid-template-columns: 1fr 1fr"],
    [style*="grid-template-columns:2fr 1fr"],
    [style*="grid-template-columns: 2fr 1fr"],
    [style*="grid-template-columns:1fr 1fr 1fr"],
    [style*="grid-template-columns: 1fr 1fr 1fr"],
    [style*="grid-template-columns:280px 1fr"],
    [style*="grid-template-columns: 280px 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* Tarjetas alineadas con margin-left:calc(280px + ...) en escritorio
       (para no quedar "colgadas" bajo la columna de la foto, sec. 50.3.4) --
       en movil ese margen deja media pantalla vacia a la izquierda. Mismo
       tipo de parche por patron literal que el de arriba. */
    [style*="margin-left:calc(280px"],
    [style*="margin-left: calc(280px"] {
        margin-left: 0 !important;
    }

    /* Botones de acción en columna */
    .btn {
        width: 100%;
        text-align: center;
    }

    .btn-sm {
        width: auto;
    }

    /* Card padding más pequeño. Sin overflow-x generico a proposito (sesion
       posterior a la 6 ago 2026): ponia scroll horizontal a CUALQUIER
       tarjeta, arrastrando titulos y resumenes junto con tablas anchas de
       dentro (bug real encontrado en la rejilla de disparos: "Disparos" y
       el resumen de totales desaparecian al deslizar). Las tablas ya tienen
       su propio contenedor de scroll dedicado (.table-wrapper, o el
       contenedor especifico que envuelve solo la tabla en ver_sesion.php).
       Si otra tarjeta con contenido ancho se rompe por quitar esto, dale
       su propio contenedor de scroll en vez de reponer esta regla generica. */
    .card {
        padding: 1rem;
    }

    /* Card stat número más pequeño */
    .card-stat .number {
        font-size: 1.6rem;
    }

    /* Aviso de "escribe el valor y pulsa Tab" (Nueva Sesion): habla de una
       tecla que el movil no tiene, y ademas quedaba arrastrado dentro del
       scroll horizontal de la propia tarjeta (por la tabla ancha de arriba),
       cortandose al deslizar. En movil el teclado propio ya lleva sus
       propias pistas integradas, este aviso no aporta nada ahi. */
    #ayuda-disparos-desktop {
        display: none;
    }

    /* Cabeceras de pantalla con titulo + boton "+ Nueva..." en fila (Admin:
       Modalidades, Categorias, Especialidades, Usuarios, Papelera...) --
       clase propia en vez de regla generica por justify-content, para no
       afectar a otros flex de la app donde si interesa la fila. Con
       flex-wrap en vez de forzar columna: se quedan juntos si caben, y el
       boton salta solo a su propia linea (pequeño, sin estirarse) solo
       cuando de verdad no hay sitio -- pedido explicitamente por Rubert en
       vez del apilado siempre-vertical de antes. */
    .page-header-actions {
        flex-wrap: wrap;
        row-gap: 0.6rem;
    }
    .page-header-actions .btn {
        width: auto;
    }
}