/* ============================================================
   KAESER · DESIGN SYSTEM v3.1
   File: layout.css
   Purpose: Estructura de página - sidebar vertical, topbar
            interno, drawer mobile, containers, grid system,
            footer, dashboard layouts, login split, centered
            error layout.
   Mobile-first + responsive.

   Cambios v3.1:
     · Reemplazo del header horizontal por SIDEBAR VERTICAL
       fijo + topbar interno con buscador y acciones.
     · Drawer off-canvas con animación para mobile.
     · Layout específico para login 60/40.
     · Layout centrado para páginas de error.
   ============================================================ */


/* ============================================================
   1. APP SHELL  (sidebar + main)
   ------------------------------------------------------------
   Layout principal: dos columnas. Izquierda fija con
   navegación; derecha con topbar + contenido.
   ============================================================ */
.ds-app{
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  background: var(--bg-canvas);
  transition: grid-template-columns var(--dur-slow) var(--ease-out);
}

/* Sidebar colapsada — solo iconos */
.ds-app[data-collapsed="true"]{
  grid-template-columns: var(--sidebar-w-mini) 1fr;
}

/* En tablet/mobile la grid se vuelve a 1 col; el sidebar
   se transforma en drawer flotante. */
@media (max-width: 1023px){
  .ds-app{ grid-template-columns: 1fr; }
  .ds-app[data-collapsed="true"]{ grid-template-columns: 1fr; }
}


/* ============================================================
   2. SIDEBAR VERTICAL
   ------------------------------------------------------------
   - Fija (sticky) + colapsable.
   - Fondo negro corporativo + textura industrial sutil.
   - Estado activo claro con indicador amarillo lateral.
   - Iconos bootstrap-icons + labels que se ocultan al colapsar.
   ============================================================ */
.ds-sidebar{
  position: sticky; top: 0;
  align-self: start;
  height: 100vh;
  background: var(--k-yellow);
  color: var(--k-black);
  display: flex; flex-direction: column;
  overflow: visible;             /* permite que el toggle sobresalga */
  z-index: var(--z-sidebar);
  border-right: 2px solid var(--k-black);

  /* Textura industrial sutil — diferenciador visual */
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.05) 0%, transparent 30%),
    repeating-linear-gradient(45deg,
      rgba(0,0,0,.025) 0 2px,
      transparent 2px 6px);
}

/* En mobile se convierte en drawer off-canvas */
@media (max-width: 1023px){
  .ds-sidebar{
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--sidebar-w);
    height: 100dvh;
    transform: translateX(-100%);
    transition: transform var(--dur-slow) var(--ease-out);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-drawer);
    /* Scroll vertical suave en iOS dentro del drawer */
    -webkit-overflow-scrolling: touch;
  }
  .ds-sidebar.is-open{ transform: translateX(0); }

  /* En el drawer abierto el toggle desktop sigue oculto y la
     X de cerrar va dentro del overlay (data-drawer-close: cualquier
     click en el overlay lo cierra; ESC también). */
}

/* Botón ❌ flotante para cerrar el drawer (solo visible cuando
   .ds-drawer-overlay está abierto en mobile). */
@media (max-width: 1023px){
  .ds-drawer-overlay.is-open::after{
    content: "✕";
    position: fixed;
    top: 14px;
    right: 16px;
    width: 40px; height: 40px;
    background: var(--k-yellow);
    color: var(--k-black);
    border-radius: 50%;
    display: grid; place-items: center;
    font-size: 18px;
    font-weight: 800;
    box-shadow: var(--shadow-md);
    pointer-events: none;       /* el click en overlay ya cierra */
  }
}


/* ----- 2.1 Brand / logo zone -----
   v3.2 — Header AMARILLO KAESER (color corporativo).
   Mismo color en light y dark, conectado visualmente con el
   sidebar (sin línea divisoria). El logo se invierte siempre
   para verse en negro sobre el amarillo.
   En sidebar colapsada: solo se muestra una "K" tipográfica.
   ------------------------------------------------------------ */
