/**
 * MEDUCA — marca: colores y letra de todo el sistema.
 * Única fuente de los colores. Se carga justo después de style.css (config/dz.php),
 * así que lo que se define aquí gana sobre el template Kubayar.
 * Reglas de uso: docs/BRAND.md. Tres capas:
 *   1. primitivos  (--mc-*)    valores crudos; NO se usan en pantallas.
 *   2. semánticos  (--color-*) lo que significa cada color; esto es lo que usan las pantallas.
 *   3. puente      (--primary, --bs-*) nombres del template y de Bootstrap, apuntando a la capa 2.
 */

@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('../fonts/inter/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('../fonts/inter/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url('../fonts/plus-jakarta-sans/plus-jakarta-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF;
}
@font-face {
  font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url('../fonts/plus-jakarta-sans/plus-jakarta-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}

:root {
  /* ── 1 · Primitivos ─────────────────────────────────────────────── */
  --mc-blue-50:  #eff6ff;  --mc-blue-100: #dbeafe;  --mc-blue-200: #bfdbfe;
  --mc-blue-300: #93c5fd;  --mc-blue-400: #60a5fa;  --mc-blue-500: #3b82f6;
  --mc-blue-600: #2563eb;  --mc-blue-700: #1d4ed8;  --mc-blue-800: #1e40af;
  --mc-blue-900: #1e3a8a;
  --mc-navy:     #0f1e3d;  /* tinta de la marca */
  --mc-yellow:   #f5b400;  /* acento: SOLO adornos, nunca texto (1.8:1 sobre blanco) */
  --mc-yellow-100: #fef3c7;
  --mc-slate-50: #f8fafc;  --mc-slate-100: #f1f5f9; --mc-slate-200: #e2e8f0;
  --mc-slate-300: #cbd5e1; --mc-slate-400: #94a3b8; --mc-slate-500: #64748b;
  --mc-slate-600: #475569; --mc-slate-700: #334155;

  /* ── 2 · Semánticos (contraste medido en docs/BRAND.md) ─────────── */
  --color-primary:        var(--mc-blue-700);  /* botones, enlaces, menú activo. Blanco encima 6.7:1 */
  --color-primary-hover:  var(--mc-blue-800);
  --color-primary-strong: var(--mc-blue-600);  /* el antiguo "primary-light" del template */
  --color-primary-subtle: var(--mc-blue-50);   /* fondos suaves, filas resaltadas */
  --color-on-primary:     #ffffff;
  --color-accent:         var(--mc-yellow);
  --color-text:           var(--mc-navy);
  --color-text-muted:     var(--mc-slate-600);
  --color-border:         var(--mc-slate-200);
  --color-bg:             var(--mc-slate-50);
  --color-surface:        #ffffff;
  --color-focus:          var(--mc-blue-500);  /* anillo de foco: 3.7:1 sobre blanco */

  /* Estados: iguales en todos los sistemas de la familia (Meduca, Motorea, Puntada). */
  --color-success: #15803d;  --color-success-subtle: #f0fdf4;
  --color-warning: #b45309;  --color-warning-subtle: #fffbeb;
  --color-danger:  #b91c1c;  --color-danger-subtle:  #fef2f2;
  --color-info:    #0369a1;  --color-info-subtle:    #f0f9ff;

  --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Plus Jakarta Sans', var(--font-ui);  /* la letra del logo: títulos */

  /* ── 3 · Puente al template Kubayar y a Bootstrap ───────────────── */
  --primary:        var(--color-primary);
  --primary-hover:  var(--color-primary-hover);
  --primary-light:  var(--color-primary-strong);
  --primary-dark:   var(--color-text);
  --rgba-primary-1: rgba(29, 78, 216, 0.1);  --rgba-primary-2: rgba(29, 78, 216, 0.2);
  --rgba-primary-3: rgba(29, 78, 216, 0.3);  --rgba-primary-4: rgba(29, 78, 216, 0.4);
  --rgba-primary-5: rgba(29, 78, 216, 0.5);  --rgba-primary-6: rgba(29, 78, 216, 0.6);
  --rgba-primary-7: rgba(29, 78, 216, 0.7);  --rgba-primary-8: rgba(29, 78, 216, 0.8);
  --rgba-primary-9: rgba(29, 78, 216, 0.9);
  --tryal-gradient: linear-gradient(135deg, var(--mc-blue-700) 0%, var(--mc-blue-900) 100%);
  --font-family-base:  var(--font-ui);
  --font-family-title: var(--font-ui);
  --title: var(--color-text);

  --bs-primary: var(--color-primary);  --bs-primary-rgb: 29, 78, 216;
  --bs-success: var(--color-success);  --bs-success-rgb: 21, 128, 61;
  --bs-warning: var(--color-warning);  --bs-warning-rgb: 180, 83, 9;
  --bs-danger:  var(--color-danger);   --bs-danger-rgb: 185, 28, 28;
  --bs-info:    var(--color-info);     --bs-info-rgb: 3, 105, 161;
  --bs-link-color: var(--color-primary); --bs-link-color-rgb: 29, 78, 216;
  --bs-link-hover-color: var(--color-primary-hover);
  --bs-body-font-family: var(--font-ui);
  --bs-body-color: var(--color-text);
}

/* El template elige color y letra por atributos del <body> (deznav-init.js:
 * primary "color_1", typography "poppins"). Se fijan aquí para que no ganen. */
body[data-primary] {
  --primary: var(--color-primary);
  --primary-hover: var(--color-primary-hover);
  --primary-dark: var(--color-text);
}
body, body[data-typography] { font-family: var(--font-ui); }
/* Sólo la letra: el color de un título lo decide su fondo (los títulos blancos sobre azul siguen blancos). */
h1, h2, h3, h4, .h1, .h2, .h3, .h4 { font-family: var(--font-display); }
h5, h6, .h5, .h6 { font-family: var(--font-ui); }

:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* Estados con contraste AA. Los colores del template se cambiaron en su origen
 * (bin/marca-paleta.php), así que sus variantes .light / .tp-btn / hover ya salen
 * de ellos. Aquí sólo los botones sólidos: Bootstrap 5.2+ los pinta con variables
 * por clase, que se fijan con letra blanca (el template la ponía negra). */
.btn-success { --bs-btn-color:#fff; --bs-btn-bg:var(--color-success); --bs-btn-border-color:var(--color-success); --bs-btn-hover-color:#fff; --bs-btn-hover-bg:#166534; --bs-btn-hover-border-color:#166534; --bs-btn-active-color:#fff; --bs-btn-active-bg:#14532d; --bs-btn-active-border-color:#14532d; --bs-btn-disabled-color:#fff; --bs-btn-disabled-bg:var(--color-success); --bs-btn-disabled-border-color:var(--color-success); }
.btn-danger  { --bs-btn-color:#fff; --bs-btn-bg:var(--color-danger);  --bs-btn-border-color:var(--color-danger);  --bs-btn-hover-color:#fff; --bs-btn-hover-bg:#991b1b; --bs-btn-hover-border-color:#991b1b; --bs-btn-active-color:#fff; --bs-btn-active-bg:#7f1d1d; --bs-btn-active-border-color:#7f1d1d; --bs-btn-disabled-color:#fff; --bs-btn-disabled-bg:var(--color-danger);  --bs-btn-disabled-border-color:var(--color-danger); }
.btn-warning { --bs-btn-color:#fff; --bs-btn-bg:var(--color-warning); --bs-btn-border-color:var(--color-warning); --bs-btn-hover-color:#fff; --bs-btn-hover-bg:#92400e; --bs-btn-hover-border-color:#92400e; --bs-btn-active-color:#fff; --bs-btn-active-bg:#78350f; --bs-btn-active-border-color:#78350f; --bs-btn-disabled-color:#fff; --bs-btn-disabled-bg:var(--color-warning); --bs-btn-disabled-border-color:var(--color-warning); }
.btn-info    { --bs-btn-color:#fff; --bs-btn-bg:var(--color-info);    --bs-btn-border-color:var(--color-info);    --bs-btn-hover-color:#fff; --bs-btn-hover-bg:#075985; --bs-btn-hover-border-color:#075985; --bs-btn-active-color:#fff; --bs-btn-active-bg:#0c4a6e; --bs-btn-active-border-color:#0c4a6e; --bs-btn-disabled-color:#fff; --bs-btn-disabled-bg:var(--color-info);    --bs-btn-disabled-border-color:var(--color-info); }
/* Botones de contorno: al pasar el ratón o pulsar se rellenan con el color de estado,
 * y el template ponía letra negra encima (rojo nuevo + negro = 3.3:1). Blanca. */
.btn-outline-success, .btn-outline-danger, .btn-outline-warning, .btn-outline-info {
  --bs-btn-hover-color:#fff; --bs-btn-active-color:#fff; }
.btn-success, .btn-outline-success { --bs-btn-focus-shadow-rgb: 21, 128, 61; }
.btn-danger,  .btn-outline-danger  { --bs-btn-focus-shadow-rgb: 185, 28, 28; }
.btn-warning, .btn-outline-warning { --bs-btn-focus-shadow-rgb: 180, 83, 9; }
.btn-info,    .btn-outline-info    { --bs-btn-focus-shadow-rgb: 3, 105, 161; }
/* .text-bg-* de Bootstrap fuerza letra negra con !important; sobre los estados nuevos no se lee. */
.text-bg-success, .text-bg-danger, .text-bg-warning, .text-bg-info { color: #fff !important; }
/* Los estados nuevos son oscuros: letra negra encima no se lee (2.9-4.2:1). Va blanca. */
.bg-success.text-dark, .bg-danger.text-dark, .bg-warning.text-dark, .bg-info.text-dark,
.btn-warning.text-dark, .badge-warning.text-dark { color: #fff !important; }
/* Variantes pálidas del template: su tinte del 20% deja la letra en 3.8:1. Con el
 * fondo "subtle" de la familia sube a 4.8-5.9:1 (medido en estatico). */
.light.btn-success, .light.badge-success { background-color: var(--color-success-subtle); border-color: var(--color-success-subtle); }
.light.btn-danger,  .light.badge-danger  { background-color: var(--color-danger-subtle);  border-color: var(--color-danger-subtle); }
.light.btn-warning, .light.badge-warning { background-color: var(--color-warning-subtle); border-color: var(--color-warning-subtle); }
.light.btn-info,    .light.badge-info    { background-color: var(--color-info-subtle);    border-color: var(--color-info-subtle); }
.light.btn-success:hover, .light.btn-danger:hover, .light.btn-warning:hover, .light.btn-info:hover { color: #fff; }
.light.btn-success:hover { background-color: var(--color-success); }
.light.btn-danger:hover  { background-color: var(--color-danger); }
.light.btn-warning:hover { background-color: var(--color-warning); }
.light.btn-info:hover    { background-color: var(--color-info); }