/* ==========================================================================
   Turno para VTV — estilos globales (complementan Bootstrap 5.3.8)
   Estilos de páginas específicas: assets/css/pages/<pagina>.css
   ========================================================================== */

/* --- 1. Tokens: colores oficiales Provincia de Buenos Aires ------------- */
:root {
    --brand-azul: #1f3464;
    --brand-azul-rgb: 31, 52, 100;
    --brand-celeste: #00aec3;
    --brand-celeste-rgb: 0, 174, 195;
    --brand-rosa: #e81f76;
    --brand-rosa-oscuro: #c8175f;
    --brand-violeta: #592673;
    --brand-verde: #22a954;
    --brand-gris-claro: #f4f6f9;

    /* Mapeo a variables de Bootstrap */
    --bs-primary: var(--brand-azul);
    --bs-primary-rgb: var(--brand-azul-rgb);
    --bs-info: var(--brand-celeste);
    --bs-info-rgb: var(--brand-celeste-rgb);
    --bs-link-color: var(--brand-azul);
    --bs-link-color-rgb: var(--brand-azul-rgb);
    --bs-link-hover-color: var(--brand-violeta);
    --bs-body-font-family: "Encode Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --bs-body-color: #26292e;
}

/* --- 2. Base ------------------------------------------------------------ */
.text-brand-celeste { color: var(--brand-celeste) !important; }
.bg-brand-gris { background-color: var(--brand-gris-claro); }

.btn-primary {
    --bs-btn-bg: var(--brand-azul);
    --bs-btn-border-color: var(--brand-azul);
    --bs-btn-hover-bg: #172850;
    --bs-btn-hover-border-color: #172850;
    --bs-btn-active-bg: #121f3f;
    --bs-btn-active-border-color: #121f3f;
}

.btn-outline-primary {
    --bs-btn-color: var(--brand-azul);
    --bs-btn-border-color: var(--brand-azul);
    --bs-btn-hover-bg: var(--brand-azul);
    --bs-btn-hover-border-color: var(--brand-azul);
    --bs-btn-active-bg: var(--brand-azul);
    --bs-btn-active-border-color: var(--brand-azul);
}

/* Botón de llamada a la acción (Sacar turno) */
.btn-cta {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--brand-rosa);
    --bs-btn-border-color: var(--brand-rosa);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand-rosa-oscuro);
    --bs-btn-hover-border-color: var(--brand-rosa-oscuro);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--brand-rosa-oscuro);
    --bs-btn-active-border-color: var(--brand-rosa-oscuro);
    --bs-btn-focus-shadow-rgb: 232, 31, 118;
}

/* --- 3. Header ---------------------------------------------------------- */
.site-header {
    background-color: var(--brand-azul);
    border-bottom: 4px solid var(--brand-celeste);
}

.site-header .nav-link { font-weight: 600; }

.site-header .nav-link.active {
    color: #fff;
    box-shadow: inset 0 -3px 0 var(--brand-celeste);
}

.dropdown-turnos { width: min(22rem, calc(100vw - 2rem)); }

/* --- 4. Componentes ----------------------------------------------------- */
.turno-pasos__num {
    flex: 0 0 2rem;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--brand-celeste);
    color: var(--brand-azul);
    font-weight: 700;
}

.turno-pasos--compact .turno-pasos__num {
    flex-basis: 1.5rem;
    width: 1.5rem;
    height: 1.5rem;
    font-size: .8rem;
}

/* Separación para elementos sticky bajo el header fijo */
.sticky-offset { top: 5.5rem; z-index: 1; }

/* Íconos SVG inline (Bootstrap Icons) */
.bi { width: 1em; height: 1em; display: inline-block; vertical-align: -.125em; fill: currentColor; }

/* Tarjeta con ícono ------------------------------------------------------ */
.icon-card {
    --icon-color: var(--brand-azul);
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    background-color: #fff;
    box-shadow: 0 .125rem .5rem rgba(var(--brand-azul-rgb), .08);
    transition: transform .25s ease, box-shadow .25s ease;
}
.icon-card--celeste { --icon-color: var(--brand-celeste); }
.icon-card--rosa    { --icon-color: var(--brand-rosa); }
.icon-card--violeta { --icon-color: var(--brand-violeta); }
.icon-card--verde   { --icon-color: var(--brand-verde); }

/* Franja de color superior que se despliega en hover */
.icon-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background-color: var(--icon-color);
    transform: scaleX(.25);
    transform-origin: left;
    transition: transform .3s ease;
}

