/* ===========================================================================
   student-pastel.css — Capa pastel del área del alumno
   ---------------------------------------------------------------------------
   Se carga DESPUÉS de student-new.css / alumno-home.css y solo suaviza color.
   NO toca layout, tamaños ni posiciones: la geometría del theme alumno está
   documentada en .agents/KNOWLEDGE_BASE.md y cambiarla rompe otras vistas.

   Criterio (Refactoring UI):
   - El color se aplica al final, sobre una jerarquía que ya funciona.
   - Los pasteles van a superficies (fondos, tarjetas, barras); los tonos
     saturados se reservan para acciones y estados activos, donde hacen falta
     para el contraste.
   - Grises con matiz (slate) en vez de grises puros: se integran mejor con
     una paleta cálida y no apagan la interfaz.
   - Texto sobre superficie clara siempre >= 4.5:1 (slate-700 #334155 o más
     oscuro). El verde de marca se conserva en botones para no perder
     identidad ni contraste del texto blanco.
   =========================================================================== */

:root {
    /* Superficies pastel — un tono por sección (arcoíris suave desaturado) */
    --ck-pastel-rose:   #FFF1F2;
    --ck-pastel-sky:    #EFF6FF;
    --ck-pastel-mint:   #F0FDF4;
    --ck-pastel-amber:  #FFFBEB;
    --ck-pastel-lilac:  #FAF5FF;
    --ck-pastel-peach:  #FFF7ED;
    --ck-pastel-cream:  #FFFDF7;

    /* Bordes pastel (un paso más saturados que su superficie) */
    --ck-pastel-border-rose:  #FECDD3;
    --ck-pastel-border-sky:   #BFDBFE;
    --ck-pastel-border-mint:  #BBF7D0;
    --ck-pastel-border-lilac: #E9D5FF;

    /* Texto: grises con matiz azulado (slate), nunca negro puro */
    --ck-ink-strong: #1E293B;
    --ck-ink:        #334155;
    --ck-ink-soft:   #64748B;
}

/* ── Fondo general ──────────────────────────────────────────────────────────
   Antes: blanco -> #d4effa (celeste bastante saturado abajo).
   Ahora: crema muy claro -> celeste pastel. Más suave y menos frío. */
body.ck-theme-encarta,
body.ck-student-home-route {
    background: linear-gradient(180deg, #FFFDF7 0%, #EAF6FF 55%, #E8F4FD 100%) !important;
    background-attachment: fixed !important;
}

/* ── Sidebar de píldoras ───────────────────────────────────────────────── */
/* El marco verde saturado (3px #22c55e) resultaba duro; se pasa a menta. */
.ck-sidebar-pill-nav {
    background: rgba(255, 255, 255, 0.72);
    border-color: var(--ck-pastel-border-mint);
    box-shadow: 0 4px 16px rgba(148, 163, 184, 0.16);
}

.ck-sidebar-pill-btn {
    border-color: #EEF2F7;
    color: var(--ck-ink);
    box-shadow: 0 1px 3px rgba(148, 163, 184, 0.14);
}

.ck-sidebar-pill-btn:hover {
    background: var(--ck-pastel-mint);
    border-color: var(--ck-pastel-border-mint);
    color: #15803D;
}

/* Estado activo: se mantiene sólido a propósito. Es el único elemento del
   sidebar que debe destacar, y el texto es blanco.
   #15803D da 5.02:1 con blanco (AA). Ojo: el #22c55e original solo daba
   2.28:1 — este estado ya venía fallando contraste antes del pastel.
   La sombra sí es pastel: suaviza sin tocar la legibilidad. */
.ck-sidebar-pill-btn.active {
    background: #15803D;
    border-color: #166534;
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(52, 211, 153, 0.35);
}

/* Iconos circulares de cada píldora */
.ck-sidebar-pill-btn .ck-pill-icon {
    background: var(--ck-pastel-cream);
}

/* ── Tarjetas del dashboard ────────────────────────────────────────────── */
.dashboard-card {
    box-shadow: 0 4px 16px rgba(148, 163, 184, 0.14);
}

/* Próxima misión: durazno en vez del ámbar fuerte */
.mission-card {
    background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%) !important;
}

