/*
 * Tokens de la identidad visual HLC (D-31): negro, dorado suave y blanco marfil.
 * Dueño: agente 01. Único lugar donde se definen colores y tipografía.
 * Se carga después de Bootstrap y antes de panel.css / publico.css.
 *
 * Contraste WCAG 2.1 (calculado; AA texto normal >= 4.5:1):
 *   --hlc-negro sobre --hlc-marfil ............ 17.31:1
 *   --hlc-gris sobre --hlc-marfil .............  6.61:1  (texto secundario)
 *   --hlc-dorado-texto sobre --hlc-marfil .....  5.69:1  (enlaces / texto dorado)
 *   --hlc-dorado sobre --hlc-negro ............  7.93:1  (dorado solo sobre negro)
 *   --hlc-negro sobre --hlc-dorado ............  7.93:1  (botón dorado)
 *   --hlc-gris-claro sobre --hlc-negro ........  8.70:1  (menú oscuro)
 *   --hlc-dorado sobre --hlc-marfil ...........  2.18:1  -> NO usar para texto; solo filetes y adornos
 *   Estados (texto sobre su fondo suave): éxito 5.47, alerta 6.11, error 5.90,
 *   info 6.42, limpieza 7.00, neutro 5.73, dorado 5.17, oscuro 14.66.
 *   --hlc-borde-control sobre --hlc-blanco ....  4.21:1  (bordes de campos, >= 3:1; sobre marfil 3.91)
 */