.ds-sidebar__brand{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-3) var(--sp-5);
  height: var(--topbar-h);
  background: var(--k-yellow);    /* AMARILLO KAESER */
  border-bottom: none;            /* conectado al menú */
  flex-shrink: 0;
  text-decoration: none;
  color: var(--k-black);
  overflow: hidden;
  /* Evita el zoom por doble tap en móvil/trackpad y la
     selección accidental del logo en doble click. */
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--dur-base) var(--ease-out),
              padding var(--dur-slow) var(--ease-out);
}

/* Dark mode — mantenemos el amarillo (es el header corporativo) */
[data-theme="dark"] .ds-sidebar__brand{
  background: var(--k-yellow);
  border-bottom: none;
  box-shadow: none;
}

/* Logo image (estado expandido). Filtramos a negro para que se
   lea sobre el fondo amarillo, en ambos temas. */
.ds-sidebar__brand-img{
  height: 32px;
  width: auto;
  max-width: 100%;
  display: block;
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none;
  /* Logo blanco original → forzamos negro sobre amarillo */
  filter: brightness(0);
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
[data-theme="dark"] .ds-sidebar__brand-img{
  filter: brightness(0);
}

/* "K" mark — visible solo cuando la sidebar está colapsada.
   Es la inicial del wordmark, en negro sobre amarillo. */
.ds-sidebar__brand-k{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-cond, var(--font-sans));
  font-weight: 900;
  font-size: 30px;
  color: var(--k-black);
  letter-spacing: -1px;
  opacity: 0;
  transform: scale(.6);
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-spring);
  pointer-events: none;
}

/* Sidebar colapsada — ocultamos el logo wordmark y mostramos la "K" */
.ds-app[data-collapsed="true"] .ds-sidebar__brand{
  padding: var(--sp-2);
}
.ds-app[data-collapsed="true"] .ds-sidebar__brand-img{
  opacity: 0;
  transform: scale(.6);
}
.ds-app[data-collapsed="true"] .ds-sidebar__brand-k{
  opacity: 1;
  transform: scale(1);
}

/* Texto legacy del brand — oculto (logo ya contiene la marca) */
.ds-sidebar__brand-text{ display: none; }


/* ----- 2.2 Toggle button (colapsar/expandir) -----
   v3.2 — Más grande, animación direccional: se desliza hacia
   el lado al que se está abriendo/cerrando el menú.
   Anclado al borde derecho del sidebar, centrado vertical.
   ------------------------------------------------------------ */
.ds-sidebar__toggle{
  position: absolute;
  top: 50%;
  right: -17px;                /* sobresale del borde para verse mejor */
  width: 34px; height: 34px;
  background: var(--k-yellow);
  color: var(--k-black);
  border: 2px solid var(--k-black);
  border-radius: 50%;
  display: grid; place-items: center;
  cursor: pointer;
  z-index: 1000;               /* por encima de topbar y contenido */
  font-size: 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,.5),
              0 0 0 3px rgba(0,0,0,.08);
  /* Estado base: expandido → flecha apunta a la izquierda
     (cerrar). Animación: se mueve LEVEMENTE a la izquierda
     para "anticipar" el cierre. */
  transform: translateY(-50%) translateX(0);
  transition: transform var(--dur-slow) var(--ease-spring),
              right var(--dur-slow) var(--ease-spring),
              box-shadow var(--dur-fast),
              background var(--dur-fast);
}
.ds-sidebar__toggle:hover{
  /* Hover expandido: se desliza un poco a la izquierda
     (lado al que se va a cerrar) + crece. */
  transform: translateY(-50%) translateX(-4px) scale(1.12);
  box-shadow: 0 6px 18px rgba(255,204,0,.55),
              0 0 0 4px rgba(255,204,0,.25);
}

/* Cuando está colapsada: la flecha rota (apunta a la derecha
   = abrir) y el botón se desliza un poco a la derecha. */
.ds-sidebar__toggle i{
  transition: transform var(--dur-slow) var(--ease-spring);
  display: inline-block;
}
.ds-app[data-collapsed="true"] .ds-sidebar__toggle i{
  transform: rotate(180deg);
}
.ds-app[data-collapsed="true"] .ds-sidebar__toggle:hover{
  /* Hover colapsado: se desliza a la derecha (lado de apertura) */
  transform: translateY(-50%) translateX(4px) scale(1.12);
}

