/* ==========================================================================
   ENCCI — BASE
   Reset + tipografía + elementos HTML + Bootstrap
   --------------------------------------------------------------------------

   ========================================================================== */


/* ==========================================================================
   01. RESET
   ========================================================================== */

*,
*::before,
*::after{

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

html,
body{

    margin:0;

    padding:0;

}

body{

    min-height:100vh;

    background:var(--bs-body-bg);

    color:var(--encci-text);

    font-family:var(--body-family);

    font-size:18px;

    font-weight:400;

    line-height:1.6;

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;

    text-rendering:optimizeLegibility;

}

body.is-locked{

    overflow:hidden;

}


/* ==========================================================================
   02. TIPOGRAFÍA
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6{

    margin-top:0;

    color:var(--encci-primary-verydark);

    font-family:var(--title-family);

    font-weight:700;

    line-height:1.15;

    letter-spacing:-.025em;

}

h1{

    margin-bottom:1.5rem;

    font-size:clamp(2.5rem, 4.5vw, 3.5rem);

}

h2{

    margin-bottom:1.25rem;

    font-size:clamp(2rem, 3.5vw, 2.5rem);

}

h3{

    margin-bottom:1rem;

    font-size:clamp(1.6rem, 2.5vw, 2rem);

}

h4{

    margin-bottom:.85rem;

    font-size:1.5rem;

}

h5{

    margin-bottom:.7rem;

    font-size:1.25rem;

}

h6{

    margin-bottom:.6rem;

    font-size:1.1rem;

}

p{

    margin-top:0;

    margin-bottom:1rem;

}

strong,
b{

    font-weight:700;

}

small{

    font-size:.875em;

}

.text-muted{

    color:var(--encci-text-muted) !important;

}


/* ==========================================================================
   03. TEXTO ESPECIAL / DISPLAY
   ========================================================================== */

.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6{

    font-family:var(--title-family);

    color:var(--encci-primary-verydark);

    font-weight:700;

    letter-spacing:-.035em;

}

.display-1{font-size:clamp(3rem,6vw,5rem);}
.display-2{font-size:clamp(2.75rem,5vw,4.5rem);}
.display-3{font-size:clamp(2.5rem,4.5vw,4rem);}
.display-4{font-size:clamp(2.25rem,4vw,3.5rem);}
.display-5{font-size:clamp(2rem,3.5vw,3rem);}
.display-6{font-size:clamp(1.75rem,3vw,2.5rem);}


/* ==========================================================================
   04. ENLACES
   ========================================================================== */

a{

    color:var(--encci-primary-dark);

    text-decoration:underline;

    text-decoration-thickness:1px;

    text-underline-offset:3px;

    transition:
        color var(--transition-fast),
        background-color var(--transition-fast),
        border-color var(--transition-fast);

}

a:hover{

    color:var(--encci-primary-verydark);

}

a:focus-visible{

    outline:3px solid var(--encci-focus);

    outline-offset:3px;

    border-radius:4px;

}


/* ==========================================================================
   05. LISTAS
   ========================================================================== */

ul,
ol{

    margin-top:0;

    margin-bottom:1rem;

    padding-left:1.5rem;

}

li + li{

    margin-top:.25rem;

}


/* ==========================================================================
   06. IMÁGENES Y MULTIMEDIA
   ========================================================================== */

img,
svg,
video{

    max-width:100%;

}

img{

    height:auto;

}

picture{

    display:block;

}

svg{

    vertical-align:middle;

}

figure{

    margin:0;

}

figcaption{

    margin-top:.5rem;

    color:var(--encci-text-muted);

    font-size:.875rem;

}


/* ==========================================================================
   07. TABLAS
   ========================================================================== */

table{

    width:100%;

    border-collapse:collapse;

}

th{

    color:var(--encci-primary-verydark);

    font-weight:700;

}

th,
td{

    padding:.75rem 1rem;

    border-bottom:1px solid var(--encci-border);

    vertical-align:top;

}


/* ==========================================================================
   08. FORMULARIOS HTML
   ========================================================================== */

button,
input,
select,
textarea{

    font:inherit;

}

button{

    color:inherit;

}

button:not(:disabled),
[type="button"]:not(:disabled),
[type="submit"]:not(:disabled),
[type="reset"]:not(:disabled){

    cursor:pointer;

}

input,
select,
textarea{

    color:var(--encci-text);

}

::placeholder{

    color:var(--encci-text-muted);

    opacity:1;

}

:disabled,
.disabled{

    cursor:not-allowed;

}


/* ==========================================================================
   09. BOOTSTRAP — FORMULARIOS
   ========================================================================== */

.form-control,
.form-select{

    min-height:var(--encci-control-height);

    color:var(--encci-text);

    background-color:var(--encci-white);

    border-color:var(--encci-border-strong);

    border-radius:var(--radius-sm);

    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        background-color var(--transition-fast);

}

.form-control:focus,
.form-select:focus{

    color:var(--encci-text);

    background-color:var(--encci-white);

    border-color:var(--encci-primary);

    box-shadow:0 0 0 .2rem rgba(var(--encci-primary-rgb), .16);

}

.form-control:disabled,
.form-select:disabled{

    color:var(--encci-disabled);

    background-color:var(--encci-disabled-bg);

}


/* ==========================================================================
   10. BOOTSTRAP — BOTONES
   ========================================================================== */

.btn{

    font-family:var(--title-family);

    font-weight:700;

    border-radius:var(--radius-sm);

    transition:
        color var(--transition-fast),
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        transform var(--transition-fast);

}

.btn:focus-visible{

    outline:3px solid var(--encci-focus);

    outline-offset:3px;

    box-shadow:none;

}

.btn:hover{

    transform:translateY(-1px);

}

.btn:active{

    transform:translateY(0);

}

.btn-primary{

    color:var(--encci-primary-verydark);

    background-color:var(--encci-primary);

    border-color:var(--encci-primary);

}

.btn-primary:hover{

    color:var(--encci-white);

    background-color:var(--encci-primary-dark);

    border-color:var(--encci-primary-dark);

}

.btn-outline-primary{

    color:var(--encci-primary-dark);

    border-color:var(--encci-primary);

}

.btn-outline-primary:hover{

    color:var(--encci-primary-verydark);

    background-color:var(--encci-surface-primary);

    border-color:var(--encci-primary-dark);

}


/* ==========================================================================
   11. BOOTSTRAP — CARD BASE
   --------------------------------------------------------------------------
   Solo normalización básica. El diseño visual de las cards ENCCI pertenece
   a components.css.
   ========================================================================== */

.card{

    min-width:0;

    color:var(--encci-text);

    background-color:var(--encci-white);

    border-color:var(--encci-border);

    border-radius:var(--radius-md);

}


/* ==========================================================================
   12. BADGES / ETIQUETAS
   ========================================================================== */

.badge{

    font-family:var(--title-family);

    font-weight:700;

    border-radius:var(--radius-pill);

}


/* ==========================================================================
   14. HR
   ========================================================================== */

hr{

    margin:2rem 0;

    border:0;

    border-top:1px solid var(--encci-border);

    opacity:1;

}


/* ==========================================================================
   15. ROW FIX
   --------------------------------------------------------------------------
   Bootstrap aplica márgenes negativos a .row para compensar los gutters
   del .container. En la estructura Drupal actual hay .row que no están
   siempre contenidos en un .container Bootstrap puro.

   El resultado eran elementos que sobresalían del viewport y generaban
   scroll horizontal.

   No tocamos .container aquí: su ancho y centrado siguen siendo
   responsabilidad de layout.css.
   ========================================================================== */

.row{

    --bs-gutter-x:0;

    --bs-gutter-y:0;

    margin-right:0 !important;

    margin-left:0 !important;

}


/* Evita que columnas flex/grid puedan forzar un ancho superior al padre. */

.row > *{

    min-width:0;

}


/* Las imágenes y contenido largo no deben ampliar una columna. */

.row img,
.row svg,
.row video{

    max-width:100%;

}


/* ==========================================================================
   16. REGIONES DRUPAL
   --------------------------------------------------------------------------
   Evitamos padding lateral inesperado en las regiones que ya están
   controladas por nuestros contenedores/layouts.
   ========================================================================== */

.region-sidebar-first,
.region-sidebar-second,
.region-footer,
.region-content{

    min-width:0;

}


/* ==========================================================================
   17. FOCUS GLOBAL
   ========================================================================== */

:focus-visible{

    outline:3px solid var(--encci-focus);

    outline-offset:3px;

}


/* ==========================================================================
   18. SKIP LINK — ACCESIBILIDAD
   ========================================================================== */

.visually-hidden-focusable:focus,
.skip-link:focus{

    position:fixed;

    top:1rem;

    left:1rem;

    z-index:9999;

    width:auto;

    height:auto;

    padding:.75rem 1rem;

    overflow:visible;

    clip:auto;

    white-space:normal;

    color:var(--encci-primary-verydark);

    background:var(--encci-secondary);

    border-radius:var(--radius-sm);

    text-decoration:none;

    box-shadow:var(--encci-shadow);

}


/* ==========================================================================
   19. MAIN
   ========================================================================== */

main{

    min-width:0;

    color:var(--encci-text);

}

main > :first-child{

    margin-top:0;

}


/* ==========================================================================
   20. CONTENIDO LARGO / PREVENCIÓN DE OVERFLOW
   --------------------------------------------------------------------------
   No ocultamos overflow horizontal del body como parche. Solo evitamos que
   elementos comunes de contenido calculen un ancho mínimo mayor que su
   contenedor.
   ========================================================================== */

.container,
.container--sm,
.container--lg{

    min-width:0;

}

.container > *,
.container--sm > *,
.container--lg > *{

    min-width:0;

}

.text-break,
.break-word{

    overflow-wrap:anywhere;

}


/* ==========================================================================
   21. RESPONSIVE TYPOGRAPHY
   ========================================================================== */

@media (max-width:767.98px){

    body{

        font-size:17px;

    }

    h1{

        margin-bottom:1.25rem;

    }

    h2{

        margin-bottom:1rem;

    }

    th,
    td{

        padding:.65rem .75rem;

    }

}


/* ==========================================================================
   22. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion:reduce){

    html{

        scroll-behavior:auto;

    }

    *,
    *::before,
    *::after{

        animation-duration:.01ms !important;

        animation-iteration-count:1 !important;

        transition-duration:.01ms !important;

        scroll-behavior:auto !important;

    }

}


/* ==========================================================================
   23. SELECCIÓN
   ========================================================================== */

::selection{

    background:rgba(var(--encci-secondary-rgb), .55);

    color:var(--encci-primary-verydark);

}