.icon-card__icon {
    width: 3.25rem;
    height: 3.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .875rem;
    font-size: 1.5rem;
    color: var(--icon-color);
    background-color: color-mix(in srgb, var(--icon-color) 12%, #fff);
    transition: background-color .25s ease, color .25s ease, transform .25s ease;
}

.icon-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 1rem 2rem rgba(var(--brand-azul-rgb), .16);
}
.icon-card:hover::before { transform: scaleX(1); }
.icon-card:hover .icon-card__icon {
    color: #fff;
    background-color: var(--icon-color);
    transform: scale(1.08) rotate(-4deg);
}

@media (prefers-reduced-motion: reduce) {
    .icon-card,
    .icon-card::before,
    .icon-card__icon { transition: none; }
    .icon-card:hover,
    .icon-card:hover .icon-card__icon { transform: none; }
}

/* Contenido de artículos: jerarquía de títulos ---------------------------- */
.article-content { counter-reset: seccion; }

.article-content > section {
    counter-increment: seccion;
    scroll-margin-top: 5.5rem;
}

/* Separador entre secciones (no antes de la primera) */
.article-content > section + section {
    padding-top: 3rem;
    border-top: 1px solid rgba(var(--brand-azul-rgb), .12);
}

/* H2: título de sección con número y línea de acento */
.article-content > section > h2 {
    display: flex;
    align-items: center;
    gap: .875rem;
    position: relative;
    padding-bottom: .875rem;
    margin-bottom: 1.5rem !important;
    font-size: calc(1.4rem + .9vw);
    color: var(--brand-azul);
    scroll-margin-top: 5.5rem;
}

.article-content > section > h2::before {
    content: counter(seccion);
    flex: 0 0 2.75rem;
    width: 2.75rem;
    height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .75rem;
    background-color: var(--brand-azul);
    color: #fff;
    font-size: 1.25rem;
    box-shadow: inset 0 -4px 0 var(--brand-celeste);
}

.article-content > section > h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 4.5rem;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--brand-celeste), var(--brand-violeta));
}

/* Párrafo introductorio de cada sección: más legible, ancho completo del contenedor */
.section-intro {
    font-size: 1.075rem;
    line-height: 1.75;
    margin-bottom: 1.75rem;
}

.section-intro a {
    font-weight: 600;
    text-decoration-color: rgba(var(--brand-celeste-rgb), .6);
    text-underline-offset: .2em;
}

/* H3: subtítulo dentro de la sección, claramente subordinado */
.article-content > section h3:not(.icon-card__title):not(.accordion-header):not(.planta-card__titulo) {
    font-size: 1.15rem;
    color: #26292e;
    margin-top: 1.75rem;
}

.article-content > section > h2 + p + h3,
.article-content > section > h2 + h3 { margin-top: 0; }

@media (min-width: 1200px) {
    .article-content > section > h2 { font-size: 2.15rem; }
}

.page-header {
    background: linear-gradient(135deg, var(--brand-azul) 0%, var(--brand-violeta) 100%);
    color: #fff;
}

/* Migas de pan sobre el fondo del page-header */
.page-header .breadcrumb {
    --bs-breadcrumb-divider-color: rgba(255, 255, 255, .55);
    --bs-breadcrumb-item-active-color: rgba(255, 255, 255, .8);
    font-size: .875rem;
}

.page-header .breadcrumb a {
    color: #fff;
    text-decoration: none;
}

.page-header .breadcrumb a:hover { text-decoration: underline; }

/* Índice de contenidos (componente toc) */
.toc {
    position: relative;
    padding: 1.5rem;
    border-radius: 1rem;
    background-color: #fff;
    border: 1px solid rgba(var(--brand-azul-rgb), .08);
    box-shadow: 0 .5rem 1.5rem rgba(var(--brand-azul-rgb), .07);
    overflow: hidden;
}

/* Franja superior con los colores oficiales */
.toc::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, var(--brand-azul), var(--brand-celeste) 50%, var(--brand-rosa));
}

.toc__header {
    display: flex;
    align-items: center;
    gap: .85rem;
    margin-bottom: 1.1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(var(--brand-azul-rgb), .08);
}

.toc__icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 2.5rem;
    height: 2.5rem;
    border-radius: .75rem;
    background-color: rgba(var(--brand-celeste-rgb), .12);
    color: var(--brand-celeste);
    font-size: 1.2rem;
}

.toc__titulo {
    margin: 0;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--brand-azul);
}

