/* Tema propio sobre Bootstrap 5.3 (PLAN_DESARROLLO.md §3, ADR-0010).
   El lenguaje visual se declara una sola vez acá, como tokens, y desde acá se
   redefinen las variables de Bootstrap. Ninguna plantilla escribe un color a
   mano: si hace falta uno nuevo, se agrega a esta lista. */

/* --- Tipografías -----------------------------------------------------------

   Autoalojadas: el despliegue puede ser local y sin acceso a internet, y no se
   le informa a un tercero qué pantallas abre la gente de MAFSA. Son los
   subconjuntos latino y latino extendido, que es lo que necesita el castellano;
   ambas son variables, así que un archivo cubre todo el rango de grosores.
   Inter y JetBrains Mono son OFL 1.1; las licencias viajan en `static/fonts/`. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/inter-latin.260c81a4759b.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/inter-latin-ext.1ad231aac0a8.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-latin.b636a65da4f0.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-latin-ext.bd4781a31b42.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Tokens ---------------------------------------------------------------- */

:root {
  /* Azul de la marca, en tres pasos: base, hover y apretado. */
  --mafsa-azul: #1b263b;
  --mafsa-azul-oscuro: #101b30;
  --mafsa-azul-profundo: #051125;

  /* Gris acero: bordes, texto secundario, todo lo estructural. */
  --mafsa-acero: #4a4e51;
  --mafsa-borde: #c5c6cd;
  --mafsa-borde-fuerte: #75777d;

  /* Naranja de seguridad. Se reserva para la acción que hace avanzar la
     versión y para las advertencias que exigen decidir algo (ADR-0010,
     decisión 4): un color de alta visibilidad usado en todas partes deja de
     señalar nada. */
  --mafsa-naranja: #f3722c;
  --mafsa-naranja-oscuro: #d95f1e;

  --mafsa-lienzo: #f8f9fa;
  --mafsa-superficie: #ffffff;
  --mafsa-superficie-tenue: #f3f4f5;
  --mafsa-tinta: #191c1d;
  --mafsa-tinta-suave: #45474d;

  --mafsa-env-banner-bg: #fff3cd;
  --mafsa-env-banner-fg: #664d03;
}

/* --- Los tokens, puestos donde Bootstrap los busca ------------------------ */

:root {
  --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-font-monospace: "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;

  --bs-body-bg: var(--mafsa-lienzo);
  --bs-body-color: var(--mafsa-tinta);
  --bs-secondary-color: var(--mafsa-tinta-suave);
  --bs-emphasis-color: var(--mafsa-tinta);

  --bs-primary: var(--mafsa-azul);
  --bs-primary-rgb: 27, 38, 59;
  --bs-primary-text-emphasis: var(--mafsa-azul-profundo);
  --bs-link-color: var(--mafsa-azul);
  --bs-link-color-rgb: 27, 38, 59;
  --bs-link-hover-color: var(--mafsa-azul-profundo);

  --bs-border-color: var(--mafsa-borde);
  --bs-border-color-translucent: var(--mafsa-borde);

  /* 4px: un radio chico sugiere una pieza mecanizada; uno grande se lee como
     una aplicación de consumo, y uno de cero como algo sin terminar. */
  --bs-border-radius: 0.25rem;
  --bs-border-radius-sm: 0.125rem;
  --bs-border-radius-lg: 0.25rem;
  --bs-border-radius-xl: 0.25rem;

  --bs-secondary-bg: var(--mafsa-superficie-tenue);
  --bs-tertiary-bg: var(--mafsa-lienzo);
}

/* --- La profundidad se comunica con bordes, no con sombras ----------------

   Un contenedor es una superficie blanca con un borde de 1px. Las sombras
   consumen aire, que es justo lo que falta en una pantalla densa. Las capas
   que flotan por encima del contenido —desplegables, modales— sí conservan una
   sombra mínima, porque tienen que despegarse de lo que tapan. */

.card,
.list-group,
.table-responsive-card {
  box-shadow: none;
}

.card {
  border: 1px solid var(--mafsa-borde);
}

/* --- Números y rótulos ----------------------------------------------------

   Los importes, las cantidades y los porcentajes van en monoespaciada y con
   cifras de ancho fijo: en una tabla de once columnas es lo que permite
   compararlos dígito a dígito en lugar de leerlos de a uno. */

.dato {
  font-family: var(--bs-font-monospace);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* Rótulo técnico: se lee como etiqueta y no compite con el dato que rotula. */
.rotulo {
  font-family: var(--bs-font-monospace);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mafsa-tinta-suave);
}

/* --- Componentes ---------------------------------------------------------- */

