/*!
 * Layout Fluid Edition v1.0.3
 * Subset compatible con nombres de clase de Bootstrap 5.
 * Proporciones fluidas e intrinsic-layout.
 */

/* ─────────────────────────────────────────
   DESIGN TOKENS FLUIDOS Y PALETA DE COLOR
   ───────────────────────────────────────── */
:root {
    /* Padding externo lateral: 16px en móvil → 80px en pantallas grandes */
    --bs-gutter-x: clamp(1rem, 5vw, 5rem);
    --bs-gutter-y: 0rem;

    /* Gaps entre columnas dentro de las filas: 12px → 40px */
    --nil-col-gap: clamp(0.75rem, 2.5vw, 2.5rem);
    --nil-row-gap: clamp(1rem, 3vw, 3rem);

    /* ─────────────────────────────────────────
       LAYOUT DENSITY MODES (global system)
       normal = default (current system)
    ───────────────────────────────────────── */

    /* COMPACT MODE (dense UI) */
    [data-layout="compact"] {
        --nil-col-gap: clamp(0.5rem, 1.5vw, 1.25rem);
        --nil-row-gap: clamp(0.75rem, 2vw, 1.5rem);
    }

    /* AIRY MODE (spacious / editorial) */
    [data-layout="airy"] {
        --nil-col-gap: clamp(1.25rem, 3vw, 3.5rem);
        --nil-row-gap: clamp(1.5rem, 4vw, 5rem);
    }

    /* Ancho máximo del contenedor */
    --nil-max-width: 1360px;

    /* Escala de espaciado fluido para uso general */
    --nil-s-2xs:  clamp(0.25rem, 0.5vw,  0.5rem);   /* ~4–8px   */
    --nil-s-xs:   clamp(0.5rem,  1vw,    0.75rem);   /* ~8–12px  */
    --nil-s-sm:   clamp(0.75rem, 1.5vw,  1.25rem);   /* ~12–20px */
    --nil-s-md:   clamp(1rem,    2.5vw,  2rem);      /* ~16–32px */
    --nil-s-lg:   clamp(1.5rem,  4vw,    3.5rem);    /* ~24–56px */
    --nil-s-xl:   clamp(2rem,    6vw,    5rem);      /* ~32–80px */
    --nil-s-2xl:  clamp(3rem,    8vw,    7.5rem);    /* ~48–120px */
    --nil-s-3xl:  clamp(4rem,    12vw,   11rem);     /* ~64–176px */

    /* Sistema de Color Integrado de la Agencia */
    --nil-color-primary:    var(--e-global-color-primary, #111111);
    --nil-color-secondary:  var(--e-global-color-secondary, #888888);
    --nil-color-accent:     var(--e-global-color-accent, #f52727);
    --nil-color-muted:      var(--e-global-color-text, #aaaaaa); 
    --nil-color-light:      #f9f9f9; /* Color estático propio */
    --nil-color-white:      #ffffff; /* Color estático propio */
}

/* ─────────────────────────────────────────
   CONTAINERS (Fluid & Centered)
   ───────────────────────────────────────── */
.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
    width: 100%;
    max-width: var(--nil-max-width);
    padding-inline: var(--bs-gutter-x);
    margin-inline: auto;
    box-sizing: border-box;
}

.container-fluid {
    max-width: 100%;
}
.small{
    font-size: 0.75rem;
    line-height: 1.4;
    font-weight: 400;
}
/* ─────────────────────────────────────────
   ROWS & GRID CONTROL (Usa CSS Grid internamente)
   ───────────────────────────────────────── */
.row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--nil-col-gap);
    row-gap: var(--nil-row-gap);
    width: 100%;
    box-sizing: border-box;
}

.row > * {
    box-sizing: border-box;
    grid-column: span 12; /* Por defecto ocupan toda la pantalla en móvil */
}

/* ─────────────────────────────────────────
   GAP UTILITIES (Bootstrap-like g-*, gx-*, gy-*)
   ───────────────────────────────────────── */

/* Base gap reset */
.g-0 {
    --nil-col-gap: 0;
    --nil-row-gap: 0;
}

/* Column + row combined gaps */
.g-1 {
    --nil-col-gap: var(--nil-s-xs);
    --nil-row-gap: var(--nil-s-xs);
}
.g-2 {
    --nil-col-gap: var(--nil-s-sm);
    --nil-row-gap: var(--nil-s-sm);
}
.g-3 {
    --nil-col-gap: var(--nil-s-md);
    --nil-row-gap: var(--nil-s-md);
}
.g-4 {
    --nil-col-gap: var(--nil-s-lg);
    --nil-row-gap: var(--nil-s-lg);
}
.g-5 {
    --nil-col-gap: var(--nil-s-xl);
    --nil-row-gap: var(--nil-s-xl);
}

/* Horizontal gap only (columns) */
.gx-0 { --nil-col-gap: 0; }
.gx-1 { --nil-col-gap: var(--nil-s-xs); }
.gx-2 { --nil-col-gap: var(--nil-s-sm); }
.gx-3 { --nil-col-gap: var(--nil-s-md); }
.gx-4 { --nil-col-gap: var(--nil-s-lg); }
.gx-5 { --nil-col-gap: var(--nil-s-xl); }

/* Vertical gap only (rows) */
.gy-0 { --nil-row-gap: 0; }
.gy-1 { --nil-row-gap: var(--nil-s-xs); }
.gy-2 { --nil-row-gap: var(--nil-s-sm); }
.gy-3 { --nil-row-gap: var(--nil-s-md); }
.gy-4 { --nil-row-gap: var(--nil-s-lg); }
.gy-5 { --nil-row-gap: var(--nil-s-xl); }


.gap-0 { gap: 0 !important; }
.gap-1 { gap: var(--nil-s-xs) !important; }
.gap-2 { gap: var(--nil-s-sm) !important; }
.gap-3 { gap: var(--nil-s-md) !important; }
.gap-4 { gap: var(--nil-s-lg) !important; }
.gap-5 { gap: var(--nil-s-xl) !important; }
/* ─────────────────────────────────────────
   COLUMNS FLUIDAS (Sintaxis Bootstrap)
   ───────────────────────────────────────── */

/* Sin breakpoint (Móvil por defecto / Siempre aplica) */
.col      { grid-column: span 1; }
.col-auto { grid-column: auto; width: auto; justify-self: start; }
.col-1    { grid-column: span 1; }
.col-2    { grid-column: span 2; }
.col-3    { grid-column: span 3; }
.col-4    { grid-column: span 4; }
.col-5    { grid-column: span 5; }
.col-6    { grid-column: span 6; }
.col-7    { grid-column: span 7; }
.col-8    { grid-column: span 8; }
.col-9    { grid-column: span 9; }
.col-10   { grid-column: span 10; }
.col-11   { grid-column: span 11; }
.col-12   { grid-column: span 12; }

/* Breakpoint SM (>= 576px) */
@media (min-width: 576px) {
    .col-sm      { grid-column: span 1; }
    .col-sm-auto { grid-column: auto; width: auto; justify-self: start; }
    .col-sm-1    { grid-column: span 1; }
    .col-sm-2    { grid-column: span 2; }
    .col-sm-3    { grid-column: span 3; }
    .col-sm-4    { grid-column: span 4; }
    .col-sm-5    { grid-column: span 5; }
    .col-sm-6    { grid-column: span 6; }
    .col-sm-7    { grid-column: span 7; }
    .col-sm-8    { grid-column: span 8; }
    .col-sm-9    { grid-column: span 9; }
    .col-sm-10   { grid-column: span 10; }
    .col-sm-11   { grid-column: span 11; }
    .col-sm-12   { grid-column: span 12; }
}

/* Breakpoint MD (>= 768px) */
@media (min-width: 768px) {
    .col-md      { grid-column: span 1; }
    .col-md-auto { grid-column: auto; width: auto; justify-self: start; }
    .col-md-1    { grid-column: span 1; }
    .col-md-2    { grid-column: span 2; }
    .col-md-3    { grid-column: span 3; }
    .col-md-4    { grid-column: span 4; }
    .col-md-5    { grid-column: span 5; }
    .col-md-6    { grid-column: span 6; }
    .col-md-7    { grid-column: span 7; }
    .col-md-8    { grid-column: span 8; }
    .col-md-9    { grid-column: span 9; }
    .col-md-10   { grid-column: span 10; }
    .col-md-11   { grid-column: span 11; }
    .col-md-12   { grid-column: span 12; }
}

/* Breakpoint LG (>= 992px) */
@media (min-width: 992px) {
    .col-lg      { grid-column: span 1; }
    .col-lg-auto { grid-column: auto; width: auto; justify-self: start; }
    .col-lg-1    { grid-column: span 1; }
    .col-lg-2    { grid-column: span 2; }
    .col-lg-3    { grid-column: span 3; }
    .col-lg-4    { grid-column: span 4; }
    .col-lg-5    { grid-column: span 5; }
    .col-lg-6    { grid-column: span 6; }
    .col-lg-7    { grid-column: span 7; }
    .col-lg-8    { grid-column: span 8; }
    .col-lg-9    { grid-column: span 9; }
    .col-lg-10   { grid-column: span 10; }
    .col-lg-11   { grid-column: span 11; }
    .col-lg-12   { grid-column: span 12; }
}

/* Breakpoint XL (>= 1200px) */
@media (min-width: 1200px) {
    .col-xl      { grid-column: span 1; }
    .col-xl-auto { grid-column: auto; width: auto; justify-self: start; }
    .col-xl-1    { grid-column: span 1; }
    .col-xl-2    { grid-column: span 2; }
    .col-xl-3    { grid-column: span 3; }
    .col-xl-4    { grid-column: span 4; }
    .col-xl-5    { grid-column: span 5; }
    .col-xl-6    { grid-column: span 6; }
    .col-xl-7    { grid-column: span 7; }
    .col-xl-8    { grid-column: span 8; }
    .col-xl-9    { grid-column: span 9; }
    .col-xl-10   { grid-column: span 10; }
    .col-xl-11   { grid-column: span 11; }
    .col-xl-12   { grid-column: span 12; }
}

/* Breakpoint XXL (>= 1400px) */
@media (min-width: 1400px) {
    .col-xxl      { grid-column: span 1; }
    .col-xxl-auto { grid-column: auto; width: auto; justify-self: start; }
    .col-xxl-1    { grid-column: span 1; }
    .col-xxl-2    { grid-column: span 2; }
    .col-xxl-3    { grid-column: span 3; }
    .col-xxl-4    { grid-column: span 4; }
    .col-xxl-5    { grid-column: span 5; }
    .col-xxl-6    { grid-column: span 6; }
    .col-xxl-7    { grid-column: span 7; }
    .col-xxl-8    { grid-column: span 8; }
    .col-xxl-9    { grid-column: span 9; }
    .col-xxl-10   { grid-column: span 10; }
    .col-xxl-11   { grid-column: span 11; }
    .col-xxl-12   { grid-column: span 12; }
}
/* ─────────────────────────────────────────
   FILAS DE COLUMNAS EXACTAS (ROW-COLS 1, 2, 3, 4, 6)
   ───────────────────────────────────────── */

/* 📱 Por defecto en móvil */
.row-cols-1 { grid-template-columns: repeat(1, 1fr); } .row-cols-1 > * { grid-column: span 1 !important; }
.row-cols-2 { grid-template-columns: repeat(2, 1fr); } .row-cols-2 > * { grid-column: span 1 !important; }
.row-cols-3 { grid-template-columns: repeat(3, 1fr); } .row-cols-3 > * { grid-column: span 1 !important; }
.row-cols-4 { grid-template-columns: repeat(4, 1fr); } .row-cols-4 > * { grid-column: span 1 !important; }
.row-cols-5 { grid-template-columns: repeat(5, 1fr); } .row-cols-5 > * { grid-column: span 1 !important; }
.row-cols-6 { grid-template-columns: repeat(6, 1fr); } .row-cols-6 > * { grid-column: span 1 !important; }

/* 📱 Breakpoint SM (>= 576px) */
@media (min-width: 576px) {
    .row-cols-sm-1 { grid-template-columns: repeat(1, 1fr); } .row-cols-sm-1 > * { grid-column: span 1 !important; }
    .row-cols-sm-2 { grid-template-columns: repeat(2, 1fr); } .row-cols-sm-2 > * { grid-column: span 1 !important; }
    .row-cols-sm-3 { grid-template-columns: repeat(3, 1fr); } .row-cols-sm-3 > * { grid-column: span 1 !important; }
    .row-cols-sm-4 { grid-template-columns: repeat(4, 1fr); } .row-cols-sm-4 > * { grid-column: span 1 !important; }
    .row-cols-sm-5 { grid-template-columns: repeat(5, 1fr); } .row-cols-sm-5 > * { grid-column: span 1 !important; }
    .row-cols-sm-6 { grid-template-columns: repeat(6, 1fr); } .row-cols-sm-6 > * { grid-column: span 1 !important; }
}

/* 💻 Breakpoint MD (>= 768px) */
@media (min-width: 768px) {
    .row-cols-md-1 { grid-template-columns: repeat(1, 1fr); } .row-cols-md-1 > * { grid-column: span 1 !important; }
    .row-cols-md-2 { grid-template-columns: repeat(2, 1fr); } .row-cols-md-2 > * { grid-column: span 1 !important; }
    .row-cols-md-3 { grid-template-columns: repeat(3, 1fr); } .row-cols-md-3 > * { grid-column: span 1 !important; }
    .row-cols-md-4 { grid-template-columns: repeat(4, 1fr); } .row-cols-md-4 > * { grid-column: span 1 !important; }
    .row-cols-md-5 { grid-template-columns: repeat(5, 1fr); } .row-cols-md-5 > * { grid-column: span 1 !important; }
    .row-cols-md-6 { grid-template-columns: repeat(6, 1fr); } .row-cols-md-6 > * { grid-column: span 1 !important; }
}

/* 🖥️ Breakpoint LG (>= 992px) */
@media (min-width: 992px) {
    .row-cols-lg-1 { grid-template-columns: repeat(1, 1fr); } .row-cols-lg-1 > * { grid-column: span 1 !important; }
    .row-cols-lg-2 { grid-template-columns: repeat(2, 1fr); } .row-cols-lg-2 > * { grid-column: span 1 !important; }
    .row-cols-lg-3 { grid-template-columns: repeat(3, 1fr); } .row-cols-lg-3 > * { grid-column: span 1 !important; }
    .row-cols-lg-4 { grid-template-columns: repeat(4, 1fr); } .row-cols-lg-4 > * { grid-column: span 1 !important; }
    .row-cols-lg-5 { grid-template-columns: repeat(5, 1fr); } .row-cols-lg-5 > * { grid-column: span 1 !important; }
    .row-cols-lg-6 { grid-template-columns: repeat(6, 1fr); } .row-cols-lg-6 > * { grid-column: span 1 !important; }
}

/* 📺 Breakpoint XL (>= 1200px) */
@media (min-width: 1200px) {
    .row-cols-xl-1 { grid-template-columns: repeat(1, 1fr); } .row-cols-xl-1 > * { grid-column: span 1 !important; }
    .row-cols-xl-2 { grid-template-columns: repeat(2, 1fr); } .row-cols-xl-2 > * { grid-column: span 1 !important; }
    .row-cols-xl-3 { grid-template-columns: repeat(3, 1fr); } .row-cols-xl-3 > * { grid-column: span 1 !important; }
    .row-cols-xl-4 { grid-template-columns: repeat(4, 1fr); } .row-cols-xl-4 > * { grid-column: span 1 !important; }
    .row-cols-xl-5 { grid-template-columns: repeat(5, 1fr); } .row-cols-xl-5 > * { grid-column: span 1 !important; }
    .row-cols-xl-6 { grid-template-columns: repeat(6, 1fr); } .row-cols-xl-6 > * { grid-column: span 1 !important; }
}

/* 🎥 Breakpoint XXL (>= 1400px) */
@media (min-width: 1400px) {
    .row-cols-xxl-1 { grid-template-columns: repeat(1, 1fr); } .row-cols-xxl-1 > * { grid-column: span 1 !important; }
    .row-cols-xxl-2 { grid-template-columns: repeat(2, 1fr); } .row-cols-xxl-2 > * { grid-column: span 1 !important; }
    .row-cols-xxl-3 { grid-template-columns: repeat(3, 1fr); } .row-cols-xxl-3 > * { grid-column: span 1 !important; }
    .row-cols-xxl-4 { grid-template-columns: repeat(4, 1fr); } .row-cols-xxl-4 > * { grid-column: span 1 !important; }
    .row-cols-xxl-5 { grid-template-columns: repeat(5, 1fr); } .row-cols-xxl-5 > * { grid-column: span 1 !important; }
    .row-cols-xxl-6 { grid-template-columns: repeat(6, 1fr); } .row-cols-xxl-6 > * { grid-column: span 1 !important; }
}
/* ─────────────────────────────────────────
   OFFSETS FLUIDOS (Desplazamientos)
   ───────────────────────────────────────── */
@media (min-width: 576px) {
    .offset-sm-1  { grid-column-start: 2; }
    .offset-sm-2  { grid-column-start: 3; }
    .offset-sm-3  { grid-column-start: 4; }
    .offset-sm-4  { grid-column-start: 5; }
    .offset-sm-5  { grid-column-start: 6; }
    .offset-sm-6  { grid-column-start: 7; }
    .offset-sm-7  { grid-column-start: 8; }
    .offset-sm-8  { grid-column-start: 9; }
    .offset-sm-9  { grid-column-start: 10; }
    .offset-sm-10 { grid-column-start: 11; }
    .offset-sm-11 { grid-column-start: 12; }
}
@media (min-width: 768px) {
    .offset-md-1  { grid-column-start: 2; }
    .offset-md-2  { grid-column-start: 3; }
    .offset-md-3  { grid-column-start: 4; }
    .offset-md-4  { grid-column-start: 5; }
    .offset-md-5  { grid-column-start: 6; }
    .offset-md-6  { grid-column-start: 7; }
    .offset-md-7  { grid-column-start: 8; }
    .offset-md-8  { grid-column-start: 9; }
    .offset-md-9  { grid-column-start: 10; }
    .offset-md-10 { grid-column-start: 11; }
    .offset-md-11 { grid-column-start: 12; }
}
@media (min-width: 992px) {
    .offset-lg-1  { grid-column-start: 2; }
    .offset-lg-2  { grid-column-start: 3; }
    .offset-lg-3  { grid-column-start: 4; }
    .offset-lg-4  { grid-column-start: 5; }
    .offset-lg-5  { grid-column-start: 6; }
    .offset-lg-6  { grid-column-start: 7; }
    .offset-lg-7  { grid-column-start: 8; }
    .offset-lg-8  { grid-column-start: 9; }
    .offset-lg-9  { grid-column-start: 10; }
    .offset-lg-10 { grid-column-start: 11; }
    .offset-lg-11 { grid-column-start: 12; }
}

/* ─────────────────────────────────────────
   FLEX UTILITIES & DISPLAY UTILITIES
   ───────────────────────────────────────── */
.d-flex                  { display: flex !important; }
.flex-1 { flex: 1 1 0%; }
.flex-column             { flex-direction: column !important; }
.flex-row                { flex-direction: row !important; }
.flex-wrap               { flex-wrap: wrap !important; }
.flex-nowrap             { flex-wrap: nowrap !important; }

.justify-content-start   { justify-content: flex-start !important; }
.justify-content-center  { justify-content: center !important; }
.justify-content-end     { justify-content: flex-end !important; }
.justify-content-between { justify-content: space-between !important; }

.align-items-start       { align-items: flex-start !important; }
.align-items-center      { align-items: center !important; }
.align-items-end         { align-items: flex-end !important; }

.d-block        { display: block !important; }
.d-inline       { display: inline !important; }
.d-inline-flex  { display: inline-flex !important; }
.d-inline-block { display: inline-block !important; }
.d-none         { display: none !important; }

/* ── RESPONSIVE BREAKPOINTS (Mobile First System) ── */

/* Breakpoint SM (>= 576px) */
@media (min-width: 576px) {
    .d-sm-none         { display: none !important; }
    .d-sm-block        { display: block !important; }
    .d-sm-inline       { display: inline !important; }
    .d-sm-inline-block { display: inline-block !important; }
    .d-sm-flex         { display: flex !important; }
    .d-sm-flex-column  { flex-direction: column !important; }

    .justify-content-sm-start   { justify-content: flex-start !important; }
    .justify-content-sm-center  { justify-content: center !important; }
    .justify-content-sm-end     { justify-content: flex-end !important; }
    .justify-content-sm-between { justify-content: space-between !important; }

    .align-items-sm-start       { align-items: flex-start !important; }
    .align-items-sm-center      { align-items: center !important; }
    .align-items-sm-end         { align-items: flex-end !important; }
}

/* Breakpoint MD (>= 768px) */
@media (min-width: 768px) {
    .d-md-none         { display: none !important; }
    .d-md-block        { display: block !important; }
    .d-md-inline       { display: inline !important; }
    .d-md-inline-block { display: inline-block !important; }
    .d-md-flex         { display: flex !important; }
    .d-md-flex-column  { flex-direction: column !important; }

    .justify-content-md-start   { justify-content: flex-start !important; }
    .justify-content-md-center  { justify-content: center !important; }
    .justify-content-md-end     { justify-content: flex-end !important; }
    .justify-content-md-between { justify-content: space-between !important; }

    .align-items-md-start       { align-items: flex-start !important; }
    .align-items-md-center      { align-items: center !important; }
    .align-items-md-end         { align-items: flex-end !important; }
}

/* Breakpoint LG (>= 992px) */
@media (min-width: 992px) {
    .d-lg-none         { display: none !important; }
    .d-lg-block        { display: block !important; }
    .d-lg-inline       { display: inline !important; }
    .d-lg-inline-block { display: inline-block !important; }
    .d-lg-flex         { display: flex !important; }
    .d-lg-flex-column  { flex-direction: column !important; }

    .justify-content-lg-start   { justify-content: flex-start !important; }
    .justify-content-lg-center  { justify-content: center !important; }
    .justify-content-lg-end     { justify-content: flex-end !important; }
    .justify-content-lg-between { justify-content: space-between !important; }

    .align-items-lg-start       { align-items: flex-start !important; }
    .align-items-lg-center      { align-items: center !important; }
    .align-items-lg-end         { align-items: flex-end !important; }
}

/* Breakpoint XL (>= 1200px) */
@media (min-width: 1200px) {
    .d-xl-none         { display: none !important; }
    .d-xl-block        { display: block !important; }
    .d-xl-inline       { display: inline !important; }
    .d-xl-inline-block { display: inline-block !important; }
    .d-xl-flex         { display: flex !important; }
    .d-xl-flex-column  { flex-direction: column !important; }

    .justify-content-xl-start   { justify-content: flex-start !important; }
    .justify-content-xl-center  { justify-content: center !important; }
    .justify-content-xl-end     { justify-content: flex-end !important; }
    .justify-content-xl-between { justify-content: space-between !important; }

    .align-items-xl-start       { align-items: flex-start !important; }
    .align-items-xl-center      { align-items: center !important; }
    .align-items-xl-end         { align-items: flex-end !important; }
}

/* Breakpoint XXL (>= 1400px) */
@media (min-width: 1400px) {
    .d-xxl-none         { display: none !important; }
    .d-xxl-block        { display: block !important; }
    .d-xxl-inline       { display: inline !important; }
    .d-xxl-inline-block { display: inline-block !important; }
    .d-xxl-flex         { display: flex !important; }
    .d-xxl-flex-column  { flex-direction: column !important; }

    .justify-content-xxl-start   { justify-content: flex-start !important; }
    .justify-content-xxl-center  { justify-content: center !important; }
    .justify-content-xxl-end     { justify-content: flex-end !important; }
    .justify-content-xxl-between { justify-content: space-between !important; }

    .align-items-xxl-start       { align-items: flex-start !important; }
    .align-items-xxl-center      { align-items: center !important; }
    .align-items-xxl-end         { align-items: flex-end !important; }
}

/* ─────────────────────────────────────────
   SPACING UTILITIES (Clases fluidas sin píxeles fijos)
   ───────────────────────────────────────── */

/* ── BASE (Aplica a todas las pantallas / Mobile-First) ── */
.p-xs  { padding: var(--nil-s-xs); }
.p-sm  { padding: var(--nil-s-sm); }
.p-md  { padding: var(--nil-s-md); }
.p-lg  { padding: var(--nil-s-lg); }

.pb-0 { padding-bottom: 0 !important; }
.pb-xs { padding-bottom: var(--nil-s-xs); }
.pb-sm { padding-bottom: var(--nil-s-sm); }
.pb-md { padding-bottom: var(--nil-s-md); }
.pb-lg { padding-bottom: var(--nil-s-lg); }
.pt-0 { padding-top: 0 !important; }
.pt-xs { padding-top: var(--nil-s-xs); }
.pt-sm { padding-top: var(--nil-s-sm); }
.pt-md { padding-top: var(--nil-s-md); }
.pt-lg { padding-top: var(--nil-s-lg); }

.px-0 { padding-inline: 0 !important; }
.px-xs { padding-inline: var(--nil-s-xs); }
.px-sm { padding-inline: var(--nil-s-sm); }
.px-md { padding-inline: var(--nil-s-md); }
.px-lg { padding-inline: var(--nil-s-lg); }

.py-0 { padding: 0 !important; }
.ps-0 { padding-left: 0 !important; }
.pe-0 { padding-right: 0 !important; }
.py-xs { 
    padding-top: var(--nil-s-xs); 
    padding-bottom: var(--nil-s-xs); 
}
.py-sm { 
    padding-top: var(--nil-s-sm); 
    padding-bottom: var(--nil-s-sm); 
}
.py-md { 
    padding-top: var(--nil-s-md); 
    padding-bottom: var(--nil-s-md); 
}
.py-lg { 
    padding-top: var(--nil-s-lg); 
    padding-bottom: var(--nil-s-lg); 
}
.py-xl { 
    padding-top: var(--nil-s-xl); 
    padding-bottom: var(--nil-s-xl); 
}
.py-2xl { 
    padding-top: var(--nil-s-2xl); 
    padding-bottom: var(--nil-s-2xl); 
}   

.my-0 {  
    margin-top: 0;
    margin-bottom: 0;
    margin-block-end: 0;
    margin-block-start: 0;
}
.my-sm { 
    margin-top: var(--nil-s-sm); 
    margin-bottom: var(--nil-s-sm); 
}
.mt-sm { margin-top: var(--nil-s-sm); }
.mt-md { margin-top: var(--nil-s-md); }
.mt-lg { margin-top: var(--nil-s-lg); }
.mb-0 { margin-bottom: 0; }
.mb-sm { margin-bottom: var(--nil-s-sm); }
.mb-md { margin-bottom: var(--nil-s-md); }
.mb-lg { margin-bottom: var(--nil-s-lg); }
.mb-auto { margin-bottom: auto; }
/* ─────────────────────────────────────────
   RESPONSIVE SPACING UTILITIES (Breakpoints)
   ───────────────────────────────────────── */

/* 📱 Breakpoint SM (>= 576px) */
@media (min-width: 576px) {
    .p-sm-xs  { padding: var(--nil-s-xs) !important; }
    .p-sm-sm  { padding: var(--nil-s-sm) !important; }
    .p-sm-md  { padding: var(--nil-s-md) !important; }
    .p-sm-lg  { padding: var(--nil-s-lg) !important; }

    .px-sm-xs { padding-inline: var(--nil-s-xs) !important; }
    .px-sm-sm { padding-inline: var(--nil-s-sm) !important; }
    .px-sm-md { padding-inline: var(--nil-s-md) !important; }
    .px-sm-lg { padding-inline: var(--nil-s-lg) !important; }

    .py-sm-xs { padding-block: var(--nil-s-xs) !important; }
    .py-sm-sm { padding-block: var(--nil-s-sm) !important; }
    .py-sm-md { padding-block: var(--nil-s-md) !important; }
    .py-sm-lg { padding-block: var(--nil-s-lg) !important; }
    .py-sm-xl { padding-block: var(--nil-s-xl) !important; }

    .my-sm-0 {  
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        margin-block-end: 0 !important;
        margin-block-start: 0 !important;
    }
    .mt-sm-sm { margin-top: var(--nil-s-sm) !important; }
    .mt-sm-md { margin-top: var(--nil-s-md) !important; }
    .mt-sm-lg { margin-top: var(--nil-s-lg) !important; }
    .mb-sm-0 { margin-bottom: 0 !important; }
    .mb-sm-sm { margin-bottom: var(--nil-s-sm) !important; }
    .mb-sm-md { margin-bottom: var(--nil-s-md) !important; }
    .mb-sm-lg { margin-bottom: var(--nil-s-lg) !important; }
}

/* 💻 Breakpoint MD (>= 768px) */
@media (min-width: 768px) {
    .p-md-xs  { padding: var(--nil-s-xs) !important; }
    .p-md-sm  { padding: var(--nil-s-sm) !important; }
    .p-md-md  { padding: var(--nil-s-md) !important; }
    .p-md-lg  { padding: var(--nil-s-lg) !important; }

    .px-md-xs { padding-inline: var(--nil-s-xs) !important; }
    .px-md-sm { padding-inline: var(--nil-s-sm) !important; }
    .px-md-md { padding-inline: var(--nil-s-md) !important; }
    .px-md-lg { padding-inline: var(--nil-s-lg) !important; }

    .py-md-xs { padding-block: var(--nil-s-xs) !important; }
    .py-md-sm { padding-block: var(--nil-s-sm) !important; }
    .py-md-md { padding-block: var(--nil-s-md) !important; }
    .py-md-lg { padding-block: var(--nil-s-lg) !important; }
    .py-md-xl { padding-block: var(--nil-s-xl) !important; }

    .my-md-0 {  
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        margin-block-end: 0 !important;
        margin-block-start: 0 !important;
    }
    .mt-md-sm { margin-top: var(--nil-s-sm) !important; }
    .mt-md-md { margin-top: var(--nil-s-md) !important; }
    .mt-md-lg { margin-top: var(--nil-s-lg) !important; }
    .mb-md-0 { margin-bottom: 0 !important; }
    .mb-md-sm { margin-bottom: var(--nil-s-sm) !important; }
    .mb-md-md { margin-bottom: var(--nil-s-md) !important; }
    .mb-md-lg { margin-bottom: var(--nil-s-lg) !important; }
}

/* 🖥️ Breakpoint LG (>= 992px) */
@media (min-width: 992px) {
    .p-lg-0  { padding: 0 !important; }
    .p-lg-xs  { padding: var(--nil-s-xs) !important; }
    .p-lg-sm  { padding: var(--nil-s-sm) !important; }
    .p-lg-md  { padding: var(--nil-s-md) !important; }
    .p-lg-lg  { padding: var(--nil-s-lg) !important; }

    .px-lg-0 { padding-inline: 0 !important; }
    .px-lg-xs { padding-inline: var(--nil-s-xs) !important; }
    .px-lg-sm { padding-inline: var(--nil-s-sm) !important; }
    .px-lg-md { padding-inline: var(--nil-s-md) !important; }
    .px-lg-lg { padding-inline: var(--nil-s-lg) !important; }

    .py-lg-xs { padding-block: var(--nil-s-xs) !important; }
    .py-lg-sm { padding-block: var(--nil-s-sm) !important; }
    .py-lg-md { padding-block: var(--nil-s-md) !important; }
    .py-lg-lg { padding-block: var(--nil-s-lg) !important; }
    .py-lg-xl { padding-block: var(--nil-s-xl) !important; }

    .my-lg-0 {  
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        margin-block-end: 0 !important;
        margin-block-start: 0 !important;
    }
    .mt-lg-sm { margin-top: var(--nil-s-sm) !important; }
    .mt-lg-md { margin-top: var(--nil-s-md) !important; }
    .mt-lg-lg { margin-top: var(--nil-s-lg) !important; }
    .mb-lg-0 { margin-bottom: 0 !important; }
    .mb-lg-sm { margin-bottom: var(--nil-s-sm) !important; }
    .mb-lg-md { margin-bottom: var(--nil-s-md) !important; }
    .mb-lg-lg { margin-bottom: var(--nil-s-lg) !important; }
}

/* 📺 Breakpoint XL (>= 1200px) */
@media (min-width: 1200px) {
    .p-xl-xs  { padding: var(--nil-s-xs) !important; }
    .p-xl-sm  { padding: var(--nil-s-sm) !important; }
    .p-xl-md  { padding: var(--nil-s-md) !important; }
    .p-xl-lg  { padding: var(--nil-s-lg) !important; }

    .px-xl-xs { padding-inline: var(--nil-s-xs) !important; }
    .px-xl-sm { padding-inline: var(--nil-s-sm) !important; }
    .px-xl-md { padding-inline: var(--nil-s-md) !important; }
    .px-xl-lg { padding-inline: var(--nil-s-lg) !important; }

    .py-xl-xs { padding-block: var(--nil-s-xs) !important; }
    .py-xl-sm { padding-block: var(--nil-s-sm) !important; }
    .py-xl-md { padding-block: var(--nil-s-md) !important; }
    .py-xl-lg { padding-block: var(--nil-s-lg) !important; }
    .py-xl-xl { padding-block: var(--nil-s-xl) !important; }

    .my-xl-0 {  
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        margin-block-end: 0 !important;
        margin-block-start: 0 !important;
    }
    .mt-xl-sm { margin-top: var(--nil-s-sm) !important; }
    .mt-xl-md { margin-top: var(--nil-s-md) !important; }
    .mt-xl-lg { margin-top: var(--nil-s-lg) !important; }
    .mb-xl-0 { margin-bottom: 0 !important; }
    .mb-xl-sm { margin-bottom: var(--nil-s-sm) !important; }
    .mb-xl-md { margin-bottom: var(--nil-s-md) !important; }
    .mb-xl-lg { margin-bottom: var(--nil-s-lg) !important; }
}

/* 🎥 Breakpoint XXL (>= 1400px) */
@media (min-width: 1400px) {
    .p-xxl-xs  { padding: var(--nil-s-xs) !important; }
    .p-xxl-sm  { padding: var(--nil-s-sm) !important; }
    .p-xxl-md  { padding: var(--nil-s-md) !important; }
    .p-xxl-lg  { padding: var(--nil-s-lg) !important; }

    .px-xxl-xs { padding-inline: var(--nil-s-xs) !important; }
    .px-xxl-sm { padding-inline: var(--nil-s-sm) !important; }
    .px-xxl-md { padding-inline: var(--nil-s-md) !important; }
    .px-xxl-lg { padding-inline: var(--nil-s-lg) !important; }

    .py-xxl-xs { padding-block: var(--nil-s-xs) !important; }
    .py-xxl-sm { padding-block: var(--nil-s-sm) !important; }
    .py-xxl-md { padding-block: var(--nil-s-md) !important; }
    .py-xxl-lg { padding-block: var(--nil-s-lg) !important; }
    .py-xxl-xl { padding-block: var(--nil-s-xl) !important; }

    .my-xxl-0 {  
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        margin-block-end: 0 !important;
        margin-block-start: 0 !important;
    }
    .mt-xxl-sm { margin-top: var(--nil-s-sm) !important; }
    .mt-xxl-md { margin-top: var(--nil-s-md) !important; }
    .mt-xxl-lg { margin-top: var(--nil-s-lg) !important; }
    .mb-xxl-0 { margin-bottom: 0 !important; }
    .mb-xxl-sm { margin-bottom: var(--nil-s-sm) !important; }
    .mb-xxl-md { margin-bottom: var(--nil-s-md) !important; }
    .mb-xxl-lg { margin-bottom: var(--nil-s-lg) !important; }
}

/* ─────────────────────────────────────────
   TEXT ALIGNMENT UTILITIES
   ───────────────────────────────────────── */
.text-start   { text-align: left !important; }
.text-center  { text-align: center !important; }
.text-end     { text-align: right !important; }
.text-justify { text-align: justify !important; }

@media (min-width: 576px) {
    .text-sm-start  { text-align: left !important; }
    .text-sm-center { text-align: center !important; }
    .text-sm-end    { text-align: right !important; }
}
@media (min-width: 768px) {
    .text-md-start  { text-align: left !important; }
    .text-md-center { text-align: center !important; }
    .text-md-end    { text-align: right !important; }
}
@media (min-width: 992px) {
    .text-lg-start  { text-align: left !important; }
    .text-lg-center { text-align: center !important; }
    .text-lg-end    { text-align: right !important; }
}
@media (min-width: 1200px) {
    .text-xl-start  { text-align: left !important; }
    .text-xl-center { text-align: center !important; }
    .text-xl-end    { text-align: right !important; }
}

/* ─────────────────────────────────────────
   TEXT TRANSFORMATION UTILITIES
   ───────────────────────────────────────── */

.text-lowercase  { text-transform: lowercase !important; }
.text-uppercase  { text-transform: uppercase !important; }
.text-capitalize { text-transform: capitalize !important; }

/* ─────────────────────────────────────────
   TEXT WEIGHT, STYLE & DECORATION UTILITIES
   ───────────────────────────────────────── */
.fw-light   { font-weight: 300 !important; }
.fw-lighter { font-weight: lighter !important; }
.fw-normal  { font-weight: 400 !important; }
.fw-bold    { font-weight: 900 !important; }
.fw-bolder  { font-weight: bolder !important; }

.fst-normal { font-style: normal !important; }
.fst-italic { font-style: italic !important; }

.text-decoration-none {
    text-decoration: none !important;
}

.text-decoration-underline {
    text-decoration: underline !important;
}

.text-decoration-line-through {
    text-decoration: line-through !important;
}

/* ─────────────────────────────────────────
   TEXT WRAPPING UTILITIES
   ───────────────────────────────────────── */
.text-wrap {
    white-space: normal !important;
}

.text-nowrap {
    white-space: nowrap !important;
}

.text-break {
    overflow-wrap: break-word !important;
    word-break: break-word !important;
}

.text-balance {
    text-wrap: balance;
}

.text-pretty {
    text-wrap: pretty;
}

/* ─────────────────────────────────────────
   LINE HEIGHT UTILITIES
   ───────────────────────────────────────── */
.lh-xs   { line-height: 0.9 !important; }
.lh-0    { line-height: 0 !important; }
.lh-1    { line-height: 1 !important; }
.lh-sm   { line-height: 1.25 !important; }
.lh-base { line-height: 1.5 !important; }
.lh-lg   { line-height: 2 !important; }
.lh-xl   { line-height: 2.5 !important; }

/* ─────────────────────────────────────────
   LIST UTILITIES
   ───────────────────────────────────────── */
.list-unstyled {
    list-style: none !important;
    padding-left: 0 !important;
    margin-bottom: 0;
}

.list-inline {
    list-style: none !important;
    padding-left: 0 !important;
    margin-bottom: 0;
}

.list-inline-item {
    display: inline-block;
}

.list-inline-item:not(:last-child) {
    margin-right: var(--nil-s-xs);
}

/* ─────────────────────────────────────────
   ⚡ TEXT SIZING UTILITIES (H1-H6 Fluid Scaling)
   ───────────────────────────────────────── */
.h1 { font-size: clamp(2.4rem, 6vw, 4.5rem) !important; font-weight: 300; line-height: 1.05; letter-spacing: -0.02em; }
.h2 { font-size: clamp(1.8rem, 4.5vw, 3.2rem) !important; font-weight: 300; line-height: 1.1; letter-spacing: -0.01em; }
.h3 { font-size: clamp(1.4rem, 3vw, 2.2rem) !important; font-weight: 400; line-height: 1.2; }
.h4 { font-size: clamp(1.15rem, 2vw, 1.6rem) !important; font-weight: 400; line-height: 1.25; }
.h5 { font-size: clamp(0.95rem, 1.5vw, 1.2rem) !important; font-weight: 500; line-height: 1.3; }
.h6 { font-size: clamp(0.75rem, 1.2vw, 0.85rem) !important; font-weight: 600; line-height: 1.4; letter-spacing: 0.1em; }

/* ─────────────────────────────────────────
   ⚡ COLOR UTILITIES (Text & Background)
   ───────────────────────────────────────── */
/* Clases de Color de Texto */
.text-primary   { color: var(--nil-color-primary) !important; }
.text-secondary { color: var(--nil-color-secondary) !important; }
.text-muted     { color: var(--nil-color-muted) !important; }
.text-white     { color: var(--nil-color-white) !important; }

/* Clases de Color de Fondo */
.bg-primary     { background-color: var(--nil-color-primary) !important; }
.bg-secondary   { background-color: var(--nil-color-secondary) !important; }
.bg-light       { background-color: var(--nil-color-light) !important; }
.bg-white       { background-color: var(--nil-color-white) !important; }
.bg-transparent { background-color: transparent !important; }

/* ─────────────────────────────────────────
   ⚡ SIZING UTILITIES (% Dimension Control)
   ───────────────────────────────────────── */
.w-100 { width: 100% !important; }
.w-auto { width: auto !important; }
.h-100 { height: 100% !important; }
.h-auto { height: auto !important; }

/* ─────────────────────────────────────────
   ⚡ POSITION UTILITIES (Stacking & Layout)
   ───────────────────────────────────────── */
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed    { position: fixed !important; }
.position-static   { position: static !important; }
.position-sticky   { position: sticky !important; }

/* Atajos direccionales nativos */
.inset-0 { inset: 0 !important; }
.top-0   { top: 0 !important; }
.bottom-0{ bottom: 0 !important; }
.left-0  { left: 0 !important; }
.right-0 { right: 0 !important; }

/* Control de capas maestro unificado */
.z-index-0 { z-index: 0 !important; }
.z-index-1 { z-index: 1 !important; }
.z-index-2 { z-index: 2 !important; }

/* ─────────────────────────────────────────
   ⚡ OBJECT FIT UTILITIES (Media Presentation)
   ───────────────────────────────────────── */
.object-fit-contain { object-fit: contain !important; }
.object-fit-cover   { object-fit: cover !important; }
.object-fit-fill    { object-fit: fill !important; }
.object-fit-none    { object-fit: none !important; }
.object-fit-scale   { object-fit: scale-down !important; }

/* ─────────────────────────────────────────
   ⚡ OVERFLOW UTILITIES (Scroll & Clipping Control)
   ───────────────────────────────────────── */
.overflow-auto    { overflow: auto !important; }
.overflow-hidden  { overflow: hidden !important; }
.overflow-visible { overflow: visible !important; }
.overflow-scroll  { overflow: scroll !important; }

/* Control específico para el eje X (útil para sliders o galerías horizontales) */
.overflow-x-auto    { overflow-x: auto !important; }
.overflow-x-hidden  { overflow-x: hidden !important; }
.overflow-x-visible { overflow-x: visible !important; }
.overflow-x-scroll  { overflow-x: scroll !important; }

/* Control específico para el eje Y (útil para cajas de texto o specs con scroll interno) */
.overflow-y-auto    { overflow-y: auto !important; }
.overflow-y-hidden  { overflow-y: hidden !important; }
.overflow-y-visible { overflow-y: visible !important; }
.overflow-y-scroll  { overflow-y: scroll !important; }

/* ─────────────────────────────────────────
   ⚡ IMAGE UTILITIES (Responsive Media)
   ───────────────────────────────────────── */
.img-fluid {
    max-width: 100%;
    height: auto;
}