/* =============================================================================
   Sistema de Gestión de TI — hoja de estilo

   EL COLOR INSTITUCIONAL SE CAMBIA EN UN SOLO SITIO: --color-primario, aquí
   abajo. Todo lo demás (barra, botones, foco, menú activo, semáforos) sale de
   él o de sus dos variantes. Es lo que se pidió y además evita el problema
   clásico: el mismo azul copiado en treinta reglas y una que se olvida.

   Sin framework. Sin build. Un archivo que se lee de arriba abajo:
   variables, base, piezas, pantallas, responsive.
   ========================================================================== */

:root {
    /* --- El único color que hay que tocar ---------------------------------- */
    --color-primario:        #1B396A;
    --color-primario-oscuro: #142B50;
    --color-primario-claro:  #E8EDF6;

    /* --- Neutros ---------------------------------------------------------- */
    --tinta:          #1D2430;
    --tinta-suave:    #5A6474;
    --tinta-tenue:    #8A94A6;
    --borde:          #DFE3EA;
    --fondo:          #F4F6FA;
    --superficie:     #FFFFFF;

    /* --- Semáforo. Los tres pasan AA sobre blanco ------------------------- */
    --verde:    #1B7A46;
    --ambar:    #9A6A00;
    --rojo:     #B3261E;
    --sin-dato: #8A94A6;

    --radio:        8px;
    --radio-chico:  5px;
    --sombra:       0 1px 2px rgba(29, 36, 48, .06), 0 4px 12px rgba(29, 36, 48, .05);
    --ancho-menu:   232px;
    --alto-barra:   58px;
}

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

html { font-size: 16px; }

body {
    margin: 0;
    background: var(--fondo);
    color: var(--tinta);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 0.9375rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.25; margin: 0 0 .5rem; font-weight: 600; }

a { color: var(--color-primario); }

/* El foco se ve SIEMPRE. Quitar el contorno sin poner otra cosa deja el
   sistema inservible con teclado, y aquí hay formularios largos. */
:focus-visible {
    outline: 3px solid var(--color-primario);
    outline-offset: 2px;
    border-radius: var(--radio-chico);
}

/* Primer enlace de la página, visible solo al tabular. */
.salto-contenido {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--color-primario);
    color: #fff;
    padding: .6rem 1rem;
    z-index: 100;
}
.salto-contenido:focus { left: 0; }

/* -----------------------------------------------------------------------------
   Barra superior
   -------------------------------------------------------------------------- */

.barra {
    display: flex;
    align-items: center;
    gap: .75rem;
    height: var(--alto-barra);
    padding: 0 1rem;
    background: var(--color-primario);
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 20;
}

.barra__marca { display: flex; flex-direction: column; line-height: 1.15; }
.barra__marca strong { font-size: .95rem; letter-spacing: .01em; }
.barra__organizacion { font-size: .72rem; opacity: .78; }

.barra__usuario {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .6rem;
}

.barra__nombre { font-size: .85rem; }

.etiqueta-rol {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .15rem .5rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
}

/* Botón hamburguesa: solo aparece en pantalla pequeña. */
.barra__menu {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 38px;
    height: 34px;
    padding: 0 7px;
    border: 0;
    border-radius: var(--radio-chico);
    background: rgba(255, 255, 255, .14);
    cursor: pointer;
}
.barra__menu span { display: block; height: 2px; background: #fff; border-radius: 2px; }

/* -----------------------------------------------------------------------------
   Disposición y menú lateral
   -------------------------------------------------------------------------- */

.disposicion {
    display: grid;
    grid-template-columns: var(--ancho-menu) 1fr;
    align-items: start;
    min-height: calc(100vh - var(--alto-barra));
}

.menu {
    background: var(--superficie);
    border-right: 1px solid var(--borde);
    min-height: calc(100vh - var(--alto-barra));
    padding: 1rem .75rem;
    position: sticky;
    top: var(--alto-barra);
}

.menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }

.menu__enlace {
    display: block;
    padding: .55rem .7rem;
    border-radius: var(--radio-chico);
    color: var(--tinta);
    text-decoration: none;
    font-size: .9rem;
}

.menu__enlace:hover { background: var(--fondo); }

.menu__enlace--activo {
    background: var(--color-primario-claro);
    color: var(--color-primario-oscuro);
    font-weight: 600;
    /* La barra lateral marca el activo sin depender solo del color de fondo. */
    box-shadow: inset 3px 0 0 var(--color-primario);
}

.menu__pie {
    margin-top: 1.25rem;
    padding-top: .75rem;
    border-top: 1px solid var(--borde);
    color: var(--tinta-suave);
    font-size: .78rem;
}

