/* ======================================================================
   Pantallas de reporte de avance (Rendición de Cuentas y Adjudicaciones).

   Están pensadas para imprimirse: el botón «Guardar en PDF» abre el
   diálogo del navegador, donde se elige la impresora «Guardar como PDF».
   Se hace así, y no con una librería en el servidor, para no añadir
   dependencias ni binarios nativos a un IIS que ya nos ha dado guerra al
   publicar.

   Todo cuelga de .rep para no afectar al resto del portal.
   ====================================================================== */

.rep {
    --rep-azul: #001040;
    --rep-teal: #068D99;
    --rep-rosa: #E21B60;
    --rep-borde: #E3E8EF;
    --rep-texto: #16233F;
    --rep-suave: #5A6880;
    --rep-ok: #0B7A4A;
    --rep-falta: #B02A4A;
    --rep-borrador: #8A6100;

    /* El width:100% no sobra: app.css pone body en flex column, y ahí un
       hijo con `margin: 0 auto` deja de estirarse y se encoge al
       contenido. Sin esto las cifras del resumen se parten en dos filas. */
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px 48px;
    color: var(--rep-texto);
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* ── Barra de acciones: no se imprime ──────────────────────────────── */
.rep-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--rep-borde);
}

.rep-barra .rep-espacio { margin-left: auto; }

.rep-boton {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--rep-borde);
    background: #fff;
    color: #18297B;
    font: 600 .88rem inherit;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
}

.rep-boton:hover { background: #F6F8FB; border-color: #A9B6BE; }

.rep-boton-primario {
    background: var(--rep-teal);
    border-color: var(--rep-teal);
    color: #fff;
}

.rep-boton-primario:hover { background: #01717C; border-color: #01717C; color: #fff; }

.rep-select {
    font: 600 .88rem inherit;
    color: var(--rep-texto);
    background: #fff;
    border: 1px solid var(--rep-borde);
    border-radius: 8px;
    padding: 8px 12px;
}

/* ── Encabezado del documento ──────────────────────────────────────── */
.rep-portada {
    border-bottom: 3px solid var(--rep-azul);
    padding-bottom: 14px;
    margin-bottom: 20px;
}

.rep-eyebrow {
    margin: 0 0 6px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--rep-teal);
}

.rep-portada h1 {
    margin: 0;
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--rep-azul);
}

.rep-portada .rep-sub { margin: 6px 0 0; color: var(--rep-suave); }
.rep-portada .rep-fecha { margin: 8px 0 0; font-size: .8rem; color: var(--rep-suave); }

/* ── Cifras ────────────────────────────────────────────────────────── */
.rep-cifras { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }

.rep-cifra {
    flex: 1 1 150px;
    border: 1px solid var(--rep-borde);
    border-radius: 9px;
    padding: 10px 13px;
}

.rep-cifra b {
    display: block;
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--rep-azul);
}

.rep-cifra span { font-size: .78rem; color: var(--rep-suave); }
.rep-cifra.ok b { color: var(--rep-ok); }
.rep-cifra.falta b { color: var(--rep-falta); }
.rep-cifra.borrador b { color: var(--rep-borrador); }

/* ── Tablas ────────────────────────────────────────────────────────── */
.rep h2 { font-size: 1.1rem; color: var(--rep-azul); margin: 0 0 10px; }

.rep-tit-sec {
    font-size: 1rem;
    color: var(--rep-azul);
    margin: 20px 0 8px;
    padding-left: 9px;
    border-left: 4px solid var(--rep-rosa);
}

.rep-tit-grupo {
    font-size: .9rem;
    color: #18297B;
    font-weight: 700;
    margin: 14px 0 5px;
}

.rep-chip {
    font-size: .68rem;
    font-weight: 600;
    color: var(--rep-suave);
    background: #EEF2F8;
    border-radius: 9px;
    padding: 1px 7px;
    margin-left: 6px;
    vertical-align: 2px;
}

