/* ==========================================================================
   Hoja de estilos de las PÁGINAS ESTÁTICAS (/carrera/, /area/, /institucion/,
   /provincia/ y los índices).

   ¿Por qué no reusa style.css? Porque style.css son ~107 KB pensados para la
   app: filtros, comparador, chat, modales, animaciones de scroll. Estas
   páginas son documentos de lectura: no tienen nada de eso y su velocidad de
   carga es parte de lo que Google mide. Así que repiten SOLO los tokens de
   color y tipografía (para que se vean como BEN y respeten el mismo tema
   claro/oscuro guardado en localStorage) y arman su propio layout encima.

   Se mantiene el criterio plano del resto del sitio: nada de relieve
   neumórfico y sin bordes claros rodeando las tarjetas; las superficies se
   distinguen por color, no por línea ni sombra.
   ========================================================================== */

:root {
    --container: 1280px;
    --font-scale: 1;
    --font-title: Montserrat, sans-serif;
    --font-text: Montserrat, sans-serif;

    --space-1: .25rem;  --space-2: .375rem; --space-3: .5rem;
    --space-4: .75rem;  --space-5: 1rem;    --space-6: 1.25rem;
    --space-7: 1.5rem;  --space-8: 2rem;    --space-9: 2.5rem;

    --radius-sm: 8px;   --radius-md: 12px;  --radius-pill: 999px;

    --bg: #fdfaf5;
    --surface: #ffffff;
    --surface-soft: #f3f0ea;
    --line: rgba(0, 0, 0, 0.08);
    --text: #1f1d1a;
    --muted: #6b6863;
    --blue-ink: #1d4ed8;
    --orange-ink: #b23a0b;
    --green-ink: #0f6b33;
    --accent: #6366f1;
    --accent-ink: #4338ca;
    /* Corazón de "Me interesa" marcado (misma señal roja que en la app). */
    --fav-rojo: #E11D48;
    --on-accent: #ffffff;
    /* WCAG 2.1 - 1.4.11: frontera de los campos de formulario (>=3:1). */
    --control-line: rgba(27, 24, 48, .52);
    /* WCAG 2.1 - 1.4.3: par relleno/tinta de la acción sólida (--accent solo
       daba 4.47:1 con texto blanco encima). */
    --accion-fill: #4F46E5;
    --accion-ink: #ffffff;
}

html[data-theme="dark"] {
    --bg: #09101c;
    --surface: #121c2f;
    --surface-soft: #1e293b;
    --line: rgba(255, 255, 255, .08);
    --text: #f1f5f9;
    --muted: #94a3b8;
    --blue-ink: #93c5fd;
    --orange-ink: #fdba74;
    --green-ink: #86efac;
    --accent: #818cf8;
    --accent-ink: #818cf8;
    --fav-rojo: #FB7185;
    --on-accent: #09101c;
    --control-line: rgba(255, 255, 255, .36);
    --accion-fill: #818cf8;
    --accion-ink: #09101c;
}

* { box-sizing: border-box; }

/* WCAG 2.1 - 2.4.1 Evitar bloques: cada ficha repite cabecera, buscador y cientos
   de enlaces. El skip link va oculto hasta que llega el foco. */
.skip-link {
    position: absolute; left: .5rem; top: -100px; z-index: 100;
    padding: .7rem 1rem; border-radius: var(--radius-sm);
    color: var(--accion-ink); background: var(--accion-fill);
    font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: .5rem; }
/* El destino recibe el foco de verdad (un <main> no es enfocable por sí solo) y
   no se le dibuja el anillo: es un contenedor, no un control. */
main[tabindex="-1"]:focus { outline: none; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-text);
    font-size: calc(1rem * var(--font-scale));
    line-height: 1.65;
    -webkit-text-size-adjust: 100%;
}

.envoltorio { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-6); }

/* ---- Cabecera ---------------------------------------------------------- */
.cabecera {
    background: var(--surface);
    padding: var(--space-5) 0;
    margin-bottom: var(--space-7);
}
/* Tres columnas: "Volver" a la izquierda, logo centrado de verdad y el lado
   derecho (buscador + botón de modo) pegado al borde. Con flex no se logra
   centrar el logo cuando los costados miden distinto; con grid sí. */
.cabecera .envoltorio {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-5);
}
.btn-volver { justify-self: start; }
.marca { justify-self: center; }
.cabecera-lado {
    justify-self: end;
    display: flex; align-items: center; gap: var(--space-4);
    min-width: 0; max-width: 100%;
}
.marca { display: inline-flex; align-items: center; }
.marca img { height: 34px; width: auto; display: block; }

