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

/* =====================================================================
   SISTEMA DE TEMAS  (v8)
   ---------------------------------------------------------------------
   Toda la paleta vive en variables CSS con formato "R, G, B". Tailwind
   (config en index.php) mapea sus escalas a estas variables, de modo que
   las utilidades ya escritas en el HTML/JS -- bg-slate-900, text-white,
   bg-teal-600/20, border-white/10 -- cambian solas al cambiar el tema.

   - :root                    -> modo NOCHE (por defecto)
   - :root[data-theme=light]  -> modo DIA (escala neutra invertida)
   - --c-primary-* / --c-accent-* las reescribe administracion desde
     "Apariencia del sistema" (se guardan en data/_theme.json).

   Regla: --c-white es "el color de maximo contraste sobre el fondo", por
   eso se invierte. Para texto que SIEMPRE debe ser blanco (encima de un
   boton de color) existe la clase .text-on-accent.
   ===================================================================== */

:root {
    color-scheme: dark;

    /* --- Neutros: modo noche --- */
    --c-white: 255 255 255;
    --c-black: 0 0 0;          /* nunca se invierte: velos y sombras */
    --c-slate-50: 248 250 252;
    --c-slate-100: 241 245 249;
    --c-slate-200: 226 232 240;
    --c-slate-300: 203 213 225;
    --c-slate-400: 148 163 184;
    --c-slate-500: 100 116 139;
    --c-slate-600: 71 85 105;
    --c-slate-700: 51 65 85;
    --c-slate-800: 30 41 59;
    --c-slate-900: 15 23 42;
    --c-slate-950: 2 6 23;

    /* --- Identidad (configurable por administracion) --- */
    --c-primary-300: 94 234 212;
    --c-primary-400: 45 212 191;
    --c-primary-500: 20 184 166;
    --c-primary-600: 13 148 136;
    --c-accent-300: 103 232 249;
    --c-accent-400: 34 211 238;
    --c-accent-500: 6 182 212;
    --c-accent-600: 8 145 178;

    /* --- Semanticos: significado fijo, tono ajustado por modo --- */
    --c-green-200: 187 247 208;
    --c-green-400: 74 222 128;
    --c-green-500: 34 197 94;
    --c-green-600: 22 163 74;
    --c-amber-200: 253 230 138;
    --c-amber-300: 252 211 77;
    --c-amber-400: 251 191 36;
    --c-amber-500: 245 158 11;
    --c-rose-100: 255 228 230;
    --c-rose-200: 254 205 211;
    --c-rose-300: 253 164 175;
    --c-rose-400: 251 113 133;
    --c-rose-500: 244 63 94;
    --c-rose-600: 225 29 72;
    /* Dos tonos sueltos del diseño original que NO son de la paleta base:
       el rojo del datepicker y el lila de la insignia de registro rápido.
       Se conservan tal cual estaban. */
    --c-red-500: 239 68 68;
    --c-badge-text: 165 180 252;

    /* --- Superficies --- */
    --c-page: 11 17 32;       /* fondo de la pagina */
    --c-surface: 15 23 42;       /* tarjetas .glass */
    --c-surface-2: 7 10 18;        /* .glass-dark */
    --c-hairline: 255 255 255;    /* bordes finos (se usa con alfa) */
    --hairline-a:   0.05;
    --c-scrim: 2 6 23;         /* velo detras de los modales */
    --scrim-a:      0.80;

    /* --- Alias heredados (v7): siguen funcionando --- */
    --primary:      rgb(var(--c-primary-500));
    --primary-dark: rgb(var(--c-primary-600));
    --accent:       rgb(var(--c-accent-500));
    --accent-dark:  rgb(var(--c-accent-600));
    --success:      rgb(var(--c-green-500));
    --warning:      rgb(var(--c-amber-500));
    --danger:       rgb(var(--c-rose-500));
    --bg-dark:      rgb(var(--c-page));
    --surface:      rgb(var(--c-surface));
    --card-bg:      rgb(var(--c-slate-800) / 0.55);
    --text-main:    rgb(var(--c-slate-50));
    --text-muted:   rgb(var(--c-slate-400));
    --primary-rgb:  var(--c-primary-500);
    --accent-rgb:   var(--c-accent-500);
}

