:root {
    --fa-azul: #1d4e89;
    --fa-azul-claro: #e8f0fb;
    --fa-gris: #6b7280;
    --fa-borde: #d9dee6;
    --fa-verde: #1a7f4e;
    --fa-amarillo: #a16207;
    --fa-rojo: #b42318;
    --fa-morado: #6d28d9;
    --fa-fondo: #f6f8fb;
    font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--fa-fondo);
    color: #1f2937;
}

.fa-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.9rem 1.5rem;
    background: var(--fa-azul);
    color: white;
}

.fa-header__brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: white;
    font-weight: 700;
    text-decoration: none;
    font-size: 1.1rem;
}

.fa-header__logo {
    height: 36px;
    width: auto;
    background: white;
    border-radius: 6px;
    padding: 2px 5px;
}

/* Botón "☰" que abre/cierra el menú en pantallas angostas — oculto en
   escritorio/tablet, donde el menú ya se ve completo (ver el media
   query más abajo, que es el único lugar que lo muestra). */
.fa-header__toggle {
    display: none;
    background: none;
    border: 1px solid rgba(255,255,255,0.5);
    color: white;
    font-size: 1.3rem;
    line-height: 1;
    padding: 0.3rem 0.65rem;
    border-radius: 6px;
    cursor: pointer;
}

/* Texto solo para lectores de pantalla (ej. "Abrir menú" junto al
   ícono ☰) — invisible pero presente para accesibilidad. */