.rep-tabla { width: 100%; border-collapse: collapse; font-size: .82rem; }

.rep-tabla th {
    background: var(--rep-azul);
    color: #fff;
    text-align: left;
    padding: 6px 8px;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.rep-tabla td {
    padding: 5px 8px;
    border-bottom: 1px solid var(--rep-borde);
    vertical-align: top;
}

.rep-tabla tbody tr:nth-child(even) td { background: #FAFBFD; }

.rep-n { text-align: right; white-space: nowrap; }
.rep-idx { width: 30px; text-align: right; color: #93A0B8; }

.rep-anio {
    background: #EEF2F8 !important;
    font-weight: 800;
    font-size: 1rem;
    color: var(--rep-azul);
    vertical-align: middle;
    text-align: center;
    width: 66px;
}

.rep-total td {
    font-weight: 700;
    background: #EEF2F8 !important;
    border-bottom: 2px solid var(--rep-azul);
}

.rep-pct { font-weight: 700; }
.rep-pct.alto { color: var(--rep-ok); }
.rep-pct.medio { color: var(--rep-borrador); }
.rep-pct.bajo { color: var(--rep-falta); }

/* ── Casillas de estado ────────────────────────────────────────────── */
th.rep-c, td.rep-c { width: 34px; text-align: center; }
td.rep-c { font-weight: 700; }
td.rep-ok { color: var(--rep-ok); }
td.rep-br { color: #C08A00; }
td.rep-fa { color: #C9D2E0; }

/* Rayado para «no se entrega este periodo»: se distingue de un pendiente
   sin necesidad de leer la leyenda. */
td.rep-na {
    background: repeating-linear-gradient(45deg, #F2F5F9 0 3px, transparent 3px 6px);
}

.rep-solo {
    font-size: .68rem;
    font-weight: 600;
    color: var(--rep-teal);
    white-space: nowrap;
}

/* Aviso de que la carga falló. Va en rojo y con borde porque compite con
   una pantalla llena de tablas: un párrafo gris pasaría desapercibido. */
.rep-aviso {
    border: 1px solid #F0C2CE;
    border-left: 4px solid var(--rep-falta);
    background: #FDF3F6;
    color: var(--rep-falta);
    font-size: .85rem;
    font-weight: 600;
    border-radius: 8px;
    padding: 10px 14px;
    margin: 0 0 16px;
}

.rep-aclara { font-size: .8rem; color: var(--rep-suave); margin: 0 0 12px; max-width: 70ch; }
.rep-leyenda { margin-top: 12px; font-size: .76rem; color: var(--rep-suave); }
.rep-leyenda .rep-c { display: inline-block; width: auto; font-weight: 700; margin-right: 2px; }
.rep-vacio { text-align: center; padding: 28px 12px; color: var(--rep-suave); }

/* ══════════════════════════════════════════════════════════════════════
   Impresión
   ══════════════════════════════════════════════════════════════════════ */
@media print {
    /* Fuera todo lo que no sea el reporte: el encabezado del portal, el
       pie y la barra de botones. */
    .portal-franja,
    .portal-encabezado,
    .portal-pie,
    .portal-saltar,
    .rep-aviso,
    .rep-barra { display: none !important; }

    body { background: #fff; }
    .rep { max-width: none; padding: 0; }

    /* Los fondos de cabecera y casillas son información, no adorno: sin
       esto la tabla se imprime en blanco y no se distingue nada. */
    * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

    .rep-tabla { font-size: 8.5pt; }
    .rep-tabla th { padding: 4px 6px; font-size: 7pt; }
    .rep-tabla td { padding: 3px 6px; }

    /* Que no se parta una tabla dejando la cabecera huérfana al pie. */
    table, tr { page-break-inside: avoid; }
    .rep-tit-sec, .rep-tit-grupo { page-break-after: avoid; }
    .rep-salto { page-break-before: always; }
}

@page { size: Letter; margin: 14mm 12mm 16mm; }