.btn-primary {
  --bs-btn-bg: var(--mafsa-azul);
  --bs-btn-border-color: var(--mafsa-azul);
  --bs-btn-hover-bg: var(--mafsa-azul-oscuro);
  --bs-btn-hover-border-color: var(--mafsa-azul-oscuro);
  --bs-btn-active-bg: var(--mafsa-azul-profundo);
  --bs-btn-active-border-color: var(--mafsa-azul-profundo);
  --bs-btn-disabled-bg: var(--mafsa-acero);
  --bs-btn-disabled-border-color: var(--mafsa-acero);
}

.btn-outline-primary,
.btn-outline-secondary {
  --bs-btn-color: var(--mafsa-tinta);
  --bs-btn-border-color: var(--mafsa-borde-fuerte);
  --bs-btn-hover-bg: var(--mafsa-superficie-tenue);
  --bs-btn-hover-border-color: var(--mafsa-azul);
  --bs-btn-hover-color: var(--mafsa-tinta);
  --bs-btn-active-bg: var(--mafsa-superficie-tenue);
  --bs-btn-active-color: var(--mafsa-tinta);
  --bs-btn-active-border-color: var(--mafsa-azul);
}

/* La acción que empuja el trabajo hacia adelante: crear el presupuesto, mandarlo
   a aprobar, aprobarlo, emitirlo, registrar el envío. Nada más, y **nunca dos
   veces en la misma pantalla**.

   El ADR-0015 amplió la reserva del ADR-0010 —que decía «avanzar la versión»—
   para que alcance a crear, que es la misma clase de acción vista un momento
   antes. La parte que hace el trabajo es la otra: una sola por pantalla. Se
   cumple porque en el inicio y en el listado de presupuestos, donde vive el
   naranja de «Nuevo presupuesto», no hay ninguna versión que avanzar; y donde sí
   la hay, ese botón está en la barra y va en `.btn-barra`. Hay prueba. */
.btn-avanzar {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: var(--mafsa-naranja);
  --bs-btn-border-color: var(--mafsa-naranja);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: var(--mafsa-naranja-oscuro);
  --bs-btn-hover-border-color: var(--mafsa-naranja-oscuro);
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: var(--mafsa-naranja-oscuro);
  --bs-btn-active-border-color: var(--mafsa-naranja-oscuro);
  --bs-btn-disabled-color: #ffffff;
  --bs-btn-disabled-bg: var(--mafsa-acero);
  --bs-btn-disabled-border-color: var(--mafsa-acero);
}

.navbar-mafsa {
  background-color: var(--mafsa-azul);
}

/* --- Los módulos, repartidos a lo ancho -----------------------------------

   Decisión de MAFSA: las entradas ocupan todo el ancho libre en lugar de
   apretarse contra la marca y dejar un hueco antes de las acciones.

   `space-evenly` y no `space-between`: con `between` la primera entrada queda
   pegada a la marca y la última contra «Nuevo presupuesto», donde se lee como
   parte del grupo de acciones. `evenly` reparte también los extremos, así que
   los dos grupos quedan separados sin margen a mano.

   Solo a partir de `lg`. Por debajo la barra se colapsa y la lista se apila en
   vertical: repartir el espacio ahí separaría las entradas por toda la altura
   de la pantalla. */

@media (min-width: 992px) {
  .navbar-mafsa .nav-modulos .nav-link {
    position: relative;
    padding-inline: 0.5rem;
    text-align: center;
  }

  /* Lejos unas de otras, las entradas dejan de compararse entre sí y el blanco
     al 55% contra el blanco al 100% ya no alcanza para ver dónde estás. La
     regla de 2px lo dice sin ambigüedad, y con un borde en lugar de un relleno,
     como el resto del lenguaje (ADR-0010, decisión 2).

     Va en `::after` y no en `border-bottom` para no mover la línea de base del
     texto al activarse: un borde real cambiaría la altura de la entrada y el
     resto de la barra se correría un pixel al navegar. */
  .navbar-mafsa .nav-modulos .nav-link.active::after {
    content: "";
    position: absolute;
    left: 0.5rem;
    right: 0.5rem;
    bottom: 0;
    height: 2px;
    background-color: #ffffff;
  }
}

/* --- Botones sobre el azul de la barra ------------------------------------

   Bootstrap no re-tematiza las variantes `outline` por tema: `.btn-outline-*`
   declara sus colores una sola vez y valen igual sobre fondo claro que oscuro.
   Como el bloque de arriba las pinta con la tinta del cuerpo —pensada para
   fondo claro—, dentro de la barra quedaban en #191c1d sobre #1b263b: contraste
   1.05:1, un rectángulo azul con el texto invisible hasta el hover. Sobre la
   barra se dibujan claras. */

