/* ══════════════════════════════════════════════════════════════════════════
   empleosgobiernoperuano — hoja única.

   Escrita contra las clases que las plantillas usan de verdad. Si aparece una
   regla acá, hay markup que la usa; si se borra una sección de plantilla, hay
   que borrar su bloque.

   Tema: rojo peruano como ACENTO, no como fondo. La lección viene de estudiar
   a convocatoriasdetrabajo.com (2026-07): su rojo en títulos, enlaces, botones
   y barras a la vez hace que nada destaque. Acá el rojo vive en cuatro sitios
   —logo, hero, acciones y enlaces— y el resto es neutro. El verde queda
   reservado al dinero: el sueldo es el dato que el usuario viene a buscar y no
   compite con nada. De ellos también se rescata lo bueno: letra más grande,
   datos con icono en la tarjeta y el estado del proceso al abrir la ficha.

   Sin frameworks ni build: se sirve tal cual. Orden: tokens → base → layout →
   componentes → páginas, con los breakpoints pegados a su componente.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
    /* Tinta y superficies */
    --ink:        #1c2430;
    --ink-2:      #3b4453;
    --ink-3:      #66707f;
    --ink-4:      #98a1ae;
    --linea:      #e5e7eb;
    --linea-2:    #f1f3f5;
    --fondo:      #f7f7f8;
    --papel:      #ffffff;

    /* Rojo de marca. Más hondo que el de la bandera (#D91023) para que el
       texto blanco encima pase AA; el vivo sólo en detalles pequeños. */
    --rojo:        #c0161f;
    --rojo-oscuro: #9c1119;
    --rojo-enlace: #ab1119;
    --rojo-claro:  #fdf2f2;
    --rojo-borde:  #f5c6c9;

    /* El rosado del hero: el rojo rebajado a fondo de ambiente. Sólo vive en
       la banda de la portada; el resto del sitio sigue neutro. */
    --rosa:        #fdf1ef;
    --rosa-2:      #fae5e2;

    /* El dinero, siempre y sólo en verde. */
    --dinero:     #047857;

    --ambar:      #b45309;
    --ambar-bg:   #fffbeb;
    --verde-ok:   #166534;
    --verde-bg:   #f0fdf4;
    --verde-bord: #bbf7d0;
    --error:      #b91c1c;
    --error-bg:   #fef2f2;

    --radio:      10px;
    --radio-sm:   8px;
    --sombra:     0 1px 2px rgba(28, 36, 48, .05), 0 1px 3px rgba(28, 36, 48, .05);
    --sombra-alta:0 4px 14px rgba(28, 36, 48, .10);
    --ancho:      1100px;
    --lectura:    68ch;
}

/* ── Base ──────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    /* 17px base: la letra chica era el reclamo #1 contra el diseño anterior y
       la grande es de lo poco que la competencia hace bien. */
    font-size: 17px;
    line-height: 1.65;
    color: var(--ink-2);
    background: var(--fondo);
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* Las bandas a sangre de la portada se estiran con 100vw, que incluye la
       barra de scroll: sin esto aparece un scroll horizontal fantasma. */
    overflow-x: clip;
}

h1, h2, h3, h4 { color: var(--ink); line-height: 1.25; font-weight: 700; }
h1 { font-size: 1.95rem; letter-spacing: -.02em; margin-bottom: .75rem; }
h2 { font-size: 1.3rem; margin: 2rem 0 .9rem; }
h3 { font-size: 1.08rem; }
p  { margin-bottom: .9rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--rojo-enlace); text-decoration: none; }
a:hover { text-decoration: underline; }

strong { color: var(--ink); font-weight: 700; }
small  { font-size: .84rem; }

img, svg { max-width: 100%; }

:focus-visible { outline: 2px solid var(--rojo); outline-offset: 2px; border-radius: 3px; }

/* Icono de trazo del sprite de base.html. Hereda el color del texto y se
   alinea a la línea base, así se puede meter en cualquier <span>. */
.ico {
    width: 1.05em; height: 1.05em;
    vertical-align: -0.18em;
    flex-shrink: 0;
}

@media (max-width: 640px) {
    body { font-size: 16px; }
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.15rem; margin-top: 1.6rem; }
}

/* ── Layout ────────────────────────────────────────────────────────────── */

.container { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 1.25rem; }

/* El <div class="container"> del cuerpo empuja el footer abajo cuando la
   página tiene poco contenido (estados de alerta, 404). */
body > .container { flex: 1 0 auto; padding-top: 1.75rem; padding-bottom: 3rem; }

@media (max-width: 640px) {
    .container { padding: 0 1rem; }
    body > .container { padding-top: 1.25rem; }
}

/* ── Cabecera ──────────────────────────────────────────────────────────────
   Clara, con el buscador siempre a mano. El header oscuro anterior peleaba
   con el hero rojo; en blanco, el único rojo de la franja es la marca y el
   pill de Alertas, que es la conversión que importa. */

.site-header {
    background: var(--papel);
    border-bottom: 1px solid var(--linea);
    /* Pegajosa: en un listado largo, que el buscador y "Crear alerta" sigan a
       mano es lo que la propuesta de 2026-07 pide con el header fijo. */
    position: sticky;
    top: 0;
    z-index: 50;
}
.header-inner { display: flex; align-items: center; gap: 1.25rem; min-height: 64px; }

.logo {
    display: inline-flex; align-items: center; gap: .55rem;
    color: var(--ink); font-size: 1.1rem; font-weight: 800; letter-spacing: -.02em;
    white-space: nowrap;
}
.logo:hover { color: var(--rojo); text-decoration: none; }
.logo-marca { width: 30px; height: 30px; flex-shrink: 0; }

/* Buscador del header. En la portada lo esconde body.es-home: ahí manda el
   del hero y dos buscadores a la vista confunden. */
.header-buscar {
    display: flex; align-items: center;
    flex: 0 1 300px; min-width: 0;
    border: 1px solid var(--linea); border-radius: 999px;
    background: var(--fondo);
    transition: border-color .12s, background .12s;
}
.header-buscar:focus-within { border-color: var(--rojo); background: var(--papel); }
.header-buscar input {
    flex: 1 1 auto; min-width: 0;
    border: none; background: none;
    padding: .5rem .35rem .5rem 1rem;
    font-size: .9rem; font-family: inherit; color: var(--ink-2);
}
.header-buscar input:focus { outline: none; }
.header-buscar button {
    border: none; background: none; cursor: pointer;
    padding: .5rem .8rem .5rem .4rem;
    color: var(--ink-3); display: flex; align-items: center;
}
.header-buscar button:hover { color: var(--rojo); }

body.es-home .header-buscar { display: none; }