/* =====================================================================
   MODO DIA — la escala neutra se invierte (N -> 1000-N).
   Los acentos conservan su tono; solo se oscurecen los mas claros para
   que sigan siendo legibles sobre fondo blanco.
   ===================================================================== */
:root[data-theme="light"] {
    color-scheme: light;

    --c-white: 15 23 42;       /* "maximo contraste" pasa a ser oscuro */
    --c-black: 0 0 0;
    --c-slate-50: 2 6 23;
    --c-slate-100: 15 23 42;
    --c-slate-200: 30 41 59;
    --c-slate-300: 51 65 85;
    --c-slate-400: 71 85 105;
    --c-slate-500: 85 96 112;
    --c-slate-600: 148 163 184;
    --c-slate-700: 203 213 225;
    --c-slate-800: 226 232 240;
    --c-slate-900: 241 245 249;
    --c-slate-950: 248 250 252;

    /* Los tonos 300 y 400 se usan como TEXTO (los fondos son 500/600).
       Sobre blanco bajan al tono 700, el primero que supera 4.5:1.
       Para primary/accent estos valores son sólo el arranque sin JS:
       theme.js los reescribe según la paleta que fijó administración. */
    --c-primary-300: 15 118 110;
    --c-primary-400: 15 118 110;
    --c-accent-300: 14 116 144;
    --c-accent-400: 14 116 144;
    --c-green-200: 22 101 52;
    --c-green-400: 22 101 52;
    --c-amber-200: 146 64 14;
    --c-amber-300: 146 64 14;
    --c-amber-400: 146 64 14;
    --c-rose-100: 159 18 57;
    --c-rose-200: 159 18 57;
    --c-rose-300: 190 18 60;
    --c-rose-400: 190 18 60;
    --c-red-500: 185 28 28;
    --c-badge-text: 67 56 202;

    --c-page: 244 246 250;
    --c-surface: 255 255 255;
    --c-surface-2: 248 250 252;
    --c-hairline: 15 23 42;
    --hairline-a:   0.10;
    --c-scrim: 15 23 42;
    --scrim-a:      0.45;
}

/* Texto que debe permanecer blanco pase lo que pase: encima de un boton
   de color solido o de un velo oscuro. Los variantes van escritos a mano
   porque .text-on-accent no es una utilidad de Tailwind y el CDN no las
   genera solo. */
