/*
 * Tema institucional de mi-campus (UAZ) sobre Bootstrap 5.3.
 * Fuente única de la paleta para el sitio público, la gestión y la PWA
 * (la PWA lo importa desde frontend/src/main.ts).
 *
 * Azules: marca y acciones. Dorados: acentos (el texto sobre dorado siempre va en azul noche).
 * #983628: advertencias. #581908: peligro. Grises: bordes y texto secundario.
 */

:root {
  --uaz-blanco: #ffffff;
  --uaz-gris-claro: #cccccc;
  --uaz-gris: #999999;
  --uaz-azul: #1e3a63;
  --uaz-azul-oscuro: #002e52;
  --uaz-azul-noche: #01152e;
  --uaz-oro-claro: #e3c177;
  --uaz-oro: #c1a25d;
  --uaz-oro-oscuro: #a18343;
  --uaz-advertencia: #983628;
  --uaz-peligro: #581908;

  /* Derivados (mezclas de la paleta, no colores nuevos) */
  --uaz-fondo: color-mix(in srgb, var(--uaz-gris-claro) 18%, var(--uaz-blanco));
  --uaz-borde: color-mix(in srgb, var(--uaz-gris-claro) 70%, var(--uaz-blanco));
  --uaz-texto: var(--uaz-azul-noche);
  --uaz-texto-suave: color-mix(in srgb, var(--uaz-azul-noche) 62%, var(--uaz-blanco));
  --uaz-radio: 0.75rem;
  --uaz-sombra: 0 1px 2px rgba(1, 21, 46, 0.06), 0 4px 16px rgba(1, 21, 46, 0.06);
  --uaz-sombra-alta: 0 2px 4px rgba(1, 21, 46, 0.08), 0 12px 32px rgba(1, 21, 46, 0.12);

  /* Bootstrap */
  --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    sans-serif;
  --bs-body-color: var(--uaz-texto);
  --bs-body-color-rgb: 1, 21, 46;
  --bs-emphasis-color: var(--uaz-azul-noche);
  --bs-secondary-color: var(--uaz-texto-suave);
  --bs-tertiary-bg: var(--uaz-fondo);
  --bs-border-color: var(--uaz-borde);
  --bs-border-radius: 0.5rem;
  --bs-border-radius-lg: var(--uaz-radio);
  --bs-heading-color: var(--uaz-azul-noche);

  --bs-primary: var(--uaz-azul-oscuro);
  --bs-primary-rgb: 0, 46, 82;
  --bs-primary-text-emphasis: var(--uaz-azul-oscuro);
  --bs-primary-bg-subtle: color-mix(in srgb, var(--uaz-azul) 10%, var(--uaz-blanco));
  --bs-primary-border-subtle: color-mix(in srgb, var(--uaz-azul) 30%, var(--uaz-blanco));
  --bs-secondary: var(--uaz-gris);
  --bs-secondary-rgb: 153, 153, 153;
  --bs-info: var(--uaz-azul);
  --bs-info-rgb: 30, 58, 99;
  --bs-info-text-emphasis: var(--uaz-azul);
  --bs-info-bg-subtle: color-mix(in srgb, var(--uaz-azul) 9%, var(--uaz-blanco));
  --bs-info-border-subtle: color-mix(in srgb, var(--uaz-azul) 28%, var(--uaz-blanco));
  --bs-success: var(--uaz-oro-oscuro);
  --bs-success-rgb: 161, 131, 67;
  --bs-success-text-emphasis: color-mix(in srgb, var(--uaz-oro-oscuro) 70%, var(--uaz-azul-noche));
  --bs-success-bg-subtle: color-mix(in srgb, var(--uaz-oro-claro) 22%, var(--uaz-blanco));
  --bs-success-border-subtle: color-mix(in srgb, var(--uaz-oro) 55%, var(--uaz-blanco));
  --bs-warning: var(--uaz-advertencia);
  --bs-warning-rgb: 152, 54, 40;
  --bs-warning-text-emphasis: var(--uaz-advertencia);
  --bs-warning-bg-subtle: color-mix(in srgb, var(--uaz-advertencia) 9%, var(--uaz-blanco));
  --bs-warning-border-subtle: color-mix(in srgb, var(--uaz-advertencia) 30%, var(--uaz-blanco));
  --bs-danger: var(--uaz-peligro);
  --bs-danger-rgb: 88, 25, 8;
  --bs-danger-text-emphasis: var(--uaz-peligro);
  --bs-danger-bg-subtle: color-mix(in srgb, var(--uaz-peligro) 8%, var(--uaz-blanco));
  --bs-danger-border-subtle: color-mix(in srgb, var(--uaz-peligro) 28%, var(--uaz-blanco));
  --bs-light: var(--uaz-fondo);
  --bs-dark: var(--uaz-azul-noche);
  --bs-dark-rgb: 1, 21, 46;

  --bs-link-color: var(--uaz-azul);
  --bs-link-color-rgb: 30, 58, 99;
  --bs-link-hover-color: var(--uaz-azul-oscuro);
  --bs-link-hover-color-rgb: 0, 46, 82;
  --bs-focus-ring-color: rgba(0, 46, 82, 0.25);
}

