/* === PALETA DE COLORES + FUENTE INTER === */
:root {
    --color-bg-main: #050c08;
    --color-bg-elevated: #0b1911;
    --color-bg-navbar: #050c08;

    --color-border-soft: rgba(255, 255, 255, 0.06);
    --color-border-strong: rgba(255, 255, 255, 0.12);

    --color-text-main: #111827;
    /* texto general oscuro para fondo blanco */
    --color-text-muted: #6b7280;
    --color-text-soft: #e5e7eb;

    --color-accent: #2281c5;
    --color-accent-soft: #6eb7e7;

    --color-danger: #ef4444;
    --color-info: #3b82f6;

    --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont,
        "Segoe UI", sans-serif;

    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
}

/* === RESET SIMPLE === */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

button,
input[type="button"],
input[type="submit"] {
    -webkit-appearance: none;
    appearance: none;
    font: inherit;
}

/* 🔹 Base para todas las páginas */
html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
}

/* 🔹 Estilos generales del body SOLO cuando NO es la página de login */
html {
    background: var(--color-bg-main);
}

body:not(.auth-page) {
    background: #ffffff;
    /* fondo blanco para todo lo que no es header */
    color: var(--color-text-main);
    font-family: var(--font-sans);
    font-size: 16px;
}

/* 🔹 Comportamiento del home en mobile (scroll más estable) */
body.home-page {
    overscroll-behavior-y: contain;
}

/* Root de la app: ocupa toda la pantalla en home */
.app-root {
    min-height: 100dvh;
    /* viewport dinámico: evita “huecos” raros en móvil */
    display: flex;
    flex-direction: column;
}

a {
    color: inherit;
    text-decoration: none;
}

/* === ICONOS GOOGLE (Material Symbols) === */
.material-symbols-outlined {
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24;
    font-size: 22px;
    line-height: 1;
}

/* === TOPBAR === */
.topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--color-bg-navbar);
    padding-top: env(safe-area-inset-top, 0px);
    border-bottom: 1px solid var(--color-border-soft);
}

.topbar-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0.75rem var(--space-md);
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.topbar-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.logo-text {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-text-soft);
}

/* Nav desktop */
.topbar-nav {
    justify-content: center;
    display: flex;
    gap: var(--space-md);
    flex: 1;
}

.nav-link {
    font-size: 0.9rem;
    color: var(--color-text-soft);
    padding: 0.25rem 0;
    border-bottom: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.nav-link:hover {
    color: #ffffff;
    border-color: var(--color-accent-soft);
}

/* Estado activo en desktop */
.nav-link--active,
.nav-link--active:hover {
    color: #ffffff;
    border-color: var(--color-accent-soft);
}

/* Right side desktop */
.topbar-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
}

/* Botón cerrar sesión */
.btn-outline {
    border: 1px solid var(--color-border-strong);
    color: var(--color-text-soft);
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    font-size: 0.9rem;
    cursor: pointer;
    background: transparent;
}

.btn-outline:hover {
    border-color: var(--color-accent-soft);
}

/* Notificaciones desktop (por si luego lo usas) */
.notif-btn {
    display: none;
}

/* === HAMBURGUESA (por defecto oculta, solo mobile) === */
.hamburger {
    display: none;
    /* escritorio: oculto (se muestra en mobile) */
    margin-left: auto;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    border: 1px solid var(--color-border-soft);
    background: transparent;
    cursor: pointer;

    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
}

.hamburger span.material-symbols-outlined {
    font-size: 22px;
    color: var(--color-text-soft);
}

/* === MAIN CONTENT === */
.main {
    flex: 1;
}

.main-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: var(--space-lg) var(--space-md);
    background: #ffffff;
    /* garantizamos fondo blanco */
}

