/*
 * ceij-componentes.css — piezas reutilizables del rediseño.
 *
 * ────────────────────────────────────────────────────────────────────
 * DICCIONARIO FIGMA → BEM
 *
 * El Figma se generó desde HTML, así que sus capas llevan nombres de
 * utilidades Tailwind (div.flex, p.text-xs, w-full, py-4) mezclados con
 * nombres de componente. Esos nombres se leen como ESPECIFICACIÓN, nunca
 * como marcado: traducirlos 1:1 metería en el sitio un sistema de utilidades
 * que aquí no existe.
 *
 *   Figma                     →  clase de este sistema
 *   ─────────────────────────────────────────────────────────
 *   card-icon                 →  .ceij-tarjeta__icono
 *   card-title                →  .ceij-tarjeta__titulo
 *   card-year                 →  .ceij-tarjeta__anio
 *   feature-icon              →  .ceij-servicio__icono
 *   method-icon               →  .ceij-metodo__icono
 *   magazine-cover-mini       →  .ceij-portada-revista
 *   protection-item           →  .ceij-listado-proteccion__item
 *   nav-item                  →  .ceij-nav__item
 *   span.count                →  .ceij-contador
 *   div#placeholder           →  (no se traslada: es hueco del importador)
 *   text-xs / text-lg / …     →  var(--ceij-fs-*)
 *   flex / w-16 / py-4 / …    →  layout propio, sin utilidades
 * ────────────────────────────────────────────────────────────────────
 */

/* ---------------------------------------------------------------------
   Botones
   --------------------------------------------------------------------- */

.ceij .ceij-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ceij-e-2);
    padding: var(--ceij-e-3) var(--ceij-e-5);
    border: 0;
    border-radius: var(--ceij-r-pildora);
    font-family: var(--ceij-f-texto);
    font-size: var(--ceij-fs-400);
    font-weight: var(--ceij-fw-fuerte);
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

/* Ámbar de marca con texto azul: el par da 5,02:1, que cumple AA.
   El ámbar como texto sobre blanco daría 2,51:1 — por eso nunca se usa así. */
.ceij .ceij-btn--acento {
    background-color: var(--ceij-c-acento-fondo);
    color: var(--ceij-c-marca);
}
.ceij .ceij-btn--acento:hover,
.ceij .ceij-btn--acento:focus-visible {
    background-color: var(--ceij-c-acento-hover);
    color: var(--ceij-c-marca);
}

/* Azul institucional con texto blanco: 12,61:1. */
.ceij .ceij-btn--marca {
    background-color: var(--ceij-c-marca);
    color: var(--ceij-c-texto-inverso);
}
.ceij .ceij-btn--marca:hover,
.ceij .ceij-btn--marca:focus-visible {
    background-color: var(--ceij-c-marca-oscuro);
    color: var(--ceij-c-texto-inverso);
}

.ceij .ceij-btn--contorno {
    background-color: transparent;
    color: var(--ceij-c-marca);
    box-shadow: inset 0 0 0 2px currentColor;
}
.ceij .ceij-btn--contorno:hover {
    background-color: var(--ceij-c-marca);
    color: var(--ceij-c-texto-inverso);
    box-shadow: none;
}

/* Botón con flecha, como el diseño. La flecha es decorativa. */
.ceij .ceij-btn--flecha::after {
    content: "\2192";
    margin-left: var(--ceij-e-2);
    font-weight: var(--ceij-fw-normal);
}
.ceij .ceij-btn--chico {
    padding: var(--ceij-e-2) var(--ceij-e-4);
    font-size: var(--ceij-fs-300);
}

/* ---------------------------------------------------------------------
   Tarjetas
   --------------------------------------------------------------------- */

.ceij .ceij-tarjeta {
    display: flex;
    flex-direction: column;
    background: var(--ceij-c-superficie);
    border-radius: var(--ceij-r-grande);
    box-shadow: var(--ceij-sombra);
    overflow: hidden;
    height: 100%;
}

.ceij .ceij-tarjeta__medio { aspect-ratio: 16 / 9; }
.ceij .ceij-tarjeta__medio img { width: 100%; height: 100%; object-fit: cover; }

.ceij .ceij-tarjeta__cuerpo {
    display: flex;
    flex-direction: column;
    gap: var(--ceij-e-3);
    padding: var(--ceij-e-5);
    flex: 1;
}

.ceij .ceij-tarjeta__titulo {
    font-family: var(--ceij-f-titulo);
    font-size: var(--ceij-fs-500);
    font-weight: var(--ceij-fw-negrita);
    line-height: var(--ceij-lh-apretado);
    color: var(--ceij-c-titulo);
    margin: 0;
}

.ceij .ceij-tarjeta__texto { color: var(--ceij-c-texto); margin: 0; }
.ceij .ceij-tarjeta__anio  { font-size: var(--ceij-fs-meta); color: var(--ceij-c-texto-suave); }
.ceij .ceij-tarjeta__pie   { margin-top: auto; padding-top: var(--ceij-e-3); }