.contenido {
    padding: 1.5rem;
    max-width: 1280px;

    /* min-width: 0 NO es decorativo. Sin esto, un hijo de grid se estira para
       caber su contenido (min-width: auto es el valor inicial) y una tabla
       ancha empuja la columna entera: el envoltorio deja de recortar y la
       PÁGINA se mueve a lo ancho, con el menú saliéndose de sitio. Se vio en la
       vista previa de la importación, que tiene ocho columnas. */
    min-width: 0;
}

.titulo-pagina { font-size: 1.5rem; margin-bottom: 1rem; }

.texto-guia { color: var(--tinta-suave); margin: 0 0 1.25rem; max-width: 68ch; }

/* -----------------------------------------------------------------------------
   Tarjetas de KPI
   -------------------------------------------------------------------------- */

.tarjetas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.tarjeta {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 1rem 1.1rem;
}

.tarjeta__titulo {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--tinta-suave);
    font-weight: 600;
    margin-bottom: .35rem;
}

.tarjeta__valor {
    font-size: 1.9rem;
    font-weight: 600;
    margin: 0;
    /* Las cifras alineadas en columna: sin esto, un 9 y un 1 mueven el ancho. */
    font-variant-numeric: tabular-nums;
}

.sin-dato { font-size: 1rem; font-weight: 500; color: var(--sin-dato); }

.tarjeta__nota { margin: .25rem 0 0; font-size: .78rem; color: var(--tinta-tenue); }

.panel {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 1.1rem 1.25rem;
}

.panel__titulo { font-size: 1rem; }

/* -----------------------------------------------------------------------------
   Formularios y botones
   -------------------------------------------------------------------------- */

.campo { display: block; margin-bottom: .9rem; }

.campo__etiqueta {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    color: var(--tinta-suave);
    margin-bottom: .3rem;
}

.campo__control {
    width: 100%;
    padding: .6rem .7rem;
    font: inherit;
    color: var(--tinta);
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio-chico);
}

.campo__control:focus { border-color: var(--color-primario); }

.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .55rem 1.1rem;
    border: 1px solid transparent;
    border-radius: var(--radio-chico);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease;
}

