/* ====================================================================
   PlanQca · Capa "ultra moderna"
   --------------------------------------------------------------------
   SOLO realces visuales que se aplican ENCIMA de style.css y dashboard.css.
   No cambia la estructura ni los colores base. Para REVERTIR por completo,
   elimina la línea <link ... modern.css> en app/views/layouts/header.php.
   ==================================================================== */

:root {
    /* Sombras por capas (depth moderno) */
    --shadow-sm: 0 1px 2px rgba(16, 42, 67, .06);
    --shadow:    0 6px 24px rgba(16, 42, 67, .09);
    --shadow-lg: 0 20px 52px rgba(16, 42, 67, .16);
    /* Anillo de foco accesible */
    --ring: 0 0 0 4px rgba(11, 107, 94, .18);
    /* Degradados de marca (mismos colores, con profundidad) */
    --grad-primary: linear-gradient(135deg, #0e8474 0%, #0b6b5e 58%, #095245 100%);
    --grad-accent:  linear-gradient(135deg, #f6bb4d 0%, #f0a830 100%);
    --radius: 16px;
}

/* ---------- Fondo con malla suave ---------- */
body {
    background:
        radial-gradient(1100px 560px at 100% -8%, rgba(11, 107, 94, .07), transparent 60%),
        radial-gradient(820px 480px at -8% 8%, rgba(240, 168, 48, .07), transparent 55%),
        var(--bg);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ---------- Topbar tipo "glass" ---------- */
.topbar {
    background: rgba(255, 255, 255, .72);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid rgba(226, 232, 240, .85);
}
.brand-mark {
    background: var(--grad-primary);
    box-shadow: 0 6px 16px rgba(11, 107, 94, .35);
}
.brand-text {
    background: var(--grad-primary);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.topnav a { transition: background .18s cubic-bezier(.2, .7, .3, 1), color .18s; }
.topnav a:hover { transform: none; }

/* ---------- Botones ---------- */
.btn {
    border-radius: 12px;
    transition: transform .16s cubic-bezier(.2, .7, .3, 1), box-shadow .22s, background .2s, border-color .2s;
}
.btn-primary {
    background: var(--grad-primary);
    box-shadow: 0 6px 16px rgba(11, 107, 94, .26);
}
.btn-primary:hover { background: var(--grad-primary); box-shadow: 0 12px 26px rgba(11, 107, 94, .36); transform: translateY(-2px); }
.btn-primary:active { transform: translateY(0); box-shadow: 0 4px 12px rgba(11, 107, 94, .3); }
.btn-ghost { box-shadow: var(--shadow-sm); }
.btn-ghost:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }

/* ---------- Tarjetas y paneles ---------- */
.panel, .form-card, .clase-card, .stat-card, .proveedor-card, .error-box, .prompt-previa {
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: box-shadow .25s ease, transform .2s ease, border-color .2s ease;
}
.clase-card { position: relative; overflow: hidden; }
.clase-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: var(--grad-primary); opacity: .9;
}
.clase-card:hover, .stat-card:hover, .proveedor-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }

/* ---------- Hero (dashboard) ---------- */
.hero {
    position: relative; overflow: hidden;
    background: var(--grad-primary);
    box-shadow: 0 22px 54px rgba(11, 107, 94, .32);
    border-radius: 22px;
}
.hero::before {
    content: ''; position: absolute; width: 360px; height: 360px; right: -90px; top: -140px;
    background: radial-gradient(circle, rgba(255, 255, 255, .18), transparent 65%);
    border-radius: 50%; pointer-events: none;
}
.hero::after {
    content: ''; position: absolute; width: 280px; height: 280px; left: -100px; bottom: -160px;
    background: radial-gradient(circle, rgba(240, 168, 48, .22), transparent 60%);
    border-radius: 50%; pointer-events: none;
}
.hero-text { position: relative; z-index: 1; }
.hero h1 { letter-spacing: -.02em; }

/* ---------- Métricas con número en degradado ---------- */
.stat-card { position: relative; overflow: hidden; }
.stat-card::before {
    content: ''; position: absolute; inset: 0 auto auto 0; width: 100%; height: 3px;
    background: var(--grad-accent); opacity: .85;
}
.stat-num {
    background: var(--grad-primary);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- Encabezados ---------- */
.page-head h1 { letter-spacing: -.02em; }

/* ---------- Formularios ---------- */
select, textarea,
input[type="number"], input[type="text"], input[type="password"], input[type="email"] {
    border-radius: 12px;
    transition: border-color .15s, box-shadow .18s, background .15s;
}
select:focus, input:focus, textarea:focus { outline: none; box-shadow: var(--ring); border-color: var(--primary); }
.step-num { background: var(--grad-primary); box-shadow: 0 4px 12px rgba(11, 107, 94, .3); }

/* ---------- Chips, badges, avatar ---------- */
.chip, .badge, .course-level, .modelo-tag { box-shadow: var(--shadow-sm); }
.user-avatar { background: var(--grad-primary); box-shadow: 0 4px 12px rgba(11, 107, 94, .3); }

/* ---------- Tabla ---------- */
.table tbody tr { transition: background .15s; }

/* ---------- Secuencia didáctica ---------- */
.secuencia { border-radius: 14px; }
.momento { border-radius: 0 8px 8px 0; transition: background .15s; }
.momento:hover { background: rgba(11, 107, 94, .035); }

/* ---------- Referencias ---------- */
.referencias { background: linear-gradient(180deg, #f7f9fd, #f2f5fb); }
.ref-sup a { transition: color .15s, transform .12s; }
.ref-sup a:hover { transform: translateY(-1px); }

/* ---------- Scrollbar moderna ---------- */
* { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: #94a3b8; background-clip: padding-box; }

/* ---------- Entrada suave del contenido ---------- */
@keyframes pq-fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
main.container > * { animation: pq-fade-up .42s cubic-bezier(.2, .7, .3, 1) both; }
main.container > *:nth-child(2) { animation-delay: .05s; }
main.container > *:nth-child(3) { animation-delay: .1s; }
main.container > *:nth-child(4) { animation-delay: .15s; }

/* ---------- Respeto a preferencias de movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}