/* Botón "Volver" de la cabecera: va al lado del logo y regresa a la página
   anterior si se vino del mismo sitio (la app con sus filtros, otra ficha,
   un índice); si no, lleva al buscador. Misma altura y píldora del botón de
   tema para no romper el ritmo de la fila. */
.btn-volver {
    display: inline-flex; align-items: center; gap: .4rem;
    flex: 0 0 auto;
    min-height: 40px;
    padding: 0 .8rem;
    border: 1px solid transparent; border-radius: var(--radius-pill);
    background: transparent; color: var(--text);
    font: inherit; font-weight: 600; font-size: calc(.8125rem * var(--font-scale));
    text-decoration: none; line-height: 1;
    transition: background-color .2s ease, border-color .2s ease;
}
.btn-volver:hover { background: var(--surface-soft); border-color: var(--line); }
.btn-volver svg { width: 18px; height: 18px; flex: none; }

/* Botón de modo claro/oscuro de las páginas estáticas: solo el sol y la luna,
   sin círculo ni fondo que los recubra (misma idea que el toggle de la app).
   Se mantienen los 40px de área táctil aunque no se vea el borde. */
.tema-statico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    padding: 0;
    margin: 0;
    line-height: 1;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text);
    cursor: pointer;
}
.tema-statico svg { width: 20px; height: 20px; display: block; }
.tema-statico:hover { color: var(--accent-ink); }
html[data-theme="dark"] .tema-sol { display: block; color: #facc15; }
html[data-theme="dark"] .tema-luna { display: none; }
html[data-theme="light"] .tema-sol { display: none; }
html[data-theme="light"] .tema-luna { display: block; color: #6366f1; }

.buscador-mini {
    position: relative;
    display: flex;
    gap: var(--space-3);
    flex: 1 1 240px;
    max-width: 360px;
}
.buscador-mini input {
    flex: 1; min-width: 0;
    min-height: 44px;
    padding: var(--space-2) var(--space-4);
    /* WCAG 2.1 - 1.4.11: la frontera del campo es lo que lo identifica. */
    border: 1px solid var(--control-line); border-radius: var(--radius-pill);
    background: var(--bg); color: var(--text);
    font: inherit; font-size: calc(.9375rem * var(--font-scale));
}
.buscador-mini button {
    min-height: 44px; min-width: 44px;
    padding: var(--space-2) var(--space-5);
    border: 0; border-radius: var(--radius-pill);
    background: var(--accion-fill); color: var(--accion-ink);
    font: inherit; font-weight: 600; cursor: pointer;
}
.buscador-mini button:hover { filter: brightness(1.08); }

/* Dropdown flotante en páginas estáticas */
.mini-search-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 320px;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
    z-index: 50;
    padding: var(--space-2) 0;
    display: flex;
    flex-direction: column;
}
.mini-search-dropdown[hidden] {
    display: none !important;
}
.mini-search-item {
    padding: var(--space-3) var(--space-4);
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    color: var(--text);
    text-decoration: none;
    font-size: calc(.875rem * var(--font-scale));
    line-height: 1.3;
    cursor: pointer;
    transition: background .15s ease;
}
.mini-search-item:hover, .mini-search-item.is-selected {
    background: var(--surface-soft);
    color: var(--accent-ink);
}
.mini-search-item-title {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mini-search-item-badge {
    font-size: calc(.75rem * var(--font-scale));
    color: var(--muted);
    flex-shrink: 0;
}

/* ---- Miga de pan ------------------------------------------------------- */
.miga { font-size: calc(.8125rem * var(--font-scale)); color: var(--muted); margin-bottom: var(--space-5); }
.miga a { color: var(--muted); }
.miga span[aria-current] { color: var(--text); }

/* ---- Tipografía -------------------------------------------------------- */
h1 {
    font-family: var(--font-title); font-weight: 800;
    font-size: clamp(calc(1.6rem * var(--font-scale)), calc(4.5vw * var(--font-scale)), calc(2.25rem * var(--font-scale)));
    line-height: 1.2; margin: 0 0 var(--space-4);
}
h2 {
    font-family: var(--font-title); font-weight: 700;
    font-size: calc(1.3rem * var(--font-scale)); line-height: 1.3;
    margin: var(--space-9) 0 var(--space-5);
}
h3 { font-size: calc(1.05rem * var(--font-scale)); font-weight: 700; margin: var(--space-7) 0 var(--space-3); }
p { margin: 0 0 var(--space-5); }
a { color: var(--accent-ink); }
a:hover { text-decoration: none; }

.entrada { font-size: calc(1.0625rem * var(--font-scale)); color: var(--muted); }

/* ---- Ficha de datos ---------------------------------------------------- */
.ficha {
    display: grid; grid-template-columns: max-content 1fr;
    gap: var(--space-3) var(--space-6);
    background: var(--surface-soft);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    margin: 0 0 var(--space-7);
    font-size: calc(.9375rem * var(--font-scale));
}
.ficha dt { font-weight: 700; color: var(--muted); }
.ficha dd { margin: 0; }
/* En la ficha, el valor de "Tipo de formación" linkea a la guía de títulos. */
.ficha dd a { text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px; }
.ficha dd a:hover { text-decoration-style: solid; }

/* ---- Guía de títulos y niveles (/titulos/) ----------------------------- */
.niveles {
    list-style: none; margin: 0 0 var(--space-8); padding: 0;
    display: grid; gap: var(--space-5);
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.nivel { background: var(--surface-soft); border-radius: var(--radius-md); padding: var(--space-6); }
.nivel h3 { margin-top: 0; }
.nivel-resumen { font-weight: 700; }
.nivel-titulos { margin-bottom: 0; font-size: calc(.9375rem * var(--font-scale)); }
.nivel-titulos a { text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px; }

.titulo-bloque { margin: 0 0 var(--space-8); scroll-margin-top: var(--space-8); }
.titulo-bloque h3 { margin-top: 0; font-size: calc(1.2rem * var(--font-scale)); }
.titulo-etiqueta { color: var(--muted); font-size: calc(.8125rem * var(--font-scale)); text-transform: uppercase; letter-spacing: .04em; margin-bottom: var(--space-4); }
.titulo-ficha { margin-bottom: var(--space-5); }
.titulo-diferencia { background: var(--surface-soft); border-radius: var(--radius-md); padding: var(--space-5); }
.titulo-ejemplos-titulo { font-weight: 700; margin-bottom: var(--space-3); }

.tabla-scroll { overflow-x: auto; margin: 0 0 var(--space-8); }
.tabla-titulos { width: 100%; min-width: 560px; border-collapse: collapse; font-size: calc(.875rem * var(--font-scale)); }
.tabla-titulos caption { text-align: left; color: var(--muted); font-size: calc(.8125rem * var(--font-scale)); padding-bottom: var(--space-3); }
.tabla-titulos th, .tabla-titulos td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); vertical-align: top; }
.tabla-titulos thead th { border-bottom: 2px solid var(--line); }
.tabla-titulos tbody th { font-weight: 700; }

.glosario { margin: 0 0 var(--space-8); }
.glosario dt { font-weight: 700; margin-top: var(--space-5); }
.glosario dt:first-child { margin-top: 0; }
.glosario dd { margin: var(--space-2) 0 0; }

/* ---- Listado de ofertas ------------------------------------------------ */
.ofertas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.oferta {
    background: var(--surface);
    border-radius: var(--radius-md);
    padding: var(--space-6);
}
.oferta h3 { margin: 0 0 var(--space-2); font-size: calc(1rem * var(--font-scale)); }
.oferta h3 a { text-decoration: none; }
.oferta h3 a:hover { text-decoration: underline; }
.oferta-datos {
    margin: 0; padding: 0; list-style: none;
    display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5);
    font-size: calc(.875rem * var(--font-scale)); color: var(--muted);
}
.oferta-datos li::before { content: "· "; }
.oferta-datos li:first-child::before { content: ""; }
.oferta .oficial {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-top: var(--space-4);
    padding: var(--space-2) var(--space-5);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-soft);
    color: var(--accent-ink);
    font-size: calc(.875rem * var(--font-scale));
    font-weight: 600;
    text-decoration: none;
    transition: background .2s ease, border-color .2s ease;
}
.oferta .oficial:hover {
    background: var(--surface);
    border-color: var(--accent);
}

