/* ===========================================================================
   bootstrap-overrides.css — Bootstrap 5 apuntado a los tokens del tema.

   Bootstrap se RECONFIGURA, no se pisa a golpe de !important. Bootstrap 5 expone
   sus propias variables CSS, así que basta con redirigirlas a las nuestras: a
   partir de ahí .btn-primary, .table, .form-control, .badge… salen ya con la
   marca de la compañía sin escribir una línea de CSS por componente.

   Se carga DESPUÉS de bootstrap.min.css y DESPUÉS de tokens.css.
   =========================================================================== */

:root {
  /* --- color --------------------------------------------------------------- */
  --bs-primary: var(--prme-primary);
  --bs-primary-rgb: 0, 53, 95;
  --bs-secondary: var(--prme-secondary);
  --bs-danger: var(--prme-error);
  --bs-success: var(--prme-success);
  --bs-warning: var(--prme-warning);
  --bs-info: var(--prme-info);

  --bs-body-bg: var(--prme-surface);
  --bs-body-color: var(--prme-on-surface);
  --bs-secondary-color: var(--prme-on-surface-variant);
  --bs-tertiary-bg: var(--prme-surface-container);
  --bs-emphasis-color: var(--prme-on-surface);

  --bs-border-color: var(--prme-outline-variant);
  --bs-border-color-translucent: var(--prme-outline-variant);

  --bs-link-color: var(--prme-primary);
  --bs-link-hover-color: var(--prme-primary-container);

  /* --- tipografía ---------------------------------------------------------- */
  --bs-font-sans-serif: var(--prme-font-sans);
  --bs-body-font-size: var(--prme-body-md-size);
  --bs-body-font-weight: 400;
  --bs-body-line-height: calc(var(--prme-body-md-line) / var(--prme-body-md-size));

  /* --- formas -------------------------------------------------------------- */
  --bs-border-radius: var(--prme-radius-control);
  --bs-border-radius-sm: var(--prme-radius-sm);
  --bs-border-radius-lg: var(--prme-radius-card);
  --bs-border-radius-xl: var(--prme-radius-xl);
  --bs-border-radius-pill: var(--prme-radius-pill);

  /* --- sombras ------------------------------------------------------------- */
  --bs-box-shadow-sm: var(--prme-shadow-1);
  --bs-box-shadow: var(--prme-shadow-2);
  --bs-box-shadow-lg: var(--prme-shadow-modal);
}

/* --------------------------------- botones ---------------------------------
   Bootstrap calcula los botones con variables por componente, no desde --bs-primary.
   Se redirigen aquí en lugar de reescribir la regla entera.

   Los estados (hover, activo) se DERIVAN del color de marca con color-mix, no se
   escriben a mano: la compañía puede cambiar su paleta desde /manage/company y los
   botones tienen que seguirla. Un hover fijo en hexadecimal se queda desafinado en
   cuanto alguien toca el primario.                                            */

.btn {
  --bs-btn-font-weight: 500;
  --bs-btn-padding-y: .5rem;
  --bs-btn-padding-x: 1rem;
  --bs-btn-border-width: 1px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* El hueco lo pone el botón: así un botón con icono no necesita markup extra. */
  gap: var(--prme-space-2);
  min-height: 2.25rem;
  letter-spacing: .01em;
  white-space: nowrap;
  transition: background-color 120ms ease, border-color 120ms ease,
              box-shadow 120ms ease, transform 120ms ease;
}

/* En pantallas táctiles el objetivo crece hasta el mínimo accesible. Se hace por
   tipo de puntero y no por ancho: un portátil táctil también lo necesita. */
@media (pointer: coarse) {
  .btn { min-height: var(--prme-touch-target); }
}

.btn-sm {
  --bs-btn-padding-y: .25rem;
  --bs-btn-padding-x: .625rem;
  --bs-btn-font-size: var(--prme-label-md-size);
  min-height: 1.875rem;
}

.btn .prme-icon { flex: 0 0 auto; }

/* --- primario: relleno de marca, con relieve mínimo ----------------------- */

.btn-primary {
  --bs-btn-bg: var(--prme-primary);
  --bs-btn-border-color: var(--prme-primary);
  --bs-btn-color: var(--prme-on-primary);

  /* Aclarar/oscurecer sobre el propio primario en vez de saltar al container:
     el salto de color anterior hacía que el hover pareciera otro botón. */
  --bs-btn-hover-bg: color-mix(in srgb, var(--prme-primary) 88%, white);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--prme-primary) 88%, white);
  --bs-btn-hover-color: var(--prme-on-primary);
  --bs-btn-active-bg: color-mix(in srgb, var(--prme-primary) 88%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--prme-primary) 88%, black);
  --bs-btn-active-color: var(--prme-on-primary);

  --bs-btn-disabled-bg: var(--prme-outline-variant);
  --bs-btn-disabled-border-color: var(--prme-outline-variant);
  --bs-btn-disabled-color: var(--prme-on-surface-variant);

  box-shadow: var(--prme-shadow-1);
}

.btn-primary:hover:not(:disabled):not(.disabled) {
  box-shadow: var(--prme-shadow-2);
  transform: translateY(-1px);
}

