/* ---------- Bootstrap 5: tema y compatibilidad ----------
   Bootstrap se carga antes que todo src/css/ (ver head-common.html), así que
   cada regla propia con la misma especificidad le gana por orden. Este archivo
   hace dos cosas:
   1. Pasa los tokens de la marca (00-tokens.css) a las variables --bs-* para
      que los componentes de Bootstrap (offcanvas, dropdown, foco de botones)
      usen la paleta de Clarita en vez del azul por defecto.
   2. Neutraliza los estilos de Bootstrap que chocan con clases que el sitio ya
      usaba con otro significado (.lead, .nav, .btn, <hr class="divider">). */

:root {
  --bs-body-font-family: var(--ff-cuerpo);
  --bs-body-color: var(--texto);
  --bs-body-bg: var(--crema);
  --bs-body-line-height: 1.6;
  --bs-primary: #294b63;
  --bs-primary-rgb: 41, 75, 99;
  --bs-secondary-color: var(--texto-suave);
  --bs-border-color: var(--borde);
  --bs-border-radius: var(--radio);
  --bs-link-color: var(--petroleo-oscuro);
  --bs-link-color-rgb: 21, 50, 68;
  --bs-link-hover-color: var(--petroleo);
  --bs-link-hover-color-rgb: 41, 75, 99;
  --bs-heading-color: var(--texto);
  --bs-emphasis-color: var(--texto);
  /* Separación entre columnas de .row (g-* la pisa donde haga falta). */
  --bs-gutter-x: 1.75rem;
}

/* Bootstrap define .lead como texto grande y fino (1.25rem / 300). En este
   sitio .lead es solo "párrafo introductorio": tamaño y peso los fija cada
   sección. */
.lead { font-size: inherit; font-weight: inherit; }

/* .nav de Bootstrap envuelve (flex-wrap) y quita padding; el header lo usa
   como fila única de logo + menú + acciones. */
.nav { flex-wrap: nowrap; }

/* hr de Bootstrap: opacidad 0.25 y borde superior — .divider es una barra
   sólida de color. */
hr.divider { opacity: 1; color: inherit; }

/* Botones: los colores ya los define 02-buttons.css. Acá se reescriben los
   estados de Bootstrap (hover, foco y activo), que vienen en azul fijo: el
   borde toma el color del propio botón y el halo de foco es del color de la
   marca. La primera declaración de la sombra es el respaldo para navegadores
   sin color-mix(). */
.btn {
  --bs-btn-focus-box-shadow: 0 0 0 0.2rem rgba(21, 50, 68, 0.3);
  --bs-btn-focus-box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--petroleo) 40%, transparent);
  --bs-btn-line-height: 1.4;
  --bs-btn-border-radius: 999px;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-border-color: transparent;
}
.btn-primary {
  --bs-btn-hover-bg: var(--petroleo-oscuro);
  --bs-btn-hover-color: var(--blanco);
  --bs-btn-hover-border-color: var(--petroleo-oscuro);
  --bs-btn-active-bg: var(--petroleo-oscuro);
  --bs-btn-active-border-color: var(--petroleo-oscuro);
  --bs-btn-active-color: var(--blanco);
  --bs-btn-disabled-bg: var(--petroleo);
  --bs-btn-disabled-border-color: transparent;
}
.btn-accent {
  --bs-btn-hover-bg: var(--petroleo);
  --bs-btn-hover-color: var(--blanco);
  --bs-btn-hover-border-color: var(--petroleo);
  --bs-btn-active-bg: var(--petroleo);
  --bs-btn-active-border-color: var(--petroleo);
  --bs-btn-active-color: var(--blanco);
}
.btn-outline {
  --bs-btn-hover-bg: var(--petroleo-oscuro);
  --bs-btn-hover-color: var(--crema);
  --bs-btn-hover-border-color: var(--petroleo-oscuro);
  --bs-btn-active-bg: var(--petroleo-oscuro);
  --bs-btn-active-border-color: var(--petroleo-oscuro);
  --bs-btn-active-color: var(--crema);
}
.btn-white {
  --bs-btn-hover-bg: var(--blanco);
  --bs-btn-hover-color: var(--petroleo-oscuro);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-bg: var(--blanco);
  --bs-btn-active-border-color: transparent;
  --bs-btn-active-color: var(--petroleo-oscuro);
}
.btn:first-child:active,
.btn.active { background: var(--petroleo-oscuro); color: var(--blanco); border-color: var(--petroleo-oscuro); }

/* Los links del menú también traen un halo azul fijo al navegar con teclado. */
.nav-link:focus-visible {
  box-shadow: 0 0 0 0.2rem rgba(21, 50, 68, 0.22);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--petroleo) 30%, transparent);
}

/* Offcanvas y dropdown con la paleta de la marca. */
.offcanvas {
  --bs-offcanvas-bg: var(--crema);
  --bs-offcanvas-color: var(--texto);
  --bs-offcanvas-border-color: var(--borde);
}
.dropdown-menu {
  --bs-dropdown-bg: var(--superficie);
  --bs-dropdown-border-color: var(--borde);
  --bs-dropdown-border-radius: 12px;
  --bs-dropdown-link-color: var(--texto);
  --bs-dropdown-link-hover-bg: var(--crema-2);
  --bs-dropdown-link-hover-color: var(--texto);
  --bs-dropdown-link-active-bg: var(--crema-2);
  --bs-dropdown-link-active-color: var(--petroleo-oscuro);
}

/* Reboot de Bootstrap pone label inline-block y legend flotando: el sitio
   espera los valores del navegador. */
legend { float: none; }