/* ==========================================================================
   cms-render.css — estilos del renderizador dinámico

   POR QUÉ EXISTE ESTE ARCHIVO
   El sanitizador del API no permite el atributo "class" (decisión #18,
   opción B). El contenido editorial llega como HTML semántico puro: <h1>,
   <h2>, <p>, <ul>, <strong>. Las clases utilitarias que hoy están escritas
   a mano en las vistas estáticas se reemplazan aquí por selectores
   descendentes bajo .cms-content.

   Esto no fue un rediseño: los valores están copiados de site.css
   (.titulos) y de Institucional/General.css (.privacy-content), para que
   una página renderizada desde el CMS se vea idéntica a su versión
   estática.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Encabezado principal
   Sustituye a: <h1 class="fw-bold titulos text-center">
   Valores tomados de .titulos en site.css
   -------------------------------------------------------------------------- */
.cms-content h1 {
    font-size: 2rem;
    color: rgb(12, 35, 65);
    margin: 4% 0;
    line-height: 1.2;
    font-weight: 700; /* fw-bold */
    text-align: center; /* text-center */
}

@media (max-width: 575.98px) {
    .cms-content h1 {
        font-size: 1.5rem;
    }
}

/* --------------------------------------------------------------------------
   Sustituye a las clases utilitarias mt-2 de Bootstrap que hoy aparecen
   sueltas dentro del contenido de Finanzas.
   -------------------------------------------------------------------------- */
.cms-content > ol,
.cms-content > ul {
    margin-top: 0.5rem;
}

/* --------------------------------------------------------------------------
   Índice generado por el renderizador (CmsAnchorHelper), no por el editor.
   Mismos valores que .legal-index en Institucional/General.css.
   -------------------------------------------------------------------------- */
