/* ===========================================================================
   Identidad gráfica (RAD-044)

   Esta aplicación ya usaba el color para hablar de dinero antes de tener marca:
   rojo = falta dinero del cliente, ámbar = alguien tiene que revisar esto,
   verde = cuadra. La marca entra por debajo de eso, nunca por encima.

   El amarillo institucional #FFD200 y el ámbar de Bootstrap #FFC107 se
   distinguen a duras penas puestos uno al lado del otro. Por eso el amarillo de
   marca no pinta ni un fondo, ni un encabezado, ni un botón: vive en el símbolo
   y en nada más. Si se usara de relleno, en un mes nadie vería el ámbar que sí
   significa algo. El color de acción es el azul, que en esta aplicación no
   quiere decir nada sobre el dinero y por eso puede decir «pulse aquí».
   =========================================================================== */

:root {
  /* Paleta institucional. Valores exactos del documento de marca; no se tocan. */
  --apx-gris: #6D6E71;
  --apx-amarillo: #FFD200;
  --apx-azul: #0B4EA2;
  --apx-blanco: #FFFFFF;

  /* Derivados: solo el azul y el gris, aclarados u oscurecidos. No hay ningún
     derivado del amarillo, a propósito: un amarillo más claro o más oscuro
     sigue siendo amarillo y seguiría compitiendo con el ámbar. */
  --apx-azul-sobre: #09428A;       /* azul al 85 %, para el puntero encima */
  --apx-azul-pulsado: #093E82;     /* azul al 80 %, para el botón pulsado */
  --apx-gris-tinta: #39393B;       /* gris al 52 %: el texto, 11.5:1 sobre blanco */
  --apx-gris-borde: #DBDCDD;
  --apx-gris-superficie: #F4F4F5;

  /* Los tres colores con significado. NO son colores de marca y no salen del
     documento de identidad: son los de Bootstrap 5.3.3, nombrados aquí en
     términos del negocio para que se vea de un vistazo qué está reservado.
     La asignación de abajo es deliberadamente la identidad: fija los valores en
     un solo sitio sin cambiar ni uno. */
  --apx-falta: #DC3545;
  --apx-revisar: #FFC107;
  --apx-cuadra: #198754;

  /* El ámbar de relleno no sirve como tinta. Medido sobre blanco: #FFC107 da
     **1.63:1**, muy por debajo del 4.5:1 que exige WCAG AA, así que un texto
     ambarino sobre claro no se lee. Lo destapó la medición de contrastes de
     RAD-044 y no es cosa de la marca: viene de Bootstrap.
     #664D03 es el mismo ámbar oscurecido —sigue leyendose como ámbar— y da
     **7.99:1**. El de relleno se queda para fondos, bordes e insignias, donde
     el contraste lo da el texto que lleva encima.
     El rojo y el verde no necesitan gemelo: dan 4.53:1 los dos y pasan. */
  --apx-revisar-tinta: #664D03;

  /* --- Bootstrap habla con estos nombres; aquí se le dice la paleta. --------
     Lo que Bootstrap resuelve por variable se arregla solo; lo que trae el hexa
     cocido en el CSS compilado —los botones— se reescribe más abajo. */
  --bs-primary: var(--apx-azul);
  --bs-primary-rgb: 11, 78, 162;
  --bs-primary-text-emphasis: #041F41;
  --bs-primary-bg-subtle: #CEDCEC;
  --bs-primary-border-subtle: #9DB8DA;

  --bs-secondary: var(--apx-gris);
  --bs-secondary-rgb: 109, 110, 113;
  --bs-secondary-text-emphasis: #2C2C2D;
  --bs-secondary-bg-subtle: #E2E2E3;
  --bs-secondary-border-subtle: #C5C5C6;

  --bs-dark: var(--apx-gris-tinta);
  --bs-dark-rgb: 57, 57, 59;

  --bs-danger: var(--apx-falta);
  --bs-danger-rgb: 220, 53, 69;
  --bs-warning: var(--apx-revisar);
  --bs-warning-rgb: 255, 193, 7;
  --bs-success: var(--apx-cuadra);
  --bs-success-rgb: 25, 135, 84;

  --bs-body-color: var(--apx-gris-tinta);
  --bs-body-color-rgb: 57, 57, 59;
  --bs-secondary-color: var(--apx-gris);   /* .text-muted y los marcadores de posición */
  --bs-border-color: var(--apx-gris-borde);

  --bs-link-color: var(--apx-azul);
  --bs-link-color-rgb: 11, 78, 162;
  --bs-link-hover-color: var(--apx-azul-pulsado);

  --bs-focus-ring-color: rgba(11, 78, 162, 0.25);
}

/* --bs-light se queda como lo trae Bootstrap, #f8f9fa, y no es olvido: es la
   superficie sobre la que cae el gris de marca en .bg-light y .table-light, y
   ahí el contraste ya está en 4.84:1. Oscurecerla al gris de marca lo bajaría a
   4.6:1 y seguiría bajando con cada retoque. El gris #6D6E71 como texto no debe
   pisar nada más oscuro que #F3F3F4. */

