/*
 * base.css — Bootstrap conectado a los tokens + estilos base de elementos.
 *
 * Bootstrap se personaliza SOLO con sus variables CSS (--bs-*), definidas a partir
 * de tokens.css. Aquí no puede haber colores literales (bin/check_estilos.sh).
 * Puntos de corte (las media queries no admiten variables): los de Bootstrap,
 * 576 / 768 / 992 / 1200 px.
 */

/* ------------------------------------------------------------------------
 * Variables globales de Bootstrap
 * ---------------------------------------------------------------------- */
:root {
  --bs-font-sans-serif: var(--f-familia);
  --bs-font-monospace: var(--f-mono);
  --bs-body-font-family: var(--f-familia);
  --bs-body-font-size: var(--t-base);
  --bs-body-font-weight: var(--p-normal);
  --bs-body-line-height: var(--lh-normal);
  --bs-body-color: var(--c-texto);
  --bs-body-color-rgb: var(--c-texto-rgb);
  --bs-body-bg: var(--c-fondo);
  --bs-body-bg-rgb: var(--c-fondo-rgb);
  --bs-emphasis-color: var(--c-texto);
  --bs-emphasis-color-rgb: var(--c-texto-rgb);
  --bs-heading-color: var(--c-texto);
  --bs-secondary-color: var(--c-texto-suave);
  --bs-secondary-color-rgb: var(--c-texto-suave-rgb);
  --bs-secondary-bg: var(--c-superficie-alt);
  --bs-tertiary-color: var(--c-texto-suave);
  --bs-tertiary-bg: var(--c-superficie-alt);

  --bs-primary: var(--c-marca-fuerte);
  --bs-primary-rgb: var(--c-marca-fuerte-rgb);
  --bs-success: var(--c-exito);
  --bs-success-rgb: var(--c-exito-rgb);
  --bs-warning: var(--c-aviso);
  --bs-warning-rgb: var(--c-aviso-rgb);
  --bs-danger: var(--c-error);
  --bs-danger-rgb: var(--c-error-rgb);
  --bs-info: var(--c-info);
  --bs-info-rgb: var(--c-info-rgb);
  --bs-primary-text-emphasis: var(--c-enlace);
  --bs-primary-bg-subtle: var(--c-marca-suave);
  --bs-success-text-emphasis: var(--c-exito);
  --bs-success-bg-subtle: var(--c-exito-fondo);
  --bs-warning-text-emphasis: var(--c-aviso);
  --bs-warning-bg-subtle: var(--c-aviso-fondo);
  --bs-danger-text-emphasis: var(--c-error);
  --bs-danger-bg-subtle: var(--c-error-fondo);
  --bs-info-text-emphasis: var(--c-info);
  --bs-info-bg-subtle: var(--c-info-fondo);

  --bs-link-color: var(--c-enlace);
  --bs-link-color-rgb: var(--c-enlace-rgb);
  --bs-link-hover-color: var(--c-enlace-hover);
  --bs-link-hover-color-rgb: var(--c-enlace-hover-rgb);
  --bs-link-decoration: underline;

  --bs-border-width: var(--b-fino);
  --bs-border-color: var(--c-borde);
  --bs-border-color-translucent: var(--c-borde);
  --bs-border-radius: var(--r-md);
  --bs-border-radius-sm: var(--r-sm);
  --bs-border-radius-lg: var(--r-lg);
  --bs-border-radius-xl: var(--r-lg);
  --bs-border-radius-pill: var(--r-pill);

  --bs-box-shadow-sm: var(--s-1);
  --bs-box-shadow: var(--s-2);
  --bs-box-shadow-lg: var(--s-3);

  --bs-focus-ring-width: var(--foco-ancho);
  --bs-focus-ring-color: var(--c-foco);

  --bs-form-valid-color: var(--c-exito);
  --bs-form-valid-border-color: var(--c-exito);
  --bs-form-invalid-color: var(--c-error);
  --bs-form-invalid-border-color: var(--c-error);
}

/* ------------------------------------------------------------------------
 * Botones de Bootstrap (los usa el componente boton)
 * ---------------------------------------------------------------------- */
.btn {
  --bs-btn-font-weight: var(--p-semi);
  --bs-btn-padding-x: var(--e-4);
  --bs-btn-padding-y: var(--e-2);
  --bs-btn-border-radius: var(--r-md);
  --bs-btn-disabled-opacity: 0.55;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: var(--tactil-min);
  transition: color var(--transicion), background-color var(--transicion), border-color var(--transicion);
}

.btn-primary {
  --bs-btn-color: var(--c-texto-inverso);
  --bs-btn-bg: var(--c-marca-fuerte);
  --bs-btn-border-color: var(--c-marca-fuerte);
  --bs-btn-hover-color: var(--c-texto-inverso);
  --bs-btn-hover-bg: var(--c-marca-fuerte-hover);
  --bs-btn-hover-border-color: var(--c-marca-fuerte-hover);
  --bs-btn-active-color: var(--c-texto-inverso);
  --bs-btn-active-bg: var(--c-marca-fuerte-activo);
  --bs-btn-active-border-color: var(--c-marca-fuerte-activo);
  --bs-btn-disabled-color: var(--c-texto-inverso);
  --bs-btn-disabled-bg: var(--c-marca-fuerte);
  --bs-btn-disabled-border-color: var(--c-marca-fuerte);
}