:root {
  color-scheme: light;

  /* Paleta base */
  --hlc-negro: #15120f;
  --hlc-negro-2: #26221d;
  --hlc-negro-3: #3a342c;
  --hlc-marfil: #faf6ee;
  --hlc-marfil-2: #f2ebdd;
  --hlc-blanco: #ffffff;
  --hlc-dorado: #c8a45d;          /* acento: filetes, adornos, texto solo sobre negro */
  --hlc-dorado-claro: #e3cc98;
  --hlc-dorado-texto: #7d5c1f;    /* dorado oscuro para texto sobre claro */
  --hlc-dorado-hover: #b38e45;

  /* Neutros */
  --hlc-gris: #5e574d;            /* texto secundario */
  --hlc-gris-claro: #b9b0a1;      /* texto secundario sobre negro */
  --hlc-neutro-fondo: #ebe6dc;
  --hlc-borde: #ddd3c0;           /* divisores decorativos */
  --hlc-borde-control: #857a69;   /* bordes de campos (>= 3:1) */

  /* Estados */
  --hlc-exito: #2e6b3c;
  --hlc-exito-fondo: #e6f0e6;
  --hlc-exito-borde: #a9c9ae;
  --hlc-alerta: #7a5200;
  --hlc-alerta-fondo: #fbf0d6;
  --hlc-alerta-borde: #e5c87f;
  --hlc-error: #a3282a;
  --hlc-error-fondo: #f8e3e1;
  --hlc-error-borde: #e2a9a5;
  --hlc-info: #2a5875;
  --hlc-info-fondo: #e3edf3;
  --hlc-info-borde: #a7c3d5;
  --hlc-limpieza: #5b3f86;
  --hlc-limpieza-fondo: #eee8f6;
  --hlc-limpieza-borde: #c5b5df;

  /* Tipografía (solo fuentes del sistema: la CSP impide fuentes externas) */
  --hlc-fuente-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif;
  --hlc-fuente-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "URW Palladio L", Georgia, "Times New Roman", serif;
  --hlc-fuente-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* Medidas */
  --hlc-radio: .5rem;
  --hlc-radio-chico: .375rem;
  --hlc-toque: 2.75rem;           /* 44px: objetivo táctil mínimo */
  --hlc-sombra: 0 1px 2px rgba(21, 18, 15, .06), 0 4px 16px rgba(21, 18, 15, .06);
  --hlc-anillo-foco: 0 0 0 .25rem rgba(125, 92, 31, .35);

  /* ---- Sobrescritura de variables de Bootstrap 5.3 ---- */
  --bs-body-font-family: var(--hlc-fuente-sans);
  --bs-font-sans-serif: var(--hlc-fuente-sans);
  --bs-font-monospace: var(--hlc-fuente-mono);
  --bs-body-bg: var(--hlc-marfil);
  --bs-body-bg-rgb: 250, 246, 238;
  --bs-body-color: var(--hlc-negro);
  --bs-body-color-rgb: 21, 18, 15;
  --bs-emphasis-color: var(--hlc-negro);
  --bs-emphasis-color-rgb: 21, 18, 15;
  --bs-heading-color: var(--hlc-negro);
  --bs-secondary-color: var(--hlc-gris);
  --bs-secondary-color-rgb: 94, 87, 77;
  --bs-secondary-bg: var(--hlc-marfil-2);
  --bs-tertiary-bg: var(--hlc-marfil-2);
  --bs-tertiary-color: var(--hlc-gris);
  --bs-border-color: var(--hlc-borde);
  --bs-border-color-translucent: rgba(21, 18, 15, .12);
  --bs-border-radius: var(--hlc-radio);
  --bs-border-radius-sm: var(--hlc-radio-chico);

  --bs-primary: var(--hlc-dorado-texto);
  --bs-primary-rgb: 125, 92, 31;
  --bs-secondary: var(--hlc-gris);
  --bs-secondary-rgb: 94, 87, 77;
  --bs-dark: var(--hlc-negro);
  --bs-dark-rgb: 21, 18, 15;
  --bs-light: var(--hlc-marfil-2);
  --bs-light-rgb: 242, 235, 221;
  --bs-success: var(--hlc-exito);
  --bs-success-rgb: 46, 107, 60;
  --bs-warning: var(--hlc-alerta);
  --bs-warning-rgb: 122, 82, 0;
  --bs-danger: var(--hlc-error);
  --bs-danger-rgb: 163, 40, 42;
  --bs-info: var(--hlc-info);
  --bs-info-rgb: 42, 88, 117;

  --bs-primary-text-emphasis: var(--hlc-dorado-texto);
  --bs-primary-bg-subtle: var(--hlc-marfil-2);
  --bs-primary-border-subtle: var(--hlc-dorado-claro);
  --bs-secondary-text-emphasis: var(--hlc-gris);
  --bs-secondary-bg-subtle: var(--hlc-neutro-fondo);
  --bs-secondary-border-subtle: var(--hlc-borde);
  --bs-success-text-emphasis: var(--hlc-exito);
  --bs-success-bg-subtle: var(--hlc-exito-fondo);
  --bs-success-border-subtle: var(--hlc-exito-borde);
  --bs-warning-text-emphasis: var(--hlc-alerta);
  --bs-warning-bg-subtle: var(--hlc-alerta-fondo);
  --bs-warning-border-subtle: var(--hlc-alerta-borde);
  --bs-danger-text-emphasis: var(--hlc-error);
  --bs-danger-bg-subtle: var(--hlc-error-fondo);
  --bs-danger-border-subtle: var(--hlc-error-borde);
  --bs-info-text-emphasis: var(--hlc-info);
  --bs-info-bg-subtle: var(--hlc-info-fondo);
  --bs-info-border-subtle: var(--hlc-info-borde);
  --bs-light-text-emphasis: var(--hlc-negro-2);
  --bs-dark-text-emphasis: var(--hlc-negro);

  --bs-link-color: var(--hlc-dorado-texto);
  --bs-link-color-rgb: 125, 92, 31;
  --bs-link-hover-color: var(--hlc-negro);
  --bs-link-hover-color-rgb: 21, 18, 15;
  --bs-focus-ring-color: rgba(125, 92, 31, .35);
  --bs-form-valid-color: var(--hlc-exito);
  --bs-form-valid-border-color: var(--hlc-exito);
  --bs-form-invalid-color: var(--hlc-error);
  --bs-form-invalid-border-color: var(--hlc-error);
  --bs-highlight-bg: var(--hlc-alerta-fondo);
  --bs-code-color: var(--hlc-dorado-texto);
}

/* ---- Componentes de Bootstrap con colores fijos: se repintan con los tokens ---- */
.btn-dark {
  --bs-btn-color: var(--hlc-marfil);
  --bs-btn-bg: var(--hlc-negro);
  --bs-btn-border-color: var(--hlc-negro);
  --bs-btn-hover-color: var(--hlc-marfil);
  --bs-btn-hover-bg: var(--hlc-negro-3);
  --bs-btn-hover-border-color: var(--hlc-negro-3);
  --bs-btn-focus-shadow-rgb: 125, 92, 31;
  --bs-btn-active-color: var(--hlc-marfil);
  --bs-btn-active-bg: var(--hlc-negro-2);
  --bs-btn-active-border-color: var(--hlc-dorado);
  --bs-btn-disabled-color: var(--hlc-marfil);
  --bs-btn-disabled-bg: var(--hlc-negro-3);
  --bs-btn-disabled-border-color: var(--hlc-negro-3);
}

