/* FunLMS - app.css
   Paleta: Teal/Cyan — profesional y tranquila
   ===================================================== */

/* ── Reset / Base ────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    -webkit-tap-highlight-color: transparent;
}

/* ── Safe areas (PWA / notch) ────────────────────────── */
.safe-top    { padding-top:    env(safe-area-inset-top,    0); }
.safe-bottom { padding-bottom: env(safe-area-inset-bottom, 0); }
.pb-nav { padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0)); }

/* ── Animaciones ─────────────────────────────────────── */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn  { from { opacity:0; } to { opacity:1; } }
@keyframes modalIn {
    from { opacity:0; transform: scale(0.93) translateY(8px); }
    to   { opacity:1; transform: scale(1)    translateY(0);   }
}
@keyframes slideUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}
@keyframes spin        { to   { transform: rotate(360deg); } }
@keyframes pulse-ring  {
    0%   { box-shadow: 0 0 0  0   rgba(8,145,178,.35); }
    100% { box-shadow: 0 0 0 12px rgba(8,145,178,0);   }
}
@keyframes skeleton-shine {
    0%   { background-position:  200% 0; }
    100% { background-position: -200% 0; }
}

.animate-fade-in-up { animation: fadeInUp 0.3s ease both; }
.animate-fade-in    { animation: fadeIn   0.2s ease both; }
.animate-modal      { animation: modalIn  0.25s ease both; }
.animate-slide-up   { animation: slideUp  0.3s cubic-bezier(.32,.72,0,1) both; }
.animate-spin       { animation: spin     0.8s linear infinite; }
.animate-pulse-ring { animation: pulse-ring 1.5s ease-out infinite; }

/* ── Stagger children ─────────────────────────────────── */
.stagger-children > * { animation: fadeInUp 0.3s ease both; }
.stagger-children > *:nth-child(1) { animation-delay: .05s; }
.stagger-children > *:nth-child(2) { animation-delay: .10s; }
.stagger-children > *:nth-child(3) { animation-delay: .15s; }
.stagger-children > *:nth-child(4) { animation-delay: .20s; }
.stagger-children > *:nth-child(5) { animation-delay: .25s; }
.stagger-children > *:nth-child(n+6) { animation-delay: .30s; }

/* ── Custom Scrollbar ────────────────────────────────── */
::-webkit-scrollbar       { width:6px; height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:#b2d8d8; border-radius:10px; }
::-webkit-scrollbar-thumb:hover { background:#0891b2; }

/* ── ─── Jelly Icon System ─────────────────────────────
   Burbujas de color para íconos FA — estilo Jelly
   ────────────────────────────────────────────────────── */
.ji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 13px;
    font-size: 1rem;
    flex-shrink: 0;
    transition: transform .2s, box-shadow .2s;
}
.ji-sm  { width:2rem;   height:2rem;   border-radius:10px; font-size:.85rem; }
.ji-lg  { width:3rem;   height:3rem;   border-radius:16px; font-size:1.2rem; }
.ji-xl  { width:3.5rem; height:3.5rem; border-radius:18px; font-size:1.4rem; }
.ji:hover { transform: translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.12); }

