/* ============================================================
   empleos67.com - hoja de estilos unica
   Mobile first, sin frameworks, con soporte de modo oscuro.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
    --azul-900: #0a2a48;
    --azul-800: #0f3d68;
    --azul-700: #145085;
    --azul-100: #e6eef6;
    --azul-50:  #f4f8fc;
    --naranja:  #e07b17;
    --naranja-claro: #fdf1e2;
    --verde:    #147c50;
    --verde-claro: #e6f4ed;
    --rojo:     #b02a2a;
    --rojo-claro: #fbeaea;
    --gris-900: #14181d;
    --gris-700: #40495a;
    --gris-500: #6b7480;
    --gris-300: #d6dbe2;
    --gris-100: #f1f3f6;
    --blanco:   #ffffff;

    --texto:    var(--gris-900);
    --texto-suave: var(--gris-700);
    --fondo:    #fbfcfe;
    --superficie: var(--blanco);
    --borde:    var(--gris-300);
    --primario: var(--azul-800);
    --primario-hover: var(--azul-700);

    --radio:    12px;
    --radio-sm: 8px;
    --sombra:   0 1px 2px rgba(16, 33, 54, .06), 0 6px 18px rgba(16, 33, 54, .06);
    --sombra-alta: 0 10px 30px rgba(16, 33, 54, .12);
    --ancho:    1180px;
    --fuente:   system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --fuente-titulo: "Segoe UI Semibold", var(--fuente);
    --transicion: .18s ease;
}

@media (prefers-color-scheme: dark) {
    :root {
        --texto: #e8ecf2;
        --texto-suave: #b3bcc9;
        --fondo: #0e1420;
        --superficie: #161e2d;
        --borde: #2a3547;
        --azul-100: #1d2b3f;
        --azul-50: #131c2a;
        --gris-100: #1a2333;
        --primario: #4d9be0;
        --primario-hover: #6fb0e8;
        --verde-claro: #12291f;
        --rojo-claro: #2b1616;
        --naranja-claro: #2b2113;
        --sombra: 0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.3);
    }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--fuente);
    font-size: 16px;
    line-height: 1.65;
    color: var(--texto);
    background: var(--fondo);
    -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--primario); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--primario-hover); }
h1, h2, h3, h4 { font-family: var(--fuente-titulo); line-height: 1.25; margin: 0 0 .5em; color: var(--texto); }
h1 { font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.25rem, 1.05rem + 1vw, 1.65rem); }
h3 { font-size: 1.1rem; }
p  { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
figure { margin: 0; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--naranja); outline-offset: 2px; border-radius: 4px; }

.sr-only, .oculto {
    position: absolute !important; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.salto-contenido {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--azul-800); color: #fff; padding: .7rem 1.2rem; border-radius: 0 0 var(--radio-sm) 0;
}
.salto-contenido:focus { left: 0; }

.contenedor { width: min(100% - 2rem, var(--ancho)); margin-inline: auto; }

/* ---------- Cabecera ---------- */
.cabecera { background: var(--superficie); border-bottom: 1px solid var(--borde); }
.cabecera__superior { border-bottom: 1px solid var(--borde); }
.cabecera__barra { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: .7rem 0; }

.marca { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: inherit; }
.marca__texto strong {
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
    font-size: 1.15rem; letter-spacing: -.02em; color: var(--texto); line-height: 1.1;
}
/* El nombre es un solo hijo del flex: si "Emple" y "GO" fueran dos, el hueco
   entre ellos los separaria visualmente. */
.marca__nombre { white-space: nowrap; letter-spacing: -.01em; }
.marca__nombre b { color: var(--naranja); font-weight: 800; }
.marca__pais {
    display: inline-flex; align-items: center; gap: .3rem;
    background: var(--gris-100); border: 1px solid var(--borde); border-radius: 999px;
    padding: .1rem .5rem .1rem .3rem; font-size: .7rem; font-weight: 700;
    letter-spacing: .04em; color: var(--texto-suave); text-transform: uppercase;
}
.marca__pais .bandera { border-radius: 2px; border: 1px solid rgba(0,0,0,.12); }
.marca__texto small { display: block; font-size: .72rem; color: var(--texto-suave); line-height: 1.3; }