[data-bs-theme="dark"] .btn-outline-primary,
[data-bs-theme="dark"] .btn-outline-secondary {
  --bs-btn-color: #ffffff;
  --bs-btn-border-color: rgba(255, 255, 255, 0.5);
  --bs-btn-hover-color: var(--mafsa-azul);
  --bs-btn-hover-bg: #ffffff;
  --bs-btn-hover-border-color: #ffffff;
  --bs-btn-active-color: var(--mafsa-azul);
  --bs-btn-active-bg: #ffffff;
  --bs-btn-active-border-color: #ffffff;
}

/* La acción principal sobre la barra. `.btn-primary` no sirve acá: su fondo es
   el mismo azul de la barra, así que el botón pierde la forma y queda como
   texto suelto. El naranja tampoco: sobre este azul pierde contraste, y en las
   pantallas donde la barra lo muestra —las que no son el inicio ni el listado—
   suele haber una acción de avanzar la versión que ya se lo lleva. Sobre azul,
   la jerarquía la da el relleno: esta va sólida y clara, y lo demás outline. */
.btn-barra {
  --bs-btn-color: var(--mafsa-azul);
  --bs-btn-bg: #ffffff;
  --bs-btn-border-color: #ffffff;
  --bs-btn-hover-color: var(--mafsa-azul);
  --bs-btn-hover-bg: var(--mafsa-superficie-tenue);
  --bs-btn-hover-border-color: var(--mafsa-superficie-tenue);
  --bs-btn-active-color: var(--mafsa-azul);
  --bs-btn-active-bg: var(--mafsa-borde);
  --bs-btn-active-border-color: var(--mafsa-borde);
}

/* Formulario compacto. Cada campo trae su propio `mb-3` desde
   `partials/field.html`, que está bien para un formulario de tres campos; en uno
   de once, sumado al canal de la fila, deja más aire que contenido. MAFSA lo
   dijo mirando el bloque de condiciones: «está todo muy espaciado». Acá el canal
   de la fila hace el trabajo y el margen del campo se recorta. */
.form-compacto .mb-3 {
  margin-bottom: 0.5rem;
}

.form-compacto .form-text {
  margin-top: 0.15rem;
}

.badge {
  --bs-badge-border-radius: 0.125rem;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--mafsa-azul);
  box-shadow: 0 0 0 0.15rem rgba(27, 38, 59, 0.2);
}

/* Encabezado de tabla: fondo de la marca y rótulos claros. El dato queda en la
   fila y el encabezado no compite con él. */
.table > thead {
  --bs-table-bg: var(--mafsa-azul);
  --bs-table-color: #ffffff;
  --bs-table-border-color: var(--mafsa-azul-oscuro);
}

/* Cifras de ancho fijo en toda tabla, sin tocar plantilla por plantilla: las
   columnas de importes quedan alineadas por dígito aunque la celda todavía no
   use `.dato`. Sólo afecta a los números. */
.table {
  font-variant-numeric: tabular-nums;
}

