/* ==========================================================
   Refinamiento de tarjetas de convocatorias
   - Tipografía más pequeña y consistente en todos los tamaños
   - Correcciones visuales (estado "anulada", alineación, alturas)
   Se carga después de index.css y show_glass.css.
========================================================== */

/* ---------- Encabezado de la tarjeta ---------- */
.convocatoria-nombre {
    font-size: clamp(0.82rem, 1.6vw, 0.95rem);
    letter-spacing: 0.01em;
    line-height: 1.3;
    /* Justificado como la descripción: sin guiones y con la última línea a la izquierda */
    text-align: justify;
    text-justify: inter-word;
    text-align-last: left;
    hyphens: none;
    -webkit-hyphens: none;
}

.convocatoria-estado {
    font-size: clamp(0.58rem, 1.3vw, 0.66rem);
    letter-spacing: 0.02em;
    padding: 0.3rem 0.7rem;
    white-space: nowrap;
}

/* Estado "anulada": no tenía estilo y se veía sin fondo */
.convocatoria-estado.anulada {
    background: #f1f5f9;
    color: #475569;
    box-shadow: inset 0 0 0 1px #cbd5e1;
}

/* El brillo animado solo tiene sentido en estados activos */
.convocatoria-estado.finalizada::after,
.convocatoria-estado.anulada::after {
    display: none;
}

/* ---------- Descripción, tipo, sede ---------- */
.convocatoria-descripcion {
    font-size: clamp(0.66rem, 1.5vw, 0.72rem);
    line-height: 1.55;
    color: #4b5563;
    /* Justificado sin cortar palabras (sin guiones) */
    text-align: justify;
    text-justify: inter-word;
    text-align-last: left;
    hyphens: none;
    -webkit-hyphens: none;
    word-break: normal;
    overflow-wrap: normal;
}

.convocatoria-tipo {
    font-size: clamp(0.6rem, 1.4vw, 0.66rem);
    padding: 0.28rem 0.65rem;
    line-height: 1.3;
}

.sede-modalidad {
    font-size: clamp(0.6rem, 1.4vw, 0.66rem);
    line-height: 1.4;
    gap: 0.3rem;
}

/* ---------- Fila de chips: estado · tipo · sede · modalidad ---------- */
.chips-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.65rem;
}

.chips-row .chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    max-width: 100%;
    min-height: 22px;
    margin: 0;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

