/* =========================================================================
   SISTEMA DE DISEÑO - Convocatorias públicas
   =========================================================================
   Antes cada hoja usaba su propia paleta (azul marino en table.css, azul
   eléctrico + cian en index.css) y había 25 tamaños de letra distintos
   mezclando rem, px y clamp. Aquí se define una sola fuente de verdad.

   Se carga ANTES de index.css / table.css.
   ========================================================================= */

:root {
    /* ---------- Tipografías ----------
       Oswald es una tipografía condensada de titulares: en texto corrido se
       lee mal. Se reserva para títulos, cifras y etiquetas; el cuerpo usa la
       fuente del sistema, que además no cuesta ninguna descarga. */
    --font-display: 'Oswald', 'Segoe UI', system-ui, sans-serif;
    --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    /* ---------- Escala tipográfica (7 pasos, base 16px) ----------
       Un poco más pequeña que la anterior y sin valores intermedios casi
       idénticos, que es lo que producía la sensación de desorden. */
    --fs-2xs: 0.625rem;   /* 10px - micro etiquetas */
    --fs-xs: 0.6875rem;   /* 11px - metadatos, pies */
    --fs-sm: 0.75rem;     /* 12px - celdas de tabla, texto auxiliar */
    --fs-md: 0.8125rem;   /* 13px - texto base */
    --fs-lg: 0.875rem;    /* 14px - subtítulos */
    --fs-xl: 1rem;        /* 16px - títulos de tarjeta */
    --fs-2xl: 1.125rem;   /* 18px - títulos de sección */

    /* ---------- Altura de línea y trazo ---------- */
    --lh-tight: 1.25;
    --lh-snug: 1.4;
    --lh-normal: 1.55;
    --ls-caps: 0.04em;    /* para textos en mayúsculas */

    /* ---------- Marca (azul institucional) ---------- */
    --c-brand-950: #082247;
    --c-brand-900: #0b2f6b;
    --c-brand-800: #14418f;
    --c-brand-700: #1d4ed8;
    --c-brand-600: #2563eb;
    --c-brand-500: #3b82f6;
    --c-brand-400: #60a5fa;
    --c-brand-200: #bfdbfe;
    --c-brand-100: #dbeafe;
    --c-brand-50: #eff6ff;

    /* Cian de apoyo, solo para la línea de tiempo: es el único sitio donde el
       diseño buscaba un aire "técnico". Antes había cinco cianes sueltos. */
    --c-accent: #06b6d4;
    --c-accent-2: #22d3ee;

    /* ---------- Neutros fríos (combinan con el azul) ---------- */
    --c-ink: #0f172a;
    --c-ink-2: #334155;
    --c-ink-3: #64748b;
    --c-ink-4: #94a3b8;
    --c-line: #e2e8f0;
    --c-line-2: #eef2f7;
    --c-surface: #ffffff;
    --c-surface-2: #f8fafc;
    --c-surface-3: #f1f5f9;

    /* ---------- Semánticos ---------- */
    --c-ok-700: #047857;
    --c-ok-600: #059669;
    --c-ok-500: #10b981;
    --c-ok-100: #d1fae5;
    --c-ok-50: #ecfdf5;

    --c-warn-700: #b45309;
    --c-warn-600: #d97706;
    --c-warn-100: #fef3c7;
    --c-warn-50: #fffbeb;

    --c-bad-700: #b91c1c;
    --c-bad-600: #dc2626;
    --c-bad-100: #fee2e2;
    --c-bad-50: #fef2f2;

    /* ---------- Radios ---------- */
    --r-xs: 4px;
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 14px;
    --r-pill: 999px;

    /* ---------- Sombras (tintadas en azul, no negro puro) ---------- */
    --sh-1: 0 1px 2px rgba(15, 23, 42, .05), 0 1px 3px rgba(15, 23, 42, .07);
    --sh-2: 0 2px 6px rgba(15, 23, 42, .06), 0 6px 16px rgba(15, 23, 42, .07);
    --sh-3: 0 10px 30px rgba(15, 23, 42, .12);
    --sh-focus: 0 0 0 3px rgba(37, 99, 235, .25);

    /* ---------- Ritmo de espaciado ---------- */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.25rem;
    --sp-6: 1.5rem;

    --transition: 160ms cubic-bezier(.4, 0, .2, 1);
}

/* =========================================================================
   Base compartida por las dos vistas
   ========================================================================= */

.layout-wrapper,
.table-view-container {
    font-family: var(--font-body);
    font-size: var(--fs-md);
    line-height: var(--lh-normal);
    color: var(--c-ink-2);
}

/* Los titulares conservan la identidad institucional. */
.convocatoria-nombre,
.cargos-section h4,
.recommendations-section h3,
.table-title,
.modal-title,
.timeline-title {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: var(--ls-caps);
}

/* Cifras y etiquetas cortas: Oswald tabular queda bien y ordena columnas. */
.convocatoria-estado,
.badge,
.plazas-badge,
.pagination a,
.pagination span {
    font-family: var(--font-display);
    font-variant-numeric: tabular-nums;
}

/* Foco visible y coherente en toda la vista (antes cada control tenía el suyo). */
.layout-wrapper a:focus-visible,
.layout-wrapper button:focus-visible,
.layout-wrapper input:focus-visible,
.layout-wrapper select:focus-visible,
.table-view-container a:focus-visible,
.table-view-container button:focus-visible,
.table-view-container input:focus-visible,
.table-view-container select:focus-visible {
    outline: 2px solid var(--c-brand-600);
    outline-offset: 2px;
    box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {

    .layout-wrapper *,
    .table-view-container * {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* =========================================================================
   Toggle de vista (tarjetas / tabla) - compartido por index y table
   Control segmentado: las dos vistas siempre visibles, la actual resaltada
   en tinta oscura; un clic cambia a la otra.
   ========================================================================= */
.view-toggle-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
}

.view-toggle-container form {
    margin: 0;
}

.view-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--c-line);
    border-radius: var(--r-pill);
    box-shadow: var(--sh-2);
    cursor: pointer;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
}

.view-toggle-btn:hover {
    border-color: var(--c-ink-4);
    box-shadow: var(--sh-3);
}

.view-toggle-btn:active {
    transform: scale(0.96);
}

.vt-opt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 28px;
    border-radius: var(--r-pill);
    font-size: var(--fs-md);
    color: var(--c-ink-4);
    transition: background var(--transition), color var(--transition);
}

/* Vista actual resaltada */
.view-toggle-btn[data-view="card"] .vt-card,
.view-toggle-btn[data-view="table"] .vt-table {
    background: var(--c-ink);
    color: #fff;
}

/* Al pasar el cursor, se anticipa la vista a la que se cambiará */
.view-toggle-btn[data-view="card"]:hover .vt-table,
.view-toggle-btn[data-view="table"]:hover .vt-card {
    color: var(--c-ink);
    background: var(--c-surface-3);
}

@media (max-width: 1024px) {
    .view-toggle-container {
        bottom: 72px; /* por encima del botón flotante de avisos / filtros */
    }
}

@media (max-width: 768px) {
    .view-toggle-container {
        bottom: 82px;
    }

    .vt-opt {
        width: 30px;
        height: 26px;
        font-size: var(--fs-sm);
    }
}