.fa-sr-solo {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.fa-login-logo {
    display: block;
    height: 90px;
    width: auto;
    margin: 0 auto 1rem;
}

.fa-header__nav {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.fa-header__nav a {
    color: white;
    text-decoration: none;
    opacity: 0.9;
}

.fa-header__nav a:hover { opacity: 1; text-decoration: underline; }

.fa-header__usuario {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.fa-badge {
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    background: rgba(255,255,255,0.2);
}

.fa-main {
    width: 100%;
    max-width: none;
    margin: 2rem auto;
    padding: 0 2.5rem;
    box-sizing: border-box;
}

/* "Mi bandeja" (bandeja.php) -- margen fijo de 2.5cm a cada lado en vez
   del padding general. */
.fa-main--bandeja {
    padding-left: 2.5cm;
    padding-right: 2.5cm;
}

.fa-footer {
    text-align: center;
    color: var(--fa-gris);
    font-size: 0.8rem;
    padding: 2rem 0;
}

.fa-card {
    background: white;
    border: 1px solid var(--fa-borde);
    border-radius: 10px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.fa-titulo { margin-top: 0; }

.fa-solicitante { font-size: 1.2rem; margin: 0; }

.fa-fila-encabezado {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.5rem;
    margin-bottom: 0.6rem;
}

.fa-form label {
    display: block;
    font-weight: 600;
    margin: 1rem 0 0.3rem;
}

.fa-form input,
.fa-form select,
.fa-form textarea {
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--fa-borde);
    border-radius: 6px;
    font-size: 0.95rem;
}

.fa-form textarea { min-height: 100px; resize: vertical; }
.fa-form input[readonly] { background: var(--fa-fondo); color: var(--fa-gris); }

.fa-btn {
    display: inline-block;
    padding: 0.6rem 1.1rem;
    border-radius: 6px;
    border: none;
    background: var(--fa-azul);
    color: white;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    margin-top: 1.2rem;
    margin-right: 0.5rem;
}

.fa-btn:hover { opacity: 0.92; }
.fa-btn--rojo { background: var(--fa-rojo); }
.fa-btn--gris { background: var(--fa-gris); }
.fa-btn--verde { background: var(--fa-verde); }
.fa-btn--amarillo { background: var(--fa-amarillo); }

/* Botón chico, sin el margen superior grande de .fa-btn -- para filas
   de filtros (Nivel, Estado, etc.) donde varios van uno al lado del
   otro. Mismo color de fondo y letra que .fa-btn (como "Exportar
   Maternal") para que todos los botones se vean iguales -- por eso no
   redefine background acá, solo tamaño/forma. El filtro actualmente
   activo se marca con un subrayado (nunca opacity: eso desvanece
   también el texto blanco de encima, dejándolo casi invisible). */
.fa-btn--chico {
    padding: 0.35rem 0.8rem;
    margin-top: 0;
    font-size: 0.85rem;
    border-radius: 999px;
}
.fa-btn--chico.fa-btn--activo {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.fa-alerta {
    padding: 0.8rem 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}
.fa-alerta--error { background: #fdecea; color: var(--fa-rojo); border: 1px solid #f5c2bd; }
.fa-alerta--ok { background: #e7f6ee; color: var(--fa-verde); border: 1px solid #b8e6cc; }
.fa-alerta--advertencia { background: #fff4d6; color: var(--fa-amarillo); border: 1px solid #f2dfa4; }
.fa-alerta--info { background: var(--fa-azul-claro); color: var(--fa-azul); border: 1px solid #c3d7f2; }
.fa-alerta--info strong { display: block; margin-bottom: 0.35rem; }
.fa-alerta--info ol { margin: 0; padding-left: 1.1rem; }
.fa-alerta--info li { margin-bottom: 0.3rem; }
.fa-alerta--info li:last-child { margin-bottom: 0; }

.fa-tabla-scroll {
    overflow-x: auto;
    /* La barra de desplazamiento debe verse SIEMPRE que la tabla no
       quepa entera — algunos sistemas (sobre todo macOS con "mostrar
       barras de desplazamiento: automáticamente") las esconden por
       defecto hasta que el usuario ya está arrastrando, así que nadie
       se entera de que hay una columna "Ver" (u otras) fuera de la
       vista. Forzamos una barra fina pero visible en todos los
       navegadores. */
    scrollbar-width: thin;
    scrollbar-color: var(--fa-azul) var(--fa-fondo);
}
.fa-tabla-scroll::-webkit-scrollbar {
    height: 10px;
}
.fa-tabla-scroll::-webkit-scrollbar-track {
    background: var(--fa-fondo);
}
.fa-tabla-scroll::-webkit-scrollbar-thumb {
    background: var(--fa-azul);
    border-radius: 5px;
}

/* Flechas de desplazamiento (assets/tabla-scroll-controles.js): un
   control siempre visible, aparte de la barra nativa del navegador
   (que en varios sistemas se esconde y no se nota). Solo se muestran
   cuando la tabla realmente no cabe entera. */
.fa-tabla-scroll-controles {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.fa-tabla-scroll-boton {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    border: 1px solid var(--fa-borde);
    background: #ffffff;
    color: var(--fa-azul);
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
}

.fa-tabla-scroll-boton:hover:not(:disabled) {
    background: var(--fa-azul-claro);
}

.fa-tabla-scroll-boton:disabled {
    opacity: 0.35;
    cursor: default;
}

.fa-tabla-scroll-hint {
    font-size: 0.8rem;
    color: var(--fa-gris);
}

@media (max-width: 780px) {
    /* En celular el texto ocupa demasiado espacio junto a las flechas
       — se deja solo el ícono, que ya es autoexplicativo con el gesto
       de deslizar. */
    .fa-tabla-scroll-hint {
        display: none;
    }
}

/* Fila de filtros por chips (Nivel, Estado, etc.) — usada en
   comite_panel.php y bandeja.php. */
/* Fila de filtros por botones (Nivel, Estado, etc.) -- los enlaces
   adentro llevan las clases .fa-btn/.fa-btn--gris/.fa-btn--chico, este
   contenedor solo los acomoda en fila. */
.fa-filtros-area {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.6rem;
    margin-bottom: 1rem;
}

.fa-buscar-tabla {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0.6rem 0 0.8rem;
}

.fa-buscar-tabla__input {
    flex: 0 1 320px;
    min-width: 0;
    padding: 0.5rem 0.8rem;
    border: 1px solid var(--fa-borde);
    border-radius: 6px;
    font-size: 0.92rem;
}

.fa-buscar-tabla__input:focus {
    outline: 2px solid var(--fa-azul-claro);
    border-color: var(--fa-azul);
}

.fa-buscar-tabla__contador {
    color: var(--fa-gris);
    font-size: 0.85rem;
    white-space: nowrap;
}

table.fa-tabla {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 10px;
    overflow: hidden;
}

table.fa-tabla th, table.fa-tabla td {
    text-align: left;
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--fa-borde);
    font-size: 0.92rem;
}

table.fa-tabla th { background: var(--fa-azul-claro); color: var(--fa-azul); }

/* Encabezados con orden ascendente/descendente (ver
   assets/tabla-ordenable.js). El indicador cambia de color, nunca de
   opacity, para no repetir el bug del texto invisible. */
.fa-th-ordenable {
    cursor: pointer;
    user-select: none;
    padding-right: 1.4rem !important;
}
.fa-th-ordenable::after {
    content: '⇅';
    display: inline-block;
    margin-left: 0.4rem;
    color: #9fb3d1;
    font-size: 0.8em;
}
.fa-th-ordenable--asc::after { content: '↑'; color: var(--fa-azul); }
.fa-th-ordenable--desc::after { content: '↓'; color: var(--fa-azul); }

.fa-estado {
    display: inline-block;
    padding: 0.25rem 0.65rem;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.35;
    /* "Por revisar · Dirección + Responsables Secundaria" es bastante
       más largo que los demás estados — ya no forzamos una sola línea
       (eso rompía el ancho de la tabla); se deja envolver en 2 líneas
       dentro de una burbuja más angosta, en vez de una píldora
       gigante de una sola línea. */
    white-space: normal;
    max-width: 220px;
}
.fa-estado--pendiente_coordinador,
.fa-estado--pendiente_director,
.fa-estado--pendiente_proveeduria,
.fa-estado--pendiente_comite { background: #fff4d6; color: var(--fa-amarillo); }
.fa-estado--aprobada { background: #e7f6ee; color: var(--fa-verde); }
.fa-estado--ejecutada { background: #d7f3e6; color: #0f766e; }
.fa-estado--devuelta { background: #fdf1e0; color: #b45309; }
.fa-estado--rechazada { background: #fdecea; color: var(--fa-rojo); }

/* Leyenda con el motivo de devolución/rechazo, a la par del estado
   (ver ficha_ver.php) — texto, no una tarjeta aparte, para que se lea
   de un vistazo apenas se abre la ficha. */
.fa-motivo {
    font-size: 0.9rem;
    font-weight: 600;
    margin-left: 0.3rem;
}
.fa-motivo--advertencia { color: var(--fa-amarillo); }
.fa-motivo--error { color: var(--fa-rojo); }
.fa-motivo__quien {
    font-weight: 400;
    color: var(--fa-gris);
}

.fa-login-opciones {
    display: grid;
    gap: 0.75rem;
}

.fa-login-opciones label {
    display: block;
    border: 1px solid var(--fa-borde);
    border-radius: 8px;
    padding: 0.8rem 1rem;
    cursor: pointer;
}

.fa-login-opciones input { width: auto; margin-right: 0.5rem; }

.fa-historial { list-style: none; padding: 0; margin: 0; }
.fa-historial li {
    border-left: 3px solid var(--fa-borde);
    padding: 0.4rem 0 0.4rem 0.9rem;
    margin-bottom: 0.6rem;
    font-size: 0.88rem;
}

.fa-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1rem;
}
.fa-grid-2 > div { min-width: 0; }
@media (max-width: 640px) { .fa-grid-2 { grid-template-columns: 1fr; } }

.fa-ayuda {
    color: var(--fa-gris);
    font-size: 0.82rem;
    margin: 0.2rem 0 0;
}

.fa-tabla-inversion input {
    width: 100%;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--fa-borde);
    border-radius: 5px;
    font-size: 0.9rem;
}
.fa-tabla-inversion td { vertical-align: middle; }
.fa-tabla-inversion input[readonly] { background: var(--fa-fondo); color: var(--fa-gris); }
.fa-tabla-inversion tfoot td { font-weight: 700; background: var(--fa-azul-claro); }

.fa-btn-quitar {
    background: none;
    border: 1px solid var(--fa-rojo);
    color: var(--fa-rojo);
    border-radius: 6px;
    padding: 0.3rem 0.6rem;
    cursor: pointer;
    font-size: 0.85rem;
}
.fa-btn-quitar:hover { background: #fdecea; }

.fa-btn-agregar {
    background: none;
    border: 1px dashed var(--fa-azul);
    color: var(--fa-azul);
    border-radius: 6px;
    padding: 0.5rem 0.9rem;
    cursor: pointer;
    font-size: 0.88rem;
    margin-top: 0.6rem;
}
.fa-btn-agregar:hover { background: var(--fa-azul-claro); }

.fa-ejecucion-resumen {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.8rem;
    margin: 0.8rem 0 1rem;
}
.fa-ejecucion-resumen > div {
    background: var(--fa-fondo);
    border: 1px solid var(--fa-borde);
    border-radius: 8px;
    padding: 0.7rem 0.9rem;
}
.fa-ejecucion-resumen .etiqueta {
    display: block;
    color: var(--fa-gris);
    font-size: 0.8rem;
    margin-bottom: 0.2rem;
}
.fa-ejecucion-resumen .valor {
    display: block;
    font-size: 1.15rem;
    font-weight: 700;
}
@media (max-width: 640px) { .fa-ejecucion-resumen { grid-template-columns: 1fr; } }

.fa-progreso {
    width: 100%;
    height: 10px;
    background: var(--fa-borde);
    border-radius: 999px;
    overflow: hidden;
}
.fa-progreso__barra {
    height: 100%;
    background: var(--fa-morado);
    border-radius: 999px;
    transition: width 0.2s ease;
}

.fa-btn-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--fa-azul);
    text-decoration: underline;
    cursor: pointer;
    font-size: 0.85rem;
}
.fa-btn-link:hover { opacity: 0.85; }
.fa-btn-link--peligro { color: var(--fa-rojo); }

/* ================================================================
 * Experiencia en celular. Antes de esto el menú del encabezado no
 * tenía ningún tratamiento para pantallas angostas: con varios links
 * (el caso más extremo es Super Administrador, con 6) el texto se
 * amontonaba, se cortaba fuera de la pantalla y forzaba scroll
 * horizontal en la página completa. Debajo de 780px el menú se
 * colapsa detrás del botón "☰" (ver el toggle en includes/
 * layout_header.php) — arriba de eso todo sigue exactamente igual.
 * ================================================================ */
@media (max-width: 780px) {
    .fa-header {
        flex-wrap: wrap;
        padding: 0.7rem 1rem;
    }
    .fa-header__brand { font-size: 1rem; }
    .fa-header__logo { height: 30px; }
    .fa-header__toggle { display: inline-block; }

    .fa-header__nav {
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: 100%;
        margin-top: 0.8rem;
        padding-top: 0.7rem;
        border-top: 1px solid rgba(255,255,255,0.25);
    }
    .fa-header__nav--abierto { display: flex; }

    .fa-header__usuario {
        flex-wrap: wrap;
        padding: 0.4rem 0.1rem 0.7rem;
    }
    .fa-header__nav a {
        padding: 0.65rem 0.1rem;
        border-bottom: 1px solid rgba(255,255,255,0.15);
    }
    .fa-header__nav a:last-child { border-bottom: none; }

    .fa-main { padding: 0 1rem; margin: 1.2rem auto; }
    .fa-card { padding: 1.1rem; }

    /* Botones de acción a ancho completo — más fáciles de tocar y no
       se amontonan varios en la misma fila. */
    .fa-form .fa-btn,
    .fa-form .fa-btn--gris,
    .fa-form .fa-btn--rojo,
    .fa-form .fa-btn--verde,
    .fa-form .fa-btn--amarillo {
        display: block;
        width: 100%;
        text-align: center;
        margin-right: 0;
    }

    /* Los renglones de "Detalle de la inversión" siguen siendo una
       tabla (con fa-tabla-scroll ya envolviéndola) en vez de
       reacomodarse en tarjetas — son pocas columnas numéricas que se
       leen mejor alineadas, y ya se pueden deslizar horizontalmente.
       Aquí solo se angostan un poco los campos para que quepa más
       sin desplazar tanto. */
    .fa-tabla-inversion th[style*="width"] { width: auto !important; }
    .fa-tabla-inversion th,
    .fa-tabla-inversion td { padding: 0.5rem 0.4rem; }
    .fa-tabla-inversion input {
        padding: 0.35rem 0.4rem;
        font-size: 0.88rem;
        min-width: 4.5rem;
    }

    /* La burbuja de estado más larga ("Por revisar · Dirección +
       Responsables Secundaria") en celular se angosta más todavía
       para que no empuje la tabla a un scroll horizontal enorme. */
    .fa-estado {
        max-width: 150px;
        font-size: 0.7rem;
    }
}