/* #B45309 = 4.73:1 sobre el durazno (AA). Un naranja más claro caía a 3.4:1. */
.mission-title-small { color: #B45309; }
.mission-heading     { color: var(--ck-ink-strong); }
.mission-desc        { color: #6B7280; }

/* Pizarra digital */
.whiteboard-card {
    background: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%) !important;
}
.whiteboard-title  { color: var(--ck-ink-strong); }
/* Texto pequeño: necesita 4.5:1 sobre el menta (#DCFCE7). */
.whiteboard-empty  { color: #55677F; }

/* ── Tarjetas "Explora y aprende" ──────────────────────────────────────────
   Ya venían en pastel; se les añade borde y sombra suaves para que no
   floten sin definición sobre el fondo claro. */
.learning-card {
    border: 2px solid rgba(148, 163, 184, 0.16);
    box-shadow: 0 2px 10px rgba(148, 163, 184, 0.12);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.learning-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(148, 163, 184, 0.2);
}

.learning-card-title { color: var(--ck-ink-strong); }

/* ── Subnav superior ───────────────────────────────────────────────────── */
.ck-subnav {
    background: rgba(255, 255, 255, 0.88);
    border-bottom: 1px solid #EEF2F7;
}

.ck-subnav-btn { color: var(--ck-ink-soft); }

.ck-subnav-btn:hover {
    background: var(--ck-pastel-mint);
    color: #15803D;
}

/* Activo: pastel de fondo + texto oscuro. Aquí sí funciona el pastel porque
   el texto es oscuro sobre claro, no blanco sobre color. */
.ck-subnav-btn.active {
    background: var(--ck-pastel-mint) !important;
    color: #15803D !important;
    border-color: var(--ck-pastel-border-mint) !important;
}

/* ── Paneles de galería (Biblioteca, Juegos, Aplicaciones…) ────────────── */
.sidebar-gallery-wrapper {
    background: rgba(255, 255, 255, 0.72);
}

/* ── Tienda ────────────────────────────────────────────────────────────── */
#ck-panel-tienda .st-wallet-card {
    background: var(--ck-pastel-cream);
    border: 2px solid rgba(148, 163, 184, 0.16);
    box-shadow: 0 2px 10px rgba(148, 163, 184, 0.12);
}

#ck-panel-tienda .st-h-nav-item {
    background: #FFFFFF;
    border-color: #EEF2F7;
    color: var(--ck-ink);
}

#ck-panel-tienda .st-h-nav-item:hover {
    background: var(--ck-pastel-sky);
    border-color: var(--ck-pastel-border-sky);
}

#ck-panel-tienda .st-h-nav-item.active {
    background: var(--ck-pastel-sky);
    border-color: var(--ck-pastel-border-sky);
    color: #1D4ED8;
}

#ck-panel-tienda .st-item-card {
    background: #FFFFFF;
    border: 2px solid rgba(148, 163, 184, 0.16);
    box-shadow: 0 2px 10px rgba(148, 163, 184, 0.12);
}

/* ── Recompensas ───────────────────────────────────────────────────────── */
#ck-panel-recompensas .rec-metric-card.bg-green  { background: var(--ck-pastel-mint)  !important; }
#ck-panel-recompensas .rec-metric-card.bg-blue   { background: var(--ck-pastel-sky)   !important; }
#ck-panel-recompensas .rec-metric-card.bg-purple { background: var(--ck-pastel-lilac) !important; }

#ck-panel-recompensas .rec-metric-label { color: var(--ck-ink-soft); }
#ck-panel-recompensas .rec-metric-value { color: var(--ck-ink-strong); }

#ck-panel-recompensas .rec-trophy-case {
    border-color: var(--ck-pastel-border-mint) !important;
}

/* ── Accesibilidad ─────────────────────────────────────────────────────────
   Con superficies más claras, el foco por teclado debe seguir siendo
   perfectamente visible. */
.ck-sidebar-pill-btn:focus-visible,
.ck-subnav-btn:focus-visible,
.learning-card:focus-visible,
#ck-panel-tienda .st-h-nav-item:focus-visible {
    outline: 3px solid #38BDF8;
    outline-offset: 2px;
}

/* Respeta la preferencia de movimiento reducido del sistema. */
@media (prefers-reduced-motion: reduce) {
    .learning-card,
    .learning-card:hover {
        transition: none;
        transform: none;
    }
}