body {
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: 700;
  letter-spacing: -0.01em;
}

a {
  text-underline-offset: 0.2em;
}

::selection {
  background: var(--uaz-oro-claro);
  color: var(--uaz-azul-noche);
}

/* --- Botones ------------------------------------------------------------------- */

.btn {
  --bs-btn-font-weight: 600;
  --bs-btn-border-radius: 0.5rem;
}

.btn-primary {
  --bs-btn-bg: var(--uaz-azul-oscuro);
  --bs-btn-border-color: var(--uaz-azul-oscuro);
  --bs-btn-hover-bg: var(--uaz-azul);
  --bs-btn-hover-border-color: var(--uaz-azul);
  --bs-btn-active-bg: var(--uaz-azul-noche);
  --bs-btn-active-border-color: var(--uaz-azul-noche);
  --bs-btn-disabled-bg: var(--uaz-azul-oscuro);
  --bs-btn-disabled-border-color: var(--uaz-azul-oscuro);
  --bs-btn-focus-shadow-rgb: 0, 46, 82;
}

.btn-outline-primary {
  --bs-btn-color: var(--uaz-azul-oscuro);
  --bs-btn-border-color: var(--uaz-azul-oscuro);
  --bs-btn-hover-bg: var(--uaz-azul-oscuro);
  --bs-btn-hover-border-color: var(--uaz-azul-oscuro);
  --bs-btn-active-bg: var(--uaz-azul-noche);
  --bs-btn-active-border-color: var(--uaz-azul-noche);
  --bs-btn-focus-shadow-rgb: 0, 46, 82;
}

.btn-outline-secondary {
  --bs-btn-color: var(--uaz-azul);
  --bs-btn-border-color: var(--uaz-gris-claro);
  --bs-btn-hover-color: var(--uaz-azul-noche);
  --bs-btn-hover-bg: var(--uaz-fondo);
  --bs-btn-hover-border-color: var(--uaz-gris);
  --bs-btn-active-color: var(--uaz-azul-noche);
  --bs-btn-active-bg: var(--uaz-gris-claro);
  --bs-btn-active-border-color: var(--uaz-gris);
}

/* Acción destacada en dorado (texto azul noche para mantener el contraste). */
.btn-oro {
  --bs-btn-color: var(--uaz-azul-noche);
  --bs-btn-bg: var(--uaz-oro-claro);
  --bs-btn-border-color: var(--uaz-oro-claro);
  --bs-btn-hover-color: var(--uaz-azul-noche);
  --bs-btn-hover-bg: var(--uaz-oro);
  --bs-btn-hover-border-color: var(--uaz-oro);
  --bs-btn-active-color: var(--uaz-azul-noche);
  --bs-btn-active-bg: var(--uaz-oro-oscuro);
  --bs-btn-active-border-color: var(--uaz-oro-oscuro);
  --bs-btn-focus-shadow-rgb: 193, 162, 93;
}

.btn-warning {
  --bs-btn-color: var(--uaz-blanco);
  --bs-btn-bg: var(--uaz-advertencia);
  --bs-btn-border-color: var(--uaz-advertencia);
  --bs-btn-hover-color: var(--uaz-blanco);
  --bs-btn-hover-bg: color-mix(in srgb, var(--uaz-advertencia) 85%, var(--uaz-azul-noche));
  --bs-btn-hover-border-color: color-mix(in srgb, var(--uaz-advertencia) 85%, var(--uaz-azul-noche));
}

.btn-danger {
  --bs-btn-bg: var(--uaz-peligro);
  --bs-btn-border-color: var(--uaz-peligro);
  --bs-btn-hover-bg: color-mix(in srgb, var(--uaz-peligro) 80%, var(--uaz-azul-noche));
  --bs-btn-hover-border-color: color-mix(in srgb, var(--uaz-peligro) 80%, var(--uaz-azul-noche));
}

.btn-outline-danger {
  --bs-btn-color: var(--uaz-peligro);
  --bs-btn-border-color: color-mix(in srgb, var(--uaz-peligro) 45%, var(--uaz-blanco));
  --bs-btn-hover-bg: var(--uaz-peligro);
  --bs-btn-hover-border-color: var(--uaz-peligro);
  --bs-btn-active-bg: var(--uaz-peligro);
  --bs-btn-active-border-color: var(--uaz-peligro);
}

/* --- Insignias y alertas ------------------------------------------------------- */

.badge {
  font-weight: 600;
  letter-spacing: 0.01em;
}

