:root {
  /* Fondo cálido — identidad local */
  --color-bg: #FAF4EC;
  --color-surface: #FFFFFF;
  --color-surface-alt: #F1E8DA;

  /* Estructural — confianza institucional */
  --color-primary: #0F2A47;
  --color-primary-dark: #081A2E;
  --color-primary-light: #1E4670;

  /* Cálido — identidad cooperativa */
  --color-accent: #C1592A;
  --color-accent-dark: #9C4620;

  /* Estado de éxito / confirmación */
  --color-success: #4A7C59;
  --color-success-light: #E5F0E7;

  /* SOS — uso EXCLUSIVO, en ningún otro contexto */
  --color-danger: #D93025;
  --color-danger-light: #FCE8E6;
  --color-danger-rgb: 217, 48, 37; /* triplete rgb de --color-danger, para overlays con alpha */

  /* Scrim de overlays de modal — rgb sin alpha, derivado de --color-primary-dark (#081A2E) */
  --color-scrim: 8, 26, 46;

  /* Tintes claros para el dot de disponibilidad sobre fondo navy (3:1 mínimo) */
  --color-success-soft: #6B9A79;
  --color-accent-soft: #D6805A;

  /* Texto */
  --color-text: #1F2937;
  --color-text-muted: #6B7280;
  --color-text-placeholder: #5E6874;
  --color-text-on-primary: #FFFFFF;

  /* Tipografía */
  --font-display: 'Poppins', sans-serif;   /* títulos, calidez con firmeza */
  --font-body: 'Inter', sans-serif;        /* cuerpo, legibilidad seria */

  /* Radios y espaciado */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;

  /* Sombras suaves, nunca duras */
  --shadow-card: 0 2px 12px rgba(15, 42, 71, 0.08);
  --shadow-elevated: 0 6px 24px rgba(15, 42, 71, 0.14);
}

/* Utilidad de iconos SVG inline (reemplaza Font Awesome) */
.icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.125em;
  flex-shrink: 0;
}
.icon-dot {
  width: 10px;
  height: 10px;
  vertical-align: middle;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}