.boton--primario { background: var(--color-primario); color: #fff; }
.boton--primario:hover { background: var(--color-primario-oscuro); }

.boton--claro { background: rgba(255, 255, 255, .16); color: #fff; padding: .35rem .8rem; font-size: .85rem; }
.boton--claro:hover { background: rgba(255, 255, 255, .26); }

.boton--ancho { width: 100%; }

.aviso {
    padding: .65rem .8rem;
    border-radius: var(--radio-chico);
    margin: 0 0 .9rem;
    font-size: .88rem;
}

.aviso--error {
    background: #FDECEA;
    color: var(--rojo);
    border: 1px solid #F5C6C2;
}

/* -----------------------------------------------------------------------------
   Semáforo de indicadores (lo usa la Fase 6)
   El color NUNCA va solo: siempre acompañado de su símbolo.
   -------------------------------------------------------------------------- */

.semaforo { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; }
.semaforo--verde    { color: var(--verde); }
.semaforo--amarillo { color: var(--ambar); }
.semaforo--rojo     { color: var(--rojo); }
.semaforo--sin-dato { color: var(--sin-dato); }

/* -----------------------------------------------------------------------------
   Pantalla de acceso y páginas de error
   -------------------------------------------------------------------------- */

.cuerpo-acceso {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: 1.5rem;
    background: linear-gradient(160deg, var(--color-primario) 0%, var(--color-primario-oscuro) 100%);
}

.acceso { width: 100%; max-width: 380px; }

.acceso__marca { text-align: center; color: #fff; margin-bottom: 1.25rem; }
.acceso__marca h1 { font-size: 1.35rem; margin-bottom: .15rem; }
.acceso__marca p { margin: 0; opacity: .8; font-size: .85rem; }

.acceso__formulario {
    background: var(--superficie);
    border-radius: var(--radio);
    box-shadow: 0 12px 32px rgba(20, 43, 80, .28);
    padding: 1.5rem;
}

.acceso__formulario h2 { font-size: 1.1rem; margin-bottom: 1rem; }

.acceso__nota { margin: .9rem 0 0; font-size: .76rem; color: var(--tinta-tenue); text-align: center; }

/* Lo que el sistema resuelve solo y casi nunca hay que tocar. Plegado para que
   no pida decidir sobre algo ya decidido, pero a un clic. */
.campos-avanzados {
    border-top: 1px solid var(--borde);
    margin: 1.1rem 0 .4rem;
    padding-top: .8rem;
}

.campos-avanzados > summary {
    cursor: pointer;
    font-size: .82rem;
    color: var(--tinta-suave);
    margin-bottom: .6rem;
}

.campos-avanzados > summary:hover { color: var(--color-primario); }

/* --- Acceder con Google --------------------------------------------------- */

/* Una raya con un "o" en medio, para que las dos puertas se lean como dos y no
   como un botón suelto debajo de otro. */
.acceso__separador {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin: 1.1rem 0 .9rem;
    color: var(--tinta-tenue);
    font-size: .76rem;
}

.acceso__separador::before,
.acceso__separador::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--borde);
}

/* El botón lo pinta Google en un iframe de ancho fijo: se centra, no se estira,
   porque estirarlo lo deforma. */
.acceso__google {
    display: flex;
    justify-content: center;
    min-height: 44px;
}

.aviso-pagina {
    background: var(--superficie);
    border-radius: var(--radio);
    padding: 2rem;
    max-width: 460px;
    text-align: center;
    box-shadow: 0 12px 32px rgba(20, 43, 80, .28);
}

.aviso-pagina__codigo {
    font-size: 2.6rem;
    font-weight: 700;
    color: var(--color-primario);
    margin: 0 0 .25rem;
    font-variant-numeric: tabular-nums;
}

.aviso-pagina h1 { font-size: 1.15rem; }
.aviso-pagina p { color: var(--tinta-suave); margin-bottom: 1.25rem; }

/* -----------------------------------------------------------------------------
   Pantallas pequeñas. El objetivo declarado es que funcione en TABLET, así que
   el corte va en 900px: por debajo, el menú se guarda y se abre con el botón.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {

    .disposicion { grid-template-columns: 1fr; }

    .barra__menu { display: flex; }

    .barra__nombre { display: none; }

    .menu {
        display: none;
        position: static;
        min-height: 0;
        border-right: 0;
        border-bottom: 1px solid var(--borde);
    }

    .menu--abierto { display: block; }

    .contenido { padding: 1rem; }
}

@media (max-width: 480px) {

    .etiqueta-rol { display: none; }

    .tarjeta__valor { font-size: 1.6rem; }
}

/* =============================================================================
   Catálogos: barra de acciones, tabla, formulario y paginación
   ========================================================================== */

.barra-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.filtros { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; }

.barra-acciones__botones { display: flex; gap: .5rem; }

/* En la barra de filtros los campos no ocupan todo el ancho. */
.campo--linea { margin-bottom: 0; }
.campo--linea .campo__control { min-width: 190px; }

.texto-guia--ajustado { margin-bottom: .6rem; }

.tabla-envoltorio {
    /* La tabla scrollea DENTRO de su caja: sin esto, en tablet la página entera
       se mueve a lo ancho y el menú se va de sitio. */
    overflow-x: auto;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
}

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

.tabla th, .tabla td {
    padding: .6rem .75rem;
    text-align: left;
    border-bottom: 1px solid var(--borde);
    vertical-align: top;
}

.tabla thead th {
    background: var(--fondo);
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--tinta-suave);
    white-space: nowrap;
    position: sticky;
    top: 0;
}