.btn-primary,
.btn-dorado {
  --bs-btn-color: var(--hlc-negro);
  --bs-btn-bg: var(--hlc-dorado);
  --bs-btn-border-color: var(--hlc-dorado);
  --bs-btn-hover-color: var(--hlc-negro);
  --bs-btn-hover-bg: var(--hlc-dorado-hover);
  --bs-btn-hover-border-color: var(--hlc-dorado-hover);
  --bs-btn-focus-shadow-rgb: 125, 92, 31;
  --bs-btn-active-color: var(--hlc-negro);
  --bs-btn-active-bg: var(--hlc-dorado-hover);
  --bs-btn-active-border-color: var(--hlc-dorado-texto);
  --bs-btn-disabled-color: var(--hlc-negro);
  --bs-btn-disabled-bg: var(--hlc-dorado-claro);
  --bs-btn-disabled-border-color: var(--hlc-dorado-claro);
}

.btn-secondary {
  --bs-btn-color: var(--hlc-blanco);
  --bs-btn-bg: var(--hlc-gris);
  --bs-btn-border-color: var(--hlc-gris);
  --bs-btn-hover-color: var(--hlc-blanco);
  --bs-btn-hover-bg: var(--hlc-negro-3);
  --bs-btn-hover-border-color: var(--hlc-negro-3);
  --bs-btn-focus-shadow-rgb: 94, 87, 77;
  --bs-btn-active-color: var(--hlc-blanco);
  --bs-btn-active-bg: var(--hlc-negro-2);
  --bs-btn-active-border-color: var(--hlc-negro-2);
}

.btn-outline-secondary {
  --bs-btn-color: var(--hlc-negro-2);
  --bs-btn-border-color: var(--hlc-borde-control);
  --bs-btn-hover-color: var(--hlc-marfil);
  --bs-btn-hover-bg: var(--hlc-negro-2);
  --bs-btn-hover-border-color: var(--hlc-negro-2);
  --bs-btn-focus-shadow-rgb: 94, 87, 77;
  --bs-btn-active-color: var(--hlc-marfil);
  --bs-btn-active-bg: var(--hlc-negro);
  --bs-btn-active-border-color: var(--hlc-negro);
}

.btn-outline-danger {
  --bs-btn-color: var(--hlc-error);
  --bs-btn-border-color: var(--hlc-error);
  --bs-btn-hover-color: var(--hlc-blanco);
  --bs-btn-hover-bg: var(--hlc-error);
  --bs-btn-hover-border-color: var(--hlc-error);
  --bs-btn-active-color: var(--hlc-blanco);
  --bs-btn-active-bg: var(--hlc-error);
  --bs-btn-active-border-color: var(--hlc-error);
  --bs-btn-focus-shadow-rgb: 163, 40, 42;
}

.btn-outline-success {
  --bs-btn-color: var(--hlc-exito);
  --bs-btn-border-color: var(--hlc-exito);
  --bs-btn-hover-color: var(--hlc-blanco);
  --bs-btn-hover-bg: var(--hlc-exito);
  --bs-btn-hover-border-color: var(--hlc-exito);
  --bs-btn-active-color: var(--hlc-blanco);
  --bs-btn-active-bg: var(--hlc-exito);
  --bs-btn-active-border-color: var(--hlc-exito);
  --bs-btn-focus-shadow-rgb: 46, 107, 60;
}

.btn-outline-light {
  --bs-btn-color: var(--hlc-marfil);
  --bs-btn-border-color: var(--hlc-gris-claro);
  --bs-btn-hover-color: var(--hlc-negro);
  --bs-btn-hover-bg: var(--hlc-dorado);
  --bs-btn-hover-border-color: var(--hlc-dorado);
  --bs-btn-active-color: var(--hlc-negro);
  --bs-btn-active-bg: var(--hlc-dorado-hover);
  --bs-btn-active-border-color: var(--hlc-dorado-hover);
  --bs-btn-focus-shadow-rgb: 200, 164, 93;
}

.navbar-dark,
.navbar[data-bs-theme="dark"] {
  --bs-navbar-color: var(--hlc-gris-claro);
  --bs-navbar-hover-color: var(--hlc-marfil);
  --bs-navbar-active-color: var(--hlc-dorado);
  --bs-navbar-brand-color: var(--hlc-marfil);
  --bs-navbar-brand-hover-color: var(--hlc-dorado);
  --bs-navbar-toggler-border-color: rgba(200, 164, 93, .5);
}