/* ---- Layout amplio de fichas ------------------------------------------- */
@media (min-width: 821px) {
    .pagina-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 320px;
        grid-template-areas:
            "principal lateral"
            "contenido lateral";
        gap: 2.25rem;
        align-items: start;
    }

    .principal { grid-area: principal; min-width: 0; }
    .contenido-pagina { grid-area: contenido; min-width: 0; }

    .lateral {
        grid-area: lateral;
        position: sticky;
        top: 1.5rem;
        min-width: 0;
        max-height: calc(100dvh - 3rem);
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: var(--space-7);
        scrollbar-width: thin;
    }

    .lateral .ficha {
        grid-template-columns: 1fr;
        gap: var(--space-2);
        margin: 0;
    }

    .lateral .ficha dt {
        font-size: calc(.75rem * var(--font-scale));
        letter-spacing: .03em;
        text-transform: uppercase;
    }

    .lateral .ficha dd { margin-bottom: var(--space-3); }
    .lateral .cta { margin: 0; width: 100%; }
    .lateral h2 { margin-top: 0; font-size: calc(1.05rem * var(--font-scale)); }
    .lateral .enlaces { grid-template-columns: 1fr; }

    .contenido-pagina .ofertas {
        grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    }

    .principal .entrada,
    .contenido-pagina > p,
    .nota-test p { max-width: 68ch; }
}