/* Variantes de color ── */
.ji-teal   { background:linear-gradient(135deg,#cffafe,#a5f3fc); color:#0e7490; }
.ji-cyan   { background:linear-gradient(135deg,#e0f2fe,#bae6fd); color:#0369a1; }
.ji-blue   { background:linear-gradient(135deg,#dbeafe,#bfdbfe); color:#1d4ed8; }
.ji-green  { background:linear-gradient(135deg,#d1fae5,#a7f3d0); color:#065f46; }
.ji-emerald{ background:linear-gradient(135deg,#ecfdf5,#d1fae5); color:#047857; }
.ji-amber  { background:linear-gradient(135deg,#fef3c7,#fde68a); color:#92400e; }
.ji-rose   { background:linear-gradient(135deg,#ffe4e6,#fecdd3); color:#9f1239; }
.ji-slate  { background:linear-gradient(135deg,#f1f5f9,#e2e8f0); color:#334155; }
.ji-violet { background:linear-gradient(135deg,#ede9fe,#ddd6fe); color:#5b21b6; }
.ji-orange { background:linear-gradient(135deg,#ffedd5,#fed7aa); color:#c2410c; }

/* ── Card hover effect ───────────────────────────────── */
.card-hover { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.card-hover:hover  { transform: translateY(-2px); box-shadow:0 10px 40px rgba(0,0,0,.07); }
.card-hover:active { transform: scale(0.98); }

/* ── Progress bar (video / lección) ─────────────────── */
.progress-ring { transform: rotate(-90deg); transform-origin: 50% 50%; }

/* ── Bottom nav icons ────────────────────────────────── */
#bottom-nav a { position:relative; transition:color .2s; }
#bottom-nav .fa-solid,
#bottom-nav .fa-regular { font-size:1.15rem; display:block; }

/* ── Sidebar nav icons ───────────────────────────────── */
#sidebar .fa-solid,
#sidebar .fa-regular { font-size:1rem; width:1.25rem; text-align:center; }

/* ── Form styles (compartidos) ───────────────────────── */
.label-form {
    display:block; font-size:.8rem; font-weight:500;
    color:#374151; margin-bottom:.375rem;
}
.input-form {
    width:100%; padding:.625rem .875rem;
    border:1px solid #e5e7eb; border-radius:.75rem;
    font-size:.875rem; outline:none; transition:all .2s;
    background:white; color:#111827;
}
.input-form:focus {
    border-color:#0891b2;
    box-shadow:0 0 0 3px rgba(8,145,178,.12);
}
.input-form:disabled { background:#f9fafb; color:#9ca3af; cursor:not-allowed; }

/* ── Quiz option selected ────────────────────────────── */
.quiz-option input:checked + span { color:#0891b2; font-weight:600; }

/* ── Forum content ───────────────────────────────────── */
.forum-content { line-height:1.7; word-break:break-word; }
.forum-content img { max-width:100%; border-radius:.75rem; margin-top:.5rem; }
.forum-content a   { color:#0891b2; text-decoration:underline; }

/* ── Reply new animation ─────────────────────────────── */
.reply-new { animation: fadeInUp 0.4s ease both; }

/* ── Video.js custom theme ───────────────────────────── */
.video-js .vjs-big-play-button {
    background-color:rgba(8,145,178,.9) !important;
    border-color:transparent !important;
    border-radius:50% !important;
    width:3.5rem !important; height:3.5rem !important;
    line-height:3.5rem !important;
    margin-top:-1.75rem !important; margin-left:-1.75rem !important;
}
.video-js .vjs-control-bar  { background:linear-gradient(transparent,rgba(0,0,0,.7)) !important; }
.video-js .vjs-play-progress { background-color:#0891b2 !important; }

/* ── PWA install banner ──────────────────────────────── */
#pwa-banner {
    position:fixed;
    bottom:calc(4rem + env(safe-area-inset-bottom,0));
    left:50%; transform:translateX(-50%);
    z-index:60; animation:slideUp 0.4s cubic-bezier(.32,.72,0,1) both;
}

/* ── Gradient text ───────────────────────────────────── */
.gradient-text {
    background:linear-gradient(135deg,#0891b2,#0e7490);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    background-clip:text;
}

/* ── Skeleton loading ────────────────────────────────── */
.skeleton {
    background:linear-gradient(90deg,#f3f4f6 25%,#e5e7eb 50%,#f3f4f6 75%);
    background-size:200% 100%;
    animation:skeleton-shine 1.5s ease infinite;
    border-radius:.5rem;
}

/* ── Prose (lesson content) ──────────────────────────── */
.prose { max-width:none; color:#374151; }
.prose h1,.prose h2,.prose h3 { font-weight:700; margin-top:1.5em; margin-bottom:.5em; }
.prose h1 { font-size:1.5rem; }
.prose h2 { font-size:1.25rem; }
.prose h3 { font-size:1.1rem; }
.prose p  { margin-bottom:1em; line-height:1.7; }
.prose ul,.prose ol { padding-left:1.5rem; margin-bottom:1em; }
.prose li  { margin-bottom:.25em; }
.prose a   { color:#0891b2; text-decoration:underline; }
.prose strong { font-weight:600; }
.prose code { background:#f3f4f6; padding:.2em .4em; border-radius:.25rem; font-size:.875em; }
.prose pre  { background:#1e293b; color:#f8fafc; padding:1rem; border-radius:.75rem; overflow-x:auto; margin-bottom:1em; }

/* ── Responsive utilities ────────────────────────────── */
@media (max-width:640px) {
    .text-responsive-xl  { font-size:1.25rem; }
    .text-responsive-2xl { font-size:1.5rem; }
}

/* ── Print ───────────────────────────────────────────── */
@media print {
    #bottom-nav,#sidebar,#app-topbar,#toast-container { display:none !important; }
    main { margin:0 !important; padding:0 !important; }
}

/* Apariencia global (panel admin / configuración) */
.app-density-compact #main-content .max-w-7xl {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
}
@media (min-width: 640px) {
    .app-density-compact #main-content .max-w-7xl { padding-left: 1rem; padding-right: 1rem; }
}
.app-borders-soft #main-content .rounded-2xl,
.app-borders-soft #bottom-nav > div {
    border-radius: 1.05rem !important;
}