.btn-outline-secondary {
  --bs-btn-color: var(--c-texto);
  --bs-btn-bg: var(--c-superficie);
  --bs-btn-border-color: var(--c-borde-control);
  --bs-btn-hover-color: var(--c-texto);
  --bs-btn-hover-bg: var(--c-superficie-alt);
  --bs-btn-hover-border-color: var(--c-texto-suave);
  --bs-btn-active-color: var(--c-texto);
  --bs-btn-active-bg: var(--c-borde);
  --bs-btn-active-border-color: var(--c-texto-suave);
  --bs-btn-disabled-color: var(--c-texto-suave);
  --bs-btn-disabled-bg: var(--c-superficie);
  --bs-btn-disabled-border-color: var(--c-borde-control);
}

.btn-danger {
  --bs-btn-color: var(--c-texto-inverso);
  --bs-btn-bg: var(--c-error);
  --bs-btn-border-color: var(--c-error);
  --bs-btn-hover-color: var(--c-texto-inverso);
  --bs-btn-hover-bg: var(--c-error-hover);
  --bs-btn-hover-border-color: var(--c-error-hover);
  --bs-btn-active-color: var(--c-texto-inverso);
  --bs-btn-active-bg: var(--c-error-hover);
  --bs-btn-active-border-color: var(--c-error-hover);
  --bs-btn-disabled-color: var(--c-texto-inverso);
  --bs-btn-disabled-bg: var(--c-error);
  --bs-btn-disabled-border-color: var(--c-error);
}

.btn-link {
  --bs-btn-color: var(--c-enlace);
  --bs-btn-hover-color: var(--c-enlace-hover);
  --bs-btn-active-color: var(--c-enlace-hover);
  --bs-btn-disabled-color: var(--c-texto-suave);
  --bs-btn-font-weight: var(--p-semi);
  text-decoration: underline;
}

.btn-lg {
  --bs-btn-padding-x: var(--e-6);
  --bs-btn-padding-y: var(--e-3);
  --bs-btn-font-size: var(--t-lg);
  --bs-btn-border-radius: var(--r-md);
  min-height: var(--e-12);
}

/* ------------------------------------------------------------------------
 * Formularios
 * ---------------------------------------------------------------------- */
.form-control,
.form-select {
  --bs-border-color: var(--c-borde-control);
  min-height: var(--tactil-min);
  font-size: var(--t-base);
  background-color: var(--c-superficie);
  color: var(--c-texto);
}

.form-control::placeholder {
  color: var(--c-texto-suave);
  opacity: 1;
}

.form-control:disabled,
.form-select:disabled,
.form-control[readonly] {
  background-color: var(--c-superficie-alt);
  color: var(--c-texto-suave);
}

.form-label {
  margin-bottom: var(--e-1);
  font-weight: var(--p-semi);
}

.form-text {
  margin-top: var(--e-1);
  color: var(--c-texto-suave);
  font-size: var(--t-sm);
}

.form-check-input {
  --bs-border-color: var(--c-borde-control);
  --bs-form-check-bg: var(--c-superficie);
}

.form-check-input:checked {
  background-color: var(--c-marca-fuerte);
  border-color: var(--c-marca-fuerte);
}

.invalid-feedback {
  color: var(--c-error);
  font-size: var(--t-sm);
  font-weight: var(--p-medio);
}

/* ------------------------------------------------------------------------
 * Foco visible: contorno claro para teclado. Nunca se quita sin sustituto.
 * ---------------------------------------------------------------------- */
:focus-visible {
  outline: var(--foco-ancho) solid var(--c-foco);
  outline-offset: var(--foco-separacion);
}

.btn:focus-visible,
.btn-close:focus-visible,
.nav-link:focus-visible,
.page-link:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus-visible {
  outline: var(--foco-ancho) solid var(--c-foco);
  outline-offset: var(--foco-separacion);
  box-shadow: none;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--c-foco);
}

/* ------------------------------------------------------------------------
 * Tipografía base
 * ---------------------------------------------------------------------- */
body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: var(--p-negrita);
  line-height: var(--lh-ajustado);
  color: var(--c-texto);
}

h1, .h1 { font-size: var(--t-2xl); }
h2, .h2 { font-size: var(--t-xl); }
h3, .h3 { font-size: var(--t-lg); }
h4, .h4, h5, .h5, h6, .h6 { font-size: var(--t-base); }

@media (min-width: 768px) {
  h1, .h1 { font-size: var(--t-3xl); }
  h2, .h2 { font-size: var(--t-2xl); }
  h3, .h3 { font-size: var(--t-xl); }
}

p {
  margin-bottom: var(--e-4);
}

small, .small {
  font-size: var(--t-sm);
}

code, kbd, pre, samp {
  font-family: var(--f-mono);
}

code {
  color: var(--c-texto);
}

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

/* Movimiento reducido: sin transiciones para quien lo pide en su sistema */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0s;
    animation-duration: 0s;
  }
}