:root {
    --app-border-radius: 12px;
    --app-border-radius-xs: 4px;
    --app-border-radius-sm: 8px;
    --app-border-radius-lg: 16px;
    --app-border-radius-full: 100px;

    --app-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    --app-box-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.15);
    --app-box-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);

    --app-border: 1px solid var(--mud-palette-lines-default);
    --custom-transparent-grey: rgba(70, 70, 70, .5);

    /* Metales de rango fijos: el significado es el propio metal, no cambian con el tema. */
    --app-rank-oro: #ffd700;
    --app-rank-plata: #c0c0c0;
    --app-rank-bronce: #cd7f32;

    /* Rampa tipográfica cerrada (ver DESIGN.md Discrete Ramp Rule): los literales
       viven solo aquí; los componentes usan var(). Un font-size literal fuera de
       este bloque es deriva. */
    --app-study-action: color-mix(in srgb, var(--mud-palette-primary) 65%, black);
    --app-study-link: color-mix(in srgb, var(--mud-palette-primary) 55%, var(--mud-palette-text-primary));
    --app-study-success-action: color-mix(in srgb, var(--mud-palette-success) 65%, black);
    --app-study-error-action: color-mix(in srgb, var(--mud-palette-error) 65%, black);
    --app-reward-ink: color-mix(in srgb, var(--mud-palette-warning) 40%, var(--mud-palette-text-primary));
    --app-study-error-text: color-mix(in srgb, var(--mud-palette-error) 55%, var(--mud-palette-text-primary));

    --font-micro: 0.75rem;
    --font-label: 0.85rem;
    /* Medidas de la navegación de Admisión, compartidas con Estandarizadas. */
    --font-nav-item: 0.98rem;
    --font-nav-user: 0.875rem;
    --font-nav-meta: 0.7rem;
    --font-body-sm: 0.9rem;
    --font-body: 1rem;
    --font-title: 1.1rem;
    --font-headline: 1.25rem;
    --font-display-number: 1.5rem;
    --font-result-score: 1.8rem;
    --font-icon-glyph: 2rem;
    --font-reward-glyph: 3.5rem;

    /* Altura de la barra de navegación inferior móvil (sin contar el safe-area, que
       la propia barra añade). El shell la usa para reservar espacio. */
    --bottom-nav-height: 3.5rem;

    /* Holgura total que debe dejar cada superficie para que su contenido no quede bajo la
       barra flotante: alto de la barra + su offset inferior + el safe-area. */
    --bottom-nav-clearance: calc(var(--bottom-nav-height) + 22px + env(safe-area-inset-bottom, 0px));

    /* Las rutas inmersivas muestran la píldora "Inicio" (más baja) en vez de la barra completa;
       holgura aparte para no reservar de más en pantallas justas de alto, como la del examen. */
    --bottom-nav-compact-height: 3.5rem;
    --bottom-nav-compact-clearance: calc(var(--bottom-nav-compact-height) + 22px + env(safe-area-inset-bottom, 0px));
}

/* Visible solo para lectores de pantalla: los esqueletos van con aria-hidden y sin esto
   la carga es silencio total. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.latex-content mjx-container {
    display: inline-block;
}

/* MathJax fija un `min-width` en el contenedor de display, así que sin anularlo la fórmula
   no se encoge y el `overflow-x: hidden` de `article.content` la recorta sin scroll ni aviso. */
.latex-content mjx-container[display="true"] {
    display: block;
    text-align: center;
    margin: 1em 0;
    max-width: 100%;
    min-width: 0 !important;
    overflow-x: auto;
    overflow-y: hidden;
    /* Sin esto el swipe horizontal sobre la fórmula dispara el "atrás" del navegador. */
    overscroll-behavior-x: contain;
    padding-bottom: 4px;
}

/* Las tablas de Markdown salen envueltas por LaTeXService: el ancho lo absorbe el envoltorio
   y no la tabla, que conserva su semántica para lectores de pantalla. */
.table-scroll {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
}

.table-scroll:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.latex-content pre {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
}

.table-scroll table {
    border-collapse: collapse;
}

.table-scroll th,
.table-scroll td {
    padding: 6px 10px;
    border: 1px solid var(--mud-palette-lines-default);
    text-align: left;
}

.latex-content mjx-container,
.latex-content mjx-container * {
    user-select: text !important;
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
}

.latex-content {
    min-width: 0;
    overflow-wrap: anywhere;
    line-height: 1.6;
}