.etiqueta {
    display: inline-block; font-size: calc(.75rem * var(--font-scale)); font-weight: 700;
    padding: 2px var(--space-3); border-radius: var(--radius-pill);
    background: var(--surface-soft); color: var(--muted);
}
.etiqueta.publica { color: var(--green-ink); }
.etiqueta.privada { color: var(--orange-ink); }

/* Chips de sectores de aplicación: misma píldora que .etiqueta, pero son
   enlaces al buscador filtrado (?sector=). Sin subrayado y con hover suave. */
.etiqueta-link {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: var(--space-1) var(--space-4);
    line-height: 1.35;
    white-space: normal;
    max-width: 100%;
    transition: background-color .2s ease, color .2s ease;
}
.etiqueta-link:hover, .etiqueta-link:focus-visible {
    background: var(--surface);
    color: var(--accent-ink);
    box-shadow: inset 0 0 0 1px var(--line);
}

/* ---- "Áreas donde podés desarrollarte": contenido generado por IA ------- */
.aplicacion { margin: 0 0 var(--space-6); }
.aplicacion h2 {
    font-size: calc(1.05rem * var(--font-scale));
    margin: 0 0 var(--space-3);
}
/* La separación va por margen en cada ítem y no por gap: el gap de flex no
   existe en navegadores viejos y las píldoras quedaban pegadas (se pisaban
   entre sí). Con margen, el espaciado es el mismo en todos lados. */
.chips-sectores {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap;
}
.chips-sectores li {
    display: flex;
    max-width: 100%;
    margin: 0 var(--space-2) var(--space-2) 0;
}
/* Señal futura de "contenido sugerido": cuando exista revisión humana, alcanza
   con pintar los bloques con data-revisado="false". Hoy no se dibuja nada para
   no ensuciar el diseño.
.aplicacion[data-revisado="false"] .etiqueta-link,
.entrada[data-revisado="false"] { opacity: .92; }
*/

/* ---- Listas de enlaces (índices, relacionadas) -------------------------
   Cada ítem es una píldora con borde: antes eran los enlaces azules con
   subrayado por defecto del navegador, fuera del lenguaje visual del sitio. */
.enlaces {
    list-style: none; margin: 0 0 var(--space-7); padding: 0;
    display: grid; gap: var(--space-3) var(--space-6);
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    font-size: calc(.9375rem * var(--font-scale));
}
.enlaces li { break-inside: avoid; }
.enlaces li a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 44px;
    padding: var(--space-2) var(--space-5);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--accent-ink);
    font-weight: 600;
    text-decoration: none;
    transition: border-color .2s ease, background-color .2s ease;
}
.enlaces li a:hover, .enlaces li a:focus-visible {
    border-color: var(--accent-ink);
    background: var(--surface-soft);
}
.enlaces .cuantas { color: var(--muted); font-size: calc(.8125rem * var(--font-scale)); }

/* El "Ver las N carreras del área" del bloque de relacionadas: acción sólida
   de cierre, con el par relleno/tinta de .cta (--accion-ink sobre
   --accion-fill), que es el que ya está validado en los 4 temas. */