.cms-content .legal-index {
    margin-top: 3rem;
    margin-bottom: 3rem;
}

    .cms-content .legal-index a {
        text-decoration: none;
        color: #000;
        transition: color 0.2s ease;
    }

        .cms-content .legal-index a:hover {
            text-decoration: underline;
            color: var(--primary-dark, #0e2340);
        }

/* --------------------------------------------------------------------------
   Desplazamiento suave hacia los anchors generados, sin que el encabezado
   quede pegado al borde superior de la ventana.
   -------------------------------------------------------------------------- */
.cms-content h2[id],
.cms-content h3[id] {
    scroll-margin-top: 100px;
}

/* --------------------------------------------------------------------------
   Tablas. Las genera el editor visual dentro de un campo "html"
   (bloque de texto, respuesta de una pregunta, valor de una lista):
   <figure><table><thead>/<tbody>... sin class ni style, que el sanitizador
   quita. Cubre las páginas (.cms-content) y los artículos del Blog
   (.article-content).

   En pantallas angostas la tabla no se comprime hasta volverse ilegible:
   cada celda tiene un ancho mínimo y el <figure> se desplaza de lado.
   :has() evita tocar las <figure> de ArticleImage y ArticleHero; en un
   navegador sin :has() la tabla se ve igual, solo sin desplazamiento.
   -------------------------------------------------------------------------- */
.cms-content figure:has(> table),
.article-content figure:has(> table) {
    margin: 1.5rem 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.cms-content table,
.article-content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
    font-size: 0.95em;
}

.cms-content figure > table,
.article-content figure > table {
    margin-bottom: 0;
}

.cms-content th,
.cms-content td,
.article-content th,
.article-content td {
    border: 1px solid #d9dee4;
    padding: 0.5rem 0.75rem;
    text-align: left;
    vertical-align: top;
    min-width: 7rem;
}

.cms-content thead th,
.article-content thead th {
    background-color: rgb(12, 35, 65); /* mismo azul que .cms-content h1 */
    color: #ffffff;
    font-weight: 700;
}

.cms-content tbody tr:nth-child(even),
.article-content tbody tr:nth-child(even) {
    background-color: #f5f7fa;
}

/* Encabezado de fila (primera columna marcada como encabezado). */
.cms-content tbody th,
.article-content tbody th {
    background-color: #eef1f5;
    font-weight: 700;
}

/* Una celda con varios párrafos o una lista no deja margen al final. */
.cms-content th > :last-child,
.cms-content td > :last-child,
.article-content th > :last-child,
.article-content td > :last-child {
    margin-bottom: 0;
}

/* Una <figure> que el sanitizador dejó vacía (p. ej. una imagen escrita en
   modo HTML: <img> no está permitido) no deja un hueco en la página. */
.cms-content figure:empty,
.article-content figure:empty {
    display: none;
}

/* --------------------------------------------------------------------------
   Barra de vista previa. Solo se pinta en /pagina/preview/{id}.
   -------------------------------------------------------------------------- */
.cms-preview-bar {
    background-color: #b45309;
    color: #ffffff;
    text-align: center;
    padding: 0.5rem 1rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* ==========================================================================
   Banner, TitleSubtitle y DocumentDownloadList
   Valores copiados de css/Requisitos/Requisitos.css para que /pagina/Requisitos
   se vea como /Requisitos. Las clases viven en las PLANTILLAS, no en el
   contenido (decisión #27).
   ========================================================================== */

/* Banner: siempre fuera del contenedor, a todo lo ancho (Pagina.cshtml).
   width/height del <img> dan la proporción y evitan el salto al cargar;
   height:auto la respeta al escalar. Margen como el estático (mb-xl-4). */
.cms-banner {
    margin-bottom: 0;
}

    .cms-banner img {
        display: block;
        height: auto;
    }

@media (min-width: 1200px) {
    .cms-banner {
        margin-bottom: 1.5rem;
    }
}

/* TitleSubtitle — sustituye a .requisitos-main-title (que era un <p>). */
.cms-title-subtitle {
    margin: 1rem 0 1.5rem;
    text-align: center;
}

.cms-title-subtitle__titulo {
    font-family: 'Overpass', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: #0d184e;
    margin: 0;
}

.cms-title-subtitle__texto,
.cms-title-subtitle__correo {
    margin-top: 0.75rem;
    color: #0d184e;
}

    .cms-title-subtitle__texto > :last-child,
    .cms-title-subtitle__correo {
        margin-bottom: 0;
    }

/* DocumentDownloadList — sustituye a .requisitos-title / .button-requisitos. */
.cms-docs {
    margin-bottom: 3rem;
}

.cms-docs__titulo {
    font-family: 'Overpass', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #0d184e;
    text-align: center;
    margin-bottom: 1.5rem;
}

.cms-docs__lista {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .cms-docs__lista > li:not(:last-child) {
        margin-bottom: 2rem;
    }

.cms-docs__boton {
    display: block;
    width: 100%;
    padding: 0.70rem 1rem;
    border: 1px solid #b8b0ae;
    border-radius: 10px;
    font-family: 'Overpass', sans-serif;
    font-size: 1rem;
    color: #0d184e;
    background-color: #fff;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease;
}

    .cms-docs__boton:hover {
        border-color: #0d184e;
        background-color: #f9f9f9;
        color: #0d184e;
    }

    .cms-docs__boton:focus-visible {
        outline: 2px solid #0d184e;
        outline-offset: 2px;
    }

/* Varias listas seguidas, lado a lado (Default.cshtml las agrupa). */
.cms-docs-grupo {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 1.5rem;
    padding: 0 1.5rem; /* px-4 del estático */
}

@media (min-width: 768px) {
    .cms-docs-grupo {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ==========================================================================
   HeroBeneficios y Cards (páginas de vehículos)
   El resto de las clases (titulos, sub-titulos, icon-col, card-w-shadow,
   p-title-card, text-title-buton, btn-principal) viene de Cards-img.css y de
   site.css, igual que en el estático: Pagina.cshtml carga Cards-img.css
   (vehiculos-bundle.css en producción) solo si la página usa estos bloques.
   ========================================================================== */

/* El texto llega como <p> desde el editor: sin margen extra al final
   (el estático tenía el texto directo en un <p class="... mb-0">). */
.cms-hero-beneficios__texto > :last-child,
.cms-cards__texto > :last-child {
    margin-bottom: 1rem;
}

.text-title-buton .cms-cards__texto > :last-child {
    margin-bottom: 0;
}

/* Imagen lateral: nunca más ancha que su columna. */
.cms-hero-beneficios__lateral {
    max-width: 100%;
    height: auto;
}

/* Las tarjetas llevan width/height (proporción); el ancho real lo da la
   columna. */
.cms-cards .card-img-top {
    height: auto;
}

/* ==========================================================================
   TitleSubtitle "tarjeta" (Contacto y ServicioAClientes)
   title-main y subtitle-main vienen de Contacto/contacto.css, igual que en el
   estático (la vista la carga; Pagina.cshtml también, para la vista previa).
   El subtítulo llega como <p> del editor dentro de .subtitle-main: hereda su
   tipografía, color y alineación.
   ========================================================================== */
.cms-tarjeta .subtitle-main p {
    font: inherit;
    color: inherit;
    text-align: inherit;
}

/* El botón es un enlace al documento, no un <button>: se centra con
   text-align en vez de btn-center (display:block lo estiraría). */
.cms-tarjeta__boton {
    text-align: center;
}

/* Botón al documento en el estilo centrado (Requisitos). */
.cms-title-subtitle__boton {
    margin: 1rem 0 0;
}

/* ==========================================================================
   QuienesSomos
   ========================================================================== */

/* Hero: en el estático, tres <br /> separaban el texto del botón. */
.cms-hero .flex-center {
    margin-top: 3rem;
}

/* TextBlock estilo "seccion": el h2 como .fw-bold.sub-titulos y el texto
   justificado (antes: <p style="text-align:justify">). */
.cms-seccion h2 {
    font-weight: 700;
    margin: 1% 0;
}

.cms-seccion p {
    text-align: justify;
}

@media (max-width: 991px) {
    .cms-seccion h2 {
        text-align: center;
    }
}

/* IconLinkGrid: a todo lo ancho, con el margen del estático
   (style="margin: 2% 5% 0"). */
.cms-icon-link-grid {
    margin: 2% 5% 0;
}

/* ==========================================================================
   Home
   ========================================================================== */

/* Los titulos de "¿QUÉ TIPO DE VEHÍCULO…?" (antes style="margin:50px auto;width:85%"). */
.cms-card-link-grid__titulo {
    margin: 50px auto;
    width: 85%;
}

/* "¿POR QUÉ ELEGIRNOS?": a todo lo ancho con el margen del estático
   (style="margin: 2% 5% 0"). */
.cms-icon-text-grid {
    margin: 2% 5% 0;
}

    .cms-icon-text-grid .nuevo-elegirnos[role="button"] {
        cursor: pointer;
    }