.text-bg-warning {
  color: var(--uaz-blanco) !important;
  background-color: var(--uaz-advertencia) !important;
}

.text-bg-danger {
  color: var(--uaz-blanco) !important;
  background-color: var(--uaz-peligro) !important;
}

.text-bg-success {
  color: var(--uaz-azul-noche) !important;
  background-color: var(--uaz-oro-claro) !important;
}

.text-bg-info {
  color: var(--uaz-blanco) !important;
  background-color: var(--uaz-azul) !important;
}

.text-bg-secondary {
  color: var(--uaz-azul-noche) !important;
  background-color: var(--uaz-gris-claro) !important;
}

.text-bg-light {
  color: var(--uaz-azul) !important;
  background-color: var(--uaz-fondo) !important;
  border: 1px solid var(--uaz-borde);
}

.alert {
  border-width: 0 0 0 4px;
  border-radius: 0.5rem;
}

/* --- Formularios --------------------------------------------------------------- */

.form-control:focus,
.form-select:focus {
  border-color: var(--uaz-azul);
  box-shadow: 0 0 0 0.25rem rgba(0, 46, 82, 0.15);
}

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

.form-check-input:focus {
  border-color: var(--uaz-azul);
  box-shadow: 0 0 0 0.25rem rgba(0, 46, 82, 0.15);
}

.form-label {
  font-weight: 600;
  font-size: 0.9rem;
}

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

.pagination {
  --bs-pagination-color: var(--uaz-azul);
  --bs-pagination-hover-color: var(--uaz-azul-noche);
  --bs-pagination-active-bg: var(--uaz-azul-oscuro);
  --bs-pagination-active-border-color: var(--uaz-azul-oscuro);
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(0, 46, 82, 0.15);
}

.nav-pills {
  --bs-nav-pills-link-active-bg: var(--uaz-azul-oscuro);
  --bs-nav-link-color: var(--uaz-azul);
  --bs-nav-link-hover-color: var(--uaz-azul-noche);
}

.dropdown-menu {
  --bs-dropdown-link-active-bg: var(--uaz-azul-oscuro);
  --bs-dropdown-border-color: var(--uaz-borde);
  --bs-dropdown-box-shadow: var(--uaz-sombra-alta);
  box-shadow: var(--bs-dropdown-box-shadow);
}

.accordion {
  --bs-accordion-active-color: var(--uaz-azul-noche);
  --bs-accordion-active-bg: color-mix(in srgb, var(--uaz-oro-claro) 20%, var(--uaz-blanco));
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(0, 46, 82, 0.15);
}

.list-group {
  --bs-list-group-color: var(--uaz-texto);
  --bs-list-group-border-color: var(--uaz-borde);
  --bs-list-group-action-color: var(--uaz-texto);
  --bs-list-group-action-hover-color: var(--uaz-azul-noche);
  --bs-list-group-action-hover-bg: color-mix(in srgb, var(--uaz-oro-claro) 14%, var(--uaz-blanco));
  --bs-list-group-active-bg: var(--uaz-azul-oscuro);
  --bs-list-group-active-border-color: var(--uaz-azul-oscuro);
}

.card {
  --bs-card-border-color: var(--uaz-borde);
  --bs-card-border-radius: var(--uaz-radio);
  --bs-card-inner-border-radius: calc(var(--uaz-radio) - 1px);
}

.table {
  --bs-table-striped-bg: var(--uaz-fondo);
  --bs-table-hover-bg: color-mix(in srgb, var(--uaz-oro-claro) 14%, var(--uaz-blanco));
}

.table > thead th,
.table > thead th a {
  color: var(--uaz-texto-suave);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
}

/* Tarjeta con elevación al pasar el cursor (enlaces-tarjeta). */
.tarjeta-enlace {
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.tarjeta-enlace:hover,
.tarjeta-enlace:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--uaz-sombra-alta);
  /* Sin tocar el borde izquierdo: en los avisos indica la prioridad. */
  border-top-color: var(--uaz-oro);
  border-right-color: var(--uaz-oro);
  border-bottom-color: var(--uaz-oro);
}

/* Título de sección con acento dorado. */
.titulo-seccion {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.15rem;
  margin-bottom: 1rem;
}

.titulo-seccion::before {
  content: "";
  width: 0.35rem;
  height: 1.2em;
  border-radius: 1rem;
  background: var(--uaz-oro);
}

/* Marca: monograma UAZ. */
.marca-uaz {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.55rem;
  background: var(--uaz-oro-claro);
  color: var(--uaz-azul-noche);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

/* Prioridad de avisos. */
.aviso {
  border-left: 4px solid var(--uaz-oro);
}

.aviso-importante {
  border-left-color: var(--uaz-advertencia);
}

.aviso-urgente {
  border-left-color: var(--uaz-peligro);
}