.toc__meta {
    margin: 0;
    font-size: .8rem;
    color: #5b6270;
}

.toc__lista {
    display: grid;
    grid-template-columns: 1fr;
    gap: .35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 768px) {
    .toc__lista {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 1rem;
    }
}

.toc__link {
    display: flex;
    align-items: center;
    gap: .75rem;
    height: 100%;
    padding: .55rem .75rem;
    border-radius: .65rem;
    color: #26292e;
    font-weight: 600;
    font-size: .95rem;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

/* Mismo estilo que el número de cada H2, en versión chica */
.toc__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 1.85rem;
    height: 1.85rem;
    border-radius: .5rem;
    background-color: var(--brand-azul);
    color: #fff;
    font-size: .85rem;
    font-weight: 700;
    box-shadow: inset 0 -3px 0 var(--brand-celeste);
    transition: background-color .15s ease;
}

.toc__texto { flex: 1 1 auto; }

.toc__flecha {
    flex-shrink: 0;
    font-size: 1.25rem;
    color: var(--brand-celeste);
    opacity: 0;
    transform: translateY(-3px);
    transition: opacity .15s ease, transform .15s ease;
}

.toc__link:hover,
.toc__link:focus-visible {
    background-color: rgba(var(--brand-celeste-rgb), .1);
    color: var(--brand-azul);
}

.toc__link:hover .toc__num,
.toc__link:focus-visible .toc__num { background-color: var(--brand-violeta); }

.toc__link:hover .toc__flecha,
.toc__link:focus-visible .toc__flecha {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .toc__link, .toc__num, .toc__flecha { transition: none; }
}

/* Bloque de llamada a la acción (componente cta-banner) */
.cta-banner {
    border-radius: 1rem;
    background: linear-gradient(135deg, var(--brand-azul) 0%, var(--brand-violeta) 100%);
    color: #fff;
}

/* --- 5. Footer ---------------------------------------------------------- */
.site-footer {
    background-color: #16244a;
    color: rgba(255, 255, 255, .75);
    border-top: 4px solid var(--brand-celeste);
}

.site-footer a,
.site-footer .btn-link {
    color: rgba(255, 255, 255, .85);
    text-decoration: none;
}

.site-footer a:hover,
.site-footer .btn-link:hover {
    color: var(--brand-celeste);
    text-decoration: underline;
}

.site-footer .btn-link { font-size: inherit; }

.site-footer hr { border-color: rgba(255, 255, 255, .2); }

/* --- 6. Banner de cookies ---------------------------------------------- */
.cookie-banner {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1080;
    background-color: var(--brand-azul);
    color: #fff;
    box-shadow: 0 -.25rem 1rem rgba(0, 0, 0, .2);
}

.cookie-banner a { color: var(--brand-celeste); }

/* --- 7. Tabla de precios (componente x-tabla-precios) ------------------- */
.tabla-precios { border-radius: 1rem; }

/* Solo scroll horizontal en pantallas chicas; nunca vertical */
.tabla-precios .table-responsive { overflow-y: hidden; }

.tabla-precios thead th {
    background-color: var(--brand-azul);
    color: #fff;
    font-weight: 600;
    border-bottom: 0;
    padding-top: .9rem;
    padding-bottom: .9rem;
}

.tabla-precios .tabla-precios__grupo th {
    background-color: var(--brand-gris-claro);
    color: var(--brand-azul);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.tabla-precios td,
.tabla-precios tbody th { padding-top: .8rem; padding-bottom: .8rem; }

.tabla-precios .tabla-precios__destacado > * {
    background-color: color-mix(in srgb, var(--brand-celeste) 10%, #fff);
}

.tabla-precios .badge {
    background-color: var(--brand-celeste);
    color: var(--brand-azul);
    font-weight: 600;
}

/* Componente calendario-patente (requisitos, guías y home) */
.calendario-patente__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    height: 100%;
    padding: 1rem .5rem;
    border-radius: 1rem;
    background-color: #fff;
    border: 1px solid color-mix(in srgb, var(--brand-celeste) 30%, #fff);
    box-shadow: 0 .25rem .75rem rgba(var(--brand-azul-rgb), .06);
    text-align: center;
}

.calendario-patente__digito {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: .5rem;
    background-color: var(--brand-azul);
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
    /* Guiño a la tipografía de una patente */
    letter-spacing: .02em;
    box-shadow: inset 0 0 0 2px var(--brand-celeste);
}

.calendario-patente__mes {
    font-weight: 600;
    color: var(--brand-azul);
}