.text-on-accent,
.hover\:text-on-accent:hover,
.group:hover .group-hover\:text-on-accent,
.peer:checked ~ .peer-checked\:text-on-accent { color: #fff !important; }

/* Perilla del interruptor: pieza física, blanca en ambos modos (si usara
   bg-white se volvería oscura en modo día y perdería su forma). */
.toggle-knob::after {
    background-color: #fff;
    border-color: #d1d5db;
}
.peer:checked ~ .toggle-knob::after { border-color: #fff; }

/* Spinner de arranque: gira dentro de un cuadro teal, siempre en blanco. */
.boot-spinner {
    border-color: rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
}

/* Velo de los modales: oscurece en ambos modos. */
.modal-scrim { background-color: rgb(var(--c-scrim) / var(--scrim-a)); }

body {
    font-family: 'Outfit', sans-serif;
    background-color: rgb(var(--c-page));
    color: rgb(var(--c-slate-50));
    min-height: 100vh;
    overflow-x: hidden;
}

.glass {
    background: rgb(var(--c-surface)); /* Solid background */
    border: 1px solid rgb(var(--c-hairline) / var(--hairline-a));
    box-shadow: none; /* ESTRICTO: Sin sombras en ningún componente */
}

.glass-dark {
    background: rgb(var(--c-surface-2));
    border: 1px solid rgb(var(--c-hairline) / var(--hairline-a));
}

nav.glass {
    border-radius: 0 !important;
    border: none !important;
    border-bottom: 1px solid rgb(var(--c-hairline) / var(--hairline-a)) !important;
    padding: 0 !important;
}

.animate-in {
    animation: slideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Custom Time Picker Styles */
.time-picker-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 240px;
    z-index: 1000;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 8px;
    gap: 4px;
}

.time-column {
    display: flex;
    flex-direction: column;
    max-height: 180px;
    overflow-y: auto;
}

.time-option {
    padding: 8px 4px;
    text-align: center;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
}

.time-option:hover {
    background: rgb(var(--c-white) / 0.1);
}

.time-option.selected {
    background: var(--primary);
    color: white;
    font-weight: bold;
}

.time-column::-webkit-scrollbar { width: 4px; }
.time-column::-webkit-scrollbar-thumb { background: rgb(var(--c-white) / 0.1); border-radius: 4px; }

/* Table Enhancements */
.table-right-actions {
    text-align: right;
    display: flex;
    justify-content: flex-end;
}

.search-input {
    background: rgb(var(--c-slate-900) / 0.5);
    border: 1px solid rgb(var(--c-white) / 0.1);
    transition: all 0.3s;
}

.search-input:focus {
    border-color: var(--primary);
    background: rgb(var(--c-slate-900) / 0.8);
    box-shadow: 0 0 0 2px rgb(var(--primary-rgb) / 0.2);
}

/* Sorting */
.sort-header {
    cursor: pointer;
    user-select: none;
    transition: color 0.2s;
}

.sort-header:hover {
    color: var(--primary);
}

.badge-validated {
    background: rgb(var(--c-green-500) / 0.15);
    color: rgb(var(--c-green-400));
    border: 1px solid rgb(var(--c-green-400) / 0.25);
}

/* Button & UI Enhancements */
.btn-primary {
    background: var(--primary-dark);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: none;
}

.btn-primary:hover {
    background: var(--primary);
    transform: translateY(-1px);
}

.btn-primary:active {
    transform: translateY(0);
}

input[type="date"] {
    color-scheme: dark;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.55) sepia(1) saturate(4) hue-rotate(130deg);
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

.modal-glass {
    background: var(--surface);
    border: 1px solid rgb(var(--c-white) / 0.1);
}

.input-glass {
    background: rgb(var(--c-slate-900) / 0.6);
    border: 1px solid rgb(var(--c-white) / 0.05);
    transition: all 0.3s;
}

.input-glass:focus {
    border-color: rgb(var(--primary-rgb) / 0.5);
    background: rgb(var(--c-slate-900) / 0.8);
    box-shadow: 0 0 0 4px rgb(var(--primary-rgb) / 0.1);
}

/* --- Global Elegant Scrollbars --- */
* {
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--c-white) / 0.1) transparent;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgb(var(--c-white) / 0.15);
    border-radius: 20px;
    border: 1px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background: rgb(var(--primary-rgb) / 0.5);
    background-clip: content-box;
}

/* Mobile Activity Card (utility used by both desktop and mobile blocks) */
.mobile-card {
    background: rgb(var(--c-slate-800) / 0.4);
    border-radius: 1.25rem;
    padding: 1.25rem;
    margin-bottom: 1rem;
}

/* Time picker más cómodo en móvil */
@media (max-width: 480px) {
    .time-picker-dropdown {
        width: calc(100vw - 3rem);
        max-width: 280px;
        left: 0;
    }
    .time-option {
        padding: 12px 4px;
        font-size: 14px;
    }
}

/* Permitir overflow horizontal en strips de chips */
.chip-strip {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 4px;
    margin: 0 -0.25rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}
.chip-strip::-webkit-scrollbar { height: 4px; }
.chip-strip > * {
    scroll-snap-align: start;
    flex-shrink: 0;
    white-space: nowrap;
}