/* Pulso sutil al hacer click (feedback de la dirección) */
.ds-sidebar__toggle:active{
  transform: translateY(-50%) translateX(-6px) scale(.95);
}
.ds-app[data-collapsed="true"] .ds-sidebar__toggle:active{
  transform: translateY(-50%) translateX(6px) scale(.95);
}

/* En mobile no aparece; allí se usa el drawer */
@media (max-width: 1023px){
  .ds-sidebar__toggle{ display: none; }
}


/* ----- 2.3 Nav scrollable area ----- */
.ds-sidebar__nav{
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-4) var(--sp-3);
  display: flex; flex-direction: column;
  gap: var(--sp-2);
}

/* Section title (group) */
.ds-sidebar__title{
  font-family: var(--font-cond);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: rgba(0,0,0,.55);
  padding: var(--sp-3) var(--sp-3) var(--sp-1);
  margin: 0;
  white-space: nowrap;
  font-weight: 700;
  transition: opacity var(--dur-base) var(--ease-out),
              height var(--dur-base) var(--ease-out);
}
.ds-app[data-collapsed="true"] .ds-sidebar__title{
  opacity: 0; height: 8px; padding: 0; pointer-events: none;
  overflow: hidden;
}

/* Link (item) */
.ds-sidebar__link{
  position: relative;
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 10px var(--sp-3);
  color: rgba(0,0,0,.82);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold, 600);
  text-decoration: none;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out),
              color      var(--dur-fast) var(--ease-out),
              transform  var(--dur-fast) var(--ease-out);
}
.ds-sidebar__link:hover{
  background: rgba(0,0,0,.08);
  color: var(--k-black);
  text-decoration: none;
}
.ds-sidebar__link:hover .ds-sidebar__icon{ transform: scale(1.12); }

/* Estado activo: fondo negro + texto amarillo + indicador izquierdo */
.ds-sidebar__link.is-active{
  background: var(--k-black);
  color: var(--k-yellow);
}
.ds-sidebar__link.is-active::before{
  content:"";
  position: absolute; left: -12px; top: 8px; bottom: 8px;
  width: 3px; background: var(--k-black);
  border-radius: 0 2px 2px 0;
}

.ds-sidebar__icon{
  font-size: 18px; width: 22px; flex: 0 0 22px;
  text-align: center;
  transition: transform var(--dur-base) var(--ease-spring);
}

.ds-sidebar__label{
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden;
  transition: opacity var(--dur-base) var(--ease-out);
}
.ds-app[data-collapsed="true"] .ds-sidebar__label{
  opacity: 0; pointer-events: none;
}

/* Badge interno del item (notificaciones) */
.ds-sidebar__badge{
  margin-left: auto;
  background: var(--k-black);
  color: var(--k-yellow);
  font-family: var(--font-sans);
  font-size: 10px; font-weight: var(--fw-bold);
  padding: 2px 6px; border-radius: var(--radius-pill);
  line-height: 1.4;
}
.ds-sidebar__link.is-active .ds-sidebar__badge{
  background: var(--k-yellow);
  color: var(--k-black);
}
.ds-app[data-collapsed="true"] .ds-sidebar__badge{ display: none; }