.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover { background: #FAFBFD; }

/*=============================================
LA COLUMNA DE ACCIONES SE QUEDA PEGADA A LA DERECHA.

Departamentos tiene seis columnas y la tabla mide mas que la ventana: "Editar"
y "Dar de baja" empezaban 6 px FUERA de la pantalla en un portatil de 1280. La
caja scrollea a lo ancho, si, pero nada lo anuncia, asi que la pantalla se veia
como un catalogo que no se puede editar. Fijandola, los botones estan siempre
donde se los busca y el scroll sirve para leer las columnas de en medio.
=============================================*/
.tabla__acciones {
    white-space: nowrap;
    position: sticky;
    right: 0;
    background: var(--superficie);
    /* La sombra a la izquierda avisa de que ahi debajo sigue habiendo tabla. */
    box-shadow: -6px 0 6px -6px rgba(16, 24, 40, .22);
}

.tabla thead .tabla__acciones { background: var(--fondo); z-index: 1; }
.tabla tbody tr:hover .tabla__acciones { background: #FAFBFD; }

.tabla__acciones .boton { margin-right: .3rem; }

.tabla__vacia { text-align: center; color: var(--tinta-suave); padding: 2rem 1rem; }

.fila--error { background: #FEF6F5; }

.en-linea { display: inline; }

.boton--pequeno { padding: .3rem .7rem; font-size: .8rem; }

.boton--suave {
    background: var(--superficie);
    color: var(--tinta);
    border-color: var(--borde);
}
.boton--suave:hover { background: var(--fondo); }

.boton--peligro { background: var(--rojo); color: #fff; }
.boton--peligro:hover { background: #8E1E17; }

.boton[disabled] { opacity: .5; cursor: not-allowed; }

.paginacion {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: 1rem;
}

.paginacion__estado { color: var(--tinta-suave); font-size: .85rem; }

/* --- Formulario ----------------------------------------------------------- */

.formulario {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 1.25rem;
    max-width: 640px;
}

.formulario__acciones {
    display: flex;
    gap: .6rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--borde);
}

.campo__obligatorio { color: var(--rojo); margin-left: .15rem; }

.campo__ayuda { margin: .3rem 0 0; font-size: .78rem; color: var(--tinta-tenue); }

.campo__error { margin: .3rem 0 0; font-size: .82rem; color: var(--rojo); font-weight: 600; }

.campo--error .campo__control { border-color: var(--rojo); }

.casilla { display: inline-flex; align-items: center; gap: .4rem; }

.aviso--exito {
    background: #EAF6EF;
    color: var(--verde);
    border: 1px solid #BFE0CD;
}

.aviso ul { margin: .35rem 0 0; padding-left: 1.1rem; }

/* --- Índice de catálogos y varios ----------------------------------------- */

.tarjeta--enlace { display: block; text-decoration: none; color: inherit; transition: border-color .15s ease; }
.tarjeta--enlace:hover { border-color: var(--color-primario); }

.lista-columnas { margin: 0; padding-left: 1.1rem; font-size: .88rem; }
.lista-columnas li { margin-bottom: .35rem; }
.lista-columnas code { background: var(--fondo); padding: .1rem .3rem; border-radius: 3px; }

.texto-tenue { color: var(--tinta-tenue); }
.texto-error { color: var(--rojo); }

@media (max-width: 900px) {

    .barra-acciones { flex-direction: column; align-items: stretch; }
    .filtros { flex-direction: column; align-items: stretch; }
    .campo--linea .campo__control { min-width: 0; width: 100%; }
    .formulario { max-width: none; }
}

/* =============================================================================
   Planes de trabajo: cabecera, pestañas, tabla con malla, tablero y calendario
   ========================================================================== */

.cabecera-plan {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    align-items: flex-start;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 1rem 1.15rem;
    margin-bottom: 1rem;
}

.cabecera-plan__dato { margin: 0 0 .2rem; color: var(--tinta-suave); font-size: .9rem; }
.cabecera-plan__acciones { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

/* Traer al plan las actividades de un semestral. Va en su propia franja y no
   entre los botones de arriba: lleva un desplegable, y un select metido en una
   fila de botones se lee como si fuera parte del botón de al lado. */
.traer-semestral {
    background: var(--color-primario-claro);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: .8rem 1.15rem;
    margin-bottom: 1rem;
}

.traer-semestral__forma { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; }
.traer-semestral__nota,
.traer-semestral__vacio { margin: .5rem 0 0; color: var(--tinta-suave); font-size: .82rem; }
.traer-semestral__vacio { margin-top: 0; }

@media (max-width: 720px) {
    .traer-semestral__forma { align-items: stretch; }
    .traer-semestral__forma .boton { width: 100%; }
}

.etiqueta {
    display: inline-block;
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: .15rem .45rem;
    border-radius: 999px;
}

.etiqueta--cerrado { background: var(--fondo); color: var(--tinta-suave); border: 1px solid var(--borde); }
.etiqueta--extra   { background: var(--color-primario-claro); color: var(--color-primario-oscuro); }
.etiqueta--vencida { background: #FDECEA; color: var(--rojo); }

/* --- Pestañas ------------------------------------------------------------- */

.pestanas { display: flex; gap: .25rem; border-bottom: 1px solid var(--borde); margin-bottom: 1rem; }

.pestana {
    padding: .5rem .9rem;
    text-decoration: none;
    color: var(--tinta-suave);
    font-weight: 600;
    font-size: .9rem;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
}

.pestana:hover { color: var(--tinta); }

.pestana--activa { color: var(--color-primario); border-bottom-color: var(--color-primario); }

.filtros--plan { margin-bottom: 1rem; }

/* --- Tabla del plan ------------------------------------------------------- */

.celda-mes { text-align: center; width: 42px; }
.marca { color: var(--color-primario); }

.celda-participantes { max-width: 220px; font-size: .82rem; color: var(--tinta-suave); }

.fila--vencida { background: #FEF6F5; }

.barra-avance {
    height: 6px;
    background: var(--borde);
    border-radius: 999px;
    overflow: hidden;
    min-width: 60px;
}

.barra-avance span { display: block; height: 100%; background: var(--color-primario); }

/* --- Tablero -------------------------------------------------------------- */

.tablero {
    display: grid;
    grid-template-columns: repeat(4, minmax(220px, 1fr));
    gap: .85rem;
    align-items: start;
    /* Igual que la tabla: si no cabe, scrollea ESTA caja y no la página. */
    overflow-x: auto;
    padding-bottom: .5rem;
}

.tablero__columna {
    background: var(--fondo);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: .7rem;
    min-width: 220px;
}

.tablero__titulo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .82rem;
    margin-bottom: .6rem;
}

.tablero__cuenta {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: 999px;
    padding: 0 .45rem;
    font-size: .75rem;
    color: var(--tinta-suave);
}

.tablero__lista { min-height: 80px; display: grid; gap: .5rem; }

/* En el tablero de inicio el kanban es UNA sección más, no la pantalla entera:
   sin tope, once tarjetas en una columna empujan las gráficas fuera de la
   vista. Cada columna scrollea lo suyo. En la pantalla del plan NO se aplica:
   allí el kanban es el contenido y verlo entero es lo que se quiere. */
.tablero--compacto .tablero__lista {
    max-height: 22rem;
    overflow-y: auto;
    align-content: start;
}

.tablero__lista--encima {
    outline: 2px dashed var(--color-primario);
    outline-offset: 3px;
    border-radius: var(--radio-chico);
}

.tarjeta-tarea {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-left: 3px solid var(--color-primario);
    border-radius: var(--radio-chico);
    padding: .6rem .7rem;
    cursor: grab;
    box-shadow: 0 1px 2px rgba(29, 36, 48, .05);
}

.tarjeta-tarea--vencida { border-left-color: var(--rojo); }
.tarjeta-tarea--arrastrando { opacity: .45; }

.tarjeta-tarea__nombre { margin: 0 0 .3rem; font-size: .86rem; font-weight: 600; line-height: 1.3; }
.tarjeta-tarea__meta { margin: 0 0 .3rem; font-size: .76rem; color: var(--tinta-suave); }

/* --- Calendario ----------------------------------------------------------- */

.calendario__mando {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .75rem;
}

.calendario__mes { font-size: 1.05rem; margin: 0; }

.calendario {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--borde);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    overflow: hidden;
}

.calendario__cabecera {
    background: var(--fondo);
    padding: .45rem;
    text-align: center;
    font-size: .74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--tinta-suave);
}

.calendario__dia { background: var(--superficie); min-height: 92px; padding: .35rem; }
.calendario__dia--vacio { background: var(--fondo); }
.calendario__dia--hoy { box-shadow: inset 0 0 0 2px var(--color-primario); }

.calendario__numero { display: block; font-size: .78rem; color: var(--tinta-suave); margin-bottom: .25rem; }

.calendario__tarea {
    display: block;
    font-size: .72rem;
    line-height: 1.25;
    background: var(--color-primario-claro);
    color: var(--color-primario-oscuro);
    border-radius: 3px;
    padding: .15rem .3rem;
    margin-bottom: .2rem;
    text-decoration: none;
}

.calendario__tarea--vencida { background: #FDECEA; color: var(--rojo); }

/* --- Historial de avances -------------------------------------------------- */

.historial { list-style: none; margin: 0; padding: 0; }

.historial__punto { border-left: 2px solid var(--borde); padding: 0 0 .9rem .8rem; margin-left: .3rem; }
.historial__punto:last-child { padding-bottom: 0; }

.historial__cabecera { margin: 0 0 .2rem; font-size: .85rem; }
.historial__comentario { margin: 0; color: var(--tinta-suave); font-size: .88rem; }

.casillas-meses { display: flex; flex-wrap: wrap; gap: .75rem; }

.campo--grupo { border: 1px solid var(--borde); border-radius: var(--radio-chico); padding: .75rem; }
.campo--grupo legend { padding: 0 .35rem; }

/* Lista de casillas (p. ej. las tareas que alimentan un indicador). En una
   columna: son frases largas y en varias columnas se leen a saltos. */
.lista-casillas { display: block; }
.lista-casillas__titulo { font-weight: 600; font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; color: var(--tinta-suave); }
.lista-casillas .casilla { display: flex; align-items: flex-start; gap: .5rem; padding: .28rem 0; font-size: .9rem; }
.lista-casillas .casilla input { margin-top: .18rem; flex: none; }

/* VA AQUÍ, DESPUÉS, Y NO ARRIBA CON `.casilla`. Las reglas de encima fijan el
   display de la casilla, y con la misma especificidad gana la última de la
   hoja: puesta antes, esconder una casilla desde JavaScript no hacía
   absolutamente nada —el atributo `hidden` quedaba, pero se seguía viendo—. */
.casilla[hidden],
.lista-casillas .casilla[hidden] { display: none; }

/* De qué tareas sale el indicador, con su avance. */
.indicador__tareas { list-style: none; margin: .1rem 0 .9rem; padding: 0 0 0 .9rem; border-left: 3px solid var(--color-primario-claro); }
.indicador__tareas li { display: flex; justify-content: space-between; gap: 1rem; font-size: .86rem; padding: .18rem 0; color: var(--tinta-suave); }
.indicador__tarea-nombre { flex: 1 1 auto; }
.indicador__tareas strong { font-variant-numeric: tabular-nums; color: var(--tinta); }

/* -----------------------------------------------------------------------------
   Tablero de indicadores: una fila por indicador, con su barra.
   -------------------------------------------------------------------------- */
.lista-indicadores { list-style: none; margin: 0; padding: 0; }

.indicador-fila { padding: .85rem 0; border-top: 1px solid var(--borde); }
.indicador-fila:first-child { border-top: 0; padding-top: .2rem; }

.indicador-fila__cabeza { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.indicador-fila__nombre { flex: 1 1 12rem; font-weight: 600; }
.indicador-fila__pie { margin: .35rem 0 0; font-size: .82rem; color: var(--tinta-suave); }

.etiqueta--clave {
    background: var(--color-primario-claro);
    color: var(--color-primario);
    font-variant-numeric: tabular-nums;
}

/* La barra. Extremo redondeado de 4px anclado a la linea base, como el resto
   de marcas de dato del sistema. */
.barra {
    margin-top: .45rem;
    height: 8px;
    background: var(--fondo);
    border-radius: 4px;
    overflow: hidden;
}

.barra__relleno { display: block; height: 100%; border-radius: 4px; background: var(--sin-dato); }
.barra__relleno--verde    { background: var(--verde); }
.barra__relleno--amarillo { background: var(--ambar); }
.barra__relleno--rojo     { background: var(--rojo); }

.tabla-alterna { margin-top: .8rem; font-size: .88rem; }
.tabla-alterna summary { cursor: pointer; color: var(--color-primario); }

.migas { margin: 0 0 .8rem; font-size: .88rem; }

/* Una línea de cotización: número, proveedor y monto. */
.cotizacion { display: flex; gap: .6rem; align-items: flex-end; margin-bottom: .5rem; }
.cotizacion__numero {
    flex: none;
    width: 1.6rem;
    height: 1.6rem;
    line-height: 1.6rem;
    text-align: center;
    border-radius: 50%;
    background: var(--color-primario-claro);
    color: var(--color-primario);
    font-size: .8rem;
    font-weight: 600;
    margin-bottom: .35rem;
}

@media (max-width: 720px) {
    .cotizacion { flex-wrap: wrap; }
    .cotizacion .campo--ancho { flex: 1 1 100%; }
}

@media (max-width: 900px) {

    .tablero { grid-template-columns: repeat(4, 240px); }
    .calendario__dia { min-height: 70px; }
    .cabecera-plan { flex-direction: column; }
}

/* =============================================================================
   Cronogramas: resumen, tabla editable y Gantt
   ========================================================================== */

.resumen-cronograma {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-left: 4px solid var(--color-primario);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: .9rem 1.15rem;
    margin-bottom: 1rem;
}

.resumen-cronograma__cifra { margin: 0 0 .2rem; font-size: 1.05rem; }
.resumen-cronograma__cifra strong { font-variant-numeric: tabular-nums; }

/* --- Tabla editable ------------------------------------------------------- */

.campo__control--celda { padding: .3rem .4rem; font-size: .85rem; min-width: 120px; }
.campo__control--corto { min-width: 70px; width: 80px; }

.celda-duracion { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* La fecha final y su boton "Terminada", uno debajo del otro: en una tabla de
   nueve columnas no cabe un boton al lado de un campo de fecha. */
.celda-fin { display: flex; flex-direction: column; gap: .3rem; align-items: flex-start; }

/* -----------------------------------------------------------------------------
   Avisos del cronograma: flotan sobre la pantalla.

   Estaban al pie de la tabla, y con veinticuatro departamentos eso queda a dos
   pantallas de donde el usuario esta mirando: el aviso salia y nadie lo veia.
   -------------------------------------------------------------------------- */
.avisos-flotantes {
    position: fixed;
    top: calc(var(--alto-barra) + .7rem);
    left: 50%;
    transform: translateX(-50%);
    z-index: 90;
    width: min(620px, calc(100vw - 1.6rem));
    display: flex;
    flex-direction: column;
    gap: .4rem;
    pointer-events: none;
}

.avisos-flotantes .aviso {
    margin: 0;
    font-size: .92rem;
    padding: .8rem 1rem;
    box-shadow: 0 6px 24px rgba(29, 36, 48, .18);
    animation: aviso-entra .18s ease-out;
}

/* El error pesa mas que el "Guardado": es el que hay que leer. */
.avisos-flotantes .aviso--error {
    font-weight: 600;
    border-width: 2px;
}

@keyframes aviso-entra {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .avisos-flotantes .aviso { animation: none; }
}

/* -----------------------------------------------------------------------------
   La celda que falta se queda marcada.

   El aviso se va a los pocos segundos; la marca no, hasta que se rellena. Si
   solo hubiera aviso, quien se distrae un momento vuelve a una tabla de
   veinticuatro filas sin saber cual le reclamaba algo.
   -------------------------------------------------------------------------- */
.campo__control--falta {
    border: 2px solid var(--rojo);
    background: #FDECEA;
}

.fila--falta > td { background: #FDECEA; }

.boton--terminada {
    background: var(--superficie);
    color: var(--color-primario);
    border-color: var(--color-primario);
    white-space: nowrap;
}

.boton--terminada:hover:not(:disabled) { background: var(--color-primario-claro); }

/* Ya terminada: se queda apagado y en verde, para que se lea de un vistazo
   cuales faltan bajando la columna con la mirada. */
.boton--terminada-hecha,
.boton--terminada:disabled {
    background: var(--superficie);
    color: var(--verde);
    border-color: var(--verde);
    cursor: default;
    opacity: 1;
}

.fila--guardando { opacity: .55; }

.formulario-evidencia input[type="file"] { font-size: .75rem; max-width: 150px; }

/* --- Gantt ---------------------------------------------------------------- */

.leyenda { display: inline-flex; align-items: center; gap: .3rem; margin-right: 1rem; font-size: .82rem; }

.leyenda__muestra { display: inline-block; width: 18px; height: 10px; border-radius: 2px; }
.leyenda__muestra--gris  { background: var(--borde); }
.leyenda__muestra--ambar { background: var(--ambar); }
.leyenda__muestra--verde { background: var(--verde); }
.leyenda__muestra--hoy   { background: var(--color-primario); width: 3px; height: 14px; }

.gantt-envoltorio {
    /* Seis meses son ciento ochenta columnas: el desplazamiento ocurre AQUÍ y
       no en la página, o el menú y la cabecera se irían de sitio. */
    overflow-x: auto;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
}

.gantt { border-collapse: collapse; font-size: .75rem; }

.gantt th, .gantt td { border: 1px solid var(--borde); padding: 0; }

/* La columna del departamento se queda fija: al desplazarse a mayo, si no, ya
   no se sabe de qué fila es cada barra. */
.gantt__fija {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--superficie);
    text-align: left;
    padding: .35rem .6rem;
    min-width: 190px;
    max-width: 190px;
    border-right: 2px solid var(--borde);
}

.gantt thead .gantt__fija { background: var(--fondo); z-index: 3; }

.gantt__departamento { display: block; font-weight: 600; line-height: 1.2; }
.gantt__responsable { color: var(--tinta-tenue); font-weight: 400; font-size: .7rem; }

.gantt__mes, .gantt__semana {
    background: var(--fondo);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--tinta-suave);
    padding: .2rem;
}

.gantt__semana { font-size: .62rem; opacity: .75; }

.gantt__dia {
    width: 22px;
    min-width: 22px;
    background: var(--fondo);
    padding: .15rem 0;
    color: var(--tinta-suave);
    font-weight: 500;
}

.gantt__letra { display: block; font-size: .65rem; }
.gantt__numero { display: block; font-size: .62rem; opacity: .7; font-variant-numeric: tabular-nums; }

.gantt__dia--finde { background: #EDEFF4; }

.gantt__celda { height: 26px; background: var(--superficie); }
.gantt__celda--finde { background: var(--fondo); }

.gantt__celda--barra { border-radius: 2px; }
.gantt__celda--gris  { background: var(--borde); }
.gantt__celda--ambar { background: var(--ambar); }
.gantt__celda--verde { background: var(--verde); }

/* Hoy: una línea vertical que cruza toda la altura. */
.gantt__dia--hoy, .gantt__celda--hoy { box-shadow: inset 2px 0 0 var(--color-primario); }

@media (max-width: 900px) {
    .gantt__fija { min-width: 130px; max-width: 130px; }
}

/* =============================================================================
   Indicadores y tablero
   ========================================================================== */

.indicadores { display: grid; gap: .85rem; }

.indicador {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-left: 4px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 1rem 1.15rem;
}

.indicador--error { border-left-color: var(--rojo); }

.indicador__cabecera {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    align-items: flex-start;
}

.indicador__nombre { font-size: 1rem; margin-bottom: .25rem; }

.indicador__clave {
    display: inline-block;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--color-primario);
    background: var(--color-primario-claro);
    border-radius: 3px;
    padding: .1rem .35rem;
    margin-right: .35rem;
    vertical-align: middle;
}

.indicador__descripcion { margin: 0 0 .2rem; color: var(--tinta-suave); font-size: .88rem; max-width: 62ch; }
.indicador__fuente { margin: 0; color: var(--tinta-tenue); font-size: .78rem; }

.indicador__valor { font-size: 1.15rem; margin: 0; white-space: nowrap; }

.indicador__auto {
    margin: .7rem 0 0;
    padding: .5rem .7rem;
    background: var(--color-primario-claro);
    border-radius: var(--radio-chico);
    font-size: .82rem;
    color: var(--color-primario-oscuro);
}

.indicador__formulario {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    align-items: flex-end;
    margin-top: .8rem;
    padding-top: .8rem;
    border-top: 1px solid var(--borde);
}

.campo--ancho { flex: 1 1 260px; }
.campo--ancho .campo__control { min-width: 0; width: 100%; }

.indicador__pie {
    margin-top: .7rem;
    padding-top: .5rem;
    border-top: 1px solid var(--borde);
    font-size: .78rem;
    color: var(--tinta-tenue);
}

.indicador__justificacion { color: var(--ambar); font-weight: 600; }

/* --- Tabla campus × indicador --------------------------------------------- */

.celda-indicador { text-align: center; font-size: .7rem; }
.celda-semaforo { text-align: center; white-space: nowrap; font-size: .8rem; }

/* --- Gráficas -------------------------------------------------------------- */

.graficas { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; }

/* Alto fijo: sin él, un canvas responsive dentro de un grid crece en cada
   redibujado hasta comerse la pantalla. */
.grafica { height: 260px; position: relative; }

@media (max-width: 900px) {
    .indicador__cabecera { flex-direction: column; }
    .graficas { grid-template-columns: 1fr; }
}

/* =============================================================================
   Adquisiciones
   ========================================================================== */

.aviso--atencion { background: #FFF8E6; color: #7A5400; border: 1px solid #F0DDA8; }

.folio-grande { font-size: 1.2rem; color: var(--color-primario); margin-right: .5rem; }

.dos-columnas { display: grid; grid-template-columns: 1.35fr 1fr; gap: 1rem; align-items: start; }
.dos-columnas > div { display: grid; gap: 1rem; }

.datos { margin: 0 0 .5rem; display: grid; grid-template-columns: max-content 1fr; gap: .3rem .9rem; font-size: .9rem; }
.datos dt { color: var(--tinta-suave); font-size: .82rem; }
.datos dd { margin: 0; }

.subtitulo { font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tinta-suave); margin: 1rem 0 .3rem; }

.texto-bloque { margin: 0; font-size: .92rem; white-space: pre-wrap; }

.flujo { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .3rem; }

.flujo__paso { font-size: .88rem; color: var(--tinta-tenue); }
.flujo__paso--hecho { color: var(--verde); font-weight: 600; }
.flujo__paso--rechazado { color: var(--rojo); font-weight: 600; }

.formulario-flujo { border-top: 1px solid var(--borde); padding-top: .9rem; }

.lista-adjuntos { list-style: none; margin: 0 0 .9rem; padding: 0; font-size: .9rem; display: grid; gap: .35rem; }

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

/* =============================================================================
   Reportes: vista previa
   ========================================================================== */

.previa__cifras {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: .75rem;
    margin-bottom: 1rem;
}

.previa__cifra {
    background: var(--fondo);
    border-radius: var(--radio-chico);
    padding: .7rem .8rem;
    text-align: center;
}

.previa__numero { display: block; font-size: 1.6rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.previa__etiqueta { display: block; font-size: .74rem; text-transform: uppercase; letter-spacing: .03em; color: var(--tinta-suave); }

.acciones-reporte { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--borde); }