/* Tarjeta de actividad detallada (vista admin → detalle entrenador) */
.activity-row {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem 0;
}
@media (min-width: 640px) {
    .activity-row {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 1.5rem 0;
    }
}
.activity-row__main {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    min-width: 0;
}
.activity-row__main > div:last-child { min-width: 0; flex: 1; }
.activity-row__actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}
.activity-row__actions > button {
    flex: 1;
}
@media (min-width: 640px) {
    .activity-row__actions > button { flex: initial; }
}

/* --- Mobile-First Layout Enhancements --- */
@media (max-width: 640px) {
    .glass {
        padding: 1.25rem !important;
        border-radius: 1.25rem !important;
    }

    .btn-primary {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    /* Hide heavy analysis on tiny screens */
    .mobile-hide {
        display: none !important;
    }

    /* Asegurar que ningún componente interno se desborde del viewport */
    main, #app { overflow-x: hidden; }
}

/* Ensure horizontal scroll containers look good */
.overflow-x-auto {
    padding-bottom: 8px;
}

/* --- Quick Form Emphasis (Registro Rápido) --- */
.quick-form {
    position: relative;
    border: 1px solid rgb(var(--accent-rgb) / 0.25);
    background: rgb(var(--accent-rgb) / 0.06);
    transition: border-color 0.3s ease, transform 0.3s ease;
}

.quick-form::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / 0.08);
}

.quick-form:focus-within {
    border-color: rgb(var(--accent-rgb) / 0.55);
}

@media (max-width: 640px) {
    .quick-form {
        border-width: 1.5px;
        border-color: rgb(var(--accent-rgb) / 0.4);
        background: rgb(var(--accent-rgb) / 0.06);
    }
    .quick-form .quick-form__badge {
        display: inline-flex;
    }
}

.quick-form__badge {
    display: none;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: rgb(var(--c-primary-500) / 0.15);
    color: rgb(var(--c-badge-text));
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: 1px solid rgb(var(--c-primary-500) / 0.3);
}

/* MCDatepicker Custom Premium Style */
.mc-calendar {
    --mc-main-bg: rgb(var(--c-slate-800)) !important;
    --mc-theme-color: rgb(var(--c-primary-500)) !important;
    --mc-display-background: rgb(var(--c-primary-500)) !important;
    --mc-picker-background: rgb(var(--c-slate-800)) !important;
    --mc-picker-foreground: rgb(var(--c-slate-50)) !important;
    --mc-active-text-color: rgb(var(--c-white)) !important;
    --mc-inactive-text-color: rgb(var(--c-slate-500)) !important;
    --mc-picker-header-active: rgb(var(--c-slate-50)) !important;
    --mc-picker-header-inactive: rgb(var(--c-slate-600)) !important;
    --mc-date-active-def-foreground: rgb(var(--c-slate-50)) !important;
    --mc-date-active-today-background: rgb(var(--c-primary-500) / 0.2) !important;
    --mc-date-active-pick-background: rgb(var(--c-primary-500)) !important;
    --mc-weekday-foreground: rgb(var(--c-accent-400)) !important;
    font-family: 'Outfit', sans-serif !important;
    border-radius: 1.5rem !important;
    border: 1px solid rgb(var(--c-white) / 0.1) !important;
    box-shadow: 0 25px 50px -12px rgb(var(--c-black) / 0.5) !important;
}

.mc-display {
    padding: 1.5rem !important;
}

.mc-display__date, .mc-display__year, .mc-display__month {
    font-weight: 700 !important;
}

.mc-picker__header {
    padding: 1.5rem !important;
}

.mc-btn {
    border-radius: 0.75rem !important;
    padding: 0.5rem 1rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    font-size: 0.75rem !important;
}

.mc-btn--success {
    background: rgb(var(--c-accent-500) / 0.12) !important;
    color: rgb(var(--c-accent-400)) !important;
}

.mc-btn--danger {
    background: rgb(var(--c-red-500) / 0.1) !important;
    color: rgb(var(--c-red-500)) !important;
}