/* ----- 2.4 Footer del sidebar (perfil de usuario) ----- */
.ds-sidebar__footer{
  border-top: 1px solid rgba(0,0,0,.18);
  padding: var(--sp-3);
  display: flex; align-items: center; gap: var(--sp-3);
  flex-shrink: 0;
  background: rgba(0,0,0,.06);
}
.ds-sidebar__avatar{
  width: 36px; height: 36px; flex: 0 0 36px;
  border-radius: 50%;
  background: var(--k-black);
  display: grid; place-items: center;
  color: var(--k-yellow); font-weight: var(--fw-black);
  font-size: var(--fs-sm);
  border: 2px solid var(--k-black);
}
.ds-sidebar__user{
  min-width: 0; flex: 1;
  transition: opacity var(--dur-base) var(--ease-out);
}
.ds-sidebar__user-name{
  font-size: var(--fs-sm); font-weight: var(--fw-bold);
  color: var(--k-black);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ds-sidebar__user-role{
  font-size: var(--fs-xs); color: rgba(0,0,0,.65);
  white-space: nowrap;
}
.ds-app[data-collapsed="true"] .ds-sidebar__user{
  opacity: 0; pointer-events: none;
}


/* ============================================================
   3. MAIN AREA  (topbar + content)
   ============================================================ */
.ds-main{
  min-width: 0;             /* evita overflow horizontal con grid */
  display: flex; flex-direction: column;
}

/* ----- 3.1 Topbar interno ----- */
.ds-topbar{
  position: sticky; top: 0;
  height: var(--topbar-h);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-default);
  display: flex; align-items: center; gap: var(--sp-4);
  padding: 0 var(--container-pad);
  z-index: var(--z-sticky);
  backdrop-filter: blur(8px);
}
.ds-topbar__left,
.ds-topbar__right{
  display: flex; align-items: center; gap: var(--sp-2);
}
.ds-topbar__title{
  font-family: var(--font-cond);
  font-weight: var(--fw-black);
  font-size: var(--fs-xl);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  margin: 0;
  color: var(--fg-strong);
}
.ds-topbar__search{
  flex: 1; max-width: 480px;
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 8px 12px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-fast),
              box-shadow   var(--dur-fast);
}
.ds-topbar__search:focus-within{
  border-color: var(--k-yellow);
  box-shadow: var(--shadow-focus-yellow);
}
.ds-topbar__search i{
  color: var(--fg-muted); font-size: 16px;
}
.ds-topbar__search input{
  border: 0; background: transparent; outline: none;
  flex: 1; font-size: var(--fs-base);
  color: var(--fg-default);
}
.ds-topbar__search input::placeholder{ color: var(--fg-subtle); }

/* Botón hamburguesa solo en mobile */
.ds-topbar__burger{
  display: none;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--fg-default);
  cursor: pointer;
  transition: background var(--dur-fast);
}
.ds-topbar__burger:hover{ background: var(--bg-surface-3); }
.ds-topbar__burger i{ font-size: 20px; }
@media (max-width: 1023px){
  .ds-topbar__burger{ display: inline-flex; }
}
@media (max-width: 640px){
  .ds-topbar__search{ display: none; }
}


/* ----- 3.2 Content (área scrolleable) ----- */
.ds-content{
  flex: 1;
  padding: var(--sp-7) var(--container-pad);
  max-width: var(--container-max);
  width: 100%;
  margin: 0 auto;
}


/* ============================================================
   4. DRAWER OVERLAY (mobile)
   ============================================================ */
.ds-drawer-overlay{
  position: fixed; inset: 0;
  background: rgba(11,13,16,.55);
  backdrop-filter: blur(2px);
  z-index: var(--z-overlay);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-slow) var(--ease-out);
}
.ds-drawer-overlay.is-open{ opacity: 1; pointer-events: auto; }


/* ============================================================
   5. CONTAINER + GRID HELPERS
   ============================================================ */
.ds-container{
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.ds-container--narrow{ max-width: 800px }
.ds-container--wide  { max-width: 1536px }

/* Stack helper */
.ds-stack{ display:flex; flex-direction:column; gap: var(--sp-4) }
.ds-stack--sm{ gap: var(--sp-2) }
.ds-stack--lg{ gap: var(--sp-6) }

/* Inline helper */
.ds-inline{ display:flex; align-items:center; gap: var(--sp-3); flex-wrap:wrap }

/* Cluster (wrap, gap) */
.ds-cluster{ display:flex; flex-wrap:wrap; gap: var(--sp-2); align-items:center; }

/* Grid 12 cols, mobile-first (responsive auto) */
.ds-grid{
  display:grid;
  grid-template-columns: repeat(1, minmax(0,1fr));
  gap: var(--sp-4);
}
@media (min-width: 640px) { .ds-grid{ grid-template-columns: repeat(2, minmax(0,1fr)) } }
@media (min-width: 1024px){ .ds-grid{ grid-template-columns: repeat(3, minmax(0,1fr)) } }
@media (min-width: 1280px){ .ds-grid{ grid-template-columns: repeat(4, minmax(0,1fr)) } }

/* Grids fijos */
.ds-grid-2{ display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--sp-4) }
.ds-grid-3{ display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--sp-4) }
.ds-grid-4{ display:grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--sp-4) }

