/* ── FUENTE ──────────────────────────────────────────────────────────────── */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('./pwa/fonts/inter.woff2') format('woff2');
}

/* ── VARIABLES DE MARCA ──────────────────────────────────────────────────── */

:root {
    --brand-primary:        #7C5CFC;
    --brand-primary-strong: #5A37D6;
}

/* ── LAYOUT BASE ─────────────────────────────────────────────────────────── */

body        { background-color: #f1f5f9; font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.bg-body    { background-color: #f1f5f9; }
.safe-area-bottom { padding-bottom: env(safe-area-inset-bottom, 0); }
body.modal-open  { overflow: hidden; }
.hide-scroll::-webkit-scrollbar { display: none; }

/* ── EMOTION CARDS ───────────────────────────────────────────────────────── */

.emotion-card {
    transition: all 0.2s ease;
    border: 1px solid rgba(0, 0, 0, 0.05);
    background-color: color-mix(in srgb, var(--ec, transparent) 8%, #ffffff);
}

.emotion-card:active { transform: scale(0.96); opacity: 0.8; }

.emotion-card:focus-visible {
    outline: 3px solid var(--brand-primary);
    outline-offset: 2px;
    /* rgba value matches --brand-primary #7C5CFC */
    box-shadow: 0 0 0 4px rgba(124, 92, 252, 0.2);
}

.recent-emotion-card {
    border-width: 2px;
    border-color: var(--ec, transparent);
    background-color: color-mix(in srgb, var(--ec, transparent) 12%, #ffffff);
}

/* ── NAVEGACIÓN ──────────────────────────────────────────────────────────── */

.nav-tab.nav-active { color: var(--brand-primary-strong); }

/* ── SETTINGS ────────────────────────────────────────────────────────────── */

.settings-option-active {
    background-color: var(--brand-primary-strong);
    color: #f8fafc;
    border-color: var(--brand-primary-strong);
}

.language-select { min-width: 88px; transition: box-shadow 0.2s ease, border-color 0.2s ease; }
.language-select:focus-visible {
    border-color: #3b82f6;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
}

/* ── FULLSCREEN PANELS (modal + quiz) ────────────────────────────────────── */

/* Shared base for <dialog> elements that cover the full viewport */
.fullscreen-panel {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
    padding: 0;
    border: none;
}

#quiz-panel {
    background-color: #f1f5f9;
    overflow-y: auto;
}
#quiz-panel::backdrop { display: none; }

#modal {
    background: transparent;
    overflow: hidden;
}
#modal::backdrop {
    background-color: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
}

#modal-backdrop {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    height: 100%;
}

@media (min-width: 640px) {
    #modal-backdrop { align-items: center; }
}

#modal-panel::after {
    content: "";
    display: block;
    position: sticky;
    bottom: 0;
    height: 3.5rem;
    margin-top: -3.5rem;
    background: linear-gradient(to bottom, transparent, #ffffff);
    pointer-events: none;
    transition: opacity 0.25s ease;
}

#modal-panel.modal-at-bottom::after { opacity: 0; }

/* ── REDUCED MOTION ──────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .emotion-card,
    #modal-panel,
    #modal-panel::after {
        transition: none !important;
        animation: none !important;
    }
    #modal-panel { transform: none !important; }
}

/* ── DARK MODE ───────────────────────────────────────────────────────────── */