.table > thead th {
  font-family: var(--bs-font-monospace);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.env-banner {
  background-color: var(--mafsa-env-banner-bg);
  color: var(--mafsa-env-banner-fg);
}

/* --- Pantalla de trabajo: el resumen queda fijo ---------------------------

   ADR-0010, decisión 5. El resumen es lo que se consulta después de cada
   cambio, y antes había que bajar la pantalla entera para llegar. Sólo a partir
   de `xl`: por debajo la columna se apila bajo las tablas y fijarla no
   resolvería nada. */

@media (min-width: 1200px) {
  .costeo-resumen {
    position: sticky;
    /* Deja aire respecto del borde superior de la ventana; no se engancha a la
       barra porque la barra no es fija. */
    top: 1rem;

    /* No lleva `z-index` y no lo necesita: la tarjeta de referencia se movió
       adentro de este contenedor, así que en la columna no queda nada después
       del elemento fijo con lo que pudiera superponerse. Un `z-index` acá sólo
       elegiría quién tapa a quién, que no es lo que se quiere. */

    /* Un resumen más alto que la ventana no se podría leer completo: fijo, la
       parte de abajo —donde está el botón— quedaría fuera de la pantalla y sin
       forma de llegar. Con esto se desplaza dentro de sí mismo. */
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
  }
}

/* En pantallas angostas el resumen colapsa a una barra al pie. El espaciador
   reserva su altura: sin él la barra tapa el último bloque de la pantalla, que
   es justo donde está el alta de la última línea cargada. */
.costeo-barra-movil {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1020; /* Por debajo de un modal (1055) y de un desplegable (1000). */
}

.costeo-barra-espacio {
  height: 4.5rem;
}

/* El resumen desplegable de una tarjeta y el plegable de los filtros del
   listado: `<details>` con el `<summary>` como encabezado. Se le saca el
   marcador propio del navegador, que se dibuja distinto en cada uno, y se le
   pone el mismo chevron en todos. */
.card > summary,
.plegable > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card > summary::-webkit-details-marker,
.plegable > summary::-webkit-details-marker {
  display: none;
}

.card > summary::after,
.plegable > summary::after {
  content: "\F282"; /* bi-chevron-down */
  font-family: bootstrap-icons;
  font-size: 0.75rem;
  transition: transform 150ms ease-in-out;
}

.card[open] > summary::after,
.plegable[open] > summary::after {
  transform: rotate(180deg);
}

/* Indicador de actividad de HTMX: se muestra solo mientras hay una petición
   en curso. */
.htmx-indicator {
  opacity: 0;
  transition: opacity 150ms ease-in;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  opacity: 1;
}

/* Las tablas de costeo pueden ser anchas; en pantallas chicas se desplazan
   dentro de su contenedor y no rompen el layout (Documento Funcional §33.3). */
.table-responsive-card {
  overflow-x: auto;
}

/* Combobox de maestros (ADR-0009).

   Las sugerencias son parte de la interfaz y no del navegador: con `<datalist>`
   el listado lo dibujaba el sistema operativo, se veía distinto en cada máquina
   y no se podía navegar ni elegir con el teclado de forma consistente. */
.master-combobox {
  position: relative;
}

.master-combobox__results {
  position: absolute;
  z-index: 1056; /* Por encima de un modal de Bootstrap (1055). */
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 0.15rem;
  max-height: 16rem;
  overflow-y: auto;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.master-combobox__results .list-group-item {
  cursor: pointer;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

/* El resaltado del teclado y el del mouse tienen que verse igual: si el foco
   del teclado se distinguiera menos, navegar con flechas sería adivinar. */
.master-combobox__results .list-group-item.active,
.master-combobox__results .list-group-item:hover {
  background-color: var(--bs-primary-bg-subtle);
  color: var(--bs-emphasis-color);
}

.master-combobox__selected {
  color: var(--bs-success-text-emphasis);
}

/* --- El listado, apilado en pantalla angosta ------------------------------

   ADR-0010, nota de tramo 3, decisión 14. Siete columnas en 390px son un
   desplazamiento horizontal a ciegas: se pierde de vista el número justo cuando
   se lee el estado. Por debajo de `lg` cada fila se dibuja como una tarjeta y
   cada celda lleva su rótulo, tomado de `data-rotulo`.

   Es la misma tabla apilada por CSS y no un segundo bloque con un `d-none`
   encima: duplicar el marcado duplica el lugar donde hay que acordarse de
   agregar la columna nueva. */

@media (max-width: 991.98px) {
  .tabla-a-tarjetas > thead {
    display: none;
  }

  .tabla-a-tarjetas,
  .tabla-a-tarjetas > tbody,
  .tabla-a-tarjetas > tbody > tr,
  .tabla-a-tarjetas > tbody > tr > td {
    display: block;
    width: auto;
  }

  /* Bootstrap dibuja las líneas de la tabla celda por celda; apiladas se leen
     como rayas sueltas, así que el borde lo pone la tarjeta y las celdas van
     sin ninguno. */
  .tabla-a-tarjetas > tbody > tr {
    border: 1px solid var(--mafsa-borde);
    background-color: var(--mafsa-superficie);
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
  }

  .tabla-a-tarjetas > tbody > tr > td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    border: 0;
    padding: 0.15rem 0;
  }

  /* El rótulo es el encabezado de columna que dejó de estar arriba, así que se
     dibuja igual que `.rotulo`. */
  .tabla-a-tarjetas > tbody > tr > td::before {
    content: attr(data-rotulo);
    flex: 0 0 auto;
    font-family: var(--bs-font-monospace);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--mafsa-tinta-suave);
  }

  /* La celda que identifica la fila es el título de la tarjeta: va sola, más
     grande y sin rótulo. «NÚMERO 0007» al lado del número más grande de la
     tarjeta no aclara nada. */
  .tabla-a-tarjetas > tbody > tr > td.celda-encabezado {
    display: block;
    font-size: 1.125rem;
    padding-bottom: 0.35rem;
  }

  /* La fila del listado vacío tampoco lleva rótulo: es un mensaje, no un dato. */
  .tabla-a-tarjetas > tbody > tr > td.celda-encabezado::before,
  .tabla-a-tarjetas > tbody > tr > td[colspan]::before {
    display: none;
  }
}