.relacionadas-mas { margin: var(--space-4) 0 0; }
.btn-enlace-mas {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 44px;
    padding: var(--space-3) var(--space-7);
    border-radius: var(--radius-pill);
    background: var(--accion-fill);
    color: var(--accion-ink);
    font-weight: 700;
    text-decoration: none;
    transition: filter .2s ease;
}
.btn-enlace-mas:hover, .btn-enlace-mas:focus-visible {
    filter: brightness(1.08);
}

/* ---- Llamado a la acción ---------------------------------------------- */
.cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin: var(--space-3) 0 var(--space-8);
    padding: var(--space-3) var(--space-7);
    /* WCAG 2.1 - 1.4.3: el CTA iba en --accent, que con texto blanco da 4.47:1. */
    background: var(--accion-fill); color: var(--accion-ink);
    border-radius: var(--radius-pill);
    font-weight: 700; text-decoration: none;
}
.cta:hover { filter: brightness(1.08); }

/* ---- Pie --------------------------------------------------------------- */
.pie {
    margin-top: var(--space-9);
    background: var(--surface);
    padding: var(--space-8) 0;
    font-size: calc(.875rem * var(--font-scale)); color: var(--muted);
}
/* ---- Aptitudes Vocacionales ------------------------------------------- */
.lista-aptitudes {
    list-style: none; margin: 0 0 var(--space-6); padding: 0;
    display: grid; gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.aptitud-item {
    background: var(--surface);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-md);
}
.aptitud-encabezado {
    display: flex; justify-content: space-between; align-items: center;
    gap: var(--space-3); margin-bottom: var(--space-2);
}
.aptitud-encabezado strong { font-size: calc(.9375rem * var(--font-scale)); color: var(--text); }
.aptitud-score {
    font-size: calc(.75rem * var(--font-scale)); font-weight: 700;
    padding: 2px var(--space-3); border-radius: var(--radius-pill);
    background: var(--surface-soft); color: var(--blue-ink);
}
.aptitud-desc {
    margin: 0; font-size: calc(.875rem * var(--font-scale)); color: var(--muted); line-height: 1.5;
}
.nota-test {
    background: var(--surface-soft);
    padding: var(--space-4) var(--space-6);
    border-radius: var(--radius-md);
    margin: 0 0 var(--space-8);
    font-size: calc(.9375rem * var(--font-scale));
}
.nota-test p { margin: 0; }
.nota-test a { font-weight: 700; color: var(--blue-ink); }