.bg-dark {
  background-color: var(--hlc-negro) !important;
}

.form-control,
.form-select {
  border-color: var(--hlc-borde-control);
  background-color: var(--hlc-blanco);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--hlc-dorado-texto);
  box-shadow: var(--hlc-anillo-foco);
}

.form-check-input:checked {
  background-color: var(--hlc-dorado-texto);
  border-color: var(--hlc-dorado-texto);
}

.alert {
  border-left-width: 4px;
}

/* Foco visible para teclado en todo el sitio */
:focus-visible {
  outline: 3px solid var(--hlc-dorado-texto);
  outline-offset: 2px;
}

.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
  outline: 0;
}

main[tabindex="-1"]:focus {
  outline: 0;
}

/* Enlace "saltar al contenido" (común a panel y público) */
.saltar-contenido {
  position: absolute;
  left: .5rem;
  top: -4rem;
  z-index: 2000;
  padding: .75rem 1rem;
  background: var(--hlc-negro);
  color: var(--hlc-marfil);
  border: 2px solid var(--hlc-dorado);
  border-radius: var(--hlc-radio);
  text-decoration: none;
}

.saltar-contenido:focus {
  top: .5rem;
  color: var(--hlc-marfil);
}

/* ---- Insignias de estado (macros/componentes.html: insignia_estado) ---- */
.estado {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .25rem .625rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}

.estado::before {
  content: "";
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.estado-exito { color: var(--hlc-exito); background: var(--hlc-exito-fondo); border-color: var(--hlc-exito-borde); }
.estado-alerta { color: var(--hlc-alerta); background: var(--hlc-alerta-fondo); border-color: var(--hlc-alerta-borde); }
.estado-error { color: var(--hlc-error); background: var(--hlc-error-fondo); border-color: var(--hlc-error-borde); }
.estado-info { color: var(--hlc-info); background: var(--hlc-info-fondo); border-color: var(--hlc-info-borde); }
.estado-limpieza { color: var(--hlc-limpieza); background: var(--hlc-limpieza-fondo); border-color: var(--hlc-limpieza-borde); }
.estado-dorado { color: var(--hlc-dorado-texto); background: var(--hlc-marfil-2); border-color: var(--hlc-dorado-claro); }
.estado-neutro { color: var(--hlc-gris); background: var(--hlc-neutro-fondo); border-color: var(--hlc-borde); }
.estado-oscuro { color: var(--hlc-marfil); background: var(--hlc-negro-2); border-color: var(--hlc-negro-2); }
.estado-oscuro::before { background: var(--hlc-dorado); }

/* ---- Marcador "Foto pendiente" (nunca fotos de stock) ---- */
.foto-pendiente {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 1rem;
  background:
    repeating-linear-gradient(135deg, transparent 0 12px, rgba(21, 18, 15, .025) 12px 24px),
    var(--hlc-neutro-fondo);
  border: 1px dashed var(--hlc-borde-control);
  border-radius: var(--hlc-radio);
  color: var(--hlc-gris);
  text-align: center;
}

.foto-pendiente-16x9 { aspect-ratio: 16 / 9; }
.foto-pendiente-1x1 { aspect-ratio: 1 / 1; }
.foto-pendiente-3x4 { aspect-ratio: 3 / 4; }

.foto-pendiente svg {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--hlc-dorado-texto);
}

.foto-pendiente-texto {
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .02em;
}

/* ---- Tarjeta (macros/componentes.html: tarjeta) ---- */
.tarjeta {
  background: var(--hlc-blanco);
  border: 1px solid var(--hlc-borde);
  border-radius: var(--hlc-radio);
  box-shadow: var(--hlc-sombra);
}

.tarjeta-encabezado {
  padding: 1rem 1.25rem .25rem;
}

.tarjeta-titulo {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
}

.tarjeta-subtitulo {
  margin: .25rem 0 0;
  color: var(--hlc-gris);
  font-size: .9375rem;
}

.tarjeta-cuerpo {
  padding: 1rem 1.25rem 1.25rem;
}

.tarjeta-pie {
  padding: .75rem 1.25rem;
  border-top: 1px solid var(--hlc-borde);
  background: var(--hlc-marfil);
  border-radius: 0 0 var(--hlc-radio) var(--hlc-radio);
}

.icono {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  vertical-align: -.2em;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}