/* El tipo puede ser largo: una línea con puntos suspensivos (el título completo está en el tooltip) */
.chips-row .chip-tipo {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chips-row .chip-sede {
    color: #374151;
    background: #f3f4f6;
}

.chips-row .chip-sede svg {
    flex-shrink: 0;
    color: #6b7280;
}

.chips-row .chip-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chips-row .chip-modalidad {
    color: #0e7490;
    background: #ecfeff;
}

/* Celular: el tipo largo ocupaba una fila entera cortado con "..." y la sede quedaba sola en
   otra. Arriba van los chips cortos (estado · modalidad · sede, la sede se recorta si no
   cabe) y el tipo pasa abajo, completo y en varias líneas si hace falta. */
@media (max-width: 768px) {
    .chips-row {
        gap: 0.3rem;
    }

    .chips-row .chip {
        flex: 0 0 auto;
        font-size: 0.6rem;
        padding: 0.2rem 0.55rem;
    }

    .chips-row .chip-modalidad {
        order: 1;
    }

    .chips-row .chip-sede {
        order: 2;
        flex: 0 1 auto;
        min-width: 0;
    }

    .chips-row .chip-tipo {
        order: 3;
        flex: 0 1 auto;
        white-space: normal;
        overflow: visible;
        border-radius: 10px;
        line-height: 1.3;
    }
}

/* ---------- Descripción recortada a 3 líneas con "Ver más" ---------- */
.convocatoria-descripcion {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.convocatoria-descripcion.is-expanded {
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    overflow: visible;
}

.descripcion-toggle {
    align-self: flex-start;
    margin: 0 0 0.65rem;
    padding: 0;
    font-family: 'Oswald', sans-serif;
    font-size: 0.64rem;
    font-weight: 600;
    color: #2563eb;
    background: none;
    border: 0;
    cursor: pointer;
}

.descripcion-toggle:hover {
    color: #1e40af;
    text-decoration: underline;
}

.descripcion-toggle[hidden] {
    display: none;
}

/* Con el botón visible, la descripción se acerca a él (sin :has el margen es simplemente mayor) */
.convocatoria-descripcion:has(+ .descripcion-toggle:not([hidden])) {
    margin-bottom: 0.2rem;
}

/* ---------- Títulos de sección ---------- */
.cargos-section h4,
.documentos-section h4 {
    font-size: clamp(0.6rem, 1.2vw, 0.66rem);
    letter-spacing: 0.06em;
    margin-bottom: 0.4rem;
}

/* ---------- Cargos: mismo tamaño en escritorio, tablet y móvil ---------- */
.cargo-card,
.cargo-card div {
    font-size: 0.62rem;
    line-height: 1.35;
}

.cargo-card {
    padding: 0.5rem 0.55rem;
    min-height: auto;
}

.cargo-card div {
    margin-bottom: 0.1rem;
}

.btn-postularme {
    font-size: 0.58rem;
    padding: 0.28rem 0.7rem;
    line-height: 1.3;
}

/* "Aplicar" compacto: va a la derecha, a la altura de los datos, sin sumar una fila */
.cargo-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 0.6rem;
    align-items: center;
}

.cargo-card > div {
    grid-column: 1;
}

.cargo-card > .btn-postularme {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    width: auto;
    margin: 0;
    padding: 0.28rem 0.75rem;
    white-space: nowrap;
    border-width: 1px;
    border-radius: 999px;
    /* Azul de la paleta de la tarjeta (título #0b3d91, "Ver Cronograma" #2563eb) */
    color: #1e40af;
    background: #eff6ff;
    border-color: #bfdbfe;
    font-weight: 600;
    letter-spacing: 0.02em;
    box-shadow: none;
    transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.cargo-card > .btn-postularme::after {
    content: "→";
    margin-left: 0.3rem;
    transition: transform 0.2s;
}

.cargo-card > .btn-postularme:hover {
    transform: none;
    color: #fff;
    background: #2563eb;
    border-color: #2563eb;
    box-shadow: 0 3px 8px -3px rgba(37, 99, 235, 0.55);
}

.cargo-card > .btn-postularme:hover::after {
    transform: translateX(2px);
}

/* Pantallas muy angostas: las tarjetas son de ~150px, el botón baja pero sigue compacto */
@media (max-width: 480px) {
    .cargo-card {
        grid-template-columns: minmax(0, 1fr);
    }

    .cargo-card > .btn-postularme {
        grid-column: 1;
        grid-row: auto;
        justify-self: end;
        margin-top: 0.25rem;
    }
}

/* "Ver más" de cargos y documentos: enlace compacto en vez de un botón grande con borde */
.ver-mas-container {
    margin-top: 0.15rem;
    line-height: 1;
}

.btn-ver-mas {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.55rem;
    font-size: 0.6rem;
    line-height: 1.3;
    background: transparent;
    border: 0;
    border-radius: 999px;
    color: #4f46e5;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: background 0.15s, color 0.15s;
}

/* Flecha que indica hacia dónde se despliega */
.btn-ver-mas::after {
    content: "";
    width: 0.32rem;
    height: 0.32rem;
    margin-top: -0.12rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}

.btn-ver-mas[data-expanded="true"]::after {
    margin-top: 0.1rem;
    transform: rotate(-135deg);
}

/* El hover dejaba el texto en gris (#7e7e7e) sobre fondo índigo: casi ilegible */
.btn-ver-mas:hover {
    background: rgba(99, 102, 241, 0.1);
    color: #4338ca;
    transform: none;
}

/* ---------- Tarjeta sin cargos: una sola línea discreta ---------- */
.cargos-section--vacia {
    flex: none;
    margin-bottom: 0.35rem;
}

.cargos-section--vacia h4 {
    display: none;
}

/* Pisa el estilo genérico ".container > p" (padding grande y fondo) y el grid de 2 columnas */
.cargos-section--vacia .cargos-grid {
    display: block;
}

.cargos-section--vacia .sin-cargos {
    display: inline-block;
    margin: 0;
    padding: 0.2rem 0.6rem;
    font-size: 0.62rem;
    font-style: italic;
    line-height: 1.3;
    color: #6b7280;
    background: #f9fafb;
    border: 1px dashed #d1d5db;
    border-radius: 0.4rem;
}

/* ---------- Botones de acción ---------- */
.btn-base {
    font-size: clamp(0.64rem, 1.1vw, 0.72rem);
    padding: 0.32rem 0.9rem;
}

/* ---------- Línea de tiempo plegada: una sola fila compacta (escritorio) ----------
   Antes: fila del botón ▼ (con su línea decorativa) + fila de puntos = ~110px.
   Ahora: los puntos ocupan el ancho y el botón ▼ queda al final, en la misma fila.
   Al desplegar (.expanded) todo vuelve a su diseño original. */
@media (min-width: 769px) {
    .timeline-container.collapsed {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        column-gap: 0.75rem;
        margin: 0.5rem 0 0.5rem;
    }

    .timeline-container.collapsed .timeline {
        grid-column: 1;
        grid-row: 1;
        margin: 0;
        padding: 0;
        height: 26px;
    }

    .timeline-container.collapsed .timeline-toggle-wrapper {
        grid-column: 2;
        grid-row: 1;
        margin: 0;
    }

    /* La línea de tiempo ya dibuja su propia línea; esta era redundante y duplicaba la fila */
    .timeline-container.collapsed .timeline-collapsed-line {
        display: none;
    }

    .timeline-container.collapsed .timeline-toggle-btn {
        width: 26px;
        height: 26px;
        font-size: 0.6rem;
    }
}

/* ---------- Línea de tiempo desplegada en escritorio: siempre en UNA fila ----------
   Antes: repeat(auto-fit, minmax(90px, 1fr)) repartía las etapas según el ancho y,
   con la tarjeta algo angosta, la última bajaba a una segunda fila.
   Ahora: una columna por etapa (--n la fija el HTML) y las tarjetas se ajustan al ancho. */
@media (min-width: 769px) {
    .timeline-container.expanded .timeline {
        grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr));
        justify-items: stretch;
        gap: 0.4rem;
    }

    .timeline-container.expanded .timeline-item {
        min-width: 0;
        padding: 0 0.1rem;
    }

    .timeline-container.expanded .timeline-content {
        padding: 0.45rem 0.35rem;
        text-align: center;
        overflow-wrap: anywhere;
    }
}

/* ---------- Línea de tiempo desplegada en móvil ----------
   Antes: la línea vertical no coincidía con los puntos y las tarjetas quedaban
   centradas y con anchos distintos, con mucho margen. Ahora: línea y puntos
   alineados en un mismo eje, tarjetas compactas alineadas a la izquierda. */
