html, body { height: 100%; }
body {
    font-family: 'Inter', sans-serif;
    background: radial-gradient(120% 120% at 50% 0%, #F5F7FB 0%, #E9ECF3 55%, #E1E5EE 100%);
    position: relative;
    overflow-x: hidden;
}
body::before {
    content: '\222B';
    position: fixed;
    top: -12vw;
    right: -16vw;
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-size: 60vw;
    line-height: 1;
    color: #15294E;
    opacity: 0.035;
    transform: rotate(-6deg);
    pointer-events: none;
    z-index: 0;
}
.font-display { font-family: 'Space Grotesk', sans-serif; }
.app-shell { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }

.katex-display { margin: 0 !important; }
#contenedor-opciones .katex { font-size: 1.05em; }

.problem-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.problem-formula {
    width: max-content;
    min-width: 100%;
    font-size: clamp(1.05rem, 5.2vw, 1.5rem);
}

.problem-formula.mixed-content {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 0.4rem 0.55rem;
    text-align: center;
}

.mixed-prose {
    color: #34445E;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.55;
}

.mixed-math { flex: 0 0 auto; }

.problem-formula-scroll {
    scrollbar-width: thin;
    scrollbar-color: #AEB8C9 transparent;
    overscroll-behavior-x: contain;
}

.problem-formula-scroll::after {
    content: 'Desliza si la expresión continúa →';
    display: none;
    margin-top: 0.5rem;
    color: #72809A;
    font-size: 0.625rem;
    font-weight: 600;
    text-align: right;
}

.problem-formula-scroll[data-overflow="true"]::after { display: block; }

.development-step + .development-step {
    border-top: 1px solid #DDE2EB;
    margin-top: 0.875rem;
    padding-top: 0.875rem;
}

button:disabled { cursor: not-allowed; }
button:focus-visible, a:focus-visible {
    outline: 2px solid #C68A3D;
    outline-offset: 2px;
}

@keyframes shake {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-4px); }
    40%, 60% { transform: translateX(4px); }
}
.animate-shake { animation: shake 0.4s ease-in-out; }

@keyframes modalIn {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.animate-modal-in { animation: modalIn 0.2s ease-out; }

.subject-toggle[aria-pressed="true"] {
    background: #15294E;
    border-color: #15294E;
    color: #FFFFFF;
}

.subject-toggle[aria-pressed="true"] .subject-toggle-status {
    background: #C68A3D;
    border-color: #C68A3D;
}

.topic-chip[aria-pressed="true"] {
    background: #EEF1F6;
    border-color: #5B6E93;
    color: #15294E;
}

.topic-chip[aria-pressed="true"]::before {
    content: '\2713';
    font-size: 0.7rem;
    font-weight: 800;
}

.badge-medallion {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.badge-medallion::after {
    content: '';
    position: absolute;
    inset: 2px;
    z-index: -1;
    border-radius: inherit;
    border: 1px solid rgba(255, 255, 255, 0.45);
}

.badge-unranked { background: linear-gradient(145deg, #E2E6EF, #AEB8C9); color: #5B6E93; }
.badge-bronze { background: linear-gradient(145deg, #E0A274, #854A2C); color: #FFF8F0; }
.badge-silver { background: linear-gradient(145deg, #F2F5F8, #929FB0); color: #34445E; }
.badge-gold { background: linear-gradient(145deg, #FFE89A, #C68A3D); color: #65420D; }
.badge-platinum { background: linear-gradient(145deg, #E6FFF9, #75A7A2); color: #164A49; }
.badge-diamond { background: linear-gradient(145deg, #DDF8FF, #599AC7); color: #174E75; }
.badge-emerald { background: linear-gradient(145deg, #9FE7BE, #267147); color: #0B4026; }
.badge-infinity { background: linear-gradient(145deg, #D8C9FF, #6753B9); color: #30206F; }
.badge-singularity { background: linear-gradient(145deg, #415275, #080D19); color: #F5DCA4; }

.daily-card[data-estado="acertado"] {
    border-color: rgba(62, 122, 86, 0.25);
    background: linear-gradient(135deg, #FFFFFF, #F1F8F3);
}

.daily-card[data-estado="fallado"] {
    border-color: rgba(181, 71, 63, 0.2);
    background: linear-gradient(135deg, #FFFFFF, #FCF2F1);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}