/* Al pulsar vuelve a su sitio y pierde la sombra: se siente hundido. */
.btn-primary:active:not(:disabled):not(.disabled) {
  transform: translateY(0);
  box-shadow: none;
}

/* --- secundario: tonal con filete ---------------------------------------- */
/* Antes era fantasma puro (fondo transparente). Sobre tarjetas blancas se perdía
   y todo pesaba igual; un relleno muy tenue le da cuerpo sin competir con el
   primario. */

.btn-secondary {
  --bs-btn-bg: var(--prme-surface-container);
  --bs-btn-color: var(--prme-on-surface);
  --bs-btn-border-color: var(--prme-outline-variant);
  --bs-btn-hover-bg: var(--prme-surface-high);
  --bs-btn-hover-color: var(--prme-on-surface);
  --bs-btn-hover-border-color: var(--prme-outline);
  --bs-btn-active-bg: var(--prme-surface-highest);
  --bs-btn-active-color: var(--prme-on-surface);
  --bs-btn-active-border-color: var(--prme-outline);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--prme-outline-variant);
  --bs-btn-disabled-color: var(--prme-on-surface-variant);
}

/* --- destructivo --------------------------------------------------------- */

.btn-danger {
  --bs-btn-bg: var(--prme-error);
  --bs-btn-border-color: var(--prme-error);
  --bs-btn-color: var(--prme-on-error);
  --bs-btn-hover-bg: color-mix(in srgb, var(--prme-error) 85%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--prme-error) 85%, black);
  --bs-btn-hover-color: var(--prme-on-error);
  --bs-btn-active-bg: color-mix(in srgb, var(--prme-error) 75%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--prme-error) 75%, black);
  --bs-btn-active-color: var(--prme-on-error);

  box-shadow: var(--prme-shadow-1);
}

.btn-danger:hover:not(:disabled):not(.disabled) {
  box-shadow: var(--prme-shadow-2);
  transform: translateY(-1px);
}

.btn-danger:active:not(:disabled):not(.disabled) {
  transform: translateY(0);
  box-shadow: none;
}

/* --- enlace: la acción de menor peso ------------------------------------- */

.btn-link {
  --bs-btn-color: var(--prme-primary);
  --bs-btn-hover-color: var(--prme-primary);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-padding-x: .5rem;
  text-decoration: none;
}

.btn-link:hover:not(:disabled):not(.disabled) {
  background: color-mix(in srgb, var(--prme-primary) 8%, transparent);
  text-decoration: underline;
}

/* --- deshabilitado ------------------------------------------------------- */

.btn:disabled,
.btn.disabled {
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}

/* Grupos: el filete compartido no debe doblarse entre botones contiguos. */
.btn-group > .btn:not(:first-child) { margin-left: -1px; }

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:hover { transform: none; }
}
/* Un solo anillo de foco en toda la app, visible sobre cualquier fondo. */
.btn:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.nav-link:focus-visible {
  border-color: var(--prme-primary);
  /* El anillo sale del primario de la compañía, no de un azul fijo: si cambian la
     marca, el foco la sigue en lugar de quedarse desafinado. */
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--prme-primary) 25%, transparent);
  outline: none;
}

/* La altura sale del tipo de puntero, no del ancho de pantalla: un portátil táctil
   necesita el objetivo grande y un escritorio con ratón no. Mismo criterio que
   .btn, que ya lo hacía; los controles iban a 44px siempre y desalineaban las
   barras de filtro. */
.form-control,
.form-select {
  --bs-border-color: var(--prme-outline-variant);
  min-height: var(--prme-control-height);
}

@media (pointer: coarse) {
  .form-control,
  .form-select { min-height: var(--prme-touch-target); }
}

.form-label {
  margin-bottom: var(--prme-space-1);
  color: var(--prme-on-surface-variant);
  font-size: var(--prme-label-md-size);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* Tablas: cabecera gris, sin zebra, divisores de 1px, densidad clínica.
   Ver DESIGN.md § Data Tables. */
.table {
  --bs-table-bg: var(--prme-surface-lowest);
  --bs-table-color: var(--prme-on-surface);
  --bs-table-border-color: var(--prme-outline-variant);
  --bs-table-hover-bg: var(--prme-surface-low);
  --bs-table-hover-color: var(--prme-on-surface);
  font-size: var(--prme-data-size);
  line-height: var(--prme-data-line);
  margin-bottom: 0;
}

/* Sin banda de fondo: la cabecera se distingue por la mayúscula, el peso y una
   sola regla inferior. El gris apilaba tres tonos en dos píxeles (fondo de
   página, borde del contenedor y banda) y la tabla parecía sucia de cerca. */
.table > thead {
  background: transparent;
}

.table > thead th {
  padding: var(--prme-space-2) var(--prme-table-cell-x);
  border-bottom: 1px solid var(--prme-outline);
  color: var(--prme-on-surface-variant);
  font-size: var(--prme-label-md-size);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.table > tbody td,
.table > tbody th {
  padding: var(--prme-table-cell-y) var(--prme-table-cell-x);
  vertical-align: middle;
}