@media (max-width: 768px) {
    .timeline-container.expanded .timeline-toggle-wrapper {
        margin: 0.25rem 0;
    }

    .timeline-container.expanded .timeline-toggle-btn {
        width: 28px;
        height: 28px;
        font-size: 0.65rem;
    }

    .timeline-container.expanded .timeline {
        grid-template-columns: minmax(0, 1fr);
        justify-items: stretch;
        gap: 0.5rem;
        margin: 0.35rem 0 0.5rem;
        padding: 0;
        min-height: 0;
        max-width: none;
    }

    /* Eje vertical: de centro del primer punto a centro del último */
    .timeline-container.expanded .timeline::before {
        top: 1rem;
        bottom: 1rem;
        left: calc(0.9rem - 1px);
        width: 2px;
        height: auto;
        filter: none;
        background: linear-gradient(180deg, rgba(0, 242, 254, 0.4), rgba(79, 172, 254, 0.4));
    }

    .timeline-container.expanded .timeline-progress {
        top: 1rem;
        left: calc(0.9rem - 1px);
        width: 2px;
        height: calc((100% - 2rem) * var(--progress, 0));
        transform: none;
    }

    /* Marca de "hoy": solo una pequeña muesca sobre el eje (sin etiqueta) */
    .timeline-container.expanded .timeline-today {
        top: calc(1rem + (100% - 2rem) * var(--today-pos, 0));
        left: calc(0.9rem - 0.55rem);
        width: 1.1rem;
        height: 2px;
        transform: none;
        animation: none;
    }

    .timeline-container.expanded .timeline-today::after {
        display: none;
    }

    .timeline-container.expanded .timeline-item {
        margin: 0;
        padding: 0 0 0 2.2rem;
        text-align: left;
        transform: none;
    }

    .timeline-container.expanded .timeline-item:hover {
        transform: none;
    }

    /* Punto centrado sobre el eje y a mitad de la tarjeta (sin transform: lo usa la animación) */
    .timeline-container.expanded .timeline-dot {
        position: absolute;
        left: 0.475rem;
        top: calc(50% - 0.425rem);
        width: 0.85rem;
        height: 0.85rem;
        margin: 0;
        border-width: 0.12rem;
    }

    /* Tarjeta compacta */
    .timeline-container.expanded .timeline-content {
        margin: 0;
        padding: 0.4rem 0.7rem;
        display: flex;
        flex-direction: column;
        gap: 0.12rem;
        text-align: left;
        line-height: 1.25;
        border-radius: 0.5rem;
    }

    .timeline-container.expanded .timeline-content span {
        margin: 0;
        font-size: 0.6rem;
        letter-spacing: 0.05em;
    }

    .timeline-container.expanded .timeline-content .dates {
        font-size: 0.58rem;
        color: #cbd5e1;
    }

    .timeline-container.expanded .timeline-item:hover .timeline-content {
        transform: none;
        box-shadow: none;
    }

    /* Jerarquía: lo pasado se atenúa y la etapa en curso destaca */
    .timeline-container.expanded .timeline-item.finished .timeline-content {
        opacity: 0.8;
    }

    .timeline-container.expanded .timeline-item.active .timeline-content {
        border-color: rgba(255, 59, 59, 0.55);
        box-shadow: 0 0 0.6rem rgba(255, 59, 59, 0.25);
    }
}

/* ---------- Acciones de la tarjeta: iconos con burbuja "nube" ----------
   Reemplazan la fila de botones grandes (Ver Cronograma / Ver Postulantes / Ver Horarios). */
.convocatoria-nombre {
    min-width: 0;
}

.top-info-actions {
    gap: 0.4rem;
}

.top-info-actions .btn-ver-mini {
    position: relative;
    text-decoration: none;
}

/* Postulantes: turquesa, a juego con el borde de la tarjeta */
.top-info-actions .btn-ver-mini.tip-postulantes {
    color: #0e7490;
    background: rgba(14, 116, 144, 0.08);
    border-color: rgba(14, 116, 144, 0.25);
}

.top-info-actions .btn-ver-mini.tip-postulantes:hover {
    color: #fff;
    background: #0e7490;
    border-color: #0e7490;
    box-shadow: 0 4px 10px rgba(14, 116, 144, 0.3);
}

/* Horarios: solo móvil (en escritorio la línea de tiempo plegada ya se ve en la tarjeta) */
.top-info-actions .btn-ver-mini.tip-horarios {
    display: none;
    color: #4f46e5;
    background: rgba(79, 70, 229, 0.08);
    border-color: rgba(79, 70, 229, 0.25);
}

.top-info-actions .btn-ver-mini.tip-horarios:hover {
    color: #fff;
    background: #4f46e5;
    border-color: #4f46e5;
    box-shadow: 0 4px 10px rgba(79, 70, 229, 0.3);
}

@media (max-width: 768px) {
    .top-info-actions .btn-ver-mini.tip-horarios {
        display: flex;
    }

    /* Con los 6 iconos en una sola fila el nombre quedaba en una columna angosta:
       las acciones siguen al costado, pero en 2 filas de 3 */
    .top-info-actions {
        display: grid;
        grid-template-columns: repeat(3, 30px);
        gap: 0.35rem;
    }

    /* La columna derecha queda pegada al borde: su burbuja se abre hacia la izquierda */
    .top-info-actions .tip-btn:nth-child(3n)::after {
        left: auto;
        right: -6px;
        transform: translate(0, -4px) scale(0.94);
    }

    .top-info-actions .tip-btn:nth-child(3n):hover::after,
    .top-info-actions .tip-btn:nth-child(3n):focus-visible::after {
        transform: translate(0, 0) scale(1);
    }
}

/* Burbuja tipo nube con cola, debajo del botón */
.tip-btn::before,
.tip-btn::after {
    position: absolute;
    left: 50%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 40;
}

.tip-btn::after {
    content: attr(data-tip);
    top: calc(100% + 10px);
    transform: translate(-50%, -4px) scale(0.94);
    padding: 0.32rem 0.75rem;
    font-family: 'Oswald', sans-serif;
    font-size: 0.64rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.2;
    white-space: nowrap;
    color: #1e3a8a;
    background: #fff;
    border: 1px solid #dbeafe;
    border-radius: 999px;
    box-shadow: 0 6px 16px -6px rgba(30, 58, 138, 0.35);
}

/* Cola de la burbuja */
.tip-btn::before {
    content: "";
    top: calc(100% + 5px);
    width: 8px;
    height: 8px;
    margin-left: -4px;
    background: #fff;
    border-top: 1px solid #dbeafe;
    border-left: 1px solid #dbeafe;
    transform: translateY(-4px) rotate(45deg);
    z-index: 41;
}

.tip-btn:hover::after,
.tip-btn:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
}

.tip-btn:hover::before,
.tip-btn:focus-visible::before {
    opacity: 1;
    transform: translateY(0) rotate(45deg);
}

/* El último botón está pegado al borde derecho: la burbuja se abre hacia la izquierda */
.top-info-actions .tip-btn:last-child::after {
    left: auto;
    right: -6px;
    transform: translate(0, -4px) scale(0.94);
}

.top-info-actions .tip-btn:last-child:hover::after,
.top-info-actions .tip-btn:last-child:focus-visible::after {
    transform: translate(0, 0) scale(1);
}

/* ---------- Cambio de página por AJAX ---------- */
#convocatoriasContainer {
    /* deja libre la barra superior fija al hacer scroll hasta el contenedor */
    scroll-margin-top: 72px;
    transition: opacity 0.15s ease;
}