.cabecera__acciones { display: flex; align-items: center; gap: .5rem; margin-left: auto; flex-wrap: wrap; }
.boton-canal, .boton-empresas {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .5rem .9rem; border-radius: 999px; font-size: .84rem; font-weight: 700;
    text-decoration: none; border: 1px solid transparent; transition: var(--transicion);
}
.boton-canal { background: var(--verde); color: #fff; }
.boton-canal:hover { background: #0f6640; color: #fff; }
.boton-empresas { background: var(--naranja); color: #fff; }
.boton-empresas:hover { background: #c96b12; color: #fff; }
.boton-accesibilidad {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
    background: var(--azul-50); border: 1px solid var(--borde); color: var(--primario);
}
.boton-accesibilidad:hover { background: var(--azul-100); }
@media (max-width: 40rem) {
    .boton-canal span, .boton-empresas span { display: none; }
    .boton-canal, .boton-empresas { padding: .5rem; }
}

/* --- «Ingresar»: un desplegable para las dos cuentas (postulante y empresa) --- */
.acceso-menu { position: relative; }
.boton-ingresar {
    display: inline-flex; align-items: center; gap: .45rem; list-style: none; cursor: pointer; user-select: none;
    padding: .5rem 1rem; border-radius: 999px; font-size: .86rem; font-weight: 700;
    background: var(--primario); color: #fff; border: 1px solid var(--primario);
    transition: var(--transicion);
}
.boton-ingresar::-webkit-details-marker { display: none; }
.boton-ingresar:hover, .acceso-menu[open] .boton-ingresar { background: var(--primario-hover); border-color: var(--primario-hover); }
.boton-ingresar__flecha { transition: transform .15s ease; }
.acceso-menu[open] .boton-ingresar__flecha { transform: rotate(180deg); }
.acceso-menu__panel {
    position: absolute; right: 0; top: calc(100% + .5rem); width: min(560px, calc(100vw - 1.5rem)); z-index: 70;
    background: var(--superficie); border: 1px solid var(--borde); border-radius: 14px;
    box-shadow: 0 18px 50px rgba(10, 30, 55, .22); padding: .7rem;
    display: grid; grid-template-columns: 1fr 1fr; gap: .6rem;
}
.acceso-op { display: flex; gap: .75rem; align-items: flex-start; padding: .9rem; border-radius: 12px; background: var(--azul-50); }
.acceso-op--empresa { background: var(--naranja-claro); }
.acceso-op__icono { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--primario); color: #fff; }
.acceso-op--empresa .acceso-op__icono { background: var(--naranja); }
.acceso-op__titulo { margin: 0; font-weight: 800; color: var(--texto); font-size: .98rem; }
.acceso-op__texto { margin: .15rem 0 .6rem; font-size: .8rem; color: var(--texto-suave); line-height: 1.4; }
.acceso-op__boton {
    display: block; text-align: center; padding: .55rem .7rem; border-radius: 9px; font-size: .86rem; font-weight: 700;
    background: var(--primario); color: #fff; text-decoration: none;
}
.acceso-op--empresa .acceso-op__boton { background: var(--naranja); color: #24160a; }
.acceso-op__boton:hover { filter: brightness(1.08); color: #fff; }
.acceso-op--empresa .acceso-op__boton:hover { color: #24160a; }
.acceso-op__enlace { display: block; margin-top: .45rem; font-size: .8rem; text-align: center; color: var(--primario); }
@media (max-width: 40rem) {
    .boton-ingresar { padding: .5rem .8rem; }
    .boton-ingresar__flecha { display: none; }
    .acceso-menu__panel { grid-template-columns: 1fr; }
}

/* --- Barra de navegacion y filtros --- */
.cabecera__barra-nav {
    background: var(--superficie); position: sticky; top: 0; z-index: 50;
    border-bottom: 1px solid var(--borde);
}
.cabecera__nav-caja { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: .35rem 0; }

.menu-toggle {
    display: inline-flex; align-items: center; gap: .6rem;
    padding: .5rem .8rem; border: 1px solid var(--borde); background: transparent;
    border-radius: var(--radio-sm); cursor: pointer;
    font-size: .88rem; font-weight: 600; color: var(--texto);
}
.menu-toggle__barra { position: relative; display: block; width: 18px; height: 2px; background: var(--texto); }
.menu-toggle__barra::before, .menu-toggle__barra::after {
    position: absolute; left: 0; width: 18px; height: 2px; background: var(--texto);
    content: ""; transition: var(--transicion);
}
.menu-toggle__barra::before { top: -6px; }
.menu-toggle__barra::after { top: 6px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__barra { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-toggle__barra::before { transform: rotate(45deg); top: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__barra::after { transform: rotate(-45deg); top: 0; }

.menu { flex-basis: 100%; display: none; }
.menu.is-abierto { display: block; }
.menu__lista { list-style: none; margin: 0; padding: .5rem 0; display: flex; flex-direction: column; gap: .1rem; }
.menu__lista > li > a, .menu__boton {
    display: block; width: 100%; text-align: left; padding: .6rem .5rem;
    color: var(--texto); text-decoration: none; font-weight: 600; font-size: .92rem;
    background: none; border: 0; cursor: pointer; border-radius: var(--radio-sm);
}
.menu__boton::after { content: "\25BE"; margin-left: .35em; color: var(--gris-500); font-size: .8em; }
.menu__lista > li > a:hover, .menu__boton:hover { background: var(--azul-50); color: var(--primario); }
.menu__submenu { list-style: none; margin: 0 0 .4rem; padding: 0 0 0 .8rem; display: none; }
.menu__item--desplegable.is-abierto .menu__submenu { display: block; }
.menu__submenu a {
    display: flex; justify-content: space-between; gap: .5rem; align-items: center;
    padding: .38rem .45rem; font-size: .88rem; color: var(--texto-suave);
    text-decoration: none; border-radius: var(--radio-sm);
}
.menu__submenu a:hover { color: var(--primario); background: var(--azul-50); }

.buscador-mini { display: none; margin-left: auto; position: relative; }
.buscador-mini input {
    padding: .5rem 2.4rem .5rem .8rem; border: 1px solid var(--borde); border-radius: 999px;
    background: var(--fondo); color: var(--texto); width: 230px; font-size: .88rem;
}
.buscador-mini button {
    position: absolute; right: .35rem; top: 50%; transform: translateY(-50%);
    background: none; border: 0; color: var(--texto-suave); cursor: pointer; padding: .25rem;
}

@media (min-width: 64rem) {
    .menu-toggle { display: none; }
    .menu { display: block; flex-basis: auto; }
    .menu__lista { flex-direction: row; align-items: center; gap: .1rem; padding: 0; }
    .menu__lista > li { position: relative; }
    .menu__lista > li > a, .menu__boton { padding: .7rem; white-space: nowrap; }
    .menu__submenu {
        position: absolute; top: calc(100% - .1rem); left: 0; min-width: 260px;
        background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
        box-shadow: var(--sombra-alta); padding: .5rem; z-index: 60;
    }
    .menu__submenu--dos { columns: 2; min-width: 480px; }
    .buscador-mini { display: block; }
}

/* --- Panel de accesibilidad --- */
.accesibilidad { background: var(--azul-900); color: #eaf2fa; border-bottom: 3px solid var(--naranja); }
.accesibilidad__caja { padding: 1.2rem 0; position: relative; }
.accesibilidad__titulo { color: #fff; font-size: 1rem; margin-bottom: .9rem; }
.accesibilidad__grupos { display: grid; gap: 1.1rem; }
@media (min-width: 48rem) { .accesibilidad__grupos { grid-template-columns: repeat(3, 1fr); } }
.accesibilidad__grupo > p {
    margin: 0 0 .4rem; font-size: .75rem; text-transform: uppercase;
    letter-spacing: .07em; color: #a9c2d8; font-weight: 700;
}
.accesibilidad__botones { display: flex; flex-wrap: wrap; gap: .4rem; }
.accesibilidad__botones button {
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25);
    color: #fff; border-radius: var(--radio-sm); padding: .45rem .8rem;
    font-size: .85rem; cursor: pointer; font-weight: 600;
}
.accesibilidad__botones button:hover { background: rgba(255,255,255,.22); }
.accesibilidad__botones button[aria-pressed="true"] { background: var(--naranja); border-color: var(--naranja); }
.accesibilidad__botones button[data-a11y="texto-menos"] { font-size: .78rem; }
.accesibilidad__botones button[data-a11y="texto-mas"] { font-size: 1.05rem; }
.accesibilidad__cerrar {
    position: absolute; top: .6rem; right: 0; background: none; border: 0;
    color: #cfe0f0; cursor: pointer; font-size: .85rem; text-decoration: underline;
}

/* Preferencias de accesibilidad aplicadas al documento */
html[data-a11y-texto="grande"]  body { font-size: 18px; }
html[data-a11y-texto="mayor"]   body { font-size: 20px; }
html[data-a11y-texto="pequeno"] body { font-size: 15px; }
html[data-a11y-contraste="1"] body { background: #000; color: #fff; }
html[data-a11y-contraste="1"] .cabecera,
html[data-a11y-contraste="1"] .cabecera__barra-nav,
html[data-a11y-contraste="1"] .tarjeta,
html[data-a11y-contraste="1"] .ficha,
html[data-a11y-contraste="1"] .widget,
html[data-a11y-contraste="1"] .tarjeta-art,
html[data-a11y-contraste="1"] .prosa { background: #000; color: #fff; border-color: #fff; }
html[data-a11y-contraste="1"] a { color: #ffe600; }
html[data-a11y-contraste="1"] .boton--primario { background: #ffe600; color: #000; }
html[data-a11y-enlaces="1"] main a { text-decoration: underline !important; text-underline-offset: 3px; }
html[data-a11y-legible="1"] body { font-family: Verdana, Tahoma, "DejaVu Sans", sans-serif; letter-spacing: .01em; }
html[data-a11y-espaciado="1"] body { line-height: 2; word-spacing: .12em; }
html[data-a11y-espaciado="1"] p { margin-bottom: 1.4em; }
html[data-a11y-animaciones="1"] *,
html[data-a11y-animaciones="1"] *::before,
html[data-a11y-animaciones="1"] *::after {
    animation-duration: .001ms !important; transition-duration: .001ms !important;
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
    html { scroll-behavior: auto; }
}

/* ---------- Migas ---------- */
.migas { background: var(--azul-50); border-bottom: 1px solid var(--borde); font-size: .82rem; }
.migas ol { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: .55rem 0; }
.migas li + li::before { content: "/"; margin-right: .35rem; color: var(--gris-500); }
.migas a { color: var(--texto-suave); text-decoration: none; }
.migas a:hover { text-decoration: underline; }
.migas [aria-current="page"] { color: var(--texto); font-weight: 600; }

/* ---------- Botones y chips ---------- */
.boton {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    padding: .68rem 1.15rem; border-radius: var(--radio-sm); font-weight: 600; font-size: .92rem;
    text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: var(--transicion);
}
.boton--primario { background: var(--primario); color: #fff; }
.boton--primario:hover { background: var(--primario-hover); color: #fff; }
.boton--secundario { background: transparent; color: var(--primario); border-color: var(--borde); }
.boton--secundario:hover { background: var(--azul-50); }
.boton--bloque { width: 100%; }
.chip {
    display: inline-block; padding: .3rem .7rem; border-radius: 999px; font-size: .8rem;
    background: var(--azul-50); color: var(--texto-suave); text-decoration: none; border: 1px solid var(--borde);
}
.chip:hover { background: var(--azul-100); color: var(--primario); }
.pill {
    display: inline-block; min-width: 1.6em; text-align: center; padding: 0 .45em;
    border-radius: 999px; background: var(--gris-100); color: var(--texto-suave);
    font-size: .72rem; font-weight: 700;
}
.etiqueta {
    display: inline-block; padding: .18rem .6rem; border-radius: 999px;
    font-size: .74rem; font-weight: 700; letter-spacing: .01em;
}
.is-abierta { background: var(--verde-claro); color: var(--verde); }
.is-urgente { background: var(--naranja-claro); color: var(--naranja); }
.is-cerrada { background: var(--rojo-claro); color: var(--rojo); }

/* ---------- Hero ---------- */
.hero { background: linear-gradient(160deg, var(--azul-900) 0%, var(--azul-800) 55%, #14507f 100%); color: #fff; padding: 1.5rem 0 1.8rem; }
.hero__grid { display: grid; gap: 1.4rem; }
/* Titular corto y buscador como protagonista: lo que hacen los portales de empleo. El texto
   largo no gana nada ocupando cuatro lineas antes de poder buscar. */
.hero h1 { color: #fff; max-width: none; font-size: clamp(1.55rem, 1.1rem + 1.5vw, 2.15rem); line-height: 1.15; margin: 0 0 .35rem; }
.hero__bajada {
    color: #cfe0f0; max-width: 62ch; font-size: .95rem; margin: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hero__chips { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: .8rem 0 0; }
.hero__chips .chip { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25); color: #eaf2fa; }
.hero__chips .chip:hover { background: rgba(255,255,255,.2); color: #fff; }

.buscador {
    display: grid; gap: .6rem; background: var(--superficie); padding: .8rem;
    border-radius: var(--radio); box-shadow: var(--sombra-alta); margin-top: 1rem;
}
.hero .buscador input, .hero .buscador select { padding: .8rem .95rem; font-size: 1rem; }
.hero .buscador .boton { padding: .8rem 1.5rem; font-size: 1rem; }
.buscador input, .buscador select, .formulario input, .formulario select, .orden select {
    width: 100%; padding: .7rem .85rem; border: 1px solid var(--borde);
    border-radius: var(--radio-sm); background: var(--fondo); color: var(--texto); font-size: .95rem;
}
.hero__panel {
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
    border-radius: var(--radio); padding: 1.3rem;
}
.hero__panel-titulo { color: #fff; font-size: 1rem; text-transform: uppercase; letter-spacing: .06em; }
.cifras { display: grid; gap: .9rem; margin: 1rem 0; }
.cifras dt { font-size: .82rem; color: #c3d6e8; }
.cifras dd { margin: 0; font-size: 1.7rem; font-weight: 700; color: #fff; line-height: 1; }
.hero__panel-nota { font-size: .78rem; color: #b8cbdd; margin: 0; }

@media (min-width: 55rem) {
    /* Solo se parte en dos cuando hay algo al lado: sin convocatoria destacada
       el buscador ocupa todo el ancho en vez de dejar un hueco. */
    .hero__grid--con-destacada,
    .pagina-empresas .hero__grid { grid-template-columns: 1.6fr 1fr; align-items: start; }
    .buscador { grid-template-columns: 2fr 1fr auto; align-items: center; }
}

/* ---------- Seccion para empresas ---------- */
.menu-empresas {
    background: var(--superficie); border-bottom: 1px solid var(--borde);
    position: sticky; top: 0; z-index: 45;
}
.menu-empresas__barra {
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: .6rem 0;
}
.menu-empresas__marca { margin: 0; display: flex; flex-direction: column; line-height: 1.2; }
.menu-empresas__etiqueta {
    font-size: .74rem; font-weight: 800; letter-spacing: .1em;
    text-transform: uppercase; color: var(--naranja);
}
.menu-empresas__lema { font-size: .82rem; color: var(--texto-suave); }
.menu-empresas__lista {
    list-style: none; display: flex; flex-wrap: wrap; gap: .2rem;
    margin: 0; padding: 0; flex: 1 1 auto;
}
.menu-empresas__lista a {
    display: block; padding: .45rem .8rem; border-radius: var(--radio-sm);
    font-size: .88rem; font-weight: 600; color: var(--texto); text-decoration: none;
}
.menu-empresas__lista a:hover { background: var(--azul-50); color: var(--primario); }
.menu-empresas__cta { margin-left: auto; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.boton--compacto { padding: .5rem .9rem; font-size: .85rem; }
@media (max-width: 48rem) {
    .menu-empresas { position: static; }
    .menu-empresas__lista { order: 3; flex-basis: 100%; overflow-x: auto; flex-wrap: nowrap; }
    .menu-empresas__lista a { white-space: nowrap; }
    .menu-empresas__cta { margin-left: 0; }
}
/* La cabecera del sitio ya es sticky: el submenu se apoya debajo */
@media (min-width: 48rem) { .menu-empresas { top: 3.4rem; } }

.hero--empresas { background: linear-gradient(150deg, #0a2a48 0%, #123f6b 50%, #1b5a8f 100%); }
.hero__etiqueta {
    display: inline-block; margin: 0 0 .6rem; padding: .25rem .8rem;
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25);
    border-radius: 999px; font-size: .76rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; color: #ffd9a8;
}
.hero__acciones { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; }
.boton--naranja { background: var(--naranja); color: #fff; }
.boton--naranja:hover { background: #c96b12; color: #fff; }
.boton--fantasma-claro { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.boton--fantasma-claro:hover { background: rgba(255,255,255,.12); color: #fff; }
.seccion__cabecera--centrada { margin-inline: auto; text-align: center; }

.rejilla-herramienta { display: grid; gap: 1.6rem; align-items: start; }
@media (min-width: 62rem) { .rejilla-herramienta { grid-template-columns: 1.35fr 1fr; } }
.pasos--herramienta { grid-template-columns: 1fr !important; }
.pasos--herramienta li { border-left: 3px solid var(--naranja); }

.caja-herramienta {
    background: var(--azul-50); border: 1px solid var(--azul-100);
    border-radius: var(--radio); padding: 1.4rem;
}
.caja-herramienta h3 { font-size: 1rem; }
.caja-herramienta__nota { font-size: .82rem; color: var(--texto-suave); margin: 1rem 0 0; }
.lista-chulos { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; font-size: .92rem; }
.lista-chulos li { position: relative; padding-left: 1.6rem; }
.lista-chulos li::before {
    content: ""; position: absolute; left: 0; top: .45em; width: .95rem; height: .5rem;
    border-left: 2px solid var(--verde); border-bottom: 2px solid var(--verde);
    transform: rotate(-45deg);
}
.lista-chulos--suelta { margin: 1.2rem 0; }

/* Planes */
.planes { display: grid; gap: 1.2rem; align-items: start; margin-top: 1.5rem; }
@media (min-width: 58rem) { .planes { grid-template-columns: repeat(3, 1fr); } }
.plan {
    background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
    padding: 1.6rem 1.4rem; display: flex; flex-direction: column; gap: .8rem;
    box-shadow: var(--sombra); position: relative;
}
.plan--destacado {
    border: 2px solid var(--primario); box-shadow: var(--sombra-alta);
}
@media (min-width: 58rem) { .plan--destacado { transform: translateY(-12px); } }
.plan__cinta {
    position: absolute; top: -.85rem; left: 50%; transform: translateX(-50%);
    background: var(--primario); color: #fff; padding: .2rem .9rem; border-radius: 999px;
    font-size: .74rem; font-weight: 700; letter-spacing: .04em; margin: 0; white-space: nowrap;
}
.plan__gancho {
    margin: 0; font-size: .74rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--naranja);
}
.plan__nombre { margin: 0; font-size: 1.25rem; }
.plan__precio { display: flex; align-items: baseline; gap: .15rem; margin: 0; color: var(--texto); }
.plan__moneda { font-size: 1.3rem; font-weight: 700; align-self: flex-start; margin-top: .35rem; }
.plan__monto { font-size: 3rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.plan__periodo { font-size: .95rem; color: var(--texto-suave); }
.plan__resumen { margin: 0; font-size: .9rem; color: var(--texto-suave); }
.plan__lista { list-style: none; padding: 0; margin: .4rem 0 0; display: grid; gap: .55rem; font-size: .89rem; }
.plan__lista li { display: flex; gap: .5rem; align-items: flex-start; }
.plan__lista svg { flex: 0 0 16px; margin-top: .18em; color: var(--verde); }
.plan__cta { margin: auto 0 0; padding-top: 1rem; }
.plan__cta .boton { width: 100%; }
.planes__nota {
    margin: 1.8rem auto 0; max-width: 68ch; text-align: center;
    font-size: .88rem; color: var(--texto-suave);
}

/* Solicitud */
.layout-solicitud { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 62rem) { .layout-solicitud { grid-template-columns: 1fr 1.15fr; } }
.solicitud__contacto { font-size: .9rem; color: var(--texto-suave); }
.solicitud__caja {
    background: var(--superficie); border: 1px solid var(--borde);
    border-radius: var(--radio); padding: clamp(1.2rem, .8rem + 1.5vw, 2rem); box-shadow: var(--sombra);
}
.formulario--solicitud .campo input,
.formulario--solicitud .campo select,
.formulario--solicitud .campo textarea { width: 100%; }
.campo-doble { display: grid; gap: 1rem; }
@media (min-width: 34rem) { .campo-doble { grid-template-columns: 1fr 1fr; } }
.aviso--ok h3 { color: inherit; margin-bottom: .4rem; }
.aviso ul { margin: .5rem 0 0; padding-left: 1.2rem; }

/* ---------- Secciones ---------- */
.seccion { padding: 2.5rem 0; }
.seccion--claro { background: var(--azul-50); }
.seccion__cabecera { margin-bottom: 1.4rem; max-width: 70ch; }
.seccion__cabecera p { color: var(--texto-suave); margin: 0; }
.seccion__mas { margin-top: 1.5rem; text-align: center; }

/* Las convocatorias van en FILAS, una debajo de otra: se ven mas por pantalla y se comparan
   mejor que en cuadrados. El contenido de cada una es el mismo; solo cambia la disposicion. */
.grid-tarjetas { display: grid; gap: .7rem; grid-template-columns: minmax(0, 1fr); }

/* ---------- Tarjeta ---------- */
.tarjeta {
    background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
    padding: 1.1rem; display: flex; flex-direction: column; gap: .75rem;
    box-shadow: var(--sombra); transition: var(--transicion);
}
.tarjeta:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); border-color: var(--primario); }
.tarjeta--urgente { border-color: var(--naranja); border-width: 2px; padding-top: .5rem; }
.tarjeta--urgente:hover { border-color: var(--naranja); }
.tarjeta__alerta {
    display: flex; align-items: center; gap: .4rem; margin: -.2rem 0 .2rem;
    background: var(--naranja-claro); color: var(--naranja);
    border-radius: var(--radio-sm); padding: .35rem .6rem;
    font-size: .8rem; font-weight: 700; letter-spacing: .01em;
}
.tarjeta--cerrada { opacity: .82; }
.tarjeta--cerrada .tarjeta__titulo a { color: var(--texto-suave); }
.listado__archivo { margin-top: 1.8rem; text-align: center; font-size: .9rem; }
.tarjeta__cabecera { display: flex; gap: .75rem; align-items: flex-start; }
.tarjeta__logo {
    width: 56px; height: 56px; flex: 0 0 56px; border-radius: var(--radio-sm);
    background: var(--azul-50); border: 1px solid var(--borde);
    display: grid; place-items: center; overflow: hidden;
}
.tarjeta__logo img { width: 100%; height: 100%; object-fit: contain; }
.tarjeta__sigla { font-weight: 700; font-size: .85rem; color: var(--primario); }
.tarjeta__meta { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.tarjeta__entidad { margin: 0; font-size: .82rem; font-weight: 600; }
.tarjeta__entidad a { color: var(--texto-suave); text-decoration: none; }
.tarjeta__entidad a:hover { color: var(--primario); }
.tarjeta__titulo { margin: 0; font-size: 1.05rem; }
.tarjeta__titulo a { color: var(--texto); text-decoration: none; }
.tarjeta__titulo a:hover { color: var(--primario); text-decoration: underline; }
.tarjeta__resumen { margin: 0; font-size: .88rem; color: var(--texto-suave); }
.tarjeta__datos { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; font-size: .84rem; color: var(--texto-suave); }
.tarjeta__datos li { display: flex; align-items: center; gap: .45rem; }
.tarjeta__datos svg { flex: 0 0 16px; color: var(--gris-500); }
.tarjeta__pie { margin-top: auto; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding-top: .4rem; }

/* ---------- Articulos ---------- */
.grid-articulos { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.tarjeta-art {
    background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
    overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--sombra);
    transition: var(--transicion);
}
.tarjeta-art:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); border-color: var(--primario); }
.tarjeta-art__figura { display: block; aspect-ratio: 16 / 9; background: var(--azul-50); overflow: hidden; }
.tarjeta-art__figura img { width: 100%; height: 100%; object-fit: cover; }
.tarjeta-art__cuerpo { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .45rem; }
.tarjeta-art__categoria {
    margin: 0; font-size: .72rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--naranja);
}
.tarjeta-art__titulo { margin: 0; font-size: 1.05rem; line-height: 1.3; }
.tarjeta-art__titulo a { color: var(--texto); text-decoration: none; }
.tarjeta-art__titulo a:hover { color: var(--primario); text-decoration: underline; }
.tarjeta-art__resumen { margin: 0; font-size: .88rem; color: var(--texto-suave); }
.tarjeta-art__meta { margin: auto 0 0; font-size: .78rem; color: var(--gris-500); }

.articulo__categoria {
    font-size: .76rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--naranja); margin-bottom: .3rem;
}
.articulo__titulo { margin-bottom: .5rem; }
.articulo__resumen { font-size: 1.1rem; color: var(--texto-suave); max-width: 70ch; }
.articulo__imagen { margin: 1.5rem 0; }
/* height:auto para que las medidas reales del archivo no la deformen */
.articulo__imagen img { width: 100%; height: auto; border-radius: var(--radio); }
.articulo__imagen figcaption { font-size: .78rem; color: var(--gris-500); margin-top: .4rem; }
.articulo__cuerpo { max-width: 72ch; }
.articulo__cuerpo h2 { margin-top: 2rem; }
.buscador--linea { grid-template-columns: 1fr auto; box-shadow: none; border: 1px solid var(--borde); margin-top: 1rem; }

/* ---------- Listado + lateral ---------- */
.layout-listado, .layout-ficha { display: grid; gap: 2rem; padding: 2rem 0; align-items: start; }
@media (min-width: 64rem) {
    .layout-listado, .layout-ficha { grid-template-columns: minmax(0, 1fr) 310px; }
}
.listado__cabecera { margin-bottom: 1.5rem; }
.listado__intro { color: var(--texto-suave); max-width: 75ch; }
.listado__conteo { font-size: .9rem; color: var(--texto-suave); }
.orden { display: flex; align-items: center; gap: .5rem; font-size: .85rem; margin-top: .8rem; }
.orden label { color: var(--texto-suave); white-space: nowrap; }
.orden select { width: auto; padding: .45rem .7rem; }

.lateral { display: grid; gap: 1.2rem; position: sticky; top: 5rem; }
.widget { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.1rem; }
.widget h2 { font-size: .95rem; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-suave); }
.widget--alerta { background: var(--azul-50); border-color: var(--azul-100); }
.widget--alerta p { font-size: .88rem; color: var(--texto-suave); }
.lista-enlaces { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.lista-enlaces a {
    display: flex; justify-content: space-between; gap: .6rem; align-items: center;
    padding: .45rem .5rem; border-radius: var(--radio-sm); text-decoration: none;
    color: var(--texto); font-size: .9rem;
}
.lista-enlaces a:hover { background: var(--azul-50); color: var(--primario); }
.nube { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.columnas-enlaces { display: grid; gap: 2rem; }
@media (min-width: 48rem) { .columnas-enlaces { grid-template-columns: 1fr 1fr; } }

/* ---------- Ficha ---------- */
.ficha { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: clamp(1.1rem, .6rem + 2vw, 2.2rem); box-shadow: var(--sombra); }
.ficha__estado { margin: 0 0 .6rem; }
.ficha__entradilla { font-size: 1.08rem; color: var(--texto-suave); max-width: 72ch; }
.ficha__firma { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; font-size: .82rem; color: var(--gris-500); border-bottom: 1px solid var(--borde); padding-bottom: 1rem; }
.datos-clave { display: grid; gap: .1rem; margin: 1.5rem 0; border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; }
.datos-clave > div { display: grid; grid-template-columns: 1fr; gap: .1rem; padding: .7rem .9rem; background: var(--superficie); border-bottom: 1px solid var(--borde); }
.datos-clave > div:last-child { border-bottom: 0; }
.datos-clave dt { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--gris-500); }
.datos-clave dd { margin: 0; font-weight: 600; }
@media (min-width: 40rem) {
    .datos-clave { grid-template-columns: 1fr 1fr; }
    .datos-clave > div:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
}

.indice { background: var(--azul-50); border: 1px solid var(--azul-100); border-radius: var(--radio); padding: 1rem 1.2rem; margin: 1.5rem 0; }
.indice h2 { font-size: .9rem; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-suave); }
.indice ol { margin: 0; padding-left: 1.2rem; font-size: .92rem; }

.ficha__cuerpo { font-size: 1.02rem; }
.ficha__cuerpo .bloque { margin: 2rem 0; scroll-margin-top: 5rem; }
.ficha__cuerpo h2 { border-bottom: 2px solid var(--azul-100); padding-bottom: .35rem; }
.ficha__cuerpo h3 { margin-top: 1.4rem; }
.ficha__cuerpo ul, .ficha__cuerpo ol { padding-left: 1.4rem; }
.ficha__cuerpo li { margin-bottom: .4rem; }
.ficha__cuerpo blockquote { margin: 1.2rem 0; padding: .8rem 1.1rem; border-left: 4px solid var(--naranja); background: var(--naranja-claro); border-radius: 0 var(--radio-sm) var(--radio-sm) 0; }

.tabla-scroll { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabla th, .tabla td { padding: .6rem .8rem; border: 1px solid var(--borde); text-align: left; }
.tabla thead th { background: var(--azul-50); font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; }

.bloque--descargas { background: var(--azul-50); border: 1px solid var(--azul-100); border-radius: var(--radio); padding: 1.2rem; }
.descargas { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .7rem; }
.enlace-doc { display: inline-block; padding: .5rem .8rem; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-sm); text-decoration: none; font-size: .9rem; }

.compartir { margin-top: 2rem; border-top: 1px solid var(--borde); padding-top: 1.2rem; }
.compartir h2 { font-size: .9rem; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-suave); margin-bottom: .2rem; }
.compartir__ayuda { font-size: .86rem; color: var(--texto-suave); margin-bottom: .8rem; }
.compartir__redes { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.red {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .5rem .9rem; border: 1px solid var(--borde); border-radius: 999px;
    font-size: .85rem; font-weight: 600; text-decoration: none;
    color: var(--texto); background: var(--superficie); cursor: pointer;
    font-family: inherit; transition: var(--transicion);
}
.red svg { color: var(--red-color, var(--texto-suave)); flex: 0 0 18px; }
.red:hover {
    color: #fff; background: var(--red-color, var(--primario));
    border-color: var(--red-color, var(--primario));
}
.red:hover svg { color: #fff; }
.red--correo { --red-color: #5b6b7f; }
.red--copiar { --red-color: var(--azul-700); }
.red--nativo { --red-color: var(--naranja); }

.ficha__fuente {
    margin-top: 1.6rem; font-size: .88rem; color: var(--texto-suave);
    background: var(--azul-50); border-left: 3px solid var(--primario);
    padding: .7rem 1rem; border-radius: 0 var(--radio-sm) var(--radio-sm) 0;
}
.ficha__fuente .tenue { color: var(--gris-500); }

.ficha__aviso { margin-top: 1.5rem; font-size: .84rem; color: var(--texto-suave); background: var(--gris-100); padding: .9rem 1.1rem; border-radius: var(--radio-sm); }

.aviso { padding: .9rem 1.1rem; border-radius: var(--radio-sm); font-size: .92rem; margin: 1.2rem 0; }
.aviso--cerrada, .aviso--error { background: var(--rojo-claro); color: var(--rojo); }
.aviso--ok { background: var(--verde-claro); color: var(--verde); }
.aviso--urgente {
    background: var(--naranja-claro); color: #8a4b04;
    border-left: 4px solid var(--naranja); border-radius: 0 var(--radio-sm) var(--radio-sm) 0;
}
.aviso--urgente strong { display: block; font-size: 1rem; margin-bottom: .15rem; }

.indice--n3 { margin-left: 1rem; font-size: .95em; opacity: .9; }

/* Enlace a la publicacion original */
.fuente-original {
    margin-top: 2rem; padding: 1.3rem 1.4rem;
    background: var(--azul-50); border: 1px solid var(--azul-100); border-radius: var(--radio);
}
.fuente-original h2 { font-size: 1rem; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-suave); }
.fuente-original p { font-size: .92rem; color: var(--texto-suave); margin-bottom: .8rem; }
.fuente-original__accion { margin: 1rem 0 .6rem; }
.fuente-original__nota { font-size: .82rem; color: var(--gris-500); margin: 0; }
.boton--externo { gap: .5rem; }
.boton--externo svg { flex: 0 0 16px; }

/* ---------- Pasos, FAQ, prosa ---------- */
.pasos { list-style: none; padding: 0; display: grid; gap: 1.2rem; counter-reset: paso; }
@media (min-width: 48rem) { .pasos { grid-template-columns: repeat(3, 1fr); } }
.pasos li { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.2rem; }
.pasos h3 { color: var(--primario); font-size: 1rem; }
.pasos p { margin: 0; font-size: .92rem; color: var(--texto-suave); }

.faq { display: grid; gap: .6rem; max-width: 80ch; }
.faq details { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: .9rem 1.1rem; }
.faq summary { cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { display: inline; font-size: 1rem; }
.faq summary::after { content: "+"; float: right; color: var(--primario); font-weight: 700; }
.faq details[open] summary::after { content: "\2212"; }
.faq p { margin: .8rem 0 0; color: var(--texto-suave); font-size: .94rem; }

.prosa { max-width: 75ch; margin: 2.5rem auto; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: clamp(1.2rem, .8rem + 2vw, 2.4rem); }
.prosa--estrecha { max-width: 62ch; }
.prosa__fecha { font-size: .82rem; color: var(--gris-500); border-top: 1px solid var(--borde); padding-top: 1rem; }

.formulario { display: grid; gap: 1rem; }
.campo { display: grid; gap: .3rem; }
.campo label { font-size: .86rem; font-weight: 600; color: var(--texto-suave); }
.campo--check { display: flex; align-items: center; gap: .5rem; }
.campo--check input { width: auto; }
.formulario__nota { font-size: .8rem; color: var(--gris-500); margin: 0; }
.buscador--avanzado { grid-template-columns: 1fr; box-shadow: none; border: 1px solid var(--borde); }
@media (min-width: 48rem) { .buscador--avanzado { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Vacio / 404 ---------- */
.vacio { text-align: center; background: var(--superficie); border: 1px dashed var(--borde); border-radius: var(--radio); padding: 2.5rem 1.5rem; color: var(--texto-suave); }
.vacio h1, .vacio h2 { color: var(--texto); }
.vacio p { max-width: 60ch; margin-inline: auto; }
.vacio--grande { padding: 3.5rem 1.5rem; }
.vacio svg { margin: 0 auto 1rem; color: var(--gris-500); }
.vacio__acciones { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; margin-top: 1.5rem; }
.codigo-error { font-size: 4rem; font-weight: 800; color: var(--azul-100); margin: 0; line-height: 1; }

/* ---------- Paginacion ---------- */
.paginacion { display: flex; align-items: center; justify-content: center; gap: .8rem; flex-wrap: wrap; margin: 2rem 0 0; }
.paginacion__lista { list-style: none; display: flex; gap: .3rem; padding: 0; margin: 0; }
.paginacion a, .paginacion__actual, .paginacion__salto {
    display: grid; place-items: center; min-width: 2.4rem; height: 2.4rem; padding: 0 .6rem;
    border: 1px solid var(--borde); border-radius: var(--radio-sm); text-decoration: none;
    font-size: .9rem; color: var(--texto);
}
.paginacion a:hover { background: var(--azul-50); border-color: var(--primario); }
.paginacion__actual { background: var(--primario); color: #fff; border-color: var(--primario); font-weight: 700; }
.paginacion__salto { border: 0; }

/* ---------- Pie ---------- */
.pie { background: var(--azul-900); color: #c9d8e6; margin-top: 3rem; }
.pie__grid { display: grid; gap: 2rem; padding: 2.5rem 0; }
@media (min-width: 55rem) { .pie__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.pie__titulo { color: #fff; font-size: .95rem; text-transform: uppercase; letter-spacing: .06em; }
.pie__texto, .pie__aviso { font-size: .88rem; }
.pie__aviso { background: rgba(255,255,255,.06); padding: .8rem 1rem; border-radius: var(--radio-sm); border-left: 3px solid var(--naranja); }
.pie__lista { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.pie__lista a { color: #c9d8e6; text-decoration: none; font-size: .88rem; }
.pie__lista a:hover { color: #fff; text-decoration: underline; }
.pie__legal { border-top: 1px solid rgba(255,255,255,.12); padding: 1.2rem 0; font-size: .8rem; color: #8fa7bd; }
.pie__legal p { margin: 0 0 .2rem; }

@media print {
    .cabecera, .pie, .lateral, .compartir, .migas, .paginacion { display: none !important; }
    .ficha { border: 0; box-shadow: none; }
    body { background: #fff; }
}

/* ---------- Generador de CV ---------- */
.cv-intro { background: linear-gradient(160deg, var(--azul-900), var(--azul-700)); color: #fff; padding: 2.2rem 0; }
.cv-intro h1 { color: #fff; }
.cv-intro__bajada { color: #cfe0f0; max-width: 70ch; margin: 0; }
.cv-layout { display: grid; gap: 2rem; padding: 2rem 0; align-items: start; }
@media (min-width: 68rem) { .cv-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.cv-form { display: grid; gap: 1.2rem; }
.cv-grupo {
    border: 1px solid var(--borde); border-radius: var(--radio);
    padding: 1.2rem; margin: 0; background: var(--superficie); display: grid; gap: .9rem;
}
.cv-grupo legend {
    font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    color: var(--primario); padding: 0 .4rem;
}
.cv-fila { display: grid; gap: .9rem; }
@media (min-width: 34rem) { .cv-fila { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } }
.cv-item {
    position: relative; border: 1px dashed var(--borde); border-radius: var(--radio-sm);
    padding: .9rem; display: grid; gap: .8rem; margin-bottom: .8rem; background: var(--azul-50);
}
.cv-quitar {
    position: absolute; top: .5rem; right: .5rem; background: none; border: 0;
    color: var(--rojo); font-size: .78rem; cursor: pointer; text-decoration: underline;
}
.cv-ayuda { font-size: .78rem; color: var(--texto-suave); }
.cv-acciones { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; }
.cv-nota { flex-basis: 100%; font-size: .8rem; color: var(--texto-suave); margin: 0; }
.boton--compacto { padding: .45rem .85rem; font-size: .85rem; }

.cv-previa { position: sticky; top: 5rem; }
.cv-previa__etiqueta {
    font-size: .75rem; text-transform: uppercase; letter-spacing: .08em;
    color: var(--texto-suave); font-weight: 700; margin-bottom: .5rem;
}
.cv-hoja {
    background: #fff; color: #16202c; border: 1px solid var(--borde); border-radius: 6px;
    padding: 2rem 2.2rem; box-shadow: var(--sombra-alta); font-size: .92rem; line-height: 1.55;
    max-height: 78vh; overflow-y: auto;
}
.cv-hoja__nombre {
    color: var(--azul-800); font-size: 1.5rem; margin: 0 0 .1rem;
    text-transform: uppercase; letter-spacing: .01em;
}
.cv-hoja__titular { color: #5a5a5a; margin: 0 0 .2rem; font-size: 1rem; }
.cv-hoja__contacto { color: #666; font-size: .84rem; margin: 0 0 .9rem; }
.cv-hoja__bloque { border-top: 1px solid #e3e9ef; padding-top: .8rem; margin-top: .8rem; }
.cv-hoja__bloque h3 {
    font-size: .82rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--azul-800); margin-bottom: .5rem;
}
.cv-hoja__item { margin-bottom: .8rem; }
.cv-hoja__item h4 { margin: 0; font-size: .95rem; }
.cv-hoja__meta { color: #6b7480; font-size: .82rem; margin: 0 0 .3rem; font-style: italic; }
.cv-hoja ul { margin: .2rem 0 0; padding-left: 1.1rem; }
.cv-hoja li { margin-bottom: .2rem; }
@media (prefers-color-scheme: dark) { .cv-hoja { background: #fff; } }

/* Foto del CV: se elige y se procesa en el propio navegador */
.cv-foto {
    display: grid; gap: .9rem; align-items: start;
    grid-template-columns: auto minmax(0, 1fr);
    border: 1px dashed var(--borde); border-radius: var(--radio-sm);
    padding: .9rem; background: var(--azul-50);
}
.cv-foto__previa {
    position: relative; width: 92px; height: 92px; border-radius: 8px; overflow: hidden;
    border: 1px solid var(--borde); background: var(--superficie);
    display: grid; place-items: center;
}
.cv-foto__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cv-foto__vacia { font-size: .72rem; color: var(--texto-suave); text-align: center; }
.cv-foto__campo { display: grid; gap: .4rem; min-width: 0; }
.cv-foto__campo > label { font-weight: 700; font-size: .88rem; }
.cv-foto__archivo { font-size: .84rem; max-width: 100%; }
.cv-foto__archivo::file-selector-button {
    margin-right: .6rem; padding: .4rem .8rem; cursor: pointer;
    border: 1px solid var(--primario); border-radius: var(--radio-sm);
    background: var(--superficie); color: var(--primario); font: inherit; font-size: .84rem;
}
.cv-foto__archivo::file-selector-button:hover { background: var(--azul-50); }
.cv-foto__quitar {
    justify-self: start; background: none; border: 0; padding: 0;
    color: var(--rojo); font-size: .8rem; cursor: pointer; text-decoration: underline;
}
.cv-foto__aviso { font-size: .78rem; color: var(--texto-suave); margin: 0; line-height: 1.5; }
.cv-foto__aviso strong { color: var(--texto); }
.cv-foto__error {
    margin: 0; font-size: .8rem; font-weight: 600; color: var(--rojo);
}
.cv-foto__error[hidden] { display: none; }

.cv-hoja__foto {
    float: right; width: 84px; height: 84px; object-fit: cover;
    border: 1px solid #e3e9ef; border-radius: 6px; margin: 0 0 .6rem 1rem;
}
.cv-hoja__bloque { clear: both; }
/* Una regla general da display a las imagenes y pisaba el atributo hidden: sin foto se veia el icono de imagen rota */
.cv-hoja__foto[hidden], .cv-foto__img[hidden], .cv-hoja__foto-vacia[hidden] { display: none; }
/* Sin foto: un marcador con las iniciales (o una silueta) que indica que la foto es opcional; no sale en el PDF */
.cv-hoja__foto-vacia {
    float: right; width: 84px; margin: 0 0 .6rem 1rem; text-align: center;
}
.cv-hoja__iniciales {
    display: grid; place-items: center; width: 84px; height: 84px; border-radius: 6px;
    background: linear-gradient(135deg, var(--azul-50), var(--azul-100)); border: 1px dashed #b9c9da;
    color: var(--azul-800); font-weight: 800; font-size: 1.7rem; letter-spacing: .02em;
}
.cv-hoja__iniciales.es-silueta {
    background: var(--azul-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23a9bdd2' d='M12 12a4.5 4.5 0 100-9 4.5 4.5 0 000 9zm0 2c-4.4 0-8 2.5-8 5.5V21h16v-1.5c0-3-3.6-5.5-8-5.5z'/%3E%3C/svg%3E") center / 56% no-repeat;
}
.cv-hoja__foto-vacia small { display: block; margin-top: .3rem; font-size: .68rem; color: #8a96a3; }

/* ============================================================
   Convocatoria destacada, junto al buscador de la portada
   ============================================================ */
.destacada {
    background: var(--superficie); color: var(--texto);
    border-radius: var(--radio); box-shadow: var(--sombra-alta);
    border-top: 5px solid var(--naranja);
    padding: 1.3rem 1.4rem; display: grid; gap: .55rem; align-content: start;
}
.destacada--urgente { border-top-color: var(--rojo); }

.destacada__cinta {
    display: inline-flex; align-items: center; gap: .35rem; margin: 0; justify-self: start;
    background: var(--naranja-claro); color: #8a4a05; border-radius: 999px;
    padding: .25rem .7rem; font-size: .7rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .06em;
}
.destacada--urgente .destacada__cinta { background: var(--rojo-claro); color: var(--rojo); }

.destacada__entidad { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: .84rem; }
.destacada__entidad img { border-radius: 6px; object-fit: contain; background: var(--gris-100); }
.destacada__entidad a { color: var(--texto-suave); font-weight: 600; }

.destacada__titulo { font-size: 1.18rem; line-height: 1.3; margin: 0; }
.destacada__titulo a { color: var(--azul-800); }
.destacada__titulo a:hover { color: var(--primario-hover); }
.destacada__bajada { color: var(--texto-suave); margin: 0; font-size: .9rem; }

.destacada__datos {
    list-style: none; padding: .8rem 0 0; margin: .2rem 0 0;
    display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
    border-top: 1px solid var(--borde);
}
.destacada__datos strong { display: block; font-size: 1rem; color: var(--azul-800); line-height: 1.25; }
.destacada__datos span { font-size: .72rem; color: var(--gris-500); text-transform: uppercase; letter-spacing: .04em; }

.destacada__aviso {
    display: flex; align-items: center; gap: .35rem; margin: 0;
    background: var(--rojo-claro); color: var(--rojo);
    border-radius: var(--radio-sm); padding: .45rem .7rem; font-size: .82rem; font-weight: 700;
}

/* Dentro de la portada la destacada va compacta: sin extracto, para que no sea ella quien alargue la cabecera */
.hero .destacada { padding: 1rem 1.2rem; gap: .4rem; }
.hero .destacada__bajada { display: none; }
.hero .destacada__titulo { font-size: 1.05rem; }
.hero .destacada__datos { padding-top: .6rem; }

/* ============================================================
   El portal en cifras, en banda horizontal
   ============================================================ */
.cifras-banda { padding: 1.6rem 0 0; }
.cifras-banda__caja {
    display: flex; flex-wrap: wrap; gap: 1rem 2rem;
    align-items: center; justify-content: space-between;
    border: 1px solid var(--borde); border-radius: var(--radio);
    background: var(--superficie); box-shadow: var(--sombra);
    padding: 1.1rem 1.4rem;
}
.cifras-banda__lista {
    display: flex; flex-wrap: wrap; gap: 1rem 2.4rem; margin: 0; flex: 1 1 auto;
}
.cifras-banda__lista > div { display: flex; align-items: baseline; gap: .5rem; }
.cifras-banda__lista dt { color: var(--texto-suave); font-size: .88rem; order: 2; }
.cifras-banda__lista dd {
    margin: 0; order: 1; font-size: 1.55rem; font-weight: 800;
    color: var(--azul-800); line-height: 1; font-variant-numeric: tabular-nums;
}
.cifras-banda__nota { margin: 0; font-size: .8rem; color: var(--gris-500); }

@media (max-width: 40rem) {
    .cifras-banda__lista { gap: .7rem 1.4rem; }
    .cifras-banda__lista dd { font-size: 1.3rem; }
}

/* ============================================================
   Menus: enlace "Ver todas" cuando la lista se recorta
   ============================================================ */
.menu__submenu-mas { border-top: 1px solid var(--borde); margin-top: .3rem; padding-top: .3rem; }
.menu__submenu-mas a { font-weight: 700; color: var(--primario); }
.pill--mas { background: var(--naranja-claro); color: #8a4a05; }

/* ============================================================
   Directorio de filtros
   ============================================================ */
.directorio__indice {
    border: 1px solid var(--borde); border-radius: var(--radio);
    background: var(--azul-50); padding: 1rem 1.2rem; margin-bottom: 2rem;
}
.directorio__indice ul {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-wrap: wrap; gap: .5rem .9rem;
}
.directorio__indice a { font-weight: 600; font-size: .92rem; }

.directorio__grupo { margin-bottom: 2.4rem; scroll-margin-top: 6rem; }
.directorio__grupo h2 { font-size: 1.25rem; margin-bottom: .2rem; }
.directorio__entrada { color: var(--texto-suave); margin: 0 0 .9rem; font-size: .92rem; }
.directorio__lista {
    list-style: none; padding: 0; margin: 0;
    display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.directorio__lista a {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    border: 1px solid var(--borde); border-radius: var(--radio-sm);
    padding: .55rem .8rem; background: var(--superficie); font-size: .92rem;
}
.directorio__lista a:hover { border-color: var(--primario); background: var(--azul-50); }

/* ============================================================
   Vias de contacto
   ============================================================ */
.contacto-vias { margin: 2.4rem 0 1rem; }
.contacto-vias h2 { font-size: 1.35rem; margin-bottom: 1.2rem; }
.contacto-vias__grid {
    display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.via {
    border: 1px solid var(--borde); border-radius: var(--radio);
    background: var(--superficie); padding: 1.2rem; display: grid; gap: .5rem;
    align-content: start; box-shadow: var(--sombra);
}
.via svg { color: var(--primario); }
.via h3 { font-size: 1.02rem; margin: 0; }
.via p { margin: 0; font-size: .9rem; color: var(--texto-suave); }
.via .boton { justify-self: start; margin-top: .4rem; }
.via__botones { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .4rem !important; }
.via__botones .boton { margin-top: 0; }
.via--facebook { border-color: #1772e8; }
.via--facebook svg { color: #1772e8; }
.contacto-vias__intro { margin: 0 0 1.2rem; color: var(--texto-suave); max-width: 70ch; }

/* Un canal por pais */
.canales-pais { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.canal-pais {
    border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie);
    padding: 1rem 1.1rem; display: grid; gap: .7rem; align-content: start; box-shadow: var(--sombra);
}
.canal-pais--actual { border-color: var(--primario); }
.canal-pais__cab { display: flex; align-items: center; gap: .6rem; }
.canal-pais__cab h3 { margin: 0; font-size: 1.02rem; }
.canal-pais__tu {
    margin-left: auto; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: var(--primario); background: var(--azul-50); border-radius: 999px; padding: .15rem .55rem;
}
.canal-pais__botones { display: flex; flex-direction: column; gap: .45rem; align-items: stretch; }
.canal-pais__botones .boton { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; }
.canal-pais__vacio { margin: 0; font-size: .88rem; color: var(--texto-suave); }
.via--whatsapp { border-color: #25D366; }
.via--whatsapp svg { color: #128C7E; }
.via--telegram { border-color: #2AABEE; }
.via--telegram svg { color: #1f8ec4; }
.contacto-vias__nota {
    margin-top: 1rem; font-size: .86rem; color: var(--texto-suave);
    background: var(--gris-100); border-radius: var(--radio-sm); padding: .7rem .9rem;
}

.boton--whatsapp { background: #25D366; color: #06301b; border-color: #25D366; }
.boton--whatsapp:hover { background: #1eb955; color: #06301b; }
.boton-canal--whatsapp { background: #25D366; color: #06301b; }
.boton-canal--whatsapp:hover { background: #1eb955; color: #06301b; }

@media (prefers-color-scheme: dark) {
    .destacada__caja, .via, .directorio__lista a { background: var(--superficie); }
}

.widget__pie { margin: .6rem 0 0; font-size: .78rem; color: var(--texto-suave); }
.widget--alerta .boton--bloque { margin-bottom: .5rem; }
.widget--alerta .boton--bloque:last-of-type { margin-bottom: 0; }
.boton--telegram { background: #2AABEE; color: #06304a; border-color: #2AABEE; }
.boton--telegram:hover { background: #1f97d6; color: #06304a; }
.boton--telegram svg, .boton--whatsapp svg { flex-shrink: 0; }

/* --- Imagen de la convocatoria --- */
.ficha__imagen { margin: 0 0 1.4rem; }
.ficha__imagen img {
    width: 100%; height: auto; display: block;
    border-radius: var(--radio); border: 1px solid var(--borde);
    background: var(--gris-100); object-fit: cover;
}
.ficha__imagen figcaption {
    margin-top: .5rem; font-size: .82rem; color: var(--texto-suave);
    line-height: 1.5; text-align: center;
}
.boton--whatsapp svg { flex-shrink: 0; }

/* Canales de aviso en la pagina de suscripcion */
.canales-alta {
    margin: 2rem 0 0; padding: 1.3rem 1.4rem;
    border: 1px solid var(--borde); border-radius: var(--radio);
    background: var(--azul-50);
}
.canales-alta h2 { font-size: 1.15rem; margin: 0 0 .5rem; }
.canales-alta p { margin: 0 0 1rem; font-size: .92rem; color: var(--texto-suave); }
.canales-alta__botones { display: grid; gap: .6rem; max-width: 22rem; }
.canales-alta--primero { margin: 1.4rem 0 0; }

/* Separador entre los canales y el formulario de correo */
.canales-alta__o {
    display: flex; align-items: center; gap: .8rem;
    margin: 1.6rem 0; color: var(--texto-suave); font-size: .86rem;
}
.canales-alta__o::before, .canales-alta__o::after {
    content: ''; flex: 1; height: 1px; background: var(--borde);
}

/* Reproductor de video de las noticias */
.articulo__video { margin: 0 0 1.6rem; }
.video-marco {
    position: relative; aspect-ratio: 16 / 9; width: 100%;
    border-radius: var(--radio); overflow: hidden;
    background: #000; border: 1px solid var(--borde);
}
.video-marco iframe {
    position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
/* Navegadores sin aspect-ratio: se cae al truco del relleno */
@supports not (aspect-ratio: 16 / 9) {
    .video-marco { height: 0; padding-bottom: 56.25%; }
}

/* Llamada final de la ficha: el paso que la gente vino a dar */
.postular {
    margin: 2.4rem 0 1.6rem; padding: 1.8rem 1.6rem; text-align: center;
    border-radius: var(--radio); color: #fff;
    background: linear-gradient(160deg, var(--azul-800), var(--azul-900));
    box-shadow: var(--sombra-alta);
}
.postular__titulo { color: #fff; font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem); margin: 0 0 .4rem; }
.postular__bajada {
    color: #cfe0f0; margin: 0 auto 1.3rem; max-width: 56ch; font-size: .95rem;
}
.postular__boton {
    display: inline-flex; align-items: center; gap: .6rem;
    background: var(--naranja); color: #24160a;
    padding: .95rem 1.9rem; border-radius: 999px;
    font-size: 1.05rem; font-weight: 800; text-decoration: none;
    box-shadow: 0 6px 20px rgba(0,0,0,.28); transition: var(--transicion);
}
.postular__boton:hover, .postular__boton:focus-visible {
    transform: translateY(-2px); filter: brightness(1.06); color: #24160a;
}
.postular__boton--cerrada { background: var(--gris-300); color: var(--gris-900); }
.postular__nota {
    margin: 1.1rem auto 0; max-width: 58ch; font-size: .84rem; color: #cfe0f0; line-height: 1.6;
}
.postular__nota strong { color: #fff; }
.postular__origen { margin: .8rem 0 0; font-size: .86rem; }
.postular__origen a { color: #ffd9a8; }
.postular__fecha {
    margin: 1rem 0 0; padding-top: .9rem; font-size: .78rem; color: #9fb8cf;
    border-top: 1px solid rgba(255,255,255,.14);
}
@media (prefers-reduced-motion: reduce) { .postular__boton:hover { transform: none; } }

/* «Postula aqui»: boton de las convocatorias de empresa, junto a los datos de la ficha */
.postula-aqui {
    display: flex; align-items: center; gap: 1rem 1.4rem; flex-wrap: wrap;
    margin: 1.2rem 0; padding: 1rem 1.2rem;
    border: 1px solid var(--naranja); border-radius: var(--radio); background: var(--naranja-claro);
}
.postula-aqui__boton {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--naranja); color: #24160a; padding: .8rem 1.7rem; border-radius: 999px;
    font-size: 1.05rem; font-weight: 800; text-decoration: none;
    box-shadow: 0 4px 14px rgba(224, 123, 23, .35); transition: var(--transicion);
}
.postula-aqui__boton:hover, .postula-aqui__boton:focus-visible { filter: brightness(1.06); color: #24160a; transform: translateY(-1px); }
.postula-aqui__texto { margin: 0; flex: 1 1 18rem; font-size: .92rem; color: var(--texto-suave); }
.postula-aqui--cerrada { border-color: var(--borde); background: var(--azul-50); }
@media (max-width: 560px) { .postula-aqui__boton { width: 100%; } }

/* Redes sociales del pie */
.redes { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 1.1rem 0 0; }
.redes__enlace {
    display: grid; place-items: center; width: 38px; height: 38px;
    border-radius: 10px; color: #cfe0f0;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
    transition: var(--transicion);
}
.redes__enlace:hover, .redes__enlace:focus-visible {
    background: var(--naranja); color: #24160a; border-color: var(--naranja);
    transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) { .redes__enlace:hover { transform: none; } }

/* Contador en cero dentro de los menus: se ve, pero no llama */
.pill--cero { background: var(--gris-100); color: var(--gris-500); }
.menu__submenu a.es-vacio { color: var(--texto-suave); }

/* Panel de filtros: plegado, para no tapar los resultados */
.filtros {
    border: 1px solid var(--borde); border-radius: var(--radio);
    background: var(--superficie); margin: 0 0 1.2rem;
}
.filtros__resumen {
    display: flex; align-items: center; gap: .5rem; cursor: pointer;
    padding: .75rem 1rem; font-weight: 700; font-size: .9rem; color: var(--primario);
    list-style: none;
}
.filtros__resumen::-webkit-details-marker { display: none; }
.filtros__resumen::after {
    content: 'Mostrar'; margin-left: auto; font-size: .78rem; font-weight: 600;
    color: var(--texto-suave);
}
.filtros[open] .filtros__resumen::after { content: 'Ocultar'; }
.filtros[open] .filtros__resumen { border-bottom: 1px solid var(--borde); }

/* Pastillas de lo que esta puesto */
.filtros__activas {
    display: flex; flex-wrap: wrap; gap: .4rem; align-items: center;
    padding: .8rem 1rem; border-bottom: 1px solid var(--borde);
}
.filtros__activas-tit { font-size: .76rem; color: var(--texto-suave); font-weight: 600; }
.filtro-puesto {
    display: inline-flex; align-items: center; gap: .3rem;
    background: var(--azul-100); color: var(--azul-800);
    border-radius: 999px; padding: .2rem .55rem;
    font-size: .78rem; font-weight: 600; text-decoration: none; line-height: 1.4;
}
.filtro-puesto:hover { background: var(--rojo-claro); color: var(--rojo); }
.filtro-puesto span[aria-hidden] { font-size: .95rem; line-height: 1; opacity: .65; }
.filtros__limpiar { font-size: .76rem; color: var(--texto-suave); text-decoration: underline; }

/* Cuatro columnas de igual altura, sin que nada se monte */
.filtros__form {
    display: grid; gap: 1rem 1.2rem; padding: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    align-items: start;
}
.filtros__grupo {
    border: 0; margin: 0; padding: 0; min-width: 0;
    display: grid; gap: .5rem; align-content: start;
}
.filtros__grupo legend {
    display: block; float: none; width: 100%; padding: 0 0 .35rem;
    font-size: .78rem; font-weight: 700; color: var(--texto);
    border-bottom: 1px solid var(--borde); margin-bottom: .15rem;
}
.filtros__campo { display: grid; gap: .18rem; min-width: 0; }
.filtros__campo label { font-size: .74rem; color: var(--texto-suave); }
.filtros__campo select,
.filtros__campo input { width: 100%; max-width: 100%; min-width: 0; font-size: .86rem; padding: .38rem .5rem; }

.filtros__rango { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .3rem; }
.filtros__rango input { width: 100%; min-width: 0; font-size: .86rem; padding: .38rem .45rem; }
.filtros__rango span { color: var(--texto-suave); font-size: .9rem; }

.filtros__check {
    display: flex; align-items: flex-start; gap: .4rem;
    font-size: .78rem; line-height: 1.4; color: var(--texto-suave);
}
.filtros__check input { margin-top: .15rem; flex-shrink: 0; }

.filtros__acciones {
    grid-column: 1 / -1; display: flex; gap: .8rem; align-items: center;
    flex-wrap: wrap; border-top: 1px solid var(--borde); padding-top: .9rem; margin-top: .2rem;
}
.filtros__nota { margin: 0; font-size: .74rem; color: var(--texto-suave); flex: 1 1 200px; }

/* Ficha de datos: rejilla de etiqueta y valor, no una lista larga */
.ficha-datos {
    border: 1px solid var(--borde); border-radius: var(--radio);
    background: var(--superficie); overflow: hidden; margin: 0 0 1.6rem;
}
.ficha-datos__titulo {
    font-size: .76rem; text-transform: uppercase; letter-spacing: .07em;
    color: #fff; background: var(--azul-800); margin: 0;
    padding: .55rem 1rem; font-weight: 800;
}
.ficha-datos__cupo {
    display: flex; align-items: center; gap: .5rem; margin: 0;
    background: var(--verde-claro); color: #0d5c3b;
    padding: .55rem 1rem; font-size: .86rem;
    border-bottom: 1px solid var(--borde);
}
.ficha-datos__cupo svg { flex-shrink: 0; }

/* Dos columnas de grupos en pantalla ancha; dentro, cada dato en su fila */
.ficha-datos__grid { display: grid; }
@media (min-width: 46rem) {
    .ficha-datos__grid { grid-template-columns: 1fr 1fr; }
    .ficha-datos__grupo:nth-child(odd) { border-right: 1px solid var(--borde); }
}
.ficha-datos__grupo { border-bottom: 1px solid var(--borde); min-width: 0; }
.ficha-datos__grupo:last-child { border-bottom: 0; }
.ficha-datos__grupo h3 {
    font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--texto-suave); margin: 0; font-weight: 700;
    padding: .5rem 1rem .35rem; background: var(--gris-100);
}

/* Etiqueta a la izquierda, valor a la derecha: se lee como una tabla */
.ficha-datos__grupo dl { margin: 0; }
.ficha-datos__grupo dl > div {
    display: grid; grid-template-columns: minmax(7.5rem, 40%) 1fr;
    gap: .5rem 1rem; align-items: baseline;
    padding: .45rem 1rem; border-bottom: 1px solid var(--gris-100);
}
.ficha-datos__grupo dl > div:last-child { border-bottom: 0; }
.ficha-datos__grupo dt { font-size: .78rem; color: var(--texto-suave); line-height: 1.35; }
.ficha-datos__grupo dd {
    margin: 0; font-weight: 600; font-size: .9rem; line-height: 1.35;
    min-width: 0; overflow-wrap: anywhere;
}
.ficha-datos__grupo dd a { color: var(--azul-700); }
.ficha-datos__extra {
    display: inline-block; font-weight: 700; font-size: .74rem; color: var(--naranja);
    margin-left: .35rem;
}

@media print {
    .ficha-datos { break-inside: avoid; }
    .ficha-datos__titulo { background: none; color: #000; border-bottom: 2px solid #000; }
}

/* Destino de los saltos al filtrar o buscar */
#resultados {
    /* Margen para que la cabecera no tape el recuento al llegar */
    scroll-margin-top: 5.5rem;
}
#resultados:focus { outline: none; }
#resultados:target strong,
.listado__conteo strong { color: var(--primario); font-size: 1.05em; }

/* ---------- Aviso de cookies ---------- */
.cookies {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    background: var(--azul-900); color: #e8f0f8; padding: 1rem 0;
    box-shadow: 0 -6px 24px rgba(0,0,0,.25);
}
.cookies[hidden] { display: none; }
.cookies__caja { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.cookies__texto { margin: 0; font-size: .88rem; flex: 1 1 320px; }
.cookies__texto a { color: #ffd9a8; }
.cookies__acciones { display: flex; gap: .5rem; flex-wrap: wrap; }

/* --- Logotipo: sigue la paleta configurada --- */
.marca__ico-fondo  { fill: var(--azul-800); }
.marca__ico-lineas { fill: #fff; }
.marca__ico-punto  { fill: var(--naranja); }

/* --- Firma editorial de la ficha --- */
.ficha__revision { font-weight: 600; color: var(--texto-suave); }

/* --- Ficha del autor --- */
.autor { max-width: 52rem; margin: 2rem 0 2.5rem; }
.autor__cabecera { border-bottom: 2px solid var(--primario); padding-bottom: 1rem; margin-bottom: 1.4rem; }
.autor__cabecera h1 { margin: 0 0 .3rem; }
.autor__cargo { margin: 0; font-weight: 700; color: var(--texto); }
.autor__institucion { margin: .15rem 0 0; color: var(--texto-suave); }
.autor__resumen { max-width: 40rem; }
.autor__resumen p { margin: 0 0 .9rem; }

/* Los identificadores son el motivo de esta pagina: se ven como datos, no
   como una lista de enlaces sueltos al final. */
.autor__perfiles { margin: 1.8rem 0; }
.autor__perfiles h2 { font-size: 1rem; margin: 0 0 .7rem; }
.perfiles { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.perfil {
    display: grid; grid-template-columns: minmax(10rem, 14rem) 1fr; gap: .2rem 1rem;
    align-items: baseline;
    border: 1px solid var(--borde); border-radius: var(--radio-sm);
    background: var(--azul-50); padding: .6rem .85rem;
}
.perfil__clave { font-size: .8rem; font-weight: 700; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .03em; }
.perfil__valor { font-family: ui-monospace, Consolas, monospace; font-size: .92rem; word-break: break-all; }
.perfil__nota { grid-column: 1 / -1; font-size: .8rem; color: var(--gris-500); }
@media (max-width: 34rem) { .perfil { grid-template-columns: 1fr; } }

.autor__columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.6rem; margin: 1.8rem 0; }
.autor__columnas h2, .autor__contacto h2 { font-size: 1rem; margin: 0 0 .6rem; }
.lista-simple { margin: 0; padding-left: 1.1rem; }
.lista-simple li { margin-bottom: .4rem; }
.autor__contacto { margin-top: 1.5rem; }

.firma__autor a { font-weight: 700; }

/* --- Publicaciones de la ficha del autor --- */
.autor__publicaciones { margin: 1.8rem 0; }
.autor__publicaciones h2 { font-size: 1rem; margin: 0 0 .7rem; }
.publicaciones { margin: 0; padding-left: 1.3rem; display: grid; gap: .85rem; }
.publicacion { line-height: 1.5; }
.publicacion__titulo { display: block; font-weight: 600; }
.publicacion__fuente { font-size: .88rem; color: var(--texto-suave); }
.publicacion__anio::before { content: "\00b7"; margin: 0 .35rem; }
.publicacion__doi {
    display: inline-block; margin-top: .15rem;
    font-family: ui-monospace, Consolas, monospace; font-size: .8rem;
    word-break: break-all;
}
.autor__mas { margin: .9rem 0 0; font-size: .9rem; }

/* --- Abreviaturas con explicacion --- */
abbr[title] {
    text-decoration: underline dotted;
    text-underline-offset: .18em;
    cursor: help;
}

/* --- Como citar este articulo --- */
.citar {
    margin: 2rem 0 1.5rem;
    border: 1px solid var(--borde); border-radius: var(--radio);
    background: var(--azul-50);
}
.citar__resumen {
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
    padding: .8rem 1rem; cursor: pointer;
    font-weight: 700; color: var(--primario);
    list-style: none;   /* fuera el triangulo del navegador */
}
.citar__resumen::-webkit-details-marker { display: none; }
.citar__resumen small {
    font-weight: 400; font-size: .8rem; color: var(--texto-suave);
    /* En pantalla estrecha la lista de estilos sobra: manda el titulo */
    flex: 1 1 14rem; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.citar__resumen::after {
    content: 'Ver'; margin-left: auto; flex-shrink: 0;
    font-size: .78rem; font-weight: 600; color: var(--texto-suave);
}
.citar[open] .citar__resumen::after { content: 'Ocultar'; }
.citar[open] .citar__resumen { border-bottom: 1px solid var(--borde); }
.citar__resumen:hover { background: rgba(15, 61, 104, .04); }
.citar__resumen:focus-visible { outline: 3px solid var(--naranja); outline-offset: -3px; }

.citar__nota {
    margin: .9rem 1rem .8rem; font-size: .86rem; color: var(--texto-suave);
}

.citas {
    list-style: none; margin: 0; padding: 0 1rem 1rem;
    display: grid; gap: .7rem;
}
/* Tarjeta de «Citar esta página». El nombre se queda porque app.js busca
   el botón de copiar con closest('.cita'), pero el selector va acotado al
   contenedor: así, si mañana alguien vuelve a llamar «cita» a otra cosa,
   este recuadro no se le echa encima. */
.citas > .cita {
    background: var(--superficie);
    border: 1px solid var(--borde); border-radius: var(--radio-sm);
    padding: .7rem .85rem;
}
.cita__cabecera {
    display: flex; align-items: center; justify-content: space-between;
    gap: .6rem; margin-bottom: .4rem;
}
.cita__estilo {
    font-size: .74rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--primario);
}
.cita__copiar {
    display: inline-flex; align-items: center; gap: .3rem; flex-shrink: 0;
    border: 1px solid var(--borde); border-radius: 999px; background: none;
    padding: .25rem .6rem; font: inherit; font-size: .76rem; font-weight: 600;
    color: var(--texto-suave); cursor: pointer;
}
.cita__copiar:hover { border-color: var(--primario); color: var(--primario); }
.cita__copiar.es-hecho { border-color: var(--verde); color: var(--verde); }

.cita__texto {
    margin: 0; font-size: .87rem; line-height: 1.6; color: var(--texto);
    /* Una referencia lleva direcciones largas: que parta donde haga falta
       antes que desbordar la caja. */
    overflow-wrap: break-word; word-break: break-word;
}
.cita__texto--codigo {
    font-family: ui-monospace, Consolas, "Courier New", monospace;
    font-size: .8rem; white-space: pre-wrap; margin: 0;
}

/* ============================================================
   Tablas dentro del contenido
   ------------------------------------------------------------
   El editor las conserva pero no las estiliza, y sin esto salen
   sin bordes ni separacion: una lista de palabras pegadas.
   ============================================================ */

/* La que se desplaza es la tabla, no el articulo entero: sin este
   envoltorio una tabla ancha estira la pagina y todo el texto se
   mueve de lado en el movil. */
.tabla-envoltorio {
    overflow-x: auto;
    margin: 1.5rem 0;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--superficie);
    box-shadow: var(--sombra);
    -webkit-overflow-scrolling: touch;
}
.tabla-envoltorio table { margin: 0; }

.articulo__cuerpo table,
.ficha__cuerpo table,
.pagina__cuerpo table {
    width: 100%;
    min-width: 30rem;              /* por debajo de esto no se lee: mejor desplazar */
    border-collapse: collapse;
    font-size: .92rem;
    line-height: 1.5;
}

.articulo__cuerpo caption,
.ficha__cuerpo caption,
.pagina__cuerpo caption {
    caption-side: top; text-align: left;
    padding: .75rem .9rem .55rem;
    font-size: .86rem; font-weight: 700; color: var(--texto-suave);
}

.articulo__cuerpo th,
.ficha__cuerpo th,
.pagina__cuerpo th {
    background: var(--azul-800);
    color: #fff;
    font-weight: 700;
    text-align: left;
    padding: .65rem .85rem;
    border-right: 1px solid rgba(255, 255, 255, .16);
    white-space: nowrap;
}

.articulo__cuerpo td,
.ficha__cuerpo td,
.pagina__cuerpo td {
    padding: .62rem .85rem;
    border-top: 1px solid var(--borde);
    border-right: 1px solid var(--gris-100);
    vertical-align: top;
}

.articulo__cuerpo th:last-child,
.articulo__cuerpo td:last-child,
.ficha__cuerpo th:last-child,
.ficha__cuerpo td:last-child,
.pagina__cuerpo th:last-child,
.pagina__cuerpo td:last-child { border-right: 0; }

/* Franjas alternas: en una tabla ancha son lo que evita saltar de fila */
.articulo__cuerpo tbody tr:nth-child(even),
.ficha__cuerpo tbody tr:nth-child(even),
.pagina__cuerpo tbody tr:nth-child(even) { background: var(--azul-50); }

.articulo__cuerpo tbody tr:hover,
.ficha__cuerpo tbody tr:hover,
.pagina__cuerpo tbody tr:hover { background: var(--azul-100); }

/* Primera columna en negrita cuando hace de encabezado de fila */
.articulo__cuerpo tbody th,
.ficha__cuerpo tbody th,
.pagina__cuerpo tbody th {
    background: var(--gris-100); color: var(--texto);
    border-top: 1px solid var(--borde);
    border-right: 1px solid var(--borde);
    white-space: normal;
}

/* Si el editor puso una alineacion, se respeta */
.articulo__cuerpo [align="right"],
.ficha__cuerpo [align="right"],
.pagina__cuerpo [align="right"] { text-align: right; }
.articulo__cuerpo [align="center"],
.ficha__cuerpo [align="center"],
.pagina__cuerpo [align="center"] { text-align: center; }

/* ============================================================
   Calculadoras
   ============================================================ */
.calc { padding: 1.5rem 0 2.5rem; }
.calc__cabecera { max-width: 46rem; margin-bottom: 1.8rem; }
.calc__cabecera h1 { margin: 0 0 .3rem; }
.calc__gancho { margin: 0 0 .7rem; font-size: 1.05rem; font-weight: 700; color: var(--primario); }
.calc__intro { margin: 0; color: var(--texto-suave); }

/* El formulario a la izquierda y el resultado pegado a la derecha: al
   recalcular no hay que ir a buscar el numero a otra parte de la pagina. */
.calc__cuerpo {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.5rem; align-items: start;
}
@media (max-width: 62rem) { .calc__cuerpo { grid-template-columns: 1fr; } }

.calc__form {
    background: var(--superficie); border: 1px solid var(--borde);
    border-radius: var(--radio); padding: 1.3rem; box-shadow: var(--sombra);
}
.calc__form h2 { font-size: 1rem; margin: 0 0 1.1rem; }
.calc__form .campo { margin-bottom: 1.1rem; }
.calc__form label { display: block; font-weight: 700; font-size: .92rem; margin-bottom: .3rem; }
.calc__form input[type="number"],
.calc__form select {
    width: 100%; padding: .6rem .7rem; font: inherit;
    border: 1px solid var(--borde); border-radius: var(--radio-sm);
    background: var(--superficie); color: var(--texto);
}
.calc__form input:focus-visible, .calc__form select:focus-visible {
    outline: 3px solid var(--naranja); outline-offset: 1px;
}
.campo__ayuda { margin: .35rem 0 0; font-size: .82rem; line-height: 1.5; color: var(--texto-suave); }
.campo__moneda { display: flex; align-items: stretch; }
.campo__moneda span {
    display: flex; align-items: center; padding: 0 .65rem;
    border: 1px solid var(--borde); border-right: 0;
    border-radius: var(--radio-sm) 0 0 var(--radio-sm);
    background: var(--gris-100); font-weight: 700; color: var(--texto-suave);
}
.campo__moneda input { border-radius: 0 var(--radio-sm) var(--radio-sm) 0 !important; }
.campo--check { display: grid; grid-template-columns: auto 1fr; gap: .2rem .5rem; align-items: center; }
.campo--check label { margin: 0; font-weight: 400; }
.campo--check .campo__ayuda { grid-column: 2; }
.req { color: var(--rojo); }

.calc__grupo {
    border: 1px solid var(--borde); border-radius: var(--radio-sm);
    padding: .9rem 1rem .4rem; margin: 0 0 1.1rem;
}
.calc__grupo legend { font-weight: 700; font-size: .88rem; padding: 0 .4rem; color: var(--primario); }
.calc__par { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.calc__acciones { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.2rem; }

/* --- Resultado --- */
.calc__resultado {
    position: sticky; top: 5rem;
    background: var(--azul-800); color: #fff;
    border-radius: var(--radio); padding: 1.4rem;
    box-shadow: var(--sombra-alta);
}
@media (max-width: 62rem) { .calc__resultado { position: static; } }
.calc__resultado h2 { margin: 0 0 .2rem; font-size: 1.1rem; color: #fff; font-weight: 600; }
.resultado__cifra { display: block; font-size: 2.1rem; font-weight: 800; letter-spacing: -.02em; margin-top: .2rem; }
.resultado__nota { margin: 0 0 1.2rem; font-size: .85rem; color: rgba(255, 255, 255, .72); }
.resultado__vacio h2 { font-size: 1.05rem; }
.resultado__vacio p { margin: 0; font-size: .9rem; color: rgba(255, 255, 255, .78); }

.resultado__desglose { border-top: 1px solid rgba(255, 255, 255, .18); }
.resultado__fila {
    display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
    padding: .5rem 0; border-bottom: 1px solid rgba(255, 255, 255, .12);
    font-size: .9rem; line-height: 1.4;
}
.resultado__fila span { color: rgba(255, 255, 255, .85); }
.resultado__fila b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.resultado__fila.es-resta b { color: #ffc9a3; }
.resultado__fila.es-subtotal { background: rgba(255, 255, 255, .06); }
.resultado__fila.es-total {
    border-bottom: 0; margin-top: .3rem; padding-top: .7rem;
    border-top: 2px solid rgba(255, 255, 255, .3); font-size: 1rem;
}
.resultado__fila.es-total b { font-size: 1.15rem; font-weight: 800; }
.resultado__aviso {
    margin: 1.1rem 0 0; padding: .7rem .85rem;
    background: rgba(255, 255, 255, .1); border-radius: var(--radio-sm);
    font-size: .84rem; line-height: 1.55; color: rgba(255, 255, 255, .9);
}

/* --- Explicacion --- */
.calc__ayuda { max-width: 46rem; margin: 2.5rem 0 0; }
.calc__ayuda h2 { margin: 0 0 1rem; }
.calc__valores {
    margin: 1.8rem 0; padding: 1rem 1.2rem;
    background: var(--azul-50); border: 1px solid var(--borde); border-radius: var(--radio);
}
.calc__valores h3 { margin: 0 0 .6rem; font-size: .95rem; }
.calc__valores ul { margin: 0; padding-left: 1.1rem; font-size: .9rem; line-height: 1.7; }
.calc__aviso {
    padding: .9rem 1.1rem; border-left: 4px solid var(--naranja);
    background: var(--naranja-claro); border-radius: 0 var(--radio-sm) var(--radio-sm) 0;
    font-size: .9rem; line-height: 1.6;
}
.calc__otras { margin-top: 1.8rem; }
.calc__otras h3 { font-size: .95rem; margin: 0 0 .5rem; }
.calc__otras ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.calc__otras a {
    display: inline-block; padding: .4rem .8rem;
    border: 1px solid var(--borde); border-radius: 999px;
    background: var(--superficie); font-size: .86rem; font-weight: 600; text-decoration: none;
}
.calc__otras a:hover { border-color: var(--primario); }

/* --- Indice --- */
.calc-lista {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 1rem; margin: 1.5rem 0 2.5rem;
}
.calc-tarjeta {
    display: flex; gap: .9rem; align-items: flex-start;
    padding: 1.1rem; text-decoration: none; color: inherit;
    background: var(--superficie); border: 1px solid var(--borde);
    border-radius: var(--radio); box-shadow: var(--sombra);
    transition: border-color var(--transicion), transform var(--transicion);
}
.calc-tarjeta:hover { border-color: var(--primario); transform: translateY(-2px); }
.calc-tarjeta__icono {
    flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    width: 2.7rem; height: 2.7rem; border-radius: 50%;
    background: var(--azul-100); color: var(--primario);
}
.calc-tarjeta__texto { display: block; }
.calc-tarjeta__texto strong { display: block; font-size: 1.02rem; margin-bottom: .25rem; }
.calc-tarjeta__para { display: block; font-size: .88rem; line-height: 1.5; color: var(--texto-suave); }
.calc-tarjeta__cuando {
    display: block; margin-top: .4rem; font-size: .8rem; font-style: italic; color: var(--gris-500);
}
.calc__aviso-general {
    max-width: 46rem; padding: 1.1rem 1.3rem;
    background: var(--gris-100); border-radius: var(--radio);
}
.calc__aviso-general h2 { font-size: 1rem; margin: 0 0 .6rem; }
.calc__aviso-general p { font-size: .9rem; line-height: 1.6; margin: 0 0 .7rem; }
.calc__aviso-general p:last-child { margin-bottom: 0; }

/* ============================================================
   Sueldos por puesto y radiografia
   ============================================================ */

/* El aviso de vista previa va bien visible: confundir una seccion apagada
   con una publicada seria el peor malentendido posible aqui. */
.aviso-previa {
    margin: 1.2rem 0 1.8rem; padding: 1rem 1.2rem;
    border: 2px dashed var(--naranja); border-radius: var(--radio);
    background: var(--naranja-claro);
}
.aviso-previa__titulo {
    display: flex; align-items: center; gap: .4rem;
    margin: 0 0 .5rem; font-weight: 800; color: #8a5a06;
}
.aviso-previa p { margin: 0 0 .5rem; font-size: .9rem; line-height: 1.6; }
.aviso-previa p:last-child { margin-bottom: 0; }
.aviso-previa__datos { padding-top: .5rem; border-top: 1px solid rgba(138, 90, 6, .25); }

.sueldo-cifras {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 1rem; margin: 1.5rem 0;
}
.sueldo-cifra {
    padding: 1.1rem 1.2rem; border: 1px solid var(--borde);
    border-radius: var(--radio); background: var(--superficie);
}
.sueldo-cifra--principal { background: var(--azul-800); color: #fff; border-color: var(--azul-800); }
.sueldo-cifra__etiqueta {
    display: block; font-size: .78rem; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--texto-suave); margin-bottom: .2rem;
}
.sueldo-cifra--principal .sueldo-cifra__etiqueta { color: rgba(255,255,255,.72); }
.sueldo-cifra strong { display: block; font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; }
.sueldo-cifra__nota { display: block; margin-top: .3rem; font-size: .8rem; color: rgba(255,255,255,.75); }
.sueldos__metodo {
    padding: .8rem 1rem; background: var(--azul-50);
    border-radius: var(--radio-sm); font-size: .9rem; line-height: 1.6;
}

.mercado-cifras {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 1rem; margin: 1.5rem 0 2rem;
}
.mercado-cifra {
    padding: 1.1rem; text-align: center;
    border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie);
}
.mercado-cifra strong { display: block; font-size: 1.8rem; font-weight: 800; color: var(--primario); }
.mercado-cifra span { display: block; margin-top: .2rem; font-size: .84rem; color: var(--texto-suave); }

.mercado-bloque { margin: 0 0 2rem; }
.mercado-bloque h2 { font-size: 1.05rem; margin: 0 0 .8rem; }
.mercado-columnas {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1.5rem 2rem;
}

.ranking { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.ranking__fila {
    display: grid; grid-template-columns: minmax(7rem, 11rem) 1fr auto;
    gap: .7rem; align-items: center; font-size: .89rem;
}
.ranking__fila a { text-decoration: none; }
.ranking__fila a:hover { text-decoration: underline; }
.ranking__barra { height: .55rem; background: var(--gris-100); border-radius: 999px; overflow: hidden; }
.ranking__barra span { display: block; height: 100%; background: var(--primario); border-radius: 999px; }
.ranking__fila b { font-variant-numeric: tabular-nums; color: var(--texto-suave); }

/* Barras por mes: se leen de un vistazo y no necesitan libreria */
.mercado-barras {
    display: flex; align-items: flex-end; gap: .4rem;
    height: 11rem; padding: 1rem .6rem .2rem;
    border: 1px solid var(--borde); border-radius: var(--radio);
    background: var(--superficie); overflow-x: auto;
}
.mercado-barra {
    flex: 1 1 2rem; min-width: 2rem; display: flex; flex-direction: column;
    align-items: center; justify-content: flex-end; height: 100%;
}
.mercado-barra__valor { font-size: .72rem; font-weight: 700; color: var(--texto-suave); }
.mercado-barra__columna {
    width: 100%; max-width: 2.4rem; background: var(--primario);
    border-radius: 3px 3px 0 0; margin-top: .2rem;
}
.mercado-barra__mes {
    margin-top: .35rem; font-size: .72rem; text-align: center; color: var(--texto-suave); line-height: 1.2;
}

/* --- Confirmacion y baja de alertas --- */
.alerta-aviso {
    max-width: 38rem; margin: 3rem auto; padding: 2rem;
    border: 1px solid var(--borde); border-radius: var(--radio);
    background: var(--superficie); box-shadow: var(--sombra); text-align: center;
}
.alerta-aviso.es-ok { border-top: 4px solid var(--verde); }
.alerta-aviso.es-fallo { border-top: 4px solid var(--naranja); }
.alerta-aviso h1 { font-size: 1.4rem; margin: 0 0 .7rem; }
.alerta-aviso p { margin: 0 0 1.2rem; color: var(--texto-suave); line-height: 1.6; }
.alerta-aviso__acciones { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin: 0; }

/* ============================================================
   Barra de modo desarrollo
   ------------------------------------------------------------
   Fija arriba y sin boton de cerrar: una barra que se cierra no
   avisa de nada. Empuja el contenido hacia abajo en vez de
   taparlo, para no comerse la cabecera del sitio.
   ============================================================ */
.barra-entorno {
    position: fixed; top: 0; left: 0; right: 0; z-index: 900;
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
    height: 30px; padding: 0 .9rem;
    background: repeating-linear-gradient(135deg,
        #ffd400 0 14px, #f5c400 14px 28px);
    color: #3d2f00; font-size: .78rem; font-weight: 700;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
}
.barra-entorno__punto {
    width: .5rem; height: .5rem; border-radius: 50%;
    background: #b02a2a; flex-shrink: 0;
}
.barra-entorno__host {
    font-family: ui-monospace, Consolas, monospace; font-weight: 600;
    background: rgba(0, 0, 0, .1); padding: .05rem .4rem; border-radius: 3px;
}
.barra-entorno__nota { font-weight: 400; opacity: .8; }
@media (max-width: 34rem) { .barra-entorno__nota { display: none; } }

/* El contenido baja 30px: la barra es fija y si no, tapa la cabecera */
body.con-barra-entorno { padding-top: 30px; }
/* Y lo que ya estaba pegado arriba baja con ella */
body.con-barra-entorno .cabecera,
body.con-barra-entorno .admin-top,
body.con-barra-entorno .migas { top: 30px; }

/* ==================================================================
   Selector de país
   ------------------------------------------------------------------
   Con <details>, sin JavaScript: es lo primero que toca quien entró
   en el país equivocado y tiene que funcionar siempre. Cada opción
   es un enlace real, así que se puede abrir en otra pestaña y el
   botón de atrás hace lo que se espera.
   ================================================================== */
.sel-pais { position: relative; }

.sel-pais__boton {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border: 1px solid var(--linea, #dbe1ea);
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    white-space: nowrap;
}
.sel-pais__boton::-webkit-details-marker { display: none; }
.sel-pais__boton:hover { border-color: var(--acento, #2563eb); }
.sel-pais[open] .sel-pais__flecha { transform: rotate(180deg); }
.sel-pais__flecha { transition: transform .15s ease; opacity: .55; }
.sel-pais__bandera { display: flex; flex: none; }
.sel-pais__bandera .bandera { display: block; width: 21px; height: 14px; border-radius: 2px; }

.sel-pais__lista {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 60;
    min-width: 190px;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--linea, #dbe1ea);
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(16, 24, 40, .14);
}
.sel-pais__opcion {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border-radius: 7px;
    color: inherit;
    text-decoration: none;
    font-size: 14px;
}
.sel-pais__opcion:hover { background: #f2f5fa; }
.sel-pais__opcion.es-actual { font-weight: 700; color: var(--acento, #2563eb); }
.sel-pais__opcion svg { margin-left: auto; }

/* En el móvil la cabecera va justa: se queda la bandera y se va el nombre,
   que es el dato que menos hace falta cuando ya se ve la bandera. */
@media (max-width: 640px) {
    .sel-pais__nombre { display: none; }
    .sel-pais__boton { padding: 7px 8px; }
}

/* Botón de la página de Facebook.
   El azul de marca de Facebook (#1877F2) con texto blanco da 4.23:1 y se
   queda corto, así que se usa un tono más oscuro del mismo azul: #1772e8 da
   4.56:1. Se reconoce igual y se lee. */
.boton--facebook { background: #1772e8; color: #fff; border-color: #1772e8; }
.boton--facebook:hover { background: #125dbe; color: #fff; border-color: #125dbe; }

/* ==================================================================
   Calculadoras de los países del registro
   ------------------------------------------------------------------
   Una sola hoja para los seis países: la plantilla es común y lo que
   cambia es lo que declara cada uno en el registro.

   La jerarquía es deliberada. Quien entra quiere UNA cifra; el
   desglose lo mira después, y solo si le cuadra mal. Por eso el total
   va solo y grande, y las quince filas del detalle van dentro de un
   plegable en vez de compitiendo con él.
   ================================================================== */

/* ---------- formulario ---------- */
.calc-campos {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.calc-campos .campo { margin: 0; }
.calc-campos label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 5px; }
.calc-campos input,
.calc-campos select {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--linea, #d8dee9);
    border-radius: 9px;
    font-size: 16px;                 /* 16px evita que iOS haga zoom al enfocar */
    font-variant-numeric: tabular-nums;
    background: #fff;
}
.calc-campos input:focus,
.calc-campos select:focus {
    outline: 2px solid var(--acento, #e07b17);
    outline-offset: 1px;
    border-color: transparent;
}
.calc-acciones { display: flex; gap: 10px; flex-wrap: wrap; margin: 20px 0 0; }

/* ---------- el resultado ---------- */
.calc-resultado {
    margin: 28px 0 0;
    border: 1px solid var(--linea, #dfe5ee);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}

/* La cifra. Sola, grande y sobre fondo propio: es lo que se ha venido a ver. */
.calc-total {
    padding: 22px 20px;
    background: linear-gradient(180deg, #f7f9fc 0%, #eef2f8 100%);
    border-bottom: 1px solid var(--linea, #dfe5ee);
    text-align: center;
}
.calc-total__etq {
    margin: 0 0 6px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--tenue, #5a6672);
}
.calc-total__cifra {
    margin: 0;
    font-size: clamp(30px, 7vw, 44px);
    font-weight: 800;
    line-height: 1.1;
    color: var(--primario, #0f3d68);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}
.calc-total__nota {
    margin: 8px auto 0;
    max-width: 44ch;
    font-size: 13px;
    color: var(--tenue, #5a6672);
}

/* ---------- desglose ---------- */
.calc-desglose { border: 0; }
.calc-desglose > summary {
    list-style: none;
    cursor: pointer;
    padding: 13px 20px;
    font-size: 14px;
    font-weight: 600;
    color: var(--primario, #0f3d68);
    display: flex;
    align-items: center;
    gap: 8px;
}
.calc-desglose > summary::-webkit-details-marker { display: none; }
.calc-desglose > summary::after {
    content: '';
    width: 7px; height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .15s ease;
}
.calc-desglose[open] > summary::after { transform: rotate(-135deg); }
.calc-desglose > summary:hover { background: #f7f9fc; }

.calc-filas { margin: 0; padding: 0 20px 6px; }
.calc-fila {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 11px 0;
    border-bottom: 1px solid #eef1f6;
}
.calc-fila:last-child { border-bottom: 0; }
.calc-fila dt { color: #2b3543; font-size: 14px; }
.calc-fila dd {
    margin: 0;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    font-size: 15px;
}
.calc-fila__nota {
    display: block;
    font-size: 12.5px;
    color: var(--tenue, #6b7688);
    font-weight: 400;
    max-width: 46ch;
    margin-top: 3px;
    line-height: 1.45;
}

/* ---------- vigencia ---------- */
.calc-vigencia {
    margin: 0;
    padding: 13px 20px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--tenue, #55606d);
    background: #f7f9fc;
    border-top: 1px solid var(--linea, #e4e9f0);
}
/* Cuando los valores no son del año en curso, el aviso deja de ser una nota
   al pie y pasa a ser un aviso: es información que cambia la decisión. */
.calc-vigencia--aviso {
    background: #fffaf0;
    border-top-color: #f0d9a8;
    color: #6f5210;
}

/* ---------- explicación y base legal ---------- */
.calc-explicacion { margin: 30px 0 0; }
.calc-explicacion h2 { font-size: 18px; margin: 0 0 8px; }
.calc-explicacion p { line-height: 1.65; }
.calc-legal {
    margin: 14px 0 0;
    padding: 11px 14px;
    background: #f5f7fa;
    border-left: 3px solid var(--primario, #0f3d68);
    border-radius: 0 8px 8px 0;
    font-size: 13px;
    color: #3a4551;
}
.calc-legal__etq {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 700;
    color: var(--tenue, #6b7688);
    margin-bottom: 2px;
}

/* ---------- fuentes ---------- */
.calc-fuentes { margin: 30px 0 0; }
.calc-fuentes h2 { font-size: 18px; margin: 0 0 6px; }
.calc-fuentes__intro { font-size: 14px; color: var(--tenue, #55606d); margin: 0 0 12px; }
.calc-fuentes ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.calc-fuentes li {
    padding: 11px 14px;
    border: 1px solid var(--linea, #e2e8f0);
    border-radius: 9px;
}
.calc-fuentes a { font-weight: 600; }
.calc-fuentes a::after { content: ' \2197'; font-weight: 400; opacity: .6; }
.calc-fuentes span {
    display: block;
    font-size: 13px;
    color: var(--tenue, #6b7688);
    margin-top: 2px;
}

/* ---------- descargo ---------- */
.calc-descargo {
    margin: 26px 0 0;
    padding: 13px 15px;
    border: 1px dashed var(--linea, #d8dee9);
    border-radius: 9px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--tenue, #6b7688);
}

/* ---------- otras calculadoras ---------- */
.calc-otras { margin: 34px 0 0; }
.calc-otras h2 { font-size: 18px; margin: 0 0 10px; }
.calc-otras ul {
    list-style: none; padding: 0; margin: 0;
    display: grid; gap: 9px;
    grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
}
.calc-otras a {
    display: block;
    padding: 12px 14px;
    border: 1px solid var(--linea, #e2e8f0);
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: border-color .12s ease, transform .12s ease;
}
.calc-otras a:hover {
    border-color: var(--acento, #e07b17);
    transform: translateY(-1px);
}
.calc-otras a strong { display: block; font-size: 14.5px; }
.calc-otras a span {
    display: block; font-size: 12.5px;
    color: var(--tenue, #6b7688); margin-top: 3px; line-height: 1.45;
}

/* ---------- móvil ---------- */
@media (max-width: 560px) {
    .calc-fila { flex-direction: column; gap: 3px; }
    .calc-fila dd { font-size: 16px; }
    .calc-fila__nota { max-width: none; }
    .calc-total { padding: 18px 16px; }
    .calc-filas, .calc-vigencia, .calc-desglose > summary { padding-left: 16px; padding-right: 16px; }
    .calc-acciones .boton { flex: 1 1 100%; text-align: center; }
}

/* Enlace a la fuente, dentro de la explicación.
   Se marca con subrayado punteado y una flecha, para que se vea que lleva
   fuera sin romper la lectura de la frase. No es un enlace cualquiera: es la
   parte de la oración que está respaldada.

   Se llama «cita-fuente» y no «cita» a propósito: «cita» ya es la tarjeta de
   «Citar esta página», y cuando compartían nombre el recuadro de la tarjeta
   caía sobre estos enlaces. Al ser display:inline, ese relleno vertical no
   empuja la línea: se derramaba sobre las de arriba y abajo y tapaba el
   texto. Dos cosas distintas, dos nombres distintos. */
.cita-fuente {
    color: inherit;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-color: var(--acento, #e07b17);
    text-underline-offset: 3px;
    font-weight: 600;
}
.cita-fuente:hover {
    text-decoration-style: solid;
    color: var(--primario, #0f3d68);
}
.cita-fuente::after {
    content: '\2197';
    font-size: .78em;
    font-weight: 400;
    opacity: .6;
    margin-left: 1px;
}

/* ---------- Tarjeta de convocatoria como FILA (pantallas medianas y grandes) ---------- */
@media (min-width: 48rem) {
    .grid-tarjetas .tarjeta {
        display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; column-gap: 1.1rem; row-gap: .25rem;
        grid-template-areas:
            "alerta alerta alerta"
            "logo   meta   pie"
            "logo   titulo pie"
            "logo   resumen pie"
            "logo   datos  pie";
        align-items: start; padding: .95rem 1.2rem;
    }
    .grid-tarjetas .tarjeta:hover { transform: none; }
    .grid-tarjetas .tarjeta__alerta { grid-area: alerta; justify-self: start; margin: 0 0 .2rem; }
    .grid-tarjetas .tarjeta__cabecera { display: contents; }
    .grid-tarjetas .tarjeta__logo { grid-area: logo; }
    .grid-tarjetas .tarjeta__meta { grid-area: meta; flex-direction: row; align-items: center; flex-wrap: wrap; gap: .3rem .6rem; }
    .grid-tarjetas .tarjeta__titulo { grid-area: titulo; font-size: 1.06rem; }
    .grid-tarjetas .tarjeta__resumen {
        grid-area: resumen; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    .grid-tarjetas .tarjeta__datos { grid-area: datos; display: flex; flex-wrap: wrap; gap: .25rem 1.2rem; margin-top: .2rem; }
    .grid-tarjetas .tarjeta__pie {
        grid-area: pie; margin: 0; padding: 0; flex-direction: column; align-items: stretch; justify-content: center;
        align-self: center; min-width: 170px;
    }
    .grid-tarjetas .tarjeta__pie .boton { text-align: center; }
    .grid-tarjetas .tarjeta__pie .chip { align-self: center; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .grid-tarjetas .tarjeta--urgente { padding-top: .7rem; }
}

/* ---------- Confianza: sellos de verificacion y reporte ---------- */
.confianza { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; margin: 1rem 0; padding: .7rem .9rem; border: 1px solid var(--borde); border-radius: var(--radio-sm); background: var(--azul-50); font-size: .9rem; }
.confianza p { margin: 0; }
.confianza__sello { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; color: var(--verde); }
.confianza__sello span { display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--verde); color: #fff; font-size: .75rem; }
.confianza__reportar { margin-left: auto; color: var(--texto-suave); }
.confianza__reportar a { font-weight: 600; }
.confianza__nota { display: block; font-size: .8rem; color: var(--gris-500); }
.tarjeta__sello { display: inline-flex; align-items: center; gap: .25rem; font-size: .75rem; font-weight: 600; color: var(--verde); }
.tarjeta__sello span { display: inline-grid; place-items: center; width: 1rem; height: 1rem; border-radius: 50%; background: var(--verde); color: #fff; font-size: .62rem; }
.reportar { max-width: 640px; }
.reportar__motivos { border: 0; padding: 0; margin: 0 0 1rem; display: grid; gap: .5rem; }
.reportar__motivos legend { font-weight: 600; margin-bottom: .4rem; }
.reportar__motivo { display: flex; gap: .6rem; align-items: flex-start; padding: .6rem .8rem; border: 1px solid var(--borde); border-radius: var(--radio-sm); cursor: pointer; background: var(--superficie); }
.reportar__motivo:hover { border-color: var(--primario); }
.reportar__motivo input { margin-top: .25rem; }
.reportar__motivo small { display: block; color: var(--gris-500); }
@media (max-width: 600px) { .confianza__reportar { margin-left: 0; } }

/* ---------- Publicidad (AdSense) y consentimiento ---------- */
.anuncio { margin: 2rem 0; padding: .4rem 0; clear: both; text-align: center; min-height: 120px; }
.anuncio[hidden], .sin-anuncios .anuncio { display: none; }
.anuncio__etq { margin: 0 0 .35rem; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gris-500); }
.anuncio ins { display: block; min-height: 90px; }
.anuncio--lateral { margin: 1.4rem 0; }
.enlace-boton { background: none; border: 0; padding: 0; color: #ffd9a8; text-decoration: underline; cursor: pointer; font: inherit; }
.cookies__texto p { margin: 0 0 .4rem; }
.cookies__config { margin-top: .6rem; display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: center; }
.cookies__config[hidden] { display: none; }
.casilla { display: inline-flex; align-items: center; gap: .4rem; }
/* Botones del aviso: los tres idénticos (rechazar pesa lo mismo que aceptar) y legibles sobre el fondo oscuro */
.cookies { max-height: 90vh; overflow-y: auto; }
.cookies .boton { background: #fff; color: var(--azul-900); border-color: #fff; }
.cookies .boton:hover, .cookies .boton:focus-visible { background: #e8f0f8; }
.cookies .boton:focus-visible { outline: 3px solid #ffd9a8; outline-offset: 2px; }
@media (max-width: 600px) {
    .cookies { padding: .7rem 0; }
    .cookies__texto { font-size: .8rem; flex-basis: 100%; }
    .cookies__acciones { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
    .cookies__acciones .boton { padding: .5rem .25rem; font-size: .8rem; }
}