/* ============================================================
   CandiDatos Laborales — Hoja de estilos de marca (v1, oct 2026)
   Uso: <link rel="stylesheet" href="/assets/marca/marca.css">
   Todas las reglas de uso están en «Manual de marca.html» y en LEEME.
   ============================================================ */

/* ---------- Fuentes (archivos locales en /assets/marca/fuentes/) ---------- */
@font-face{font-family:"Anton";src:url("fuentes/Anton-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Open Sans";src:url("fuentes/OpenSans-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Open Sans";src:url("fuentes/OpenSans-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Open Sans";src:url("fuentes/OpenSans-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  /* Color de marca */
  --cl-azul-candi:#015b92;   /* principal: textos de marca, botones, enlaces */
  --cl-azul-datos:#029eda;   /* acento: «Datos», íconos, titulares ≥24px. NO texto pequeño sobre blanco */
  --cl-negro-lupa:#111111;   /* aro de la lupa, eslogan */
  --cl-azul-noche:#0b2236;   /* fondos oscuros, pie de página, texto sobre botón azul-datos */
  --cl-candidato-fondo:#9fd8f0; /* candidatos de fondo dentro del isotipo (solo gráfico) */
  --cl-blanco:#ffffff;
  /* Superficies y texto */
  --cl-fondo:#ffffff;
  --cl-fondo-alterno:#f4f8fb;
  --cl-fondo-tinte:#e6f5fb;
  --cl-texto:#1b2733;
  --cl-texto-suave:#4a5866;
  --cl-borde:#d6e2ea;
  /* Estados (no son identidad) */
  --cl-exito:#127a3a;
  --cl-alerta:#b54708;
  --cl-error:#b42318;
  /* Tipografía */
  --cl-fuente-titulo:"Anton","Oswald",Impact,sans-serif;
  --cl-fuente-texto:"Open Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --cl-espaciado-titulo:0.02em;   /* Anton siempre con un poco de aire */
  /* Espaciado (escala de 4) */
  --cl-esp-1:4px; --cl-esp-2:8px; --cl-esp-3:16px; --cl-esp-4:24px; --cl-esp-5:40px; --cl-esp-6:64px;
  /* Radios */
  --cl-radio-sm:4px; --cl-radio-md:8px; --cl-radio-lg:16px; --cl-radio-full:9999px;
  /* Sombra (única permitida en interfaz) */
  --cl-sombra:0 1px 2px rgba(11,34,54,.06),0 4px 12px rgba(11,34,54,.06);
}

/* ---------- Base ---------- */
.cl-base{font-family:var(--cl-fuente-texto);color:var(--cl-texto);background:var(--cl-fondo);font-size:16px;line-height:1.6}
.cl-display,.cl-h1,.cl-h2,.cl-h3{font-family:var(--cl-fuente-titulo);font-weight:400;letter-spacing:var(--cl-espaciado-titulo);color:var(--cl-azul-candi);margin:0}
.cl-display{font-size:clamp(40px,6vw,64px);line-height:1.05}
.cl-h1{font-size:clamp(32px,4.5vw,40px);line-height:1.12}
.cl-h2{font-size:28px;line-height:1.2}
.cl-h3{font-size:22px;line-height:1.25}
.cl-acento{color:var(--cl-azul-datos)}          /* para resaltar 1–3 palabras de un titular */
.cl-subtitulo{font:600 20px/1.4 var(--cl-fuente-texto);color:var(--cl-texto)}
.cl-texto{font:400 16px/1.6 var(--cl-fuente-texto)}
.cl-texto-pequeno{font:400 14px/1.55 var(--cl-fuente-texto);color:var(--cl-texto-suave)}
.cl-etiqueta-texto{font:700 12px/1.3 var(--cl-fuente-texto);letter-spacing:.08em;text-transform:uppercase}
.cl-eslogan{font:400 16px/1.5 var(--cl-fuente-texto);letter-spacing:.3em}
a.cl-enlace{color:var(--cl-azul-candi);text-decoration:underline;text-underline-offset:2px}
a.cl-enlace:hover{color:var(--cl-azul-noche)}

/* ---------- Botones ---------- */
.cl-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 15px/20px var(--cl-fuente-texto);padding:12px 22px;border-radius:var(--cl-radio-md);border:2px solid transparent;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .15s,border-color .15s}
.cl-btn:focus-visible{outline:3px solid var(--cl-azul-datos);outline-offset:2px}
.cl-btn-primario{background:var(--cl-azul-candi);color:var(--cl-blanco)}
.cl-btn-primario:hover{background:var(--cl-azul-noche)}
.cl-btn-acento{background:var(--cl-azul-datos);color:var(--cl-azul-noche)}   /* texto azul-noche, NUNCA blanco */
.cl-btn-acento:hover{background:#28b0e6}
.cl-btn-secundario{background:var(--cl-blanco);color:var(--cl-azul-candi);border-color:var(--cl-azul-candi)}
.cl-btn-secundario:hover{background:var(--cl-fondo-tinte)}
.cl-btn-texto{background:transparent;color:var(--cl-azul-candi);padding-left:8px;padding-right:8px}
.cl-btn[disabled]{background:#e3e9ee;color:#7b8794;border-color:transparent;cursor:not-allowed}

/* ---------- Formularios ---------- */
.cl-campo{display:flex;flex-direction:column;gap:6px}
.cl-campo label{font:600 14px var(--cl-fuente-texto);color:var(--cl-texto)}
.cl-input,.cl-select,.cl-textarea{font:400 15px var(--cl-fuente-texto);color:var(--cl-texto);background:var(--cl-blanco);border:1px solid #b9c8d4;border-radius:var(--cl-radio-md);padding:11px 14px}
.cl-input:focus,.cl-select:focus,.cl-textarea:focus{outline:none;border-color:var(--cl-azul-candi);box-shadow:0 0 0 3px rgba(2,158,218,.25)}
.cl-ayuda{font:400 13px var(--cl-fuente-texto);color:var(--cl-texto-suave)}
.cl-campo.error .cl-input{border-color:var(--cl-error)} .cl-campo.error .cl-ayuda{color:var(--cl-error)}

/* ---------- Etiquetas y tarjetas ---------- */
.cl-tag{display:inline-flex;align-items:center;font:600 12px/1 var(--cl-fuente-texto);padding:6px 10px;border-radius:var(--cl-radio-full);background:var(--cl-fondo-tinte);color:var(--cl-azul-candi)}
.cl-tag-oscuro{background:var(--cl-azul-candi);color:var(--cl-blanco)}
.cl-tarjeta{background:var(--cl-blanco);border:1px solid var(--cl-borde);border-radius:var(--cl-radio-lg);padding:var(--cl-esp-4);box-shadow:var(--cl-sombra)}
.cl-avatar{width:48px;height:48px;border-radius:var(--cl-radio-full);object-fit:cover;background:var(--cl-fondo-tinte)}

/* ---------- Logo en la interfaz ---------- */
.cl-logo-header{height:44px;width:auto;display:block}      /* escritorio: 40–48px de alto */
@media (max-width:640px){.cl-logo-header{height:36px}}       /* móvil: mínimo 32px */