.mc-date--active:hover {
    background-color: rgb(var(--c-primary-500) / 0.15) !important;
}

.mc-calendar--modal {
    border-radius: 1.5rem !important;
}

@media (max-width: 640px) {
    .mc-calendar--modal {
        width: 90% !important;
        max-width: 320px !important;
    }
}

/* ── MDTimePicker – Tema Corporativo ── */
.mdtimepicker {
    background-color: rgb(var(--c-slate-950) / 0.85) !important;
    backdrop-filter: blur(8px) !important;
}

.mdtimepicker .mdtp__wrapper {
    border-radius: 1.25rem !important;
    overflow: hidden !important;
    border: 1px solid rgb(var(--c-white) / 0.08) !important;
    font-family: 'Outfit', sans-serif !important;
}

/* Header – fondo índigo corporativo */
.mdtimepicker .mdtp__time_holder {
    background-color: rgb(var(--c-primary-500)) !important;
    font-family: 'Outfit', sans-serif !important;
}

/* Área del reloj – fondos dark navy */
.mdtimepicker .mdtp__clock_holder {
    background-color: rgb(var(--c-slate-800)) !important;
}

.mdtimepicker .mdtp__clock_holder .mdtp__clock {
    background-color: rgb(var(--c-slate-900)) !important;
}

/* Dígitos del reloj */
.mdtimepicker .mdtp__clock_holder .mdtp__clock .mdtp__digit:not(.digit--disabled) {
    color: rgb(var(--c-white) / 0.87) !important;
}

/* Dígito activo y hover → índigo */
.mdtimepicker .mdtp__clock_holder .mdtp__clock .mdtp__digit.active span,
.mdtimepicker .mdtp__clock_holder .mdtp__clock .mdtp__digit:not(.digit--disabled) span:hover {
    background-color: rgb(var(--c-primary-500)) !important;
    color: rgb(var(--c-white)) !important;
}

/* Línea del dígito activo → índigo */
.mdtimepicker .mdtp__clock_holder .mdtp__clock .mdtp__digit.active::before {
    background-color: rgb(var(--c-primary-500)) !important;
}

/* Punto central del reloj → índigo */
.mdtimepicker .mdtp__clock_holder .mdtp__clock .mdtp__clock_dot {
    background-color: rgb(var(--c-primary-500)) !important;
}

/* AM/PM activo → índigo */
.mdtimepicker .mdtp__clock_holder .mdtp__clock .mdtp__am.active,
.mdtimepicker .mdtp__clock_holder .mdtp__clock .mdtp__pm.active {
    background-color: rgb(var(--c-primary-500)) !important;
    color: rgb(var(--c-white)) !important;
}

/* AM/PM inactivo */
.mdtimepicker .mdtp__clock_holder .mdtp__clock .mdtp__am:not(.active),
.mdtimepicker .mdtp__clock_holder .mdtp__clock .mdtp__pm:not(.active) {
    background-color: rgb(var(--c-white) / 0.05) !important;
    color: rgb(var(--c-white) / 0.6) !important;
}

/* Botones OK / CANCEL */
.mdtimepicker .mdtp__buttons {
    background-color: rgb(var(--c-slate-800)) !important;
    padding: 0.75rem 1rem !important;
    border-top: 1px solid rgb(var(--c-white) / 0.06) !important;
}

.mdtimepicker .mdtp__buttons .mdtp__button {
    color: rgb(var(--c-primary-400)) !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    border-radius: 0.5rem !important;
    letter-spacing: 0.05em !important;
}

.mdtimepicker .mdtp__buttons .mdtp__button:hover {
    background-color: rgb(var(--c-primary-500) / 0.15) !important;
}

.mdtimepicker .mdtp__buttons .mdtp__button:active {
    background-color: rgb(var(--c-primary-500) / 0.3) !important;
}

/* Dígito disabled */
.mdtimepicker .mdtp__clock_holder .mdtp__clock .mdtp__digit.digit--disabled span {
    color: rgb(var(--c-slate-500) / 0.6) !important;
}