/* ---- Plan de estudio (dentro de cada oferta) --------------------------- */
.plan-de-estudio {
    margin-top: var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-soft);
}
.plan-de-estudio summary {
    cursor: pointer; list-style: none; user-select: none;
    display: flex; justify-content: space-between; align-items: center;
    min-height: 44px; padding: var(--space-3) var(--space-5);
    font-size: calc(.9375rem * var(--font-scale)); font-weight: 700; color: var(--accent-ink);
}
.plan-de-estudio summary::-webkit-details-marker { display: none; }
.plan-de-estudio summary::after {
    content: "+"; font-size: calc(1.25rem * var(--font-scale)); font-weight: 700; color: var(--muted);
}
.plan-de-estudio[open] summary::after { content: "−"; }
.plan-contenido {
    padding: 0 var(--space-5) var(--space-5);
    display: grid; gap: var(--space-5);
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.plan-anio h4 {
    margin: 0 0 var(--space-2);
    font-size: calc(.875rem * var(--font-scale)); text-transform: uppercase; letter-spacing: .03em;
    color: var(--muted);
}
.plan-anio ul { margin: 0; padding: 0; list-style: none; }
.plan-anio li {
    font-size: calc(.875rem * var(--font-scale)); line-height: 1.5;
    padding: var(--space-1) 0 var(--space-1) var(--space-4);
    position: relative;
}
.plan-anio li::before {
    content: "·"; position: absolute; left: var(--space-1); color: var(--accent);
    font-weight: 700;
}
.plan-fuente {
    grid-column: 1 / -1; margin: 0;
    font-size: calc(.8125rem * var(--font-scale)); color: var(--muted);
}
.plan-fuente a { color: var(--accent-ink); }

@media (max-width: 640px) {
    .ficha { grid-template-columns: 1fr; gap: var(--space-1) 0; }
    .ficha dd { margin-bottom: var(--space-4); }
    /* Dos filas: "Volver", el logo (centrado en la página) y el botón de modo
       comparten la primera, y el buscador baja a la segunda, a lo ancho. Antes
       eran tres filas centradas y la cabecera se comía media pantalla.
       display:contents borra la caja de .cabecera-lado para que sus dos piezas
       entren como columnas de la cabecera, sin tocar el HTML generado. */
    .cabecera .envoltorio {
        grid-template-columns: 1fr auto 1fr;
        grid-template-areas:
            "volver marca tema"
            "buscador buscador buscador";
        gap: var(--space-3) var(--space-4);
    }
    .btn-volver { grid-area: volver; }
    .marca { grid-area: marca; }
    .cabecera-lado { display: contents; }
    .buscador-mini { grid-area: buscador; max-width: none; }
    .tema-statico { grid-area: tema; justify-self: end; }
}

/* --- Botón "Me interesa", "Ver Mi lista" y aviso (js/favoritos.js) ---
   Mismo contrato que en la app: el script hidrata el botón, sincroniza el
   estado guardado y maneja el clic. En estas páginas el corazón va solo, sin
   texto, y se pone rojo al marcar. */
/* Tarjeta lateral de la ficha de carrera: el corazón va en la misma línea del
   "Área" (al final, más chico) y "Ver Mi lista" cierra debajo. */
.lateral-caja { display: flex; flex-direction: column; gap: var(--space-4); }
.ficha-caja {
    display: flex; flex-direction: column; gap: var(--space-3);
    background: var(--surface-soft);
    border-radius: var(--radius-md);
    padding: var(--space-6);
}
.ficha-caja .ficha { background: transparent; padding: 0; margin: 0; }
/* El corazón comparte la línea del "Área": el valor a la izquierda, el botón al
   final (a la derecha). Va más chico para que la fila no crezca. */
.ficha-caja .ficha dd.ficha-area { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.ficha-caja .ficha dd.ficha-area .btn-favorito { width: 34px; height: 34px; }
.ficha-caja .ficha dd.ficha-area .btn-favorito .fav-svg { width: 17px; height: 17px; }
/* Los costos no se muestran (los fija cada institución): en su lugar va este
   aviso, dentro de la tarjeta y debajo de los datos. */
.aviso-costos {
    display: flex; align-items: flex-start; gap: .5rem;
    margin: 0; padding-top: var(--space-4);
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: calc(.8125rem * var(--font-scale)); line-height: 1.4;
}
.aviso-costos svg { width: 16px; height: 16px; flex: none; margin-top: .15rem; color: var(--accent-ink); }
.lateral-caja .btn-ver-mi-lista { margin-left: 0; width: 100%; justify-content: center; }
.btn-favorito {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; flex: none;
    padding: 0;
    border: 1px solid var(--line); border-radius: 50%;
    background: var(--surface); color: var(--muted);
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.btn-favorito:hover { border-color: var(--fav-rojo); color: var(--fav-rojo); }
.btn-favorito .fav-svg { width: 21px; height: 21px; }
.btn-favorito.is-favorito { border-color: var(--fav-rojo); background: var(--surface-soft); }
.btn-favorito.is-favorito .fav-svg { color: var(--fav-rojo); fill: var(--fav-rojo); stroke: var(--fav-rojo); }

/* "Ver Mi lista" al otro extremo de la fila, con el lenguaje de botones de la
   página (borde + píldora) para que no parezca un enlace suelto. */
.btn-ver-mi-lista {
    display: inline-flex; align-items: center; gap: .45rem;
    margin-left: auto;
    min-height: 44px; padding: .55rem 1.1rem;
    border: 1px solid var(--line); border-radius: var(--radius-pill);
    background: var(--surface); color: var(--accent-ink);
    font-weight: 700; font-size: calc(.875rem * var(--font-scale));
    transition: border-color .2s ease, background-color .2s ease;
}
.btn-ver-mi-lista:hover { border-color: var(--accent-ink); background: var(--surface-soft); }
.btn-ver-mi-lista svg { width: 17px; height: 17px; fill: var(--fav-rojo); stroke: var(--fav-rojo); }

.fav-toast {
    position: fixed; left: 50%; bottom: 1.1rem;
    transform: translate(-50%, 1.2rem);
    z-index: 130;
    display: flex; align-items: center; gap: .6rem;
    max-width: min(92vw, 26rem);
    padding: .6rem .9rem;
    border: 1px solid var(--line); border-radius: 999px;
    background: var(--surface); color: var(--text);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
    font-size: calc(.875rem * var(--font-scale));
    opacity: 0; pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}
.fav-toast.is-visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.fav-toast-texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fav-toast-accion { color: var(--accent-ink); font-weight: 700; flex: none; }