/* ── Identidad ITS: colores y tipografía. Los usa el ingreso y, después, el resto del ERP. ── */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../lib/plus-jakarta-sans/files/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "EB Garamond";
  src: url("../lib/eb-garamond/files/eb-garamond-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --its-azul: #003689;
  --its-azul-oscuro: #00296a;
  --its-naranja: #ec7e20;
  --its-celeste: #e1ebfa;
  --its-gris-fondo: #f0f2f7;
  --its-texto: #111827;
  --its-texto-suave: #4b5563;
  --its-borde: #e5e7eb;
  --its-fuente: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --its-serif: "EB Garamond", Georgia, "Times New Roman", serif;   /* títulos de página y saludo */

  /* Estados (chips, avisos, indicadores): color del texto + fondo suave */
  --its-exito: #1f7a3d;    --its-exito-fondo: #e3f4e8;
  --its-aviso: #9a5b00;    --its-aviso-fondo: #fdf0dc;
  --its-error: #b42318;    --its-error-fondo: #fde7e5;
  --its-neutro: #4b5563;   --its-neutro-fondo: #eceef2;

  /* Áreas de la empresa (los mismos tonos del diseño de comunicados) */
  --its-oliva: #3f4e1f;    --its-oliva-fondo: #eef1e6;      /* Administración */
  --its-cobre: #b45a0d;    --its-cobre-fondo: #fdefe3;      /* RRHH */

  /* Formas */
  --its-radio: .9rem;            /* tarjetas */
  --its-radio-chico: .5rem;      /* campos, íconos, botones */

  /* Bootstrap con los colores de ITS (botones, enlaces, casillas, paginación de las tablas…) */
  --bs-body-font-family: var(--its-fuente);
  --bs-primary: var(--its-azul);
  --bs-primary-rgb: 0, 54, 137;
  --bs-link-color: var(--its-azul);
  --bs-link-color-rgb: 0, 54, 137;
  --bs-link-hover-color: var(--its-azul-oscuro);
  --bs-link-hover-color-rgb: 0, 41, 106;
}

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

.btn-outline-primary {
  --bs-btn-color: var(--its-azul);
  --bs-btn-border-color: var(--its-azul);
  --bs-btn-hover-bg: var(--its-azul);
  --bs-btn-hover-border-color: var(--its-azul);
  --bs-btn-active-bg: var(--its-azul-oscuro);
  --bs-btn-active-border-color: var(--its-azul-oscuro);
}

.pagination {
  --bs-pagination-color: var(--its-azul);
  --bs-pagination-active-bg: var(--its-azul);
  --bs-pagination-active-border-color: var(--its-azul);
}

.form-check-input:checked {
  background-color: var(--its-azul);
  border-color: var(--its-azul);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--its-azul);
  box-shadow: 0 0 0 .2rem rgba(0, 54, 137, .15);
}

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 rgba(0, 54, 137, .35);
}

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

.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;
}