/* En mobile se colapsan a 1 col */
@media (max-width: 640px){
  .ds-grid-2,.ds-grid-3,.ds-grid-4{ grid-template-columns: 1fr }
}
@media (min-width:641px) and (max-width:1023px){
  .ds-grid-3,.ds-grid-4{ grid-template-columns: repeat(2,minmax(0,1fr)) }
}

/* Spans (12 col reference) */
.ds-col-span-2 { grid-column: span 2 / span 2 }
.ds-col-span-3 { grid-column: span 3 / span 3 }
.ds-col-span-4 { grid-column: span 4 / span 4 }
.ds-col-span-6 { grid-column: span 6 / span 6 }
.ds-col-span-12{ grid-column: 1 / -1 }


/* ============================================================
   6. PAGE HEADER (titlebar de cada vista)
   ============================================================ */
.ds-page-header{
  display:flex; flex-wrap:wrap; align-items:flex-end;
  justify-content:space-between; gap: var(--sp-4);
  padding: var(--sp-2) 0 var(--sp-5);
  border-bottom: 1px solid var(--border-default);
  margin-bottom: var(--sp-6);
}
.ds-page-header__title{
  font-family: var(--font-cond);
  font-weight: var(--fw-black);
  text-transform: uppercase;
  font-size: var(--fs-4xl);
  margin: 0;
}
.ds-page-header__sub{
  color: var(--fg-muted);
  margin-top: var(--sp-1);
  font-size: var(--fs-base);
}
.ds-page-header__actions{
  display:flex; gap: var(--sp-2); flex-wrap:wrap;
}


/* ============================================================
   7. SECTION (utilidad para capítulos del demo)
   ============================================================ */
.ds-section{
  padding: var(--sp-9) 0;
  border-top: 1px solid var(--border-default);
}
.ds-section:first-of-type{ border-top:0; padding-top: var(--sp-4); }
.ds-section__title{
  font-family: var(--font-cond);
  font-size: var(--fs-3xl);
  text-transform: uppercase;
  letter-spacing: var(--ls-tight);
  border-left: 4px solid var(--k-yellow);
  padding-left: var(--sp-3);
  margin: 0 0 var(--sp-5);
  color: var(--fg-strong);
}


/* ============================================================
   8. DASHBOARD LAYOUT
   ============================================================ */
.ds-dashboard{ display:grid; gap: var(--sp-5) }

.ds-dashboard__kpis{
  display:grid; gap: var(--sp-4);
  grid-template-columns: repeat(1,1fr);
}
@media (min-width: 640px) { .ds-dashboard__kpis{ grid-template-columns: repeat(2,1fr) } }
@media (min-width: 1024px){ .ds-dashboard__kpis{ grid-template-columns: repeat(4,1fr) } }

.ds-dashboard__charts{
  display:grid; gap: var(--sp-4);
  grid-template-columns: 1fr;
}
@media (min-width: 1024px){
  .ds-dashboard__charts{ grid-template-columns: 2fr 1fr }
}


/* ============================================================
   9. LOGIN SPLIT LAYOUT (60/40)
   ------------------------------------------------------------
   60% formulario izquierda · 40% panel visual derecha.
   En mobile se apilan vertical.
   ============================================================ */
.ds-login{
  min-height: 100vh;
  display: grid;
  grid-template-columns: 60fr 40fr;
  background: var(--bg-canvas);
}
@media (max-width: 1023px){
  .ds-login{ grid-template-columns: 1fr; }
}

.ds-login__panel{
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-9) var(--sp-7);
  background: var(--bg-surface);
  position: relative;
}
.ds-login__form{
  width: 100%; max-width: 420px;
  display: flex; flex-direction: column;
  gap: var(--sp-4);
}