html.dark body    { background-color: #0f172a; }
html.dark .bg-body { background-color: #0f172a; }

/* Navigation */
html.dark #bottom-nav      { background-color: #0f172a; border-color: #1e293b; }
html.dark .nav-tab         { color: #475569; }
html.dark .nav-tab.nav-active { color: #a78bfa; }

/* Header */
html.dark #app-title  { color: #f1f5f9; }
html.dark #app-subtitle { color: #94a3b8; }
html.dark #settings-btn { background-color: rgba(15, 23, 42, 0.85); border-color: #334155; }
html.dark #settings-btn:hover { background-color: rgba(30, 41, 59, 0.95); }
html.dark #settings-panel { background-color: #1e293b; border-color: #334155; }
html.dark .settings-option-btn { color: #64748b; border-color: #334155; }
html.dark .settings-option-active {
    background-color: var(--brand-primary-strong);
    color: #f8fafc;
    border-color: var(--brand-primary-strong);
}

/* Search */
html.dark #search { background-color: #1e293b; color: #f1f5f9; }
html.dark #search::placeholder { color: #64748b; }
html.dark #recent-title { color: #64748b; }

/* Emotion cards */
html.dark .emotion-card {
    background-color: color-mix(in srgb, var(--ec, transparent) 10%, #1e293b);
    color: #f1f5f9;
    border-color: rgba(255, 255, 255, 0.06);
}

/* Tailwind color overrides */
html.dark .text-slate-800  { color: #f1f5f9; }
html.dark .text-slate-700  { color: #cbd5e1; }
html.dark .text-slate-600  { color: #94a3b8; }
html.dark .text-slate-400  { color: #64748b; }
html.dark .bg-slate-100    { background-color: #334155; }
html.dark .bg-slate-50     { background-color: #0f172a; }
html.dark .border-slate-200 { border-color: #334155; }

/* Modal */
html.dark #modal-panel { background-color: #1e293b; }
html.dark #modal-panel::after { background: linear-gradient(to bottom, transparent, #1e293b); }
html.dark #close-button { background-color: #334155; border-color: #475569; color: #f1f5f9; }
html.dark #share-btn    { background-color: #1e293b; border-color: #334155; color: #94a3b8; }

/* Modal content — impulso (amber) */
html.dark .bg-amber-50     { background-color: #1c0a00; }
html.dark .border-amber-100 { border-color: #78350f; }
html.dark .text-amber-900  { color: #fbbf24; }
html.dark .text-amber-600  { color: #f59e0b; }

/* Modal content — respuesta sugerida (emerald) */
html.dark .bg-emerald-50    { background-color: #022c22; }
html.dark .border-emerald-100 { border-color: #064e3b; }
html.dark .text-emerald-900 { color: #34d399; }

/* Check-in mood cards — !important needed to override inline style set by JSX */
html.dark .checkin-card[data-mood="agitado"]    { background-color: #7A2020 !important; color: #FFE7E5 !important; }
html.dark .checkin-card[data-mood="triste"]     { background-color: #1C3F6E !important; color: #E2EDF8 !important; }
html.dark .checkin-card[data-mood="confundido"] { background-color: #6B4800 !important; color: #FBE8CB !important; }
html.dark .checkin-card[data-mood="bien"]       { background-color: #1A5E3A !important; color: #DDF1E6 !important; }

/* Quiz */
html.dark #quiz-panel      { background-color: #0f172a; }
html.dark #quiz-trigger    { background-color: #1e293b; }
html.dark .quiz-option,
html.dark .quiz-result-card { background-color: #1e293b; color: #cbd5e1; }

/* Diary */
html.dark #diary-content .bg-white { background-color: #1e293b; }
html.dark #diary-add-form  { background-color: #1e293b; border-color: #334155 !important; }
html.dark #diary-emotion-search,
html.dark #diary-note-input { background-color: #0f172a; border-color: #334155; color: #f1f5f9; }
html.dark #diary-emotion-search::placeholder,
html.dark #diary-note-input::placeholder { color: #475569; }
html.dark #diary-emotion-dropdown { background-color: #1e293b; border-color: #334155; }
html.dark .emotion-option       { color: #cbd5e1; }
html.dark .emotion-option:hover { background-color: #0f172a; }

/* Emotion map */
html.dark #map-content .bg-white { background-color: #1e293b; }
html.dark #map-clear-btn:hover   { color: #e2e8f0; background-color: #475569; }

/* iOS install modal */
html.dark #ios-install-panel { background-color: #1e293b; }
html.dark #ios-install-title { color: #f1f5f9; }
html.dark #ios-install-modal ol { color: #cbd5e1; }
html.dark #ios-install-close { background-color: #334155; color: #f1f5f9; }

/* Auth section */
html.dark #settings-panel hr { border-color: #334155; }
html.dark .auth-email-input { background-color: #0f172a; border-color: #334155; color: #f1f5f9; }
html.dark .auth-email-input::placeholder { color: #475569; }
html.dark .auth-signout-btn { background-color: #334155; color: #cbd5e1; }
html.dark .auth-signout-btn:hover { background-color: #475569; }

/* Reports */
html.dark #reports-content .bg-white  { background-color: #1e293b; }
html.dark #reports-content .bg-violet-50 { background-color: #1e1340; }
html.dark #reports-content .bg-slate-100 { background-color: #334155; }
html.dark #reports-content text { fill: #94a3b8; }