/* ============================================================
   SLIDE — componentes reutilizables para el contenido de cada
   diapositiva. Las slides son <section class="slide"> dentro
   del mismo documento del módulo (arquitectura sin iframes).

   Todos los componentes usan variables de variables.css y se
   diseñan para legibilidad a distancia (clamp() por vw).
   ============================================================ */

/* === Layout general de una slide === */
.slide {
    width: 100%;
    height: 100%;
    background: var(--color-fondo);
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 1fr;
    padding: var(--slide-pad-y) var(--slide-pad-x);
    gap: clamp(0.75rem, 1.2vw, 1.25rem);
    position: relative;
}

/* Variantes de layout */
.slide--centrada {
    place-items: center;
    text-align: center;
}
.slide--cuerpo-izq {
    grid-template-columns: 1fr 1fr;
}
.slide--cuerpo-der .slide__cuerpo { order: -1; }

/*
 * Variante para diapositivas con superficie oscura.
 * Los selectores incluyen los componentes que normalmente fijan su
 * propio color para que el contraste no dependa de la herencia CSS.
 */
.slide--oscura {
    background: var(--adn-azul);
    color: var(--adn-blanco);
}
.slide--oscura .slide__eyebrow,
.slide--oscura .slide__titulo,
.slide--oscura .slide__subtitulo,
.slide--oscura .slide__cuerpo,
.slide--oscura .slide__cuerpo p,
.slide--oscura .slide__nota,
.slide--oscura .slide__ley,
.slide--oscura .slide__pie,
.slide--oscura .slide__pie-modulo,
.slide--oscura .slide__pie-numero {
    color: var(--adn-blanco) !important;
}
.slide--oscura .slide__pie {
    border-top-color: rgb(255 255 255 / 25%);
}

/* === Cabecera de slide === */
.slide__cabecera {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.slide__eyebrow {
    font-family: var(--fuente-tecnica);
    font-size: var(--slide-eyebrow-size);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--color-secundario);
    font-weight: 700;
}

.slide__titulo {
    font-family: var(--fuente-titulo);
    font-size: var(--slide-titulo-size);
    font-weight: 700;
    color: var(--color-principal);
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.slide__subtitulo {
    font-family: var(--fuente-titulo);
    font-size: var(--slide-subtitulo-size);
    color: var(--adn-azul-2);
    font-weight: 600;
    line-height: 1.2;
}

/* === Cuerpo === */
.slide__cuerpo {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(0.6rem, 1vw, 1rem);
    overflow: hidden;
}

.slide__cuerpo p {
    font-size: var(--slide-cuerpo-size);
    color: var(--color-texto);
    max-width: 65ch;
}

/* Texto pequeño (notas al pie, citas legales) */
.slide__nota,
.slide__ley-pequena {
    font-size: var(--slide-nota-size);
    color: var(--color-suave);
}

/* Cita legal destacada (artículos CPC, CRBV) */
.slide__ley {
    font-family: var(--fuente-tecnica);
    font-size: var(--slide-ley-size);
    color: var(--color-secundario);
    font-weight: 600;
}

.slide__highlight {
    background: var(--adn-verde-suave);
    color: var(--adn-verde-oscuro);
    padding: 0.05em 0.4em;
    border-radius: 6px;
    font-weight: 600;
}

/* === Pie de slide === */
.slide__pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: var(--slide-nota-size);
    color: var(--color-suave);
    border-top: 1px solid var(--color-borde);
    padding-top: clamp(0.55rem, 1vw, 0.9rem);
}

.slide__pie-modulo {
    font-family: var(--fuente-tecnica);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-secundario);
    font-weight: 600;
}

.slide__pie-numero {
    font-family: var(--fuente-tecnica);
    color: var(--color-texto);
    font-weight: 700;
}

/* === Tarjeta (componente base reutilizable) === */
.slide-card {
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-md);
    padding: clamp(0.85rem, 1.4vw, 1.2rem);
    box-shadow: var(--adn-sombra-1);
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.slide-card__titulo {
    font-family: var(--fuente-titulo);
    font-size: clamp(1.2rem, 2vw, 1.75rem);
    color: var(--color-principal);
    font-weight: 700;
}

.slide-card__cuerpo {
    font-size: var(--slide-cuerpo-size);
    color: var(--color-texto);
}

/* Variante de tarjeta hero (enfatizada) */
.slide-card--hero {
    background: var(--adn-azul);
    color: var(--adn-blanco);
    border-color: transparent;
}
.slide-card--hero .slide-card__titulo,
.slide-card--hero .slide-card__cuerpo,
.slide-card--hero .slide-card__cuerpo p {
    color: var(--adn-blanco) !important;
}

/* Variante de tarjeta acento (verde) */
.slide-card--accent {
    background: var(--adn-verde-suave);
    border-color: transparent;
}
.slide-card--accent .slide-card__titulo { color: var(--adn-verde-oscuro); }