.ceij .ceij-tarjeta__icono,
.ceij .ceij-servicio__icono,
.ceij .ceij-metodo__icono {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    flex: 0 0 auto;
}
.ceij .ceij-tarjeta__icono img,
.ceij .ceij-servicio__icono img,
.ceij .ceij-metodo__icono img { width: 100%; height: 100%; object-fit: contain; }

/* ---------------------------------------------------------------------
   Rejilla de tarjetas
   --------------------------------------------------------------------- */

.ceij .ceij-rejilla {
    display: grid;
    gap: var(--ceij-e-5);
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.ceij .ceij-rejilla--2 { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); }
.ceij .ceij-rejilla--4 { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.ceij .ceij-rejilla--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* ---------------------------------------------------------------------
   Velo sobre fotografía — WCAG 1.4.3
   La auditoría encontró 160 titulares puestos directamente sobre imagen, sin
   nada que garantice el contraste: depende de qué foto se publique. Este velo
   lo fija en el componente, para que no dependa del contenido.
   --------------------------------------------------------------------- */

.ceij .ceij-cabecera-foto {
    position: relative;
    isolation: isolate;
}
.ceij .ceij-cabecera-foto::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        to top,
        rgba(10, 37, 64, .78) 0%,
        rgba(10, 37, 64, .55) 45%,
        rgba(10, 37, 64, .25) 100%
    );
}
.ceij .ceij-cabecera-foto,
.ceij .ceij-cabecera-foto h1,
.ceij .ceij-cabecera-foto h2,
.ceij .ceij-cabecera-foto p { color: var(--ceij-c-texto-inverso); }

/* ---------------------------------------------------------------------
   Distintivos de estado
   Los del Figma iban a 10px y entre 2,54:1 y 3,96:1. Aquí van a 12px y con
   fondos oscurecidos hasta cumplir AA.
   --------------------------------------------------------------------- */

.ceij .ceij-distintivo {
    display: inline-block;
    padding: var(--ceij-e-1) var(--ceij-e-3);
    border-radius: var(--ceij-r-pildora);
    font-size: var(--ceij-fs-meta);
    font-weight: var(--ceij-fw-fuerte);
    line-height: 1.4;
    color: var(--ceij-c-texto-inverso);
}
.ceij .ceij-distintivo--disponible   { background: var(--ceij-c-exito); }  /* 5,3:1 */
.ceij .ceij-distintivo--proximamente { background: var(--ceij-c-texto-suave); }
.ceij .ceij-distintivo--aviso        { background: var(--ceij-c-aviso); }

/* ---------------------------------------------------------------------
   Paginación
   --------------------------------------------------------------------- */

.ceij .ceij-pag { display: flex; flex-wrap: wrap; gap: var(--ceij-e-2); justify-content: center; list-style: none; padding: 0; }
.ceij .ceij-pag__enlace {
    display: grid;
    place-items: center;
    min-width: var(--ceij-tactil-min);
    min-height: var(--ceij-tactil-min);
    padding-inline: var(--ceij-e-3);
    border-radius: var(--ceij-r-pildora);
    color: var(--ceij-c-marca);
    text-decoration: none;
}
.ceij .ceij-pag__enlace:hover { background: var(--ceij-c-superficie-alt); }
.ceij .ceij-pag__enlace[aria-current="page"] {
    background: var(--ceij-c-marca);
    color: var(--ceij-c-texto-inverso);
}

/* ---------------------------------------------------------------------
   Migas de pan
   --------------------------------------------------------------------- */

.ceij .ceij-migas { font-size: var(--ceij-fs-300); color: var(--ceij-c-texto-suave); }
.ceij .ceij-migas ol { display: flex; flex-wrap: wrap; gap: var(--ceij-e-2); list-style: none; margin: 0; padding: 0; }
.ceij .ceij-migas li + li::before { content: "›"; margin-right: var(--ceij-e-2); color: var(--ceij-c-borde-fuerte); }

/* ---------------------------------------------------------------------
   Contador (span.count del Figma)
   --------------------------------------------------------------------- */

.ceij .ceij-contador {
    display: inline-grid;
    place-items: center;
    min-width: 2rem;
    height: 2rem;
    padding-inline: var(--ceij-e-2);
    border-radius: var(--ceij-r-pildora);
    background: var(--ceij-c-marca);
    color: var(--ceij-c-texto-inverso);
    font-size: var(--ceij-fs-meta);
    font-weight: var(--ceij-fw-negrita);
}

/* Verde institucional con texto blanco: 5,3:1. El diseño lo usa para la
   descarga del archivo de sentencias, para distinguirla del PDF del boletín. */
.ceij .ceij-btn--exito {
    background-color: var(--ceij-c-exito);
    color: var(--ceij-c-texto-inverso);
}
.ceij .ceij-btn--exito:hover,
.ceij .ceij-btn--exito:focus-visible {
    background-color: #0F4D38;
    color: var(--ceij-c-texto-inverso);
}