.main-nav { display: flex; align-items: center; gap: 1.2rem; margin-left: auto; }
.main-nav a { color: var(--ink-2); font-size: .92rem; font-weight: 500; white-space: nowrap; }
.main-nav a:hover { color: var(--rojo); text-decoration: none; }
.main-nav .nav-destacado {
    display: inline-flex; align-items: center; gap: .4rem;
    background: var(--rojo); color: #fff;
    padding: .42rem .95rem; border-radius: 999px;
    font-weight: 700;
}
.main-nav .nav-destacado:hover { background: var(--rojo-oscuro); color: #fff; }

/* Móvil: la nav pasa a tira deslizable, no a hamburguesa. No hay JS en el
   sitio y las seis secciones son el índice del contenido — esconderlas tras
   un botón les quita descubribilidad. */
@media (max-width: 900px) {
    .header-inner { flex-wrap: wrap; gap: .5rem .9rem; padding-top: .65rem; }
    .logo { flex: 1 1 auto; }
    .header-buscar { order: 3; flex: 1 1 100%; }
    .main-nav {
        order: 4; flex: 1 1 100%;
        margin-left: 0; gap: 1rem; overflow-x: auto; scrollbar-width: none;
        padding: .5rem 0 .65rem;
        -webkit-overflow-scrolling: touch;
    }
    .main-nav::-webkit-scrollbar { display: none; }
    .main-nav .nav-destacado { padding: .3rem .8rem; }
}

/* ── Pie ───────────────────────────────────────────────────────────────── */

.site-footer {
    flex-shrink: 0;
    background: #212936;
    color: #c3cad4;
    padding: 2.5rem 0 2.25rem;
    font-size: .875rem;
    line-height: 1.7;
}
.site-footer strong { color: #fff; }
.site-footer a { color: #c3cad4; }
.site-footer a:hover { color: #fff; }

.footer-cols {
    display: grid; grid-template-columns: minmax(0, 1.5fr) 1fr 1fr;
    gap: 2rem 2.5rem;
}
.footer-marca p { max-width: 44ch; }
.footer-logo { font-size: 1.05rem; margin-bottom: .4rem; }
.footer-titulo {
    color: #fff; font-weight: 700; font-size: .82rem;
    text-transform: uppercase; letter-spacing: .05em;
    margin-bottom: .45rem;
}
.footer-col a { display: block; padding: .16rem 0; }

.footer-note {
    margin-top: 1.75rem; padding-top: 1.1rem;
    border-top: 1px solid rgba(255,255,255,.10);
    color: #98a1ae; font-size: .82rem;
}

@media (max-width: 700px) {
    .footer-cols { grid-template-columns: 1fr 1fr; }
    .footer-marca { grid-column: 1 / -1; }
}

/* ── Portada ───────────────────────────────────────────────────────────────
   Rediseño 2026-07 según la propuesta: hero rosado a sangre con ilustración,
   fila de indicadores, filtros a la izquierda + resultados, widgets de
   agregados y la banda roja de alertas. El truco de banda a sangre
   (margin-inline negativa con 50vw) se usa en el hero y en la banda final:
   el contenido queda dentro de .container pero el fondo llega a los bordes. */

body.es-home > .container { padding-top: 0; padding-bottom: 0; }

.hero {
    margin-inline: calc(50% - 50vw);
    background: linear-gradient(180deg, var(--rosa), var(--rosa-2));
    border-bottom: 1px solid #f3d7d3;
}
.hero-cols {
    max-width: var(--ancho); margin: 0 auto;
    padding: 2.9rem 1.25rem 2.6rem;
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: 2.5rem; align-items: center;
}
.hero h1 {
    font-size: 2.55rem; letter-spacing: -.03em; line-height: 1.12;
    max-width: 17ch; margin-bottom: .9rem;
}
.hero .lead { color: var(--ink-2); font-size: 1.08rem; margin-bottom: .4rem; }
.hero .lead strong { color: var(--rojo); font-size: 1.15em; }

.hero-actualizado {
    display: flex; align-items: center; gap: .45rem;
    font-size: .85rem; color: var(--ink-3); margin-bottom: 1.4rem;
}
.punto-vivo {
    width: 8px; height: 8px; border-radius: 50%;
    background: #16a34a;
    animation: latido 2.4s ease-in-out infinite;
}
@keyframes latido {
    0%, 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, .45); }
    50%      { box-shadow: 0 0 0 5px rgba(22, 163, 74, 0); }
}
@media (prefers-reduced-motion: reduce) { .punto-vivo { animation: none; } }

.search-form { display: flex; gap: .55rem; max-width: 560px; }
.search-form input[type="search"] {
    flex: 1 1 auto; min-width: 0;
    padding: .85rem 1.1rem; font-size: 1.02rem; font-family: inherit;
    border: 1px solid #ecc9c4; border-radius: var(--radio-sm);
    background: #fff; color: var(--ink);
    box-shadow: var(--sombra);
}
.search-form input[type="search"]::placeholder { color: var(--ink-4); }
.search-form input[type="search"]:focus { outline: none; border-color: var(--rojo); box-shadow: 0 0 0 3px var(--rojo-borde); }
.search-form button {
    flex: 0 0 auto;
    padding: .85rem 1.7rem; font-size: 1.02rem; font-family: inherit; font-weight: 800;
    color: #fff; background: var(--rojo); border: none; border-radius: var(--radio-sm);
    cursor: pointer; transition: background .12s;
}
.search-form button:hover { background: var(--rojo-oscuro); }

.hero-atajos { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.1rem 0 0; }
.hero-atajos a {
    color: var(--ink-2); font-size: .87rem; font-weight: 600;
    padding: .34rem .9rem; border-radius: 999px;
    background: #fff; border: 1px solid #ecc9c4;
}
.hero-atajos a:hover { border-color: var(--rojo); color: var(--rojo-enlace); text-decoration: none; }
.hero-atajos .atajo-mas { background: none; border-style: dashed; color: var(--ink-3); }

.hero-arte { display: flex; justify-content: center; }
.hero-arte svg { width: 100%; max-width: 460px; height: auto; }

@media (max-width: 900px) {
    .hero-cols { grid-template-columns: 1fr; gap: 1.5rem; padding-block: 2rem 1.8rem; }
    .hero-arte { display: none; }
}
@media (max-width: 640px) {
    .hero h1 { font-size: 1.7rem; }
    .search-form { flex-direction: column; }
}

/* Fila de indicadores bajo el hero. */
.stats {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem;
    margin: 1.6rem 0 1.9rem;
}
/* Icono a la izquierda ocupando las tres filas; cifra, título y nota apilados
   a su derecha. Grid y no flex: los <p> son hijos directos y en flex quedarían
   en fila. */
.stat {
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    align-items: start; column-gap: .8rem;
    background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio);
    padding: 1.05rem 1.15rem; box-shadow: var(--sombra);
    color: inherit;
}
a.stat { transition: border-color .12s, box-shadow .12s; }
a.stat:hover { border-color: var(--rojo-borde); box-shadow: var(--sombra-alta); text-decoration: none; }
.stat-icono {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 11px;
    grid-row: 1 / span 3; margin-top: .15rem;
}
.stat-icono .ico { width: 1.3em; height: 1.3em; }
.stat-rojo   { background: var(--rojo-claro); color: var(--rojo); }
.stat-morado { background: #f3efff; color: #6d28d9; }
.stat-verde  { background: var(--verde-bg); color: #15803d; }
.stat-ambar  { background: var(--ambar-bg); color: var(--ambar); }
.stat p { margin: 0; }
.stat-cifra { font-size: 1.45rem; font-weight: 800; color: var(--ink); line-height: 1.2; letter-spacing: -.02em; }
.stat-titulo { font-size: .87rem; color: var(--ink-2); line-height: 1.35; }
.stat-nota { font-size: .78rem; color: var(--ink-4); margin-top: .1rem; }
.stat-nota-verde { color: #15803d; font-weight: 600; }
a.stat .stat-nota { color: var(--rojo-enlace); font-weight: 600; }

@media (max-width: 900px) { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) {
    .stats { grid-template-columns: 1fr 1fr; gap: .6rem; }
    .stat { grid-template-columns: 1fr; row-gap: .35rem; padding: .85rem .9rem; }
    .stat-icono { grid-row: 1; }
}

/* Filtros a la izquierda, resultados a la derecha. En móvil los resultados
   van primero: los filtros son navegación secundaria, no la razón de visita. */
.portada-cols {
    display: grid; grid-template-columns: 250px minmax(0, 1fr);
    gap: 1.4rem; align-items: start;
}
.filtros-panel {
    background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio);
    padding: 1.15rem 1.25rem 1.3rem; box-shadow: var(--sombra);
    position: sticky; top: 80px;
}
.filtros-cab {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 1.02rem; font-weight: 700; color: var(--ink);
    margin-bottom: .4rem;
}
.filtros-cab a { font-size: .82rem; font-weight: 600; }
.filtros-titulo {
    font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: var(--ink-4); margin: 1.05rem 0 .3rem;
}
.filtros-lista { list-style: none; margin: 0; }
.filtros-lista li {
    display: flex; justify-content: space-between; align-items: baseline; gap: .5rem;
    padding: .22rem 0; font-size: .9rem;
}
.filtros-lista a { color: var(--ink-2); }
.filtros-lista a:hover { color: var(--rojo-enlace); }
.filtro-n { color: var(--ink-4); font-size: .8rem; white-space: nowrap; }
.filtro-mas { font-weight: 600; color: var(--rojo-enlace) !important; font-size: .86rem; }

.resultados-cab {
    display: flex; justify-content: space-between; align-items: baseline;
    flex-wrap: wrap; gap: .3rem 1rem; margin-bottom: .9rem;
}
.resultados-cab h2 { margin: 0; font-size: 1.15rem; }
.orden { font-size: .85rem; color: var(--ink-4); margin: 0; display: flex; gap: .8rem; flex-wrap: wrap; }
.orden a { color: var(--ink-3); }
.orden a:hover { color: var(--rojo-enlace); }
.orden-activo { color: var(--ink); font-weight: 700; }

@media (max-width: 900px) {
    .portada-cols { grid-template-columns: 1fr; }
    .filtros-panel { position: static; order: 2; }
    .resultados { order: 1; }
}

/* Widgets de agregados: entidades, sueldos y departamentos. */
.widgets {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem;
    margin: 1.9rem 0;
}
.widget {
    background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio);
    padding: 1.15rem 1.25rem; box-shadow: var(--sombra);
    display: flex; flex-direction: column;
}
.widget h2 { font-size: 1rem; margin: 0 0 .5rem; }
.widget-lista { list-style: none; margin: 0; flex: 1 1 auto; }
.widget-lista li {
    display: flex; align-items: center; gap: .6rem;
    padding: .5rem 0; border-bottom: 1px solid var(--linea-2);
    font-size: .89rem; min-width: 0;
}
.widget-lista li:last-child { border-bottom: none; }
.widget-lista a { color: var(--ink); font-weight: 600; min-width: 0; }
.widget-lista a:hover { color: var(--rojo-enlace); text-decoration: none; }
.widget-dato { margin-left: auto; color: var(--ink-3); font-size: .82rem; white-space: nowrap; }
.widget-lista .card-logo { width: 34px; height: 34px; font-size: .74rem; border-radius: 9px; }

.widget-sueldos li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 .7rem; }
.widget-sueldos a { grid-column: 1; }
.widget-sub { grid-column: 1; font-size: .78rem; color: var(--ink-4); line-height: 1.4; }
.widget-sueldos .widget-dato { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin-left: 0; }
.widget-sueldos .sueldo { font-size: .95rem; }

.widget-barras a { flex: 0 0 37%; font-size: .86rem; }
.barra { flex: 1 1 auto; height: 6px; border-radius: 999px; background: var(--linea-2); overflow: hidden; }
.barra-relleno { display: block; height: 100%; border-radius: 999px; background: var(--rojo); }
/* El ancho en clases de a 10%: los templates no llevan estilos inline. */
.barra-n0 { width: 4%; } .barra-n1 { width: 10%; } .barra-n2 { width: 20%; }
.barra-n3 { width: 30%; } .barra-n4 { width: 40%; } .barra-n5 { width: 50%; }
.barra-n6 { width: 60%; } .barra-n7 { width: 70%; } .barra-n8 { width: 80%; }
.barra-n9 { width: 90%; } .barra-n10 { width: 100%; }

.widget-pie {
    display: inline-flex; align-items: center; gap: .25rem;
    margin-top: .8rem; font-size: .86rem; font-weight: 600;
}
.widget-pie .ico { width: .95em; height: .95em; }

@media (max-width: 900px) { .widgets { grid-template-columns: 1fr; } }

/* La banda roja de alertas: el único bloque rojo grande que queda, pegado al
   pie. El correo viaja por GET a /alertas/, que lo prellena. */
.banda-alerta {
    margin-inline: calc(50% - 50vw);
    margin-top: 2.2rem;
    background: linear-gradient(160deg, var(--rojo), #8c1017);
    color: #fff;
}
.banda-alerta-inner {
    max-width: var(--ancho); margin: 0 auto;
    padding: 2rem 1.25rem;
    display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
}
.banda-alerta-icono {
    display: inline-flex; align-items: center; justify-content: center;
    width: 54px; height: 54px; border-radius: 50%;
    background: rgba(255, 255, 255, .16); flex-shrink: 0;
}
.banda-alerta-icono .ico { width: 1.5em; height: 1.5em; }
.banda-alerta-texto { flex: 1 1 260px; }
.banda-alerta-titulo { font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; margin: 0; }
.banda-alerta-sub { color: #ffd9db; font-size: .92rem; margin: 0; }
.banda-alerta-form { display: flex; gap: .55rem; flex: 1 1 340px; max-width: 460px; }
.banda-alerta-form input {
    flex: 1 1 auto; min-width: 0;
    padding: .75rem 1rem; font-size: .95rem; font-family: inherit;
    border: none; border-radius: var(--radio-sm);
    background: #fff; color: var(--ink);
}
.banda-alerta-form input:focus { outline: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, .45); }
.banda-alerta-form button {
    flex: 0 0 auto;
    padding: .75rem 1.3rem; font-size: .95rem; font-family: inherit; font-weight: 800;
    color: var(--rojo); background: #fff; border: none; border-radius: var(--radio-sm);
    cursor: pointer; transition: background .12s;
}
.banda-alerta-form button:hover { background: #ffe6e7; }

/* Variante suave para las páginas interiores: tarjeta rosada con borde, dentro
   del flujo (no a sangre). El botón se invierte: sobre rosado, rojo sólido. */
.banda-suave {
    margin-inline: 0;
    margin-top: 1.8rem;
    background: linear-gradient(180deg, var(--rosa), var(--rosa-2));
    border: 1px solid #f3d7d3;
    border-radius: var(--radio);
    color: var(--ink);
}
.banda-suave .banda-alerta-inner { padding: 1.5rem 1.4rem; }
.banda-suave .banda-alerta-icono { background: var(--rojo); color: #fff; }
.banda-suave .banda-alerta-titulo { color: var(--ink); }
.banda-suave .banda-alerta-sub { color: var(--ink-3); }
.banda-suave .banda-alerta-form input { border: 1px solid #ecc9c4; }
.banda-suave .banda-alerta-form input:focus { box-shadow: 0 0 0 3px var(--rojo-borde); }
.banda-suave .banda-alerta-form button { color: #fff; background: var(--rojo); }
.banda-suave .banda-alerta-form button:hover { background: var(--rojo-oscuro); }

@media (max-width: 640px) {
    .banda-alerta-form { flex-direction: column; max-width: none; }
}

/* ── Tarjeta de convocatoria ───────────────────────────────────────────────
   Toda la tarjeta es clicable: el ::after del enlace del título la cubre
   entera (por eso el position:relative). Nada de botones "ver convocatoria". */

.card {
    position: relative;
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    padding: 1.15rem 1.35rem;
    margin-bottom: .8rem;
    box-shadow: var(--sombra);
    transition: border-color .12s, box-shadow .12s;
}
.card:hover { border-color: var(--rojo-borde); box-shadow: var(--sombra-alta); }
.card h3 { font-size: 1.13rem; line-height: 1.35; margin-bottom: .1rem; }
.card h3 a { color: var(--ink); }
.card h3 a::after { content: ""; position: absolute; inset: 0; }
.card:hover h3 a { color: var(--rojo-enlace); }
.card h3 a:hover { text-decoration: none; }

.card-cerrada { opacity: .78; }
.card-cerrada:hover { border-color: var(--linea); box-shadow: var(--sombra); }
.card-cerrada:hover h3 a { color: var(--ink); }

.card-cab { display: flex; align-items: flex-start; gap: .85rem; margin-bottom: .55rem; }
.card-quien { flex: 1 1 auto; min-width: 0; }

/* Identidad de la entidad. Cuando `sync_logos` consiguió el logo real va la
   imagen; si no —el caso mayoritario, porque gob.pe no publica marca por
   institución— va el monograma con tono estable por nombre (filtro `tono`).
   Los dos comparten caja para que la fila de la tarjeta no baile según haya
   logo o no. */
.card-logo {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; border-radius: 11px; flex-shrink: 0;
    font-size: .92rem; font-weight: 800; letter-spacing: .02em;
}

/* Los logos institucionales vienen en cualquier proporción y muchos traen
   fondo blanco propio: `contain` los mete enteros sin recortar, y el relleno
   evita que un logo apaisado toque los bordes de la caja. */
.card-logo-img {
    object-fit: contain;
    padding: 3px;
    background: #fff;
    border: 1px solid var(--linea);
}
.logo-t0 { background: #fde8e8; color: #b0181f; }
.logo-t1 { background: #e8eefb; color: #1d4fb8; }
.logo-t2 { background: #e6f6ec; color: #157347; }
.logo-t3 { background: #fdf3e0; color: #a05e03; }
.logo-t4 { background: #f1ebfd; color: #6431c4; }
.logo-t5 { background: #e3f4f6; color: #0f6c7a; }
.logo-t6 { background: #fceaf3; color: #b01863; }
.logo-t7 { background: #ebeef2; color: #3b4453; }

.badge-nuevo {
    display: inline-block; vertical-align: .18em; margin-left: .35rem;
    padding: .08rem .55rem; border-radius: 999px;
    background: var(--verde-bg); border: 1px solid var(--verde-bord);
    color: var(--verde-ok);
    font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
}

.card-lado { text-align: right; flex-shrink: 0; }
.card-lado .sueldo { display: block; font-size: 1.12rem; line-height: 1.3; }
.card-hace { font-size: .78rem; color: var(--ink-4); white-space: nowrap; }

.card-entidad { font-size: .9rem; color: var(--ink-3); margin-bottom: 0; }

.card-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: .45rem 1.15rem;
    font-size: .9rem; color: var(--ink-2); margin-bottom: .45rem;
}
.card-meta > span { display: inline-flex; align-items: center; gap: .38rem; }
.card-meta .ico { color: var(--ink-4); }

.card-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .55rem; }
.card-tags span {
    padding: .14rem .6rem; border-radius: 6px;
    background: var(--linea-2); color: var(--ink-3);
    font-size: .76rem; font-weight: 600; white-space: nowrap;
}

.card-pie {
    display: flex; justify-content: space-between; align-items: center;
    gap: .6rem; margin-bottom: 0; min-height: 1.9rem;
}
/* Botón decorativo: la tarjeta entera ya es el enlace (::after del título).
   Existe para dar el affordance de la propuesta, no para navegar. */
.card-btn {
    padding: .4rem 1rem; border-radius: var(--radio-sm);
    border: 1.5px solid var(--rojo); color: var(--rojo-enlace);
    font-size: .86rem; font-weight: 700; white-space: nowrap;
    transition: background .12s, color .12s;
}
.card:hover .card-btn { background: var(--rojo); color: #fff; }
.card-cerrada .card-btn { display: none; }

.sueldo { color: var(--dinero); font-weight: 700; white-space: nowrap; }

@media (max-width: 640px) {
    .card { padding: 1rem 1.05rem; }
    .card-logo { width: 38px; height: 38px; font-size: .8rem; }
    .card-lado .sueldo { font-size: 1rem; }
    .card-hace { display: none; }
}

/* El aviso de cierre. Neutro de lejos, ámbar a 3 días, rojo el último día:
   la urgencia se gana, no se grita siempre (eso hace la competencia). */
.cierre { display: inline-flex; align-items: center; gap: .38rem; color: var(--ink-3); }
.cierre-pronto { color: var(--ambar); font-weight: 700; }
.cierre-urgente {
    color: var(--error); font-weight: 700;
    background: var(--error-bg); border: 1px solid #fecaca;
    padding: .12rem .6rem; border-radius: 999px;
}
.cerrada { color: var(--ink-4); }

/* ── Paginación ────────────────────────────────────────────────────────── */

.pagination {
    display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
    gap: .3rem; margin: 1.75rem 0 .5rem;
}
.pagination a, .pagination span {
    min-width: 2.3rem; padding: .45rem .7rem; text-align: center;
    font-size: .88rem; border-radius: var(--radio-sm);
}
.pagination a { background: var(--papel); border: 1px solid var(--linea); color: var(--ink-2); }
.pagination a:hover { background: var(--rojo-claro); border-color: var(--rojo-borde); color: var(--rojo-enlace); text-decoration: none; }
.pagination .current { background: var(--rojo); color: #fff; font-weight: 700; }
.pagination .ellipsis { min-width: 0; padding: .45rem .15rem; color: var(--ink-4); }

/* ── Buscador ──────────────────────────────────────────────────────────── */

.filters {
    display: flex; flex-wrap: wrap; gap: .6rem; align-items: center;
    background: var(--papel); border: 1px solid var(--linea);
    border-radius: var(--radio); padding: .95rem 1rem;
    margin-bottom: 1.1rem; box-shadow: var(--sombra);
}
.filters input[type="search"], .filters select {
    padding: .6rem .75rem; font-size: .95rem; font-family: inherit; color: var(--ink-2);
    background: #fff; border: 1px solid #d3d7dd; border-radius: var(--radio-sm);
}
.filters input[type="search"] { flex: 1 1 240px; min-width: 0; }
.filters select { flex: 0 1 auto; max-width: 100%; }
.filters input:focus, .filters select:focus {
    outline: none; border-color: var(--rojo); box-shadow: 0 0 0 3px var(--rojo-claro);
}
.filters button {
    padding: .6rem 1.4rem; font-size: .95rem; font-family: inherit; font-weight: 700;
    color: #fff; background: var(--rojo); border: none; border-radius: var(--radio-sm); cursor: pointer;
}
.filters button:hover { background: var(--rojo-oscuro); }

/* Cabecera y caja de filtros del listado (/convocatorias/). */
.buscar-cab { margin-bottom: 1.1rem; }
.buscar-cab h1 { margin-bottom: .15rem; }
.buscar-sub { font-size: 1rem; color: var(--ink-2); margin: 0; }
.buscar-sub strong { color: var(--rojo); }

/* La caja envuelve el formulario y las búsquedas populares; el formulario
   pierde su propia tarjeta (.filters-plana) para no anidar dos bordes. */
.caja-buscar {
    background: var(--papel); border: 1px solid var(--linea);
    border-radius: var(--radio); padding: 1rem 1.15rem;
    margin-bottom: 1.4rem; box-shadow: var(--sombra);
}
.filters-plana { border: none; box-shadow: none; padding: 0; margin: 0; border-radius: 0; }
/* El select se dimensiona con su opción más ancha y tira el botón a otra fila;
   acotado, el navegador trunca el texto de la opción él solo. */
.filters-plana select { max-width: 215px; }
.filters-plana input[type="search"] { flex-basis: 200px; }

.populares {
    display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
    margin: .9rem 0 0; padding-top: .9rem;
    border-top: 1px solid var(--linea-2);
    font-size: .85rem;
}
.populares-etiqueta { color: var(--ink-3); margin-right: .2rem; }
.populares a {
    padding: .28rem .8rem; border-radius: 999px;
    background: var(--fondo); border: 1px solid var(--linea);
    color: var(--ink-2); font-weight: 600; font-size: .84rem;
}
.populares a:hover { border-color: var(--rojo); color: var(--rojo-enlace); text-decoration: none; }

/* Cabeceras de los hubs de sueldos y guías: texto a la izquierda, indicadores
   (o ilustración) a la derecha. */
.sueldos-cab, .guias-cab {
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: 1.5rem; align-items: center; margin-bottom: 1.4rem;
}
.sueldos-cab h1, .guias-cab h1 { margin-bottom: .35rem; }
.sueldos-cab .buscar-sub, .guias-cab .buscar-sub { max-width: 52ch; }

.dato-fecha {
    display: inline-flex; align-items: center; gap: .45rem;
    margin-top: .8rem; padding: .4rem .9rem;
    background: #eef4fb; border: 1px solid #d4e3f5; border-radius: var(--radio-sm);
    font-size: .85rem; color: #1d4fb8;
}

.stats-tres { grid-template-columns: repeat(3, 1fr); margin: 0; }
.sueldos-cab .stats-tres { gap: .7rem; }
.guias-arte { display: flex; justify-content: center; }
.guias-arte svg { width: 100%; max-width: 260px; height: auto; }

@media (max-width: 900px) {
    .sueldos-cab, .guias-cab { grid-template-columns: 1fr; }
    .guias-arte { display: none; }
    .stats-tres { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) { .stats-tres { grid-template-columns: 1fr; } }

/* "Sobre estos datos": la letra chica del dataset, en grande. */
.sobre-datos {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
    background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio);
    padding: 1.3rem 1.5rem; margin-top: 1.4rem; box-shadow: var(--sombra);
    font-size: .89rem; color: var(--ink-2);
}
.sobre-datos-titulo {
    display: flex; align-items: center; gap: .45rem;
    font-weight: 700; color: var(--ink); margin-bottom: .4rem;
}
.sobre-datos-titulo .ico { color: var(--rojo); }
.sobre-datos p { margin: 0; line-height: 1.6; }
.sobre-datos ul { list-style: none; margin: 0; }
.sobre-datos li { padding-left: 1.1rem; position: relative; line-height: 1.7; }
.sobre-datos li::before { content: "✓"; position: absolute; left: 0; color: #15803d; font-weight: 700; }
@media (max-width: 760px) { .sobre-datos { grid-template-columns: 1fr; gap: 1rem; } }

/* Filas del índice de guías. */
.guias-filas { list-style: none; margin: 0; }
.guias-filas li { margin-bottom: .7rem; }
.guias-filas a {
    display: flex; align-items: center; gap: .9rem;
    background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio);
    padding: 1rem 1.15rem; box-shadow: var(--sombra); color: inherit;
    transition: border-color .12s, box-shadow .12s;
}
.guias-filas a:hover { border-color: var(--rojo-borde); box-shadow: var(--sombra-alta); text-decoration: none; }
.guias-filas .card-logo .ico { width: 1.25em; height: 1.25em; }
.guia-fila-cuerpo { flex: 1 1 auto; min-width: 0; }
.guia-fila-titulo { display: block; font-weight: 700; color: var(--ink); font-size: 1rem; line-height: 1.4; }
.guias-filas a:hover .guia-fila-titulo { color: var(--rojo-enlace); }
.guia-fila-desc { display: block; font-size: .87rem; color: var(--ink-3); line-height: 1.55; margin-top: .15rem; }
.guia-fila-lado {
    display: flex; flex-direction: column; align-items: flex-end; gap: .3rem;
    flex-shrink: 0;
}
.guia-fila-min {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .78rem; color: var(--ink-4); white-space: nowrap;
}
.guia-fila-ir { color: var(--ink-4); }
@media (max-width: 640px) { .guia-fila-lado { display: none; } }

.panel-texto { font-size: .9rem; line-height: 1.65; color: var(--ink-2); margin: 0; }

/* Tarjetas del hub de departamentos. */
.dep-grid {
    list-style: none; margin: 0;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem;
}
.dep-card {
    display: block; height: 100%;
    background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio);
    padding: 1rem 1.1rem; box-shadow: var(--sombra); color: inherit;
    transition: border-color .12s, box-shadow .12s;
}
.dep-card:hover { border-color: var(--rojo-borde); box-shadow: var(--sombra-alta); text-decoration: none; }
.dep-icono {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 9px; margin-bottom: .5rem;
}
.dep-nombre { display: block; font-weight: 700; color: var(--ink); font-size: 1rem; margin-bottom: .35rem; }
.dep-card:hover .dep-nombre { color: var(--rojo-enlace); }
.dep-cifras { display: flex; gap: 1.4rem; }
.dep-dato { display: flex; flex-direction: column; font-size: .76rem; color: var(--ink-4); line-height: 1.5; }
.dep-dato strong { font-size: 1.02rem; color: var(--ink); }

@media (max-width: 1000px) { .dep-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .dep-grid { grid-template-columns: 1fr; } }

@media (max-width: 640px) {
    .filters { padding: .8rem; }
    .filters select, .filters button { width: 100%; }
}

/* ── Hubs, chips y listados ────────────────────────────────────────────── */

.hub-links { margin-top: 2.25rem; }
.hub-intro { font-size: 1.02rem; color: var(--ink-2); max-width: var(--lectura); margin-bottom: 1.25rem; }

.chips { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; margin: 0 0 .5rem; }
.chips a {
    display: inline-block;
    padding: .42rem .9rem; font-size: .88rem; font-weight: 500;
    color: var(--ink-2); background: var(--papel);
    border: 1px solid var(--linea); border-radius: 999px;
}
.chips a:hover { background: var(--rojo-claro); border-color: var(--rojo-borde); color: var(--rojo-enlace); text-decoration: none; }

/* ── Tabla de entidades (/entidades/) ─────────────────────────────────────
   Rediseño 2026-07 según la propuesta: tabla con las cifras que deciden a
   quién mirar. Grid y no <table>: la fila entera es un enlace, y en móvil las
   celdas se reordenan en tarjeta, cosa que una tabla real no permite. */

.tabla-ent {
    background: var(--papel); border: 1px solid var(--linea);
    border-radius: var(--radio); box-shadow: var(--sombra);
    overflow: hidden;
}
.tabla-ent-cab, .fila-ent {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 5.2rem 6rem 6.5rem 9rem 2rem;
    gap: .8rem; align-items: center;
    padding: .7rem 1.1rem;
}
.tabla-ent-cab {
    font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: var(--ink-4); background: #f8f9fa;
    border-bottom: 2px solid var(--linea);
}
.tabla-ent-cab .col-n, .tabla-ent-cab .col-fecha { text-align: right; }

.tabla-ent-filas { list-style: none; margin: 0; }
.tabla-ent-filas li { border-bottom: 1px solid var(--linea-2); }
.tabla-ent-filas li:last-child { border-bottom: none; }
.fila-ent { color: inherit; }
.fila-ent:hover { background: #f8f9fa; text-decoration: none; }
.fila-ent:hover .ent-nombre { color: var(--rojo-enlace); }

.col-entidad { display: flex; align-items: center; gap: .7rem; min-width: 0; }
/* Misma caja para logo y monograma: si no, la columna baila según qué entidad
   tenga imagen, que es justo lo que se nota con ~20% de cobertura. */
.ent-logo-img {
    width: 42px; height: 42px; flex-shrink: 0;
    object-fit: contain; border-radius: 11px;
    padding: 3px; background: #fff; border: 1px solid var(--linea);
}
.ent-textos { display: flex; flex-direction: column; min-width: 0; }
.ent-nombre {
    font-size: .92rem; font-weight: 700; color: var(--ink); line-height: 1.35;
    /* Los nombres oficiales son larguísimos ("UNIDAD EJECUTORA 302 EDUCACION
       LEONCIO PRADO"): dos líneas y elipsis, sin romper la altura de la fila. */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.ent-tipo { font-size: .78rem; color: var(--ink-4); }

.fila-ent .col-n { text-align: right; font-size: .92rem; color: var(--ink-3); white-space: nowrap; }
.fila-ent .col-fuerte { font-weight: 800; color: var(--ink); font-size: 1rem; }
.fila-ent .col-fecha { text-align: right; font-size: .82rem; color: var(--ink-3); }
.col-ir { color: var(--ink-4); display: flex; justify-content: flex-end; }

/* Las que no convocan ahora siguen visibles y enlazadas —su página es archivo
   histórico— pero ceden el foco a las que sí. */
.fila-quieta .ent-nombre { color: var(--ink-2); font-weight: 600; }
.fila-quieta .col-fuerte { color: var(--ink-3); }

.tabla-ent-vacia { padding: 1.2rem; font-size: .95rem; color: var(--ink-3); }

/* Móvil: la fila se convierte en tarjeta de dos columnas; las celdas numéricas
   se etiquetan con su data-etiqueta porque la cabecera desaparece. */
@media (max-width: 760px) {
    .tabla-ent { background: none; border: none; box-shadow: none; overflow: visible; }
    .tabla-ent-cab { display: none; }
    .tabla-ent-filas li {
        border: 1px solid var(--linea); border-radius: var(--radio);
        background: var(--papel); box-shadow: var(--sombra); margin-bottom: .7rem;
    }
    .fila-ent { display: flex; flex-wrap: wrap; gap: .5rem .9rem; padding: .9rem 1rem; }
    .col-entidad { flex: 1 1 100%; }
    .col-opcional, .col-ir { display: none; }
    .fila-ent .col-n { text-align: left; }
    .fila-ent .col-n::before {
        content: attr(data-etiqueta) " ";
        font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
        color: var(--ink-4); font-weight: 700; margin-right: .25rem;
    }
}

/* Hubs de departamentos: listas largas, en columnas. */
.lista-hub {
    list-style: none; margin: 1.25rem 0 0;
    columns: 3; column-gap: 2rem;
}
.lista-hub li { break-inside: avoid; padding: .32rem 0; font-size: .94rem; line-height: 1.5; }
.muted { color: var(--ink-4); font-size: .84rem; }

@media (max-width: 900px) { .lista-hub { columns: 2; } }
@media (max-width: 600px) { .lista-hub { columns: 1; } }

/* ── Dato citable ──────────────────────────────────────────────────────────
   El párrafo con cifras que abre entidad, departamento, puesto y
   estadísticas. Marcado como afirmación verificable, no texto de relleno. */

.dato-citable {
    background: var(--papel);
    border: 1px solid var(--linea);
    border-left: 3px solid var(--rojo);
    border-radius: 0 var(--radio) var(--radio) 0;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    font-size: 1.02rem; line-height: 1.7;
    max-width: var(--lectura);
}

.nota { font-size: .88rem; color: var(--ink-3); margin-bottom: .9rem; }

/* ── Ficha de convocatoria ─────────────────────────────────────────────────
   Rediseño 2026-07 según la propuesta: cabecera con pills y datos clave,
   columna lateral con el resumen y la entidad, y las relacionadas al pie. */

.volver { font-size: .88rem; margin-bottom: .8rem; }
.volver a { color: var(--ink-3); }
.volver a:hover { color: var(--rojo-enlace); }

.aviso-vigente {
    display: flex; align-items: baseline; justify-content: space-between;
    flex-wrap: wrap; gap: .4rem 1.2rem;
    background: var(--verde-bg); border: 1px solid var(--verde-bord);
    border-radius: var(--radio); padding: .9rem 1.15rem;
    margin-bottom: 1.25rem; font-size: .95rem; color: var(--verde-ok);
}
.aviso-vigente strong { color: var(--verde-ok); }
.aviso-cuerpo { display: flex; align-items: flex-start; gap: .6rem; }
.aviso-cuerpo .ico { margin-top: .22em; flex-shrink: 0; }
.aviso-revisada { font-size: .82rem; color: #3f855e; white-space: nowrap; }

/* Dos columnas: la ficha manda, el lateral acompaña. En móvil el lateral baja
   entero: el resumen repite datos que la cabecera ya enseña. */
.ficha-cols {
    display: grid; grid-template-columns: minmax(0, 1fr) 320px;
    gap: 1.4rem; align-items: start;
}
.ficha-aside { display: flex; flex-direction: column; gap: .9rem; min-width: 0; }
.ficha-aside .cta-alerta { margin: 0; }

@media (max-width: 900px) { .ficha-cols { grid-template-columns: 1fr; } }

.ficha-pills { display: flex; flex-wrap: wrap; gap: .5rem; margin: .9rem 0 1.1rem; }
.pill {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .3rem .85rem; border-radius: 999px;
    background: var(--fondo); border: 1px solid var(--linea);
    font-size: .88rem; font-weight: 600; color: var(--ink-2);
}
.pill .ico { color: var(--ink-4); }
.pill-sueldo { background: var(--verde-bg); border-color: var(--verde-bord); color: var(--dinero); font-weight: 700; }

/* Los cuatro datos que deciden si sigue leyendo. */
.ficha-stats {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem 1.25rem;
    padding: .95rem 0; margin-bottom: 1.1rem;
    border-top: 1px solid var(--linea-2); border-bottom: 1px solid var(--linea-2);
}
.ficha-stats > div { min-width: 0; }
.stat-etiqueta {
    display: flex; align-items: center; gap: .35rem;
    font-size: .76rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
    color: var(--ink-4); margin-bottom: .15rem;
}
.stat-valor { display: block; font-weight: 700; color: var(--ink); font-size: .98rem; overflow-wrap: anywhere; }
.stat-faltan { display: block; font-size: .8rem; font-weight: 700; color: var(--rojo); }

@media (max-width: 640px) { .ficha-stats { grid-template-columns: 1fr 1fr; } }

.ficha-acciones { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: .5rem; }

.btn-secundario {
    display: inline-block;
    padding: .75rem 1.4rem;
    font-size: 1rem; font-family: inherit; font-weight: 700; line-height: 1.3;
    color: var(--ink-2); background: var(--papel);
    border: 1px solid var(--linea); border-radius: var(--radio-sm);
    cursor: pointer; text-align: center;
    transition: border-color .12s, color .12s;
}
.btn-secundario:hover { border-color: var(--rojo); color: var(--rojo-enlace); text-decoration: none; }

/* Paneles del lateral. */
.panel {
    background: var(--papel); border: 1px solid var(--linea);
    border-radius: var(--radio); padding: 1.05rem 1.2rem;
    box-shadow: var(--sombra);
}
.panel h2 { font-size: .98rem; margin: 0 0 .7rem; }
.panel .chips { margin: 0; }
.panel-pie {
    display: inline-flex; align-items: center; gap: .25rem;
    margin-top: .7rem; font-size: .86rem; font-weight: 600;
}
.panel-pie .ico { width: .95em; height: .95em; }

.sobre-entidad { display: flex; align-items: center; gap: .75rem; }
.entidad-logo {
    width: 46px; height: 46px; flex-shrink: 0;
    object-fit: contain; border-radius: 9px;
    background: #fff; border: 1px solid var(--linea-2); padding: 3px;
}
.sobre-entidad-texto { min-width: 0; }
.sobre-entidad-nombre { font-weight: 700; color: var(--ink); font-size: .92rem; line-height: 1.4; margin: 0; }
.sobre-entidad-meta { font-size: .8rem; color: var(--ink-3); line-height: 1.5; margin: 0; }

.resumen { list-style: none; margin: 0; }
.resumen li {
    display: flex; align-items: baseline; justify-content: space-between; gap: .8rem;
    padding: .42rem 0; font-size: .88rem;
    border-bottom: 1px solid var(--linea-2);
}
.resumen li:last-child { border-bottom: none; }
.resumen-etiqueta { display: inline-flex; align-items: center; gap: .4rem; color: var(--ink-3); white-space: nowrap; }
.resumen-etiqueta .ico { color: var(--ink-4); }
.resumen-valor { font-weight: 600; color: var(--ink); text-align: right; min-width: 0; overflow-wrap: anywhere; }

/* Relacionadas al pie, con su "Ver todas". */
.relacionadas { margin-top: 1.6rem; }
.relacionadas-cab {
    display: flex; align-items: baseline; justify-content: space-between;
    flex-wrap: wrap; gap: .3rem 1rem; margin-bottom: .9rem;
}
.relacionadas-cab h2 { margin: 0; font-size: 1.15rem; }
.relacionadas-cab a {
    display: inline-flex; align-items: center; gap: .25rem;
    font-size: .88rem; font-weight: 600;
}
.relacionadas-cab .ico { width: .95em; height: .95em; }

.aviso-cerrada {
    background: var(--ambar-bg); border: 1px solid #fde68a;
    border-radius: var(--radio); padding: .9rem 1.15rem;
    margin-bottom: 1.25rem; font-size: .95rem; color: #78350f;
}
.aviso-cerrada strong { color: #78350f; }

.ficha {
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    padding: 1.75rem 2rem 2rem;
    box-shadow: var(--sombra);
}
.ficha h1 { font-size: 1.65rem; }
.ficha h2 {
    font-size: 1.1rem; margin: 1.9rem 0 .8rem;
    padding-bottom: .45rem; border-bottom: 1px solid var(--linea);
}
.ficha-entidad { font-size: 1.02rem; color: var(--ink-3); margin-bottom: 0; }
.ficha-entidad a { font-weight: 700; }

/* dt/dd en dos columnas sin tocar el markup: etiqueta fija, valor al resto. */
.requisitos {
    display: grid;
    grid-template-columns: minmax(9rem, 12rem) 1fr;
    gap: 0;
}
.requisitos dt {
    grid-column: 1;
    padding: .62rem 1rem .62rem 0;
    font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: var(--ink-4);
    border-top: 1px solid var(--linea-2);
}
.requisitos dd {
    grid-column: 2;
    padding: .62rem 0;
    color: var(--ink-2);
    border-top: 1px solid var(--linea-2);
    /* Los requisitos son párrafos largos que vienen crudos del portal. */
    line-height: 1.7;
}
.requisitos dt:first-of-type, .requisitos dd:first-of-type { border-top: none; }

/* Cuando la entidad no detalló nada: se dice, y se manda a las bases. */
.sin-requisitos { color: var(--ink-3); font-size: .95rem; }

@media (max-width: 640px) {
    .ficha { padding: 1.25rem 1.1rem 1.5rem; }
    .ficha h1 { font-size: 1.38rem; }
    .requisitos { grid-template-columns: 1fr; }
    .requisitos dt { padding-bottom: .1rem; }
    .requisitos dd { padding-top: 0; border-top: none; padding-bottom: .8rem; }
    .requisitos dt:first-of-type { border-top: none; }
}

/* ── Tablas (cronograma del proceso, sueldos por puesto) ───────────────── */

.cronograma, .tabla-sueldos {
    width: 100%; border-collapse: collapse;
    font-size: .93rem; margin-bottom: 1.25rem;
}
.cronograma th, .tabla-sueldos th {
    text-align: left; padding: .6rem .8rem;
    font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: var(--ink-3); background: #f8f9fa;
    border-bottom: 2px solid var(--linea);
    white-space: nowrap;
}
.cronograma td, .tabla-sueldos td {
    padding: .6rem .8rem; border-bottom: 1px solid var(--linea-2);
    color: var(--ink-2); vertical-align: top;
}
.cronograma td:not(:first-child), .tabla-sueldos td:not(:first-child) { white-space: nowrap; }
.tabla-sueldos {
    background: var(--papel); border: 1px solid var(--linea);
    border-radius: var(--radio); overflow: hidden;
}
.tabla-sueldos tbody tr:hover { background: #f8f9fa; }
.tabla-sueldos tbody tr:last-child td { border-bottom: none; }
/* El promedio es la columna 3 desde que el ranking lleva numeración. */
.tabla-sueldos td:nth-child(3) { color: var(--dinero); font-weight: 700; }
.tabla-sueldos .col-rango { color: var(--ink-4); font-size: .84rem; width: 2.2rem; }
.tabla-sueldos .col-suave { color: var(--ink-3); }
.tabla-sueldos .badge-nuevo { margin-left: .4rem; }

/* En móvil las tablas se desplazan solas en vez de romper el ancho. */
@media (max-width: 640px) {
    .cronograma, .tabla-sueldos { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ── Bases y documentos ────────────────────────────────────────────────────
   La sección que diferencia al sitio de los agregadores que rebotan enlaces. */

.documentos { list-style: none; margin: 0 0 .75rem; }
.documentos li {
    display: flex; align-items: center; gap: .8rem;
    padding: .7rem .9rem; margin-bottom: .4rem;
    background: #f8f9fa; border: 1px solid var(--linea); border-radius: var(--radio-sm);
}
.documentos li:hover { border-color: var(--rojo-borde); background: var(--rojo-claro); }
.doc-datos { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .05rem; }
.doc-datos .doc { overflow-wrap: anywhere; }
/* Botón decorativo: el título ya es el enlace (por eso aria-hidden y sin tab).
   Existe para dar el affordance de "Descargar" que pide la propuesta. */
.doc-btn {
    flex-shrink: 0;
    padding: .35rem .9rem; border-radius: var(--radio-sm);
    border: 1.5px solid var(--rojo); color: var(--rojo-enlace);
    font-size: .84rem; font-weight: 700; white-space: nowrap;
    transition: background .12s, color .12s;
}
.doc-btn:hover { background: var(--rojo); color: #fff; text-decoration: none; }
@media (max-width: 640px) { .doc-btn { display: none; } }
.documentos .doc { font-weight: 600; }
.documentos .doc::before { content: "📄"; margin-right: .4rem; }
.documentos .doc-xlsx::before { content: "📊"; }
.documentos .doc-docx::before, .documentos .doc-doc::before { content: "📝"; }
.doc-meta { font-size: .76rem; color: var(--ink-4); text-transform: uppercase; letter-spacing: .03em; }
.doc-fuente { font-size: .84rem; color: var(--ink-3); }

/* ── Botón ─────────────────────────────────────────────────────────────── */

.btn-primary {
    display: inline-block;
    padding: .75rem 1.6rem;
    font-size: 1rem; font-family: inherit; font-weight: 700; line-height: 1.3;
    color: #fff; background: var(--rojo);
    border: none; border-radius: var(--radio-sm);
    cursor: pointer; text-align: center;
    transition: background .12s;
}
.btn-primary:hover { background: var(--rojo-oscuro); color: #fff; text-decoration: none; }

/* ── CTA de alerta ─────────────────────────────────────────────────────── */

.cta-alerta {
    display: block;
    background: linear-gradient(180deg, var(--rojo-claro), #fdf8f8);
    border: 1px solid var(--rojo-borde);
    border-radius: var(--radio);
    padding: 1.3rem 1.45rem;
    margin: 2rem 0;
}
.cta-alerta-titulo { font-size: 1.05rem; font-weight: 700; color: var(--ink); margin-bottom: .35rem; }
.cta-alerta-texto { font-size: .92rem; line-height: 1.65; color: var(--ink-2); max-width: 62ch; margin-bottom: .9rem; }

/* ── Alertas por correo ────────────────────────────────────────────────── */

.alertas { max-width: 660px; }
.alertas-intro { font-size: 1.02rem; line-height: 1.7; margin-bottom: 1.6rem; }

.form-alerta {
    background: var(--papel); border: 1px solid var(--linea);
    border-radius: var(--radio); padding: 1.4rem; box-shadow: var(--sombra);
}
.form-alerta .campo { margin-bottom: .95rem; }
.form-alerta label {
    display: block; margin-bottom: .3rem;
    font-size: .84rem; font-weight: 700; color: var(--ink-2);
}
.form-alerta input, .form-alerta select {
    width: 100%; padding: .65rem .8rem;
    font-size: .98rem; font-family: inherit; color: var(--ink-2);
    background: #fff; border: 1px solid #d3d7dd; border-radius: var(--radio-sm);
}
.form-alerta input:focus, .form-alerta select:focus {
    outline: none; border-color: var(--rojo); box-shadow: 0 0 0 3px var(--rojo-claro);
}
.form-alerta .btn-primary { width: 100%; margin-top: .4rem; }
.form-nota { margin-top: .8rem; font-size: .82rem; line-height: 1.6; color: var(--ink-3); }

.form-error {
    background: var(--error-bg); border: 1px solid #fecaca; color: var(--error);
    border-radius: var(--radio-sm); padding: .7rem .9rem;
    margin-bottom: 1rem; font-size: .89rem;
}
.form-error ul { margin: 0; padding-left: 1.1rem; }
.campo-error { display: block; margin-top: .25rem; font-size: .82rem; color: var(--error); }

.alertas-como { margin-top: 2rem; }
.alertas-como ol { margin-left: 1.2rem; }
.alertas-como li { line-height: 1.7; margin-bottom: .35rem; }
.alertas-nota { margin-top: .6rem; font-size: .88rem; color: var(--ink-3); }

.alerta-estado { max-width: 52ch; margin: 2.5rem auto; text-align: center; }
.alerta-estado p { font-size: 1.02rem; line-height: 1.7; }
.alerta-estado-acciones {
    display: flex; flex-wrap: wrap; gap: 1rem;
    align-items: center; justify-content: center;
    margin-top: 1.5rem;
}

/* ── Páginas de error (404 / 500) ──────────────────────────────────────── */

.error-pagina { max-width: 52ch; margin: 3rem auto; text-align: center; }
.error-pagina p { font-size: 1.02rem; line-height: 1.7; color: var(--ink-2); }
.error-acciones {
    display: flex; flex-wrap: wrap; gap: 1rem;
    align-items: center; justify-content: center;
    margin-top: 1.5rem;
}

/* ── Guías editoriales ─────────────────────────────────────────────────── */

.guia { max-width: var(--lectura); }
.migas { font-size: .82rem; color: var(--ink-4); margin-bottom: .6rem; }
.migas a { color: var(--ink-3); }
.guia h1 { font-size: 1.75rem; }
.guia-intro { font-size: 1.08rem; line-height: 1.75; color: var(--ink-2); margin-bottom: 1.5rem; }

.guia-seccion { margin: 1.9rem 0; }
.guia-seccion h2 { font-size: 1.2rem; margin-bottom: .6rem; }
.guia-seccion p { line-height: 1.8; }
.guia-seccion ul, .guia-seccion ol { margin: 0 0 .9rem 1.15rem; }
.guia-seccion li { line-height: 1.75; margin-bottom: .3rem; }

/* Las cifras vivas de la guía: lo que la hace citable, separado del cuerpo. */
.guia-datos {
    display: block;
    background: var(--papel); border: 1px solid var(--linea); border-left: 3px solid var(--rojo);
    border-radius: 0 var(--radio) var(--radio) 0;
    padding: 1rem 1.25rem; margin: 1.5rem 0;
}
.guia-datos p { font-size: .97rem; line-height: 1.7; }
.guia-datos-cta { margin-top: .5rem; font-size: .9rem; font-weight: 600; }

.guia-meta {
    display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
    font-size: .86rem; color: var(--ink-3); margin-bottom: 1.5rem;
}
.guia-meta span { display: inline-flex; align-items: center; gap: .4rem; }
.guia-meta .ico { color: var(--ink-4); }

/* Icono de sección: tono estable por título, como los monogramas. */
.seccion-icono {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 9px;
    margin-right: .6rem; vertical-align: -.6rem;
}
.seccion-icono .ico { width: 1.1em; height: 1.1em; }

.guia-faq { margin-top: 2.25rem; padding-top: 1.5rem; border-top: 1px solid var(--linea); }
.guia-faq h2 { margin-top: 0; }
/* <details> nativo: acordeón sin JS. El chevron gira con [open]. */
.faq-item {
    margin-bottom: .6rem;
    background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio-sm);
}
.faq-item summary {
    cursor: pointer; list-style: none;
    display: flex; justify-content: space-between; align-items: center; gap: .8rem;
    padding: .8rem 1rem;
    font-size: .96rem; font-weight: 700; color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: "›"; font-size: 1.3rem; color: var(--ink-4);
    transform: rotate(90deg); transition: transform .12s; flex-shrink: 0;
}
.faq-item[open] summary::after { transform: rotate(-90deg); }
.faq-item[open] summary { border-bottom: 1px solid var(--linea-2); }
.faq-item p { line-height: 1.75; margin: 0; padding: .8rem 1rem; font-size: .93rem; }

/* Índice y relacionadas del lateral de la guía. */
.toc { list-style: none; margin: 0; }
.toc li { border-bottom: 1px solid var(--linea-2); }
.toc li:last-child { border-bottom: none; }
.toc a {
    display: block; padding: .45rem 0;
    font-size: .88rem; color: var(--ink-2); line-height: 1.45;
}
.toc a:hover { color: var(--rojo-enlace); text-decoration: none; }
.toc-relacionadas a { font-weight: 600; }

.panel-datos h2 { display: flex; align-items: center; gap: .45rem; }
.panel-datos h2 .ico { color: var(--rojo); }

.panel-suscribir { background: linear-gradient(180deg, var(--rosa), #fdf8f8); border-color: var(--rojo-borde); }
.panel-form { display: flex; flex-direction: column; gap: .5rem; margin-top: .7rem; }
.panel-form input {
    width: 100%; padding: .6rem .8rem;
    font-size: .92rem; font-family: inherit; color: var(--ink-2);
    background: #fff; border: 1px solid #d3d7dd; border-radius: var(--radio-sm);
}
.panel-form input:focus { outline: none; border-color: var(--rojo); box-shadow: 0 0 0 3px var(--rojo-claro); }
.panel-form .btn-primary { width: 100%; padding: .6rem 1rem; font-size: .92rem; }

.guia-aviso {
    margin-top: 1.75rem; padding-top: .8rem;
    border-top: 1px dashed var(--linea);
    font-size: .84rem; color: var(--ink-3);
}

/* ── Impresión ─────────────────────────────────────────────────────────────
   La ficha se imprime: es el papel que el postulante se lleva con los
   requisitos y el cronograma. Fuera cabecera, pie y llamados a la acción. */

@media print {
    .site-header, .site-footer, .cta-alerta, .pagination, .filters,
    .volver, .ficha-aside, .ficha-acciones, .relacionadas, .doc-btn { display: none; }
    body { background: #fff; }
    .ficha-cols { display: block; }
    .ficha { border: none; box-shadow: none; padding: 0; }
    a { color: var(--ink); text-decoration: none; }
}