/* === Grids de tarjetas === */
.slide-grid {
    display: grid;
    gap: clamp(0.75rem, 1.5vw, 1.25rem);
    width: 100%;
}
.slide-grid--2 { grid-template-columns: repeat(2, 1fr); }
.slide-grid--3 { grid-template-columns: repeat(3, 1fr); }
.slide-grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 800px) {
    .slide-grid--3,
    .slide-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

/* === Listas estilizadas === */
.slide-lista {
    display: flex;
    flex-direction: column;
    gap: clamp(0.35rem, 0.7vw, 0.55rem);
    padding: 0;
    margin: 0;
}

.slide-lista__item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: clamp(0.5rem, 1vw, 1rem);
    align-items: start;
    font-size: var(--slide-cuerpo-size);
    padding: clamp(0.3rem, 0.55vw, 0.45rem) 0;
    border-bottom: 1px dashed var(--color-borde);
}
.slide-lista__item:last-child { border-bottom: none; }

.slide-lista__indice {
    font-family: var(--fuente-tecnica);
    font-weight: 700;
    color: var(--color-acento);
    background: var(--adn-verde-suave);
    min-width: clamp(2rem, 3vw, 2.75rem);
    height: clamp(2rem, 3vw, 2.75rem);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: clamp(1rem, 1.5vw, 1.25rem);
}

.slide-lista__item--compacto { padding: 0.25rem 0; }

/* === Key-value (uso típico: "Concepto → Definición") === */
.slide-kv {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) 2fr;
    gap: clamp(0.75rem, 1.5vw, 1.25rem);
    align-items: start;
    padding: clamp(0.5rem, 1vw, 0.85rem) 0;
    border-bottom: 1px solid var(--color-borde);
}
.slide-kv:last-child { border-bottom: none; }

.slide-kv__clave {
    font-family: var(--fuente-titulo);
    font-weight: 700;
    color: var(--color-secundario);
    font-size: var(--slide-cuerpo-size);
}

.slide-kv__valor {
    font-size: var(--slide-cuerpo-size);
    color: var(--color-texto);
}

/* === Badge === */
.slide-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    background: var(--adn-verde-suave);
    color: var(--adn-verde-oscuro);
    font-size: var(--slide-nota-size);
    font-weight: 600;
    font-family: var(--fuente-tecnica);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.slide-badge--azul {
    background: var(--adn-azul);
    color: var(--adn-verde);
}
.slide-badge--aviso {
    background: rgb(138 90 0 / 12%);
    color: var(--adn-aviso);
}

/* === Diagrama de flujo horizontal (flechas) === */
.slide-flujo {
    display: flex;
    align-items: stretch;
    gap: clamp(0.4rem, 0.7vw, 0.75rem);
    flex-wrap: wrap;
}

.slide-flujo__paso {
    flex: 1 1 200px;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-md);
    padding: clamp(0.7rem, 1vw, 1rem);
    text-align: center;
    box-shadow: var(--adn-sombra-1);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    justify-content: center;
}

.slide-flujo__paso-titulo {
    font-family: var(--fuente-titulo);
    font-weight: 700;
    color: var(--color-principal);
    font-size: clamp(1rem, 1.4vw, 1.4rem);
}

.slide-flujo__paso-detalle {
    font-size: var(--slide-nota-size);
    color: var(--color-suave);
}

.slide-flujo__flecha {
    display: grid;
    place-items: center;
    color: var(--color-acento);
    font-size: 1.75rem;
    font-weight: 700;
    flex: 0 0 auto;
}

/* === Cita destructurada (typográfica) === */
.slide-cita {
    font-family: var(--fuente-titulo);
    font-size: clamp(1.4rem, 2.6vw, 2.6rem);
    line-height: 1.3;
    color: var(--adn-azul-2);
    font-weight: 600;
    max-width: 22ch;
    border-left: 4px solid var(--color-acento);
    padding-left: clamp(1rem, 2vw, 1.75rem);
}

.slide-cita--autor {
    font-size: var(--slide-nota-size);
    color: var(--color-suave);
    margin-top: 0.5rem;
    display: block;
}

/* === Decoración de fondo (capa opcional) === */
.slide__decoracion {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}
.slide__decoracion::before {
    content: "";
    position: absolute;
    top: -20%;
    right: -10%;
    width: 40%;
    height: 60%;
    background: radial-gradient(circle, var(--adn-verde-suave) 0%, transparent 65%);
    opacity: 0.7;
}

.slide > *:not(.slide__decoracion) {
    position: relative;
    z-index: 1;
}

/* Alto contraste: ningún texto de una slide queda en color oscuro. */
.deck > .slide :where(*) {
    color: var(--adn-blanco) !important;
}