.ds-login__visual{
  position: relative;
  background:
    radial-gradient(circle at 70% 20%, rgba(255,204,0,.20), transparent 55%),
    linear-gradient(135deg, var(--k-petrol-700) 0%, var(--k-black) 50%, var(--k-anth) 100%);
  color: #fff;
  padding: var(--sp-9) var(--sp-7);
  display: flex; flex-direction: column; justify-content: space-between;
  overflow: hidden;
}
@media (max-width: 1023px){
  .ds-login__visual{
    min-height: 280px;
    order: -1;        /* en mobile, panel visual va arriba */
  }
}

/* Textura técnica (líneas inclinadas + grid) sobre el panel */
.ds-login__visual::before{
  content:""; position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(45deg,
      rgba(255,204,0,.05) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(135deg,
      rgba(255,255,255,.03) 0 1px, transparent 1px 22px);
  pointer-events: none;
}

.ds-login__visual-content{
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: var(--sp-7);
}

.ds-login__quote{
  font-family: var(--font-cond);
  font-size: var(--fs-5xl);
  font-weight: var(--fw-black);
  line-height: .95;
  text-transform: uppercase;
  margin: 0;
  color: #fff;
}
.ds-login__quote span{ color: var(--k-yellow); }


/* ============================================================
   10. CENTERED LAYOUT (errores, login fallback)
   ============================================================ */
.ds-center-layout,
.k-center-layout{
  min-height: 100vh;
  display: grid; place-items: center;
  padding: var(--sp-7);
  background:
    radial-gradient(circle at 20% 80%, rgba(255,204,0,.06), transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(50,128,149,.06), transparent 50%),
    var(--bg-canvas);
}


/* ============================================================
   11. FOOTER (legacy compatible)
   ============================================================ */
.ds-footer{
  background: var(--k-black);
  color:#DEE2E6;
  padding: var(--sp-7) var(--container-pad);
  border-top: 6px solid var(--k-yellow);
  font-size: var(--fs-sm);
}
.ds-footer__grid{
  display:grid; gap: var(--sp-6);
  grid-template-columns: repeat(1,1fr);
  max-width: var(--container-max);
  margin-inline:auto;
}
@media (min-width: 768px){ .ds-footer__grid{ grid-template-columns: 2fr 1fr 1fr 1fr } }
.ds-footer h6{
  color: var(--k-yellow);
  font-family: var(--font-cond);
  letter-spacing: var(--ls-widest);
  margin-bottom: var(--sp-3);
}
.ds-footer a{ color:#DEE2E6; display:block; padding:2px 0 }
.ds-footer a:hover{ color: var(--k-yellow); text-decoration:none }
.ds-footer__bottom{
  border-top:1px solid rgba(255,255,255,.08);
  padding-top: var(--sp-4);
  margin-top: var(--sp-6);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap: var(--sp-2);
  color: var(--fg-subtle);
}


/* ============================================================
   12. RESPONSIVE UTILITIES
   ============================================================ */
.ds-hide-sm{ display:none }
@media (min-width: 768px){ .ds-hide-sm{ display:initial } }

.ds-only-sm{ display:initial }
@media (min-width: 768px){ .ds-only-sm{ display:none } }

/* Bloqueo del scroll del body cuando un drawer/modal está abierto */
body.is-locked{ overflow: hidden; }


/* ============================================================
   FLOATING THEME TOGGLE (v3.3)
   Header eliminado → conservamos un botón flotante temporal
   para cambiar tema, hasta que se monte el panel lateral derecho.
   ============================================================ */
.ds-floating-theme{
  position: fixed;
  top: 16px;
  right: 16px;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--k-yellow);
  color: var(--k-black);
  border: 2px solid var(--k-black);
  display: grid; place-items: center;
  cursor: pointer;
  z-index: 50;
  font-size: 18px;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  transition: transform var(--dur-base) var(--ease-spring),
              box-shadow var(--dur-fast);
}
.ds-floating-theme:hover{
  transform: scale(1.08);
  box-shadow: 0 6px 20px rgba(255,204,0,.5);
}