/* Learn+ Custom Styles */
:root {
    --color-ink:    #031926;
    --color-teal:   #468189;
    --color-teal-m: #77ACA2;
    --color-ash:    #9DBEBB;
    --color-cream:  #F4E9CD;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-ash); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-teal-m); }

/* Prose styles for lesson content — !important para sobreescribir Tailwind Preflight */
.lesson-content ul  { list-style-type: disc !important;    padding-left: 1.5em;  margin-bottom: 1em; }
.lesson-content ol  { list-style-type: decimal !important; padding-left: 1.5em;  margin-bottom: 1em; }
.lesson-content ul ul { list-style-type: circle !important; }
.lesson-content li  { display: list-item !important; margin-bottom: .3em; }
.lesson-content strong, .lesson-content b { font-weight: 700 !important; }
.lesson-content em, .lesson-content i     { font-style: italic !important; }
.lesson-content h1  { font-size: 1.8em;  font-weight: 700; margin: .8em 0 .4em; color: var(--color-ink); }
.lesson-content h2  { font-size: 1.4em;  font-weight: 700; margin: .8em 0 .4em; color: var(--color-ink); }
.lesson-content h3  { font-size: 1.15em; font-weight: 600; margin: .8em 0 .4em; color: var(--color-ink); }
.lesson-content p   { margin-bottom: .8em; line-height: 1.7; color: #374151; }
.lesson-content a   { color: var(--color-teal); text-decoration: underline; }
.lesson-content blockquote {
    border-left: 4px solid var(--color-ash);
    padding-left: 1rem;
    margin: 1em 0;
    font-style: italic;
    color: #6b7280;
}
.lesson-content table { border-collapse: collapse; width: 100%; margin: 1em 0; }
.lesson-content table td,
.lesson-content table th { border: 1px solid #d1d5db; padding: .5rem .75rem; }
.lesson-content table th { background: #f3f4f6; font-weight: 600; }
.lesson-content code {
    background: rgba(153, 190, 187, 0.2);
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.875em;
    color: var(--color-ink);
}
.lesson-content pre {
    background: var(--color-ink);
    color: #e2e8f0;
    padding: 1rem;
    border-radius: 0.75rem;
    overflow-x: auto;
    margin: 1rem 0;
}
.lesson-content img {
    max-width: 100%;
    border-radius: 0.75rem;
    margin: 0.75rem 0;
}

/* Transitions */
a, button { transition-property: color, background-color, border-color, opacity, transform, box-shadow; transition-duration: 150ms; }

/* Flash auto-hide */
#flash-msg { animation: fadeOut 0.5s ease 4s forwards; }
@keyframes fadeOut { to { opacity: 0; pointer-events: none; } }

/* SweetAlert2 theme override */
.swal2-popup { border-radius: 1rem !important; font-family: inherit !important; }
.swal2-confirm { background-color: var(--color-teal) !important; border-radius: 0.75rem !important; }
.swal2-cancel { border-radius: 0.75rem !important; }

/* Mobile safe area */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    nav.fixed.bottom-0 { padding-bottom: env(safe-area-inset-bottom); }
}