/* theme-ibn.css
 * Hoja de estilos para alinear la intranet con la identidad gráfica oficial
 * IBN. Basado en el documento "Consideraciones Gráficas IBN".
 *
 * Carga DESPUÉS de bootstrap.min.css para que las variables sobreescriban
 * los defaults de Bootstrap.
 */

/* ============================================
   1. FUENTES OFICIALES (locales en /assets/fonts)
   ============================================ */
@font-face {
  font-family: "Lulo Clean";
  src: url("/assets/fonts/LuloCleanOne.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lulo Clean";
  src: url("/assets/fonts/LuloCleanOneBold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("/assets/fonts/Montserrat-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("/assets/fonts/Montserrat-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Museo";
  src: url("/assets/fonts/Museo500-Regular.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ============================================
   2. PALETA OFICIAL IBN
   ============================================ */
:root {
  /* Principales */
  --ibn-turquesa: #009494;
  --ibn-grafito: #3B3438;
  --ibn-azul-grisaceo: #153252;
  --ibn-gris-claro: #D2D2D2;
  --ibn-blanco: #FFFFFF;
  /* Complementarios */
  --ibn-naranja: #EF7F1B;
  --ibn-rojo: #C01718;
  --ibn-magenta: #E71F85;
  --ibn-cian: #4B72B4;
  --ibn-negro: #1D1D1D;

  /* Fuentes */
  --ibn-font-display: "Lulo Clean", "Montserrat", Arial, sans-serif;
  --ibn-font-body: "Montserrat", "Museo", "Segoe UI", Helvetica, Arial, sans-serif;
}

/* ============================================
   3. OVERRIDE DE BOOTSTRAP 5
   ============================================ */
:root,
[data-bs-theme="light"] {
  --bs-primary: var(--ibn-azul-grisaceo);
  --bs-primary-rgb: 21, 50, 82;
  --bs-secondary: var(--ibn-grafito);
  --bs-secondary-rgb: 59, 52, 56;
  --bs-info: var(--ibn-turquesa);
  --bs-info-rgb: 0, 148, 148;
  --bs-body-color: var(--ibn-grafito);
  --bs-body-font-family: var(--ibn-font-body);
  --bs-link-color: var(--ibn-azul-grisaceo);
  --bs-link-hover-color: var(--ibn-turquesa);
  --bs-danger: var(--ibn-rojo);
  --bs-danger-rgb: 192, 23, 24;
  --bs-warning: var(--ibn-naranja);
  --bs-warning-rgb: 239, 127, 27;
}

/* btn-danger con rojo oficial */
.btn-danger {
  --bs-btn-bg: var(--ibn-rojo);
  --bs-btn-border-color: var(--ibn-rojo);
  --bs-btn-hover-bg: #a8141a;
  --bs-btn-hover-border-color: #a8141a;
  --bs-btn-active-bg: #8c1015;
  --bs-btn-active-border-color: #8c1015;
}
/* btn-warning con naranja oficial */
.btn-warning {
  --bs-btn-color: white;
  --bs-btn-bg: var(--ibn-naranja);
  --bs-btn-border-color: var(--ibn-naranja);
  --bs-btn-hover-bg: #d56b08;
  --bs-btn-hover-border-color: #d56b08;
  --bs-btn-hover-color: white;
  --bs-btn-active-bg: #b85a05;
  --bs-btn-active-border-color: #b85a05;
}
/* Badges */
.badge.bg-danger { background-color: var(--ibn-rojo) !important; }
.badge.bg-warning { background-color: var(--ibn-naranja) !important; color: white !important; }

/* Las clases de botón usan estas variables, pero Bootstrap también pinta
 * algunos colores hardcoded. Forzamos algunos para asegurar el look. */
.btn-primary {
  --bs-btn-bg: var(--ibn-azul-grisaceo);
  --bs-btn-border-color: var(--ibn-azul-grisaceo);
  --bs-btn-hover-bg: #1a3f63;
  --bs-btn-hover-border-color: #1a3f63;
  --bs-btn-active-bg: #0e2640;
  --bs-btn-active-border-color: #0e2640;
}
.btn-info {
  --bs-btn-color: white;
  --bs-btn-bg: var(--ibn-turquesa);
  --bs-btn-border-color: var(--ibn-turquesa);
  --bs-btn-hover-bg: #007a7a;
  --bs-btn-hover-border-color: #007a7a;
  --bs-btn-hover-color: white;
  --bs-btn-active-bg: #006666;
  --bs-btn-active-border-color: #006666;
}
.btn-outline-primary {
  --bs-btn-color: var(--ibn-azul-grisaceo);
  --bs-btn-border-color: var(--ibn-azul-grisaceo);
  --bs-btn-hover-bg: var(--ibn-azul-grisaceo);
  --bs-btn-hover-border-color: var(--ibn-azul-grisaceo);
}

/* ============================================
   4. TIPOGRAFÍA GLOBAL
   ============================================ */
body {
  font-family: var(--ibn-font-body);
  color: var(--ibn-grafito);
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--ibn-font-display);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ibn-azul-grisaceo);
}
/* La fuente Lulo Clean es display-only (sólo mayúsculas), así que la usamos
 * para textos cortos en mayúsculas. Para títulos largos usamos Montserrat. */
.text-display { font-family: var(--ibn-font-display); text-transform: uppercase; letter-spacing: 0.18em; }
.text-museo { font-family: "Museo", var(--ibn-font-body); }

/* ============================================
   5. ELEMENTOS ESPECÍFICOS DE LA INTRANET
   ============================================ */
/* Header / Navbar: gradient oficial usando azul grisáceo + turquesa */
.navbar-ibn,
.page-header {
  background: linear-gradient(135deg, var(--ibn-azul-grisaceo) 0%, var(--ibn-turquesa) 100%) !important;
}
.navbar-ibn .brand,
.page-header h1 {
  font-family: var(--ibn-font-display);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: white;
}

/* Botones de la barra superior */
.btn-back,
.btn-logout {
  font-family: var(--ibn-font-body);
  font-weight: 500;
}

/* Tablas: encabezados en azul grisáceo */
.table thead th {
  color: var(--ibn-azul-grisaceo);
  font-family: var(--ibn-font-body);
  font-weight: 700;
}

/* Tags de Select2 con turquesa como acento */
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice {
  background-color: var(--ibn-turquesa) !important;
  color: white !important;
  border: none !important;
}
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove {
  color: rgba(255,255,255,0.85) !important;
}

/* Cards / Containers: fondo blanco con borde turquesa sutil al focus */
.card { border-color: var(--ibn-gris-claro); }
.form-control:focus,
.form-select:focus {
  border-color: var(--ibn-turquesa);
  box-shadow: 0 0 0 0.2rem rgba(0, 148, 148, 0.15);
}

/* Links del footer / nav items */
.nav-link.active,
.nav-tabs .nav-link.active {
  color: var(--ibn-turquesa) !important;
  border-bottom-color: var(--ibn-turquesa) !important;
}

/* Badges */
.badge.bg-info { background-color: var(--ibn-turquesa) !important; }