/* ──────────────────────────────────────────────
 * CECA Design Tokens — Variables CSS3
 * Extraídas de Figma
 * ──────────────────────────────────────────── */
:root {
  /* ── Colores ── */
  --ceca-primary: #002a4f;
  --ceca-granate: #e76e63;
  --ceca-white: #ffffff;
  --ceca-neutral-light: #eaeaea;
  --ceca-text-dark: #313131;
  --ceca-gray: #797979;
  --ceca-bg-light: #f5f5f5;
  --ceca-mega-bg: #fdfdfd;
  --ceca-icon-wrapper-bg: #f1f8ff;
  --ceca-border-color: #ddd;
  --ceca-footer-border: #cecdcd;
  --ceca-link-blue: #146ef5;
  --ceca-cyan: #00b5dd;
  --ceca-text-secondary: #676767;
  --ceca-dark: #002a4f;

  /* ── Aliases (compatibilidad widgets) ── */
  --ceca-secondary: var(--ceca-granate);
  --ceca-text: var(--ceca-text-dark);
  --ceca-text-color: var(--ceca-text-dark);
  --ceca-gris: var(--ceca-gray);
  --ceca-color-primary: var(--ceca-primary);
  --ceca-title-color: var(--ceca-primary);

  /* ── Derivados (hover / interacción) ── */
  --ceca-primary-hover: #02394b;
  --ceca-hover-blue: #0d5bc4;

  /* ── Aliases tipografía ── */
  --ceca-font-primary: var(--ceca-font-family);
  --ceca-title-font: var(--ceca-font-family);

  /* ── Aliases radios ── */
  --ceca-border-radius: var(--ceca-radius-sm);
  --border-radius-default: var(--ceca-radius-sm);

  /* ── Tipografía ── */
  --ceca-font-family: "Encode Sans Expanded", sans-serif;

  /* ── Sombras ── */
  --ceca-mega-shadow:
    0px 12px 16px rgba(36, 36, 36, 0.08), 0px 4px 6px rgba(36, 36, 36, 0.03);
  --ceca-dropdown-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
  --ceca-mobile-shadow: drop-shadow(30px 0 30px rgba(0, 0, 0, 0.25));

  /* ── Radios ── */
  --ceca-radius-sm: 4px;
  --ceca-radius-md: 8px;

  /* ── Transiciones ── */
  --ceca-transition: 0.25s ease;

  /* ── Focus ── */
  --ceca-focus-color: #002a4f;
  --ceca-focus-outline: 2px solid var(--ceca-focus-color);
  --ceca-focus-offset: 2px;
}

/* ═══════════════════════════════════════════
 * Accesibilidad — screen-reader-text
 * ═══════════════════════════════════════════ */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  -webkit-clip-path: none;
  clip-path: none;
  color: #21759b;
  display: block;
  font-size: 14px;
  font-weight: bold;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}