/*--------------------------------------------------------------
Design System BCN · Base
Elementos HTML, accesibilidad global y puente hacia Bootstrap 5.2.
Depende de tokens.css. No define colores literales.
--------------------------------------------------------------*/

/* ---------- Puente Bootstrap: sus variables leen los tokens ---------- */
:root {
    --bs-body-bg: var(--color-bg);
    --bs-body-color: var(--color-text-main);
    --bs-body-font-family: var(--font-body);
    --bs-border-color: var(--color-border);
    --bs-link-color: var(--color-text-main);
    --bs-link-hover-color: var(--color-primary);
    --bs-secondary-color: var(--color-text-muted);
    --bs-emphasis-color: var(--color-text-main);
    --bs-code-color: var(--color-secondary);
}

/* ---------- Documento ---------- */
html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background-color: var(--color-bg);
    color: var(--color-text-main);
    font-family: var(--font-body);
    font-size: var(--text-base);          /* relativo al <html>: la herramienta de tamaño escala desde la raíz */
    line-height: var(--leading-body);
}

/* Compensa el header fijo del portal BCN */
.wrapper {
    padding: var(--header-offset) 0 var(--section-space);
}

/* Alto del header institucional (medido en el portal): cambia de 50 a 60 px al pasar de 1100 a 1101 px.
   static/js/header_offset.js lo mide en vivo y lo corrige si el portal lo modifica. */
@media (min-width: 1101px) {
    :root {
        --header-offset: 60px;
    }
}

.container {
    max-width: var(--container-max);
}

@media (min-width: 1400px) {
    .container {
        max-width: var(--container-max);
    }
}

/* ---------- Tipografía ---------- */
h1, h2, h3, h4, h5, h6 {
    color: var(--color-heading);
    line-height: var(--leading-tight);
    margin-top: 0;
}

h1 {
    font-family: var(--font-heading);
    color: var(--color-primary);
    font-size: var(--text-3xl);
    margin: 0 0 var(--space-2);
}

h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
}

h4, h5, h6 {
    font-family: var(--font-body);
}

@media (max-width: 736px) {
    h1 {
        font-size: var(--text-2xl);
    }
}

p {
    margin: 0 0 var(--space-4);
}

/* Ritmo vertical: cada sección de página se separa con el mismo espacio fluido */
.section {
    margin-block: var(--section-space);
}

.section--flush-top {
    margin-top: 0;
}

/* Sección que continúa un encabezado con contenido propio (p. ej. tarjetas): se acerca a él en vez de repetir la separación completa */
.section--close {
    margin-top: var(--space-4);
}

/* Cuadrícula intrínseca: las tarjetas se acomodan solas según el ancho disponible */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: var(--gutter);
}

/* Texto corrido con largo de línea legible */
.measure {
    max-width: var(--measure);
}

@media (pointer: coarse) {
    :root {
        --tool-size: var(--touch-size);   /* pantallas táctiles: objetivos de 44 px */
    }
}

a {
    color: var(--color-text-main);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-standard);
}

a:hover {
    color: var(--color-primary);
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    color: inherit;
}

small,
.text-muted {
    color: var(--color-text-muted);
}

em, i {
    font-style: italic;
}

i.fa-solid, i.fa-brands, i.fa-regular, i.fas, i.fal, i.far {
    font-style: normal;                   /* los iconos no van en cursiva */
}

code,
pre,
kbd {
    font-family: var(--font-mono);
    font-size: 0.9em;
}

hr {
    border-color: var(--color-border);
    opacity: 1;
}

/* ---------- Accesibilidad global ---------- */
:focus-visible {
    outline: 3px solid var(--color-focus-ring);
    outline-offset: 2px;
}

/* Los controles con borde propio ya muestran el foco en el borde */
.form-control:focus-visible,
.finder__input:focus-visible {
    outline: none;
}

.skip-link {
    position: absolute;
    top: 0;
    left: var(--space-2);
    z-index: var(--z-prompt);
    padding: var(--space-2) var(--space-4);
    background: var(--color-primary);
    color: var(--color-on-primary);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    transform: translateY(-120%);
    transition: transform var(--duration-fast) var(--ease-standard);
}

.skip-link:focus {
    transform: translateY(0);
    color: var(--color-on-primary);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- Volver arriba (js/main.js agrega .cd-top--show / --fade-out) ---------- */
.cd-top {
    display: inline-block;
    height: 40px;
    width: 40px;
    position: fixed;
    bottom: 40px;
    right: 10px;
    z-index: var(--z-sticky);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    background: var(--color-primary) url("../../img/cd-top-arrow.svg") no-repeat center 50%;
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--duration-base) 0s, visibility 0s var(--duration-base), background-color var(--duration-base) 0s;
}

.cd-top.cd-top--show,
.cd-top.cd-top--fade-out,
.cd-top:hover {
    transition: opacity var(--duration-base) 0s, visibility 0s 0s, background-color var(--duration-base) 0s;
}

.cd-top.cd-top--show {
    visibility: visible;
    opacity: 1;
}

.cd-top.cd-top--fade-out {
    opacity: 0.5;
}

.cd-top:hover {
    background-color: var(--color-primary-hover);
    opacity: 1;
}

@media (min-width: 768px) {
    .cd-top {
        right: 20px;
        bottom: 20px;
    }
}

@media (min-width: 1024px) {
    .cd-top {
        height: 60px;
        width: 60px;
        right: 30px;
        bottom: 30px;
    }
}

/* ---------- Puente Bootstrap: componentes que el sitio usa ---------- */
.card {
    --bs-card-bg: var(--color-surface);
    --bs-card-color: var(--color-text-main);
    --bs-card-border-color: var(--color-border);
    --bs-card-border-radius: var(--radius-lg);
    --bs-card-inner-border-radius: var(--radius-lg);
}

.table {
    --bs-table-color: var(--color-text-main);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--color-border);
    --bs-table-striped-color: var(--color-text-main);
    --bs-table-striped-bg: var(--color-surface-light);
    --bs-table-hover-bg: var(--color-surface);
}

.form-control,
.form-select {
    background-color: var(--color-bg);
    color: var(--color-text-main);
    border-color: var(--color-border);
    border-radius: var(--radius-md);
}

.form-control::placeholder {
    color: var(--color-text-muted);
    opacity: 1;
}

.form-control:focus,
.form-select:focus {
    background-color: var(--color-bg);
    color: var(--color-text-main);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-10);
}

.img-thumbnail {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    border-radius: var(--radius-md);
}

.list-group {
    --bs-list-group-bg: var(--color-bg);
    --bs-list-group-color: var(--color-text-main);
    --bs-list-group-border-color: var(--color-border);
    --bs-list-group-action-hover-bg: var(--color-surface);
    --bs-list-group-action-hover-color: var(--color-primary);
}

.text-black-50 {
    color: var(--color-text-muted) !important;
}