/* === MOBILE DRAWER (sale desde la DERECHA) === */
.mobile-drawer {
    position: fixed;
    inset: 0 0 0 auto;
    /* pegado a la derecha */
    width: min(320px, 86vw);
    background: var(--color-bg-elevated);
    border-left: 1px solid var(--color-border-soft);
    transform: translateX(100%);
    /* empieza oculto a la derecha */
    transition: transform 0.2s ease-out;
    z-index: 50;
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.mobile-drawer.open {
    transform: translateX(0);
}

.mobile-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}

/* Botón cerrar drawer */
.drawer-close {
    border: none;
    background: transparent;
    color: var(--color-text-soft);
    font-size: 1.5rem;
    cursor: pointer;
}

/* Links mobile */
.mobile-nav {
    display: flex;
    flex-direction: column;
    flex: 1;
    margin-top: var(--space-md);
}

.mobile-nav-top {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.mobile-nav-bottom {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.mobile-nav-link {
    padding: 0.5rem 0;
    font-size: 0.95rem;
    color: var(--color-text-soft);
    border-bottom: 1px solid var(--color-border-soft);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Estado activo en mobile */
.mobile-nav-link--active {
    border-bottom-color: var(--color-accent-soft);
    color: #ffffff;
}

.mobile-nav-logout {
    color: var(--color-danger);
    border-color: transparent;
}

/* Backdrop */
.backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 40;
}

.backdrop.open {
    opacity: 1;
    pointer-events: auto;
}

/* === DESKTOP (por defecto) === */
@media (min-width: 769px) {
    .topbar-brand {
        display: flex;
        /* logo visible */
    }

    .topbar-nav {
        display: flex;
        /* navbar visible */
    }

    .topbar-right {
        display: flex;
        /* cerrar sesión visible */
    }

    .hamburger {
        display: none;
        /* sin hamburguesa en escritorio */
    }
}

/* === MOBILE (≤ 768px): logo + hamburguesa, sin navbar ni cerrar sesión === */
@media (max-width: 768px) {

    /* En mobile: logo visible, navbar y Cerrar sesión ocultos */
    .topbar-brand {
        display: flex;
    }

    .topbar-nav,
    .topbar-right {
        display: none;
    }

    .hamburger {
        display: flex;
        margin-left: auto;
    }

    .main-inner {
        padding: var(--space-md) .85rem calc(var(--space-lg) + env(safe-area-inset-bottom));
    }

    .topbar-inner {
        padding: .7rem max(.85rem, env(safe-area-inset-right, 0px))
            .7rem max(.85rem, env(safe-area-inset-left, 0px));
    }
    .mobile-drawer { padding-bottom: calc(var(--space-md) + env(safe-area-inset-bottom)); }
}
.exercise-modal-open { overflow: hidden; }
.exercise-detail-modal { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: 1rem; }
.exercise-detail-modal[hidden] { display: none; }
.exercise-modal-backdrop { position: absolute; inset: 0; background: rgba(5, 12, 8, .7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: exerciseModalBackdropIn .28s ease-out both; }
.exercise-modal-window { position: relative; z-index: 1; display: flex; flex-direction: column; width: min(900px, 100%); height: calc(100dvh - 2rem); overflow: hidden; border-radius: 1rem; background: #fff; box-shadow: 0 28px 70px rgba(0,0,0,.35); animation: exerciseModalSlideUp .38s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes exerciseModalBackdropIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes exerciseModalSlideUp { from { opacity: 0; transform: translateY(min(18vh, 10rem)); } to { opacity: 1; transform: translateY(0); } }
.exercise-modal-header { position: relative; z-index: 4; display: flex; align-items: center; flex: 0 0 auto; min-height: 4.5rem; padding: .8rem 4.5rem .8rem 1.25rem; border-bottom: 1px solid #dbe4ea; background: #fff; }
.exercise-modal-header h2 { margin: 0; color: #102a2a; font-size: clamp(1.25rem, 4vw, 1.8rem); line-height: 1.2; }
.exercise-modal-close { position: absolute; top: 50%; right: .85rem; transform: translateY(-50%); display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 999px; color: #fff; background: rgba(15,23,42,.88); font-size: 1.8rem; line-height: 1; cursor: pointer; }
.exercise-modal-scroll { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.exercise-modal-media { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; color: #16805f; background: #eef6f2; }
.exercise-modal-frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; }
.exercise-modal-frame-1 { animation: exerciseModalFrame1 1s linear infinite; }
.exercise-modal-frame-2 { opacity: 0; animation: exerciseModalFrame2 1s linear infinite; }
.exercise-modal-placeholder { font-size: 3rem; }
.exercise-vimeo-player { position: absolute; z-index: 2; inset: 0; overflow: hidden; opacity: 0; background: #000; pointer-events: none; transition: opacity .2s ease; }
.exercise-vimeo-player.is-ready { opacity: 1; }
.exercise-vimeo-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }
@keyframes exerciseModalFrame1 { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes exerciseModalFrame2 { 0%, 49% { opacity: 0; } 50%, 100% { opacity: 1; } }
.exercise-modal-content { padding: 1.25rem; }
.exercise-modal-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.15rem 0 0; }
.exercise-modal-meta[hidden], .exercise-modal-media[hidden], .exercise-modal-tutorial[hidden], [data-modal-name][hidden] { display: none; }
.exercise-modal-meta > div { display: inline-flex; align-items: center; gap: .35rem; max-width: 100%; padding: .4rem .65rem; border: 1px solid #cfe5dc; border-radius: 999px; background: #eff8f4; }
.exercise-modal-meta dt { color: #16805f; font-size: .7rem; font-weight: 750; }
.exercise-modal-meta dt::after { content: ":"; }
.exercise-modal-meta dd { min-width: 0; margin: 0; overflow-wrap: anywhere; color: #173d36; font-size: .76rem; font-weight: 650; }
.exercise-modal-tutorial { margin-top: 1rem; border: 1px solid #dbe4ea; border-radius: .75rem; background: #f8faf9; overflow: hidden; }
.exercise-modal-tutorial summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; color: #173d36; font-size: 1rem; font-weight: 750; cursor: pointer; list-style: none; }
.exercise-modal-tutorial summary::-webkit-details-marker { display: none; }
.exercise-modal-tutorial summary .material-symbols-outlined { transition: transform .2s ease; }
.exercise-modal-tutorial[open] summary .material-symbols-outlined { transform: rotate(180deg); }
.exercise-modal-tutorial-body { padding: 0 1rem 1rem; border-top: 1px solid #e2e8f0; }
.exercise-modal-tutorial ol { display: grid; gap: .65rem; margin: 0; padding-left: 1.5rem; }
.exercise-modal-tutorial-body ol, .exercise-modal-tutorial-body p { margin-top: 1rem; }
.exercise-modal-tutorial li { padding-left: .25rem; color: #334155; font-size: .88rem; line-height: 1.5; }
.exercise-modal-tutorial p { color: #64748b; font-size: .85rem; }
.exercise-modal-edit-toggle { width: 100%; margin-top: 1rem; padding: .7rem 1rem; border: 0; border-radius: .6rem; color: #fff; background: #173d36; font-weight: 700; cursor: pointer; }
.exercise-modal-edit-form { margin-top: 1rem; }
.exercise-modal-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.exercise-modal-form-grid label { display: grid; gap: .3rem; color: #334155; font-size: .75rem; font-weight: 700; }
.exercise-modal-form-grid > label > input, .exercise-modal-form-grid textarea { width: 100%; min-width: 0; padding: .6rem; border: 1px solid #cbd5e1; border-radius: .5rem; background: #fff; color: #0f172a; font: inherit; }
.exercise-modal-choice-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.exercise-modal-choice-field legend { margin-bottom: .3rem; color: #334155; font-size: .75rem; font-weight: 700; }
.exercise-modal-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
.exercise-modal-choice-grid label { display: flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: .55rem .65rem; border: 1px solid #dbe4ea; border-radius: .6rem; color: #334155; background: #fff; font-size: .78rem; font-weight: 650; cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.exercise-modal-choice-grid label:hover { transform: translateY(-1px); border-color: #8fc7b4; background: #f6fbf8; }
.exercise-modal-choice-grid label:has(input:checked) { border-color: #16805f; background: #eaf8f1; box-shadow: inset 0 0 0 1px #16805f; }
.exercise-modal-choice-grid input { flex: 0 0 1.05rem; width: 1.05rem; height: 1.05rem; accent-color: #16805f; }
.exercise-modal-form-wide { grid-column: 1 / -1; }
.exercise-video-help, .exercise-video-status { color: #64748b; font-size: .7rem; font-weight: 500; }
.exercise-video-status.is-valid { color: #047857; }
.exercise-video-status.is-error { color: #b91c1c; }
.exercise-modal-form-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1rem; }
.exercise-modal-form-actions button { padding: .65rem 1rem; border: 1px solid #173d36; border-radius: .55rem; background: #fff; color: #173d36; font-weight: 700; cursor: pointer; }
.exercise-modal-form-actions button[type="submit"] { background: #173d36; color: #fff; }
.exercise-modal-danger-zone { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid #fecaca; }
.exercise-modal-delete { width: 100%; padding: .7rem 1rem; border: 1px solid #b91c1c; border-radius: .6rem; color: #b91c1c; background: #fff; font-weight: 750; cursor: pointer; }
.exercise-modal-delete:hover { color: #fff; background: #b91c1c; }
.exercise-delete-dialog { position: fixed; inset: 0; width: min(28rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); margin: auto; padding: 0; border: 0; border-radius: .9rem; box-shadow: 0 24px 70px rgba(0,0,0,.35); }
.exercise-delete-dialog::backdrop { background: rgba(5,12,8,.72); backdrop-filter: blur(4px); }
.exercise-delete-dialog form { padding: 1.35rem; }
.exercise-delete-dialog [hidden] { display: none; }
.exercise-delete-step-label { margin: 0 0 .4rem !important; color: #b91c1c !important; font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.exercise-delete-dialog h2 { margin: 0; color: #991b1b; font-size: 1.25rem; }
.exercise-delete-dialog p { margin: .75rem 0 1.25rem; color: #64748b; line-height: 1.5; }
.exercise-delete-dialog p strong { color: #334155; }
.exercise-delete-dialog-actions { display: flex; justify-content: flex-end; gap: .6rem; }
.exercise-delete-dialog-actions button { padding: .65rem .9rem; border: 1px solid #cbd5e1; border-radius: .55rem; background: #fff; font-weight: 700; cursor: pointer; }
.exercise-delete-dialog-actions button[type="submit"] { border-color: #b91c1c; color: #fff; background: #b91c1c; }
.exercise-delete-dialog-actions .exercise-delete-continue { border-color: #173d36; color: #fff; background: #173d36; }
.app-messages { display: grid; gap: .5rem; margin: 0 auto 1rem; max-width: 980px; }
.app-message { padding: .75rem 1rem; border: 1px solid #bbf7d0; border-radius: .65rem; color: #166534; background: #f0fdf4; font-size: .85rem; font-weight: 650; }
.app-message-error { border-color: #fecaca; color: #991b1b; background: #fef2f2; }
@media (max-width: 560px) { .exercise-detail-modal { padding: 0; } .exercise-modal-window { width: 100%; height: 100dvh; border-radius: 0; animation-duration: .45s; } .exercise-modal-header { min-height: 4.25rem; padding-left: 1rem; } .exercise-modal-media { aspect-ratio: 4 / 3; } .exercise-modal-content { padding: 1rem; } .exercise-modal-meta { gap: .4rem; } .exercise-modal-meta > div { padding: .38rem .55rem; } .exercise-modal-form-grid { grid-template-columns: 1fr; } .exercise-modal-form-wide { grid-column: auto; } .exercise-modal-form-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; } .exercise-modal-form-actions button { width: 100%; min-width: 0; } }
@media (prefers-reduced-motion: reduce) { .exercise-modal-backdrop, .exercise-modal-window { animation-duration: .01ms; } }