.btn-primary {
  --bs-btn-bg: var(--apx-azul);
  --bs-btn-border-color: var(--apx-azul);
  --bs-btn-hover-bg: var(--apx-azul-sobre);
  --bs-btn-hover-border-color: var(--apx-azul-sobre);
  --bs-btn-active-bg: var(--apx-azul-pulsado);
  --bs-btn-active-border-color: var(--apx-azul-pulsado);
  --bs-btn-disabled-bg: var(--apx-azul);
  --bs-btn-disabled-border-color: var(--apx-azul);
  --bs-btn-focus-shadow-rgb: 11, 78, 162;
}

.btn-outline-primary {
  --bs-btn-color: var(--apx-azul);
  --bs-btn-border-color: var(--apx-azul);
  --bs-btn-hover-bg: var(--apx-azul);
  --bs-btn-hover-border-color: var(--apx-azul);
  --bs-btn-active-bg: var(--apx-azul);
  --bs-btn-active-border-color: var(--apx-azul);
  --bs-btn-disabled-color: var(--apx-azul);
  --bs-btn-disabled-border-color: var(--apx-azul);
  --bs-btn-focus-shadow-rgb: 11, 78, 162;
}

.btn-secondary {
  --bs-btn-bg: var(--apx-gris);
  --bs-btn-border-color: var(--apx-gris);
  --bs-btn-hover-bg: #5D5E60;
  --bs-btn-hover-border-color: #5D5E60;
  --bs-btn-active-bg: #57585A;
  --bs-btn-active-border-color: #57585A;
  --bs-btn-disabled-bg: var(--apx-gris);
  --bs-btn-disabled-border-color: var(--apx-gris);
  --bs-btn-focus-shadow-rgb: 109, 110, 113;
}

.btn-outline-secondary {
  --bs-btn-color: var(--apx-gris);
  --bs-btn-border-color: var(--apx-gris);
  --bs-btn-hover-bg: var(--apx-gris);
  --bs-btn-hover-border-color: var(--apx-gris);
  --bs-btn-active-bg: var(--apx-gris);
  --bs-btn-active-border-color: var(--apx-gris);
  --bs-btn-disabled-color: var(--apx-gris);
  --bs-btn-disabled-border-color: var(--apx-gris);
  --bs-btn-focus-shadow-rgb: 109, 110, 113;
}

/* --- La marca en la barra de navegación ---------------------------------- */

/* El filete azul es todo el color que la marca pone en el cromo de la
   aplicación: separa la barra del contenido sin meter una superficie de color
   en ninguna pantalla donde haya cifras. */
.apx-barra {
  border-bottom: 3px solid var(--apx-azul);
}

.apx-marca {
  --bs-navbar-brand-color: var(--apx-gris);
  --bs-navbar-brand-hover-color: var(--apx-gris-tinta);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.apx-marca-simbolo {
  display: block;
  height: 30px;
  width: auto;
  flex: none;
}

.apx-marca-nombre {
  display: block;
  font-size: 1.25rem;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.apx-marca-apx {
  font-weight: 700;
}

.apx-marca-pms {
  font-weight: 300;
}

.apx-marca-bajada {
  font-size: 0.6875rem;
  line-height: 1.1;
  letter-spacing: 0.02em;
}

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--apx-azul);
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* El resumen de validación se pinta siempre, haya errores o no: cuando no los hay, ASP.NET
   deja el <div> en la página con la clase 'validation-summary-valid' y la lista vacía. Con
   'alert alert-danger' encima, eso es un recuadro rojo en blanco al abrir cualquier
   formulario: una alarma que no alarma de nada, y la primera que se aprende a ignorar.
   Se oculta mientras el resumen esté válido; en cuanto hay errores la clase cambia a
   'validation-summary-errors' y el recuadro vuelve a aparecer solo. Va aquí y no en las
   vistas porque el problema es de todas, y una regla no se le olvida a la siguiente. */
.validation-summary-valid {
  display: none;
}

/* Una regla y no cuatro ediciones. `.text-warning` se escribió en cuatro vistas
   —dos contadores de renglones que cambiaron y el aviso de que la lista de
   sobrepagos viene recortada— y en todas quedó prácticamente invisible. Cambiarlas
   una por una dejaba el problema en pie para la quinta vez que alguien escriba la
   clase, que es la que nadie va a revisar.
   Aquí se arregla la clase, no sus usos: el ámbar como **tinta** pasa a ser el
   legible. El de relleno sigue intacto en `.bg-warning`, `.border-warning`,
   `.text-bg-warning` y `.table-warning`, que es donde el ámbar sí tiene que gritar.
   Si algún día la aplicación tuviera una superficie oscura, esta regla habría que
   revisarla: sobre oscuro el legible es el claro. Hoy no hay ninguna. */
.text-warning {
  --bs-text-opacity: 1;
  color: var(--apx-revisar-tinta) !important;
}