#convocatoriasContainer.is-loading {
    pointer-events: none;
}

/* ---------- Skeleton screen (carga de página por AJAX) ---------- */
.convocatoria-skeleton {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
    min-height: 260px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.convocatoria-skeleton .sk {
    display: block;
    border-radius: 6px;
    background: linear-gradient(90deg, #e9ecef 25%, #f6f7f9 37%, #e9ecef 63%);
    background-size: 400% 100%;
    animation: sk-shimmer 1.4s ease infinite;
}

.convocatoria-skeleton .sk-title { height: 22px; width: 70%; }
.convocatoria-skeleton .sk-chips { display: flex; gap: 8px; }
.convocatoria-skeleton .sk-chip { height: 24px; width: 90px; border-radius: 999px; }
.convocatoria-skeleton .sk-line { height: 12px; width: 100%; }
.convocatoria-skeleton .sk-line.short { width: 60%; }
.convocatoria-skeleton .sk-block { height: 70px; width: 100%; border-radius: 10px; }
.convocatoria-skeleton .sk-btn { height: 34px; width: 130px; border-radius: 8px; margin-top: auto; }

@keyframes sk-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .convocatoria-skeleton .sk { animation: none; }
}

/* ---------- Paginación: compacta y en la línea visual de las tarjetas ----------
   Acotada a esta página (el parcial minimal.blade.php también lo usan usuarios y portada). */
.convocatorias-pagination-wrapper {
    margin: 1rem 0 1.5rem;
}

.convocatorias-pagination-wrapper .pagination-minimal {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem;
    font-family: 'Oswald', sans-serif;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid #10dbd133;
    border-radius: 999px;
    box-shadow: 0 2px 8px -4px rgba(15, 23, 42, 0.18);
}

.convocatorias-pagination-wrapper .pagination-minimal a,
.convocatorias-pagination-wrapper .pagination-minimal span {
    min-width: 28px;
    height: 28px;
    padding: 0 0.55rem;
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1;
    color: #374151;
    background: transparent;
    border: 0;
    border-radius: 999px;
    box-shadow: none;
}

.convocatorias-pagination-wrapper .pagination-minimal a:hover {
    color: #1e40af;
    background: #eff6ff;
    box-shadow: none;
    transform: none;
}

.convocatorias-pagination-wrapper .pagination-minimal .active {
    color: #fff;
    background: #2563eb;
    font-weight: 600;
    box-shadow: 0 3px 8px -3px rgba(37, 99, 235, 0.6);
}

.convocatorias-pagination-wrapper .pagination-minimal .disabled {
    color: #9ca3af;
    background: transparent;
    opacity: 1;
}

@media (max-width: 480px) {
    .convocatorias-pagination-wrapper .pagination-minimal a,
    .convocatorias-pagination-wrapper .pagination-minimal span {
        min-width: 26px;
        height: 26px;
        padding: 0 0.45rem;
        font-size: 0.66rem;
    }
}

/* ---------- Móvil ---------- */
@media (max-width: 768px) {

    /* min-height fijo dejaba espacio en blanco al final de tarjetas cortas */
    .convocatoria-card {
        min-height: 0;
    }

    .cargo-card {
        padding: 0.45rem 0.5rem;
    }
}

@media (max-width: 480px) {
    .convocatoria-card {
        min-height: 0;
    }

    .convocatoria-nombre {
        font-size: clamp(0.78rem, 3.6vw, 0.86rem);
    }

    .convocatoria-descripcion {
        font-size: 0.68rem;
    }
}

/* "Ver formulario": la postulación aún no abre. Discreto, para no competir con "Aplicar" */
a.btn-postularme.is-previa,
a.btn-postular-mini.is-previa {
    color: #475569 !important;
    background: transparent !important;
    border: 1px dashed #94a3b8 !important;
    box-shadow: none !important;
    font-weight: 500 !important;
}
a.btn-postularme.is-previa::after { content: none !important; }
a.btn-postularme.is-previa:hover,
a.btn-postular-mini.is-previa:hover {
    color: #1e40af !important;
    background: #eff6ff !important;
    border-color: #93c5fd !important;
}
.btn-postular-table.is-previa { opacity: .75; }
.btn-postular-table.is-previa:hover { opacity: 1; }

/* "Aplicar" / "Ver formulario" sin robar ancho al nombre del cargo: el nombre va a lo ancho
   y el botón se ubica al final, en la línea de Plazas / Sueldo */
.cargo-card > div:first-child {
    grid-column: 1 / -1;
}

@media (min-width: 481px) {
    .cargo-card > .btn-postularme {
        grid-row: 2;
        align-self: end;
        padding: 0.2rem 0.6rem;
    }
}

/* ==========================================================
   Tarjetas: un solo color de apoyo, resumen de cargos y
   línea de tiempo por pasos. La letra (Oswald) y el color
   del título (#0b3d91) se mantienen.
========================================================== */

/* ---------- Chips: el estado conserva su color; tipo, sede y modalidad van en un solo tono ---------- */
.chips-row .chip-tipo,
.chips-row .chip-sede,
.chips-row .chip-modalidad {
    color: #1e3a8a;
    background: #eef3fc;
    box-shadow: none;
}

.chips-row .chip-sede svg { color: #1e3a8a; }

/* Acciones de la tarjeta: todas en el mismo azul (antes "postulantes" iba en turquesa) */
.top-info-actions .btn-ver-mini.tip-postulantes {
    color: #2563eb;
    background: rgba(37, 99, 235, 0.08);
    border-color: rgba(37, 99, 235, 0.25);
}

.top-info-actions .btn-ver-mini.tip-postulantes:hover {
    color: #fff;
    background: #2563eb;
    border-color: #2563eb;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.3);
}

/* ---------- Documentos obligatorios: solo la estrella (sin contorno ni fondo dorado) ---------- */
.documentos-grid .documento-link.documento-importante {
    border: 1px solid transparent !important;
    background-color: #f9fafb !important;
    box-shadow: none;
}

.documentos-grid .documento-link.documento-importante:hover {
    border-color: #c7d2fe !important;
    background-color: #eef2ff !important;
    box-shadow: none;
}

.documentos-grid .documento-importante .documento-titulo {
    color: #1e40af;
    font-weight: 600;
}

/* La estrella se dibuja con SVG (antes un carácter "★"), mismo tamaño y lugar */
.documentos-grid .documento-importante::before {
    content: "";
    top: -7px;
    right: -7px;
    width: 16px;
    height: 16px;
    margin: 0;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f5b301' d='M12 2.8l2.83 5.73 6.33.92-4.58 4.46 1.08 6.3L12 17.24l-5.66 2.97 1.08-6.3L2.84 9.45l6.33-.92z'/%3E%3C/svg%3E") center / 11px no-repeat;
    border: 1px solid #f5c518;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}

/* ---------- Títulos de sección (Cargos / Documentos) con barra de acento ---------- */
.convocatoria-card .cg-titulo {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0.35rem 0 0.5rem;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #64748b;
}

.convocatoria-card .cg-titulo::before {
    content: "";
    width: 3px;
    height: 0.85rem;
    border-radius: 2px;
    background: #6366f1;
}

/* Cabecera de sección en UNA fila: título · resumen · "+N más" a la derecha */
.cg-cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
    margin: 0.2rem 0 0.4rem;
}

.convocatoria-card .cg-cabecera .cg-titulo { margin: 0; flex: none; }

/* ---------- Resumen de cargos (va en la cabecera, sin caja) ---------- */
.cg-resumen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15rem 0;
    margin-right: auto;
    font-size: 0.66rem;
    line-height: 1.3;
}

.cg-resumen > span { padding: 0 0.55rem; white-space: nowrap; }
.cg-resumen > span:first-child { padding-left: 0; }
.cg-resumen > span + span { border-left: 1px solid #e2e8f0; }
.cg-resumen em { font-style: normal; color: #64748b; }
.cg-resumen strong { font-weight: 600; color: #0f172a; font-variant-numeric: tabular-nums; }

/* ---------- Cargos: icono, nombre y "plazas · sueldo" ---------- */
.cg-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.cg-ocultos { grid-column: 1 / -1; }
.cg-ocultos[hidden] { display: none; }

.cg-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.4rem 0.6rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.cg-item:hover {
    border-color: #c7d2fe;
    box-shadow: 0 4px 12px -8px rgba(79, 70, 229, 0.35);
}

.cg-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex: none;
    color: #6366f1;
    background: #eef2ff;
    border-radius: 6px;
}

.cg-ico svg { width: 14px; height: 14px; }

.cg-datos {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    flex: 1;
    min-width: 0;
}

/* Una línea y luego "…" (el nombre completo queda en el title): todas las filas miden igual */
.cg-nombre {
    overflow: hidden;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.3;
    color: #111827;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.cg-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    font-size: 0.62rem;
    line-height: 1.3;
    color: #6b7280;
}

.cg-punto { width: 3px; height: 3px; border-radius: 50%; background: #cbd5e1; }
.cg-sueldo { font-weight: 700; color: #059669; font-variant-numeric: tabular-nums; }
.cg-sueldo--vacio { font-weight: 400; color: #9ca3af; }

/* Aplicar / Ver formulario / Iniciar sesión dentro del cargo */
.cg-item > .cg-btn {
    flex: none;
    margin: 0;
    padding: 0.28rem 0.7rem;
    font-size: 0.62rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    color: #fff;
    background: #2563eb;
    border: 1px solid #2563eb;
    border-radius: 6px;
    box-shadow: none;
}

.cg-item > .cg-btn:hover {
    transform: none;
    color: #fff;
    background: #1d4ed8;
    border-color: #1d4ed8;
    box-shadow: 0 3px 8px -3px rgba(37, 99, 235, 0.55);
}

/* "+N más" en la cabecera de la sección, a la derecha */
.cg-ver-mas {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    margin: 0 0 0 auto;
    padding: 0.1rem 0.4rem;
    font-size: 0.64rem;
    font-weight: 600;
    white-space: nowrap;
    color: #6366f1;
    background: none;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
}

.cg-ver-mas:hover { color: #4338ca; background: #eef2ff; }
.cg-ver-mas[hidden] { display: none; }
.cg-ver-mas svg { width: 14px; height: 14px; transition: transform 0.2s ease; }
.cg-ver-mas[aria-expanded="true"] svg { transform: rotate(180deg); }

/* ==========================================================
   Tarjeta compacta y de igual alto
   - En cada fila las tarjetas se estiran a la más alta y el cronograma queda al pie.
   - Título hasta 3 líneas, descripción 2, una fila de cargos y dos de documentos:
     así todas miden casi lo mismo de una fila a otra.
========================================================== */
#convocatoriasContainer { align-items: stretch; }

#convocatoriasContainer > .convocatoria-card {
    height: auto;
    padding: 1.1rem 1.2rem 0.85rem;
}

/* Sin alto mínimo fijo: con 470 px, una fila de dos tarjetas cortas (sin cargos y con pocos
   documentos) quedaba con un hueco grande. Cada fila mide lo que su tarjeta más alta necesita
   y las dos tarjetas de la fila miden lo mismo (el hueco de la más corta se llena con documentos). */

.convocatoria-card .top-info { margin-bottom: 0.55rem; }

.convocatoria-card .convocatoria-nombre {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.convocatoria-card .chips-row { margin-bottom: 0.5rem; }

.convocatoria-card .convocatoria-descripcion {
    -webkit-line-clamp: 2;
    line-clamp: 2;
    margin-bottom: 0.3rem;
}

.convocatoria-card .convocatoria-descripcion.is-expanded { -webkit-line-clamp: unset; line-clamp: unset; }

/* "Ver más" al final de la última línea recortada (no en una fila aparte): va encima del texto,
   con un degradado blanco que tapa el final de la línea. El envoltorio usa el mismo tamaño y alto
   de línea que la descripción para que el botón calce exacto con esa línea. */
.convocatoria-card .descripcion-wrap {
    position: relative;
    margin-bottom: 0.3rem;
    font-size: clamp(0.66rem, 1.5vw, 0.72rem);
    line-height: 1.55;
}

.convocatoria-card .descripcion-wrap .convocatoria-descripcion {
    margin-bottom: 0;
    font-size: 1em;
    line-height: inherit;
}

.convocatoria-card .descripcion-wrap .descripcion-toggle {
    position: absolute;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 0 0 0 2.2em;
    font-size: 0.92em;
    line-height: calc(1.55em / 0.92);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 2em);
}

/* Desplegada: "Ver menos" debajo del texto completo, sin degradado */
.convocatoria-card .descripcion-wrap .convocatoria-descripcion.is-expanded + .descripcion-toggle {
    position: static;
    padding: 0;
    background: none;
}

@media (max-width: 480px) {
    .convocatoria-card .descripcion-wrap { font-size: 0.68rem; }
}

.convocatoria-card .cargos-section,
.convocatoria-card .cargos-section--vacia {
    flex: none;
    margin-bottom: 0.45rem;
}

/* Sin cargos: una franja discreta (el alto mínimo de la tarjeta ya iguala las alturas) */
.convocatoria-card .cargos-section--vacia .sin-cargos {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 40px;
    padding: 0;
}

/* Documentos: filas de alto fijo y siempre el espacio de dos filas */
.convocatoria-card .documentos-section { margin-bottom: 0.3rem; }
.convocatoria-card .documentos-grid { gap: 0.35rem 0.5rem; min-height: calc(2 * 32px + 0.35rem); align-content: start; }
.convocatoria-card .documento-link { min-height: 32px; padding: 0.15rem 0.5rem; }
.convocatoria-card .documento-icon { width: 20px; height: 20px; }
.convocatoria-card .sin-documentos { align-self: center; }

/* ---------- Cronograma plegable (al pie de la tarjeta) ---------- */
.crono {
    margin-top: auto;
    padding-top: 0.6rem;
    border-top: 1px dashed #e5e7eb;
}

/* Fila resumen: mini puntos · etapa · avance · flecha */
.crono-barra {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.4rem 0.6rem;
    font-size: 0.66rem;
    line-height: 1.3;
    text-align: left;
    color: #334155;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.crono-barra:hover { background: #eef2ff; border-color: #c7d2fe; }
.crono-barra:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }

.crono-mini { display: inline-flex; align-items: center; flex: none; }

.crono-mini i {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #1e1e2f;
}

.crono-mini i + i { margin-left: 9px; }

.crono-mini i + i::before {
    content: "";
    position: absolute;
    top: 3px;
    right: 100%;
    width: 9px;
    height: 2px;
    background: #dbe1e8;
}

.crono-mini i.is-finished { background: #00c27f; }
.crono-mini i.is-active { background: #ff3b3b; box-shadow: 0 0 0 3px rgba(255, 59, 59, 0.2); }
.crono-mini i.is-finished::before,
.crono-mini i.is-active::before { background: #00c27f; }

.crono-estado {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.crono-estado em { font-style: normal; color: #64748b; }
.crono-estado strong { font-weight: 600; color: #1f2937; }
.crono-estado-fecha { margin-left: 0.3rem; color: #94a3b8; font-variant-numeric: tabular-nums; }
.crono-estado.is-active strong { color: #b91c1c; }
.crono-estado.is-active .crono-estado-fecha { color: #ef4444; }
.crono-estado.is-finished strong { color: #047857; }

.crono-cuenta {
    flex: none;
    padding: 0 0.4rem;
    font-size: 0.6rem;
    color: #64748b;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}

.crono-chevron { flex: none; width: 14px; height: 14px; color: #6366f1; transition: transform 0.2s ease; }
.crono-barra[aria-expanded="true"] .crono-chevron { transform: rotate(180deg); }

/* Pasos desplegados: sin barra de desplazamiento vertical (el aro del punto en curso tiene su espacio) */
.crono-cuerpo {
    padding: 0.75rem 0 0.1rem;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}

.crono-cuerpo[hidden] { display: none; }

.crono-pasos {
    display: grid;
    grid-template-columns: repeat(var(--n, 5), minmax(56px, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

.crono-paso {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    min-width: 0;
    padding: 0 0.2rem;
    text-align: center;
    cursor: default;
}

/* Tramo que une este punto con el anterior: verde si la etapa ya se alcanzó */
.crono-paso + .crono-paso::before {
    content: "";
    position: absolute;
    top: 10px;
    left: calc(-50% + 14px);
    right: calc(50% + 14px);
    height: 2px;
    border-radius: 2px;
    background: #dbe1e8;
}

.crono-paso.is-finished::before { background: #00c27f; }
.crono-paso.is-active::before { background: linear-gradient(90deg, #00c27f, #ff3b3b); }

/* Puntos: mismos colores de antes (verde terminada, rojo en curso, oscuro pendiente) */
.crono-punto {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-bottom: 0.3rem;
    font-size: 0.62rem;
    font-weight: 600;
    line-height: 1;
    color: #fff;
    background: #1e1e2f;
    border-radius: 50%;
    font-variant-numeric: tabular-nums;
}

.crono-punto svg { width: 12px; height: 12px; }

.crono-paso.is-finished .crono-punto { background: linear-gradient(145deg, #00e695, #00b876); }
.crono-paso.is-active .crono-punto { background: #ff3b3b; }
.crono-paso.is-focus .crono-punto { box-shadow: 0 0 0 3px rgba(30, 30, 47, 0.14); }

/* Etapa en curso: punto blanco al centro y un aro que late */
.crono-pulso { width: 8px; height: 8px; border-radius: 50%; background: #fff; }

.crono-paso.is-active .crono-punto::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    animation: crono-latido 1.6s ease-out infinite;
}

@keyframes crono-latido {
    0% { box-shadow: 0 0 0 0 rgba(255, 59, 59, 0.45); }
    100% { box-shadow: 0 0 0 9px rgba(255, 59, 59, 0); }
}

.crono-nombre {
    font-size: 0.64rem;
    font-weight: 600;
    line-height: 1.2;
    color: #1f2937;
    overflow-wrap: anywhere;
}

.crono-fecha {
    font-size: 0.6rem;
    line-height: 1.2;
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.crono-paso.is-active .crono-nombre { color: #b91c1c; }
.crono-paso.is-active .crono-fecha { color: #ef4444; }

.crono-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.crono-vacio {
    margin: 0;
    font-size: 0.66rem;
    font-style: italic;
    color: #9ca3af;
    text-align: center;
}

@media (prefers-reduced-motion: reduce) {
    .crono-paso.is-active .crono-punto::after { animation: none; box-shadow: 0 0 0 4px rgba(255, 59, 59, 0.2); }
}

/* Pantallas angostas: título y "+N más" en una línea; el resumen debajo, a lo ancho */
@media (max-width: 600px) {
    .cg-cabecera .cg-ver-mas { order: 2; }
    .cg-cabecera .cg-resumen { order: 3; flex-basis: 100%; margin-right: 0; }
}

/* ---------- Celular ---------- */
@media (max-width: 480px) {
    /* Cargos en dos columnas también en celular (antes una sola: la lista quedaba muy larga).
       Sin icono para dar ancho al nombre, que puede usar dos líneas; el botón baja debajo. */
    .cg-grid { gap: 0.4rem; }
    .cg-item { flex-wrap: wrap; align-items: flex-start; gap: 0.3rem; padding: 0.4rem 0.5rem; }
    .cg-ico { display: none; }
    .cg-nombre {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        font-size: 0.64rem;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .cg-meta { gap: 0.3rem; font-size: 0.6rem; }
    .cg-item > .cg-btn { flex-basis: 100%; text-align: center; }
    .cg-resumen > span { padding: 0 0.5rem; }
    .crono-nombre { font-size: 0.6rem; }
    .crono-fecha { font-size: 0.56rem; }
}

/* ==========================================================
   Paleta sobria de la tarjeta
   Se conservan los colores del título, del estado y de la
   línea de tiempo. El resto usa un solo acento (el azul del
   título, #0b3d91) y grises; la estrella de los documentos
   importantes sigue dorada.
========================================================== */
#convocatoriasContainer > .convocatoria-card { border-color: #dfe5ee; box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.06); }

/* Chips de tipo, sede y modalidad: gris neutro (el estado mantiene su color) */
.convocatoria-card .chips-row .chip-tipo,
.convocatoria-card .chips-row .chip-sede,
.convocatoria-card .chips-row .chip-modalidad {
    color: #475569;
    background: #f1f5f9;
}

.convocatoria-card .chips-row .chip-sede svg { color: #94a3b8; }

/* Acciones: iconos grises sin fondo de color; azul al pasar el cursor */
.convocatoria-card .top-info-actions .btn-ver-mini,
.convocatoria-card .top-info-actions .btn-ver-mini.tip-postulantes {
    color: #64748b;
    background: #fff;
    border-color: #e2e8f0;
    box-shadow: none;
}

.convocatoria-card .top-info-actions .btn-ver-mini:hover,
.convocatoria-card .top-info-actions .btn-ver-mini.tip-postulantes:hover {
    color: #fff;
    background: #0b3d91;
    border-color: #0b3d91;
    box-shadow: 0 4px 10px rgba(11, 61, 145, 0.25);
}

/* Burbuja de ayuda de las acciones: gris oscuro */
.convocatoria-card .tip-btn::after { color: #fff; background: #1f2937; border-color: #1f2937; box-shadow: 0 6px 16px -6px rgba(15, 23, 42, 0.4); }
.convocatoria-card .tip-btn::before { background: #1f2937; border-color: #1f2937; }

/* "Ver más" de la descripción */
.convocatoria-card .descripcion-wrap .descripcion-toggle { color: #0b3d91; }

/* Títulos de sección y "+N más" */
.convocatoria-card .cg-titulo::before { background: #0b3d91; }
.convocatoria-card .cg-ver-mas { color: #0b3d91; }
.convocatoria-card .cg-ver-mas:hover { color: #0b3d91; background: #eef3fc; }

/* Cargos: icono gris, sueldo en el azul del título */
.convocatoria-card .cg-ico { color: #64748b; background: #f1f5f9; }
.convocatoria-card .cg-item:hover { border-color: #cbd5e1; box-shadow: 0 4px 12px -8px rgba(15, 23, 42, 0.25); }
.convocatoria-card .cg-sueldo { color: #0b3d91; }
.convocatoria-card .cg-item > .cg-btn { background: #0b3d91; border-color: #0b3d91; }
.convocatoria-card .cg-item > .cg-btn:hover { background: #082d6b; border-color: #082d6b; box-shadow: 0 3px 8px -3px rgba(11, 61, 145, 0.5); }

/* Documentos: texto oscuro (los importantes en el azul del título). Los iconos de PDF y Word
   conservan su color: sirven para reconocer el tipo de archivo de un vistazo. */
.convocatoria-card .documentos-grid .documento-titulo { color: #1f2937; }
.convocatoria-card .documentos-grid .documento-importante .documento-titulo { color: #0b3d91; }

.convocatoria-card .documentos-grid .documento-link:hover {
    background-color: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
}

/* "Léeme las abiertas" (Edu) en celular: alineado a la derecha, con el mismo espacio arriba y
   abajo, y con la letra y los colores de las tarjetas (antes: letra del sistema e índigo) */
@media (max-width: 768px) {
    #convocatoriasContainer > .edu-lectura-bar { margin: -0.4rem 0 -0.4rem; }

    #convocatoriasContainer .edu-lectura-btn {
        padding: 0.3rem 0.4rem 0.3rem 0.7rem;
        font-family: 'Oswald', sans-serif;
        font-size: 0.7rem;
        font-weight: 500;
        color: #0b3d91;
        background: #fff;
        border-color: #dfe5ee;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
    }

    #convocatoriasContainer .edu-lectura-btn:hover { background: #eef3fc; }
    #convocatoriasContainer .edu-lectura-btn.is-leyendo { background: #eef3fc; box-shadow: 0 0 0 2px rgba(11, 61, 145, 0.25); }
    #convocatoriasContainer .edu-lectura-num { background: #0b3d91; }
}

/* ==========================================================
   Tarjeta superior de la portada (partials/portada-intro)
   En la columna de las tarjetas: la segunda columna del
   layout-wrapper queda libre para el panel de avisos.
   Paleta corta: azul del título (#0b3d91), grises y un solo
   acento rojo para la etiqueta "Urgente".
========================================================== */
.layout-wrapper > .po-intro,
.layout-wrapper > #convocatoriasContainer { grid-column: 1; }

.po-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.25rem 2rem;
    margin-bottom: 0; /* la separación con las tarjetas la da el gap del layout-wrapper */
    padding: 1.35rem 1.5rem;
    font-family: 'Oswald', sans-serif;
    background: #fff;
    border: 1px solid #dfe5ee;
    border-radius: 0.75rem;
    box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.06);
}

.po-intro * { font-family: inherit; }

/* Sin convocatorias urgentes: el texto usa todo el ancho */
.po-intro--sola { grid-template-columns: minmax(0, 1fr); }

/* ---------- Columna izquierda ---------- */
.po-intro-texto { display: flex; flex-direction: column; min-width: 0; }

.po-intro-kicker {
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #94a3b8;
}

.po-intro h1 {
    margin: 0.2rem 0 0.45rem;
    font-size: clamp(1.25rem, 2.2vw, 1.6rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: #0b3d91;
}

.po-intro-texto p {
    margin: 0;
    max-width: 62ch;
    font-size: 0.78rem;
    line-height: 1.6;
    color: #4b5563;
}

/* Cifras: número en azul y rótulo gris, separadas por líneas finas (sin colores por estado) */
.po-cifras {
    display: flex;
    margin: 0.9rem 0 0;
    padding: 0;
}

.po-cifras > div {
    display: flex;
    flex-direction: column-reverse;
    padding: 0 1.25rem;
    border-left: 1px solid #e5e7eb;
}

.po-cifras > div:first-child { padding-left: 0; border-left: 0; }

.po-cifras dd {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.1;
    color: #0b3d91;
    font-variant-numeric: tabular-nums;
}

.po-cifras dt {
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a3b8;
}

/* Cómo postular: tres pasos */
.po-pasos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 1rem 0 0;
    padding: 0.85rem 0 0;
    list-style: none;
    border-top: 1px solid #f1f5f9;
}

.po-pasos li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    min-width: 0;
    font-size: 0.64rem;
    line-height: 1.4;
    color: #6b7280;
}

.po-pasos strong { display: block; font-size: 0.68rem; font-weight: 600; color: #1f2937; }
.po-pasos a { font-weight: 600; color: #0b3d91; text-decoration: none; }
.po-pasos a:hover { text-decoration: underline; }

.po-paso-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex: none;
    font-size: 0.64rem;
    font-weight: 600;
    color: #0b3d91;
    background: #fff;
    border: 1.5px solid #0b3d91;
    border-radius: 50%;
}

/* ---------- Columna derecha: convocatorias urgentes (máximo 2) ---------- */
.po-intro-urgentes {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
    padding-left: 2rem;
    border-left: 1px solid #f1f5f9;
}

.po-intro-urgentes h2 {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 0.35rem;
    margin: 0 0 0.15rem;
    padding: 0.15rem 0.55rem;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #b91c1c;
    background: #fef2f2;
    border-radius: 999px;
}

.po-intro-urgentes h2 svg { width: 12px; height: 12px; }

.po-urg {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.85rem;
    text-decoration: none;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.6rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.po-urg:hover {
    border-color: #0b3d91;
    box-shadow: 0 6px 18px -12px rgba(11, 61, 145, 0.45);
}

.po-urg:focus-visible { outline: 2px solid #0b3d91; outline-offset: 2px; }

.po-urg-cuerpo { display: flex; flex-direction: column; gap: 0.2rem; flex: 1; min-width: 0; }

/* Hasta dos líneas: el nombre se lee completo en la mayoría de casos */
.po-urg-nombre {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.3;
    text-transform: uppercase;
    color: #0b3d91;
}

/* Plazo (en negrita) · tipo · cargos y plazas, en una línea */
.po-urg-meta {
    overflow: hidden;
    font-size: 0.64rem;
    line-height: 1.4;
    color: #6b7280;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.po-urg-meta strong { font-weight: 600; color: #1f2937; }
.po-urg-sep { margin: 0 0.35rem; color: #cbd5e1; }

.po-urg-ir {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: none;
    color: #94a3b8;
    border-radius: 50%;
    transition: color 0.15s, background 0.15s, transform 0.15s;
}

.po-urg-ir svg { width: 16px; height: 16px; }
.po-urg:hover .po-urg-ir { color: #0b3d91; background: #eef3fc; transform: translateX(2px); }

@media (max-width: 768px) {
    .po-intro { grid-template-columns: minmax(0, 1fr); padding: 1.1rem 1rem; }
    .po-intro-urgentes { padding: 1rem 0 0; border-left: 0; border-top: 1px solid #f1f5f9; }
}

/* Celular: tarjeta compacta (antes ocupaba más de media pantalla). Quedan el título, las cifras
   y las urgentes; el párrafo y los pasos se ocultan (el menú superior ya tiene "Registrarse"
   y el pie de página el manual). Mismo margen lateral que el contenedor de tarjetas. */
@media (max-width: 480px) {
    .po-intro { gap: 0.75rem; margin-left: 0.25rem; margin-right: 0.25rem; padding: 0.85rem 0.9rem; }
    .po-intro-kicker { font-size: 0.56rem; }
    .po-intro h1 { margin: 0.1rem 0 0; font-size: 1.15rem; }
    .po-intro-texto p,
    .po-pasos { display: none; }

    .po-cifras { margin-top: 0.55rem; }
    .po-cifras > div { flex-direction: row-reverse; align-items: baseline; gap: 0.3rem; padding: 0 0.75rem; }
    .po-cifras dd { font-size: 1rem; }
    .po-cifras dt { font-size: 0.56rem; letter-spacing: 0.04em; }

    .po-intro-urgentes { gap: 0.4rem; padding-top: 0.75rem; }
    .po-urg { gap: 0.5rem; padding: 0.5rem 0.65rem; }
    .po-urg-nombre { -webkit-line-clamp: 1; line-clamp: 1; font-size: 0.72rem; }
    .po-urg-meta { font-size: 0.6rem; }
    .po-urg-ir { width: 22px; height: 22px; }
}