/* ============================================================
   KAESER · DESIGN SYSTEM v3.1
   File: components.css
   Purpose: Componentes UI - botones, forms, tablas, cards,
            modales, toasts, gear loaders, progress (con textura),
            select custom, empty states, error pages, KPI,
            badges, charts, email...

   Convención: TODOS los selectores con prefijo .ds-* para
   no chocar con Bootstrap 5. Bootstrap puede coexistir.

   Cambios v3.1:
     · Loaders TIPO ENGRANAJE (vivos, con glow + gradientes).
     · Progreso lineal con textura industrial + energía animada.
     · Toasts movidos a esquina SUPERIOR DERECHA.
     · Select rediseñado (custom dropdown con hover animado).
     · Empty state reusable (datos / vacío inicial / error).
     · Outline button arreglado en dark mode (contraste AA).
     · Tablas centradas + icon-buttons con scale + glow.
     · Páginas de error (k-error-page) con estilo industrial.
   ============================================================ */


/* ============================================================
   1. BUTTONS
   ------------------------------------------------------------
   Sistema completo: variantes, tamaños, estados (hover, focus,
   disabled, loading), botón "Reajustar", icon-only, full-width.
   Texto siempre NEGRO en variantes con fondo amarillo.
   FIX: outline en dark mode con contraste correcto.
   ============================================================ */
.ds-btn{
  --_btn-bg     : transparent;
  --_btn-fg     : var(--fg-default);
  --_btn-bd     : transparent;
  --_btn-bg-h   : var(--bg-surface-3);
  --_btn-fg-h   : var(--fg-default);

  display:inline-flex; align-items:center; justify-content:center;
  gap: var(--sp-2);
  padding: 10px 18px;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  line-height: 1;
  border:1px solid var(--_btn-bd);
  background: var(--_btn-bg);
  color: var(--_btn-fg);
  border-radius: var(--radius-md);
  cursor:pointer; user-select:none;
  text-decoration:none; white-space:nowrap;
  position: relative;
  transition: background var(--dur-fast) var(--ease-out),
              color      var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform  var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.ds-btn:hover:not([disabled]){
  background: var(--_btn-bg-h);
  color: var(--_btn-fg-h);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}
.ds-btn:active:not([disabled]){
  transform: translateY(0);
  box-shadow: var(--shadow-xs);
}
.ds-btn:focus-visible{ box-shadow: var(--shadow-focus); outline:none }
.ds-btn[disabled],.ds-btn.is-disabled{
  opacity:.55; cursor:not-allowed; pointer-events:none;
}

/* Microinteracción: icono se desliza ligeramente al hover */
.ds-btn .ds-btn__icon{
  transition: transform var(--dur-base) var(--ease-spring);
}
.ds-btn:hover:not([disabled]) .ds-btn__icon{
  transform: translateX(2px);
}

/* --- 1.1 Variantes --- */
.ds-btn--primary{
  --_btn-bg: var(--k-yellow);
  --_btn-fg: var(--k-black);          /* texto NEGRO en claro */
  --_btn-bg-h: var(--k-yellow-700);
  --_btn-fg-h: var(--k-black);
  box-shadow: 0 4px 14px rgba(255,204,0,.30);
}
.ds-btn--primary:focus-visible{ box-shadow: var(--shadow-focus-yellow) }

.ds-btn--secondary{
  --_btn-bg: var(--k-black);
  --_btn-fg: #fff;
  --_btn-bg-h: var(--k-anth);
  --_btn-fg-h: #fff;
}

.ds-btn--tertiary{
  --_btn-bg: var(--k-petrol);
  --_btn-fg: #fff;
  --_btn-bg-h: var(--k-petrol-700);
  --_btn-fg-h: #fff;
  box-shadow: 0 4px 14px rgba(50,128,149,.25);
}

/* OUTLINE — fix dark mode: usa amarillo como acento legible */
.ds-btn--outline{
  --_btn-bg: transparent;
  --_btn-fg: var(--fg-strong);
  --_btn-bd: var(--border-strong);
  --_btn-bg-h: var(--fg-strong);
  --_btn-fg-h: #fff;
}
[data-theme="dark"] .ds-btn--outline{
  --_btn-fg: var(--k-yellow);
  --_btn-bd: var(--k-yellow);
  --_btn-bg-h: var(--k-yellow);
  --_btn-fg-h: var(--k-black);
}

.ds-btn--ghost{
  --_btn-bg: transparent;
  --_btn-fg: var(--fg-default);
  --_btn-bg-h: var(--bg-surface-3);
  --_btn-fg-h: var(--fg-strong);
}

.ds-btn--danger{
  --_btn-bg: var(--color-error);
  --_btn-fg: #fff;
  --_btn-bg-h: #8a0019;
  --_btn-fg-h: #fff;
}
[data-theme="dark"] .ds-btn--danger{
  --_btn-fg: var(--k-black);
  --_btn-bg-h: #FCA5A5;
}

.ds-btn--reset{   /* Botón "Reajustar" */
  --_btn-bg: transparent;
  --_btn-fg: var(--fg-muted);
  --_btn-bd: var(--border-default);
  --_btn-bg-h: var(--bg-surface-3);
  --_btn-fg-h: var(--fg-strong);
}
.ds-btn--reset .ds-btn__icon{ transition: transform var(--dur-base) var(--ease-out) }
.ds-btn--reset:hover .ds-btn__icon{ transform: rotate(-180deg) }

/* --- 1.2 Tamaños --- */
.ds-btn--sm{ padding: 7px 12px; font-size: var(--fs-sm); border-radius: var(--radius-sm) }
.ds-btn--lg{ padding: 14px 24px; font-size: var(--fs-md) }
.ds-btn--block{ display:flex; width:100% }

/* --- 1.3 Icon button (cuadrado) --- */
.ds-btn--icon{
  width:40px; height:40px; padding:0;
  border-radius: var(--radius-md);
}
.ds-btn--icon.ds-btn--sm{ width:32px; height:32px }
.ds-btn--icon:hover .ds-btn__icon{ transform: rotate(-8deg) scale(1.15); }

.ds-btn__icon{ font-size: 16px; flex:0 0 auto; line-height: 1; display:inline-grid; place-items:center; }
.ds-btn--lg .ds-btn__icon{ font-size: 18px }

/* --- 1.4 Loading state — usa GEAR LOADER (requisito) ---
   Aplica .is-loading; el texto se oculta y aparece el engranaje
   girando con glow. */
.ds-btn.is-loading{
  pointer-events: none;
  color: transparent !important;
}
.ds-btn.is-loading::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--ds-gear-svg);
  background-size: 22px 22px;
  background-repeat: no-repeat;
  background-position: center;
  animation: ds-spin 1s linear infinite;
  filter: drop-shadow(var(--glow-yellow));
}
/* SVG inline de engranaje en CSS variable para reusar */
:root{
  --ds-gear-svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23111418'><path d='M19.14 12.94a7.84 7.84 0 0 0 0-1.88l2.03-1.58a.5.5 0 0 0 .12-.64l-1.92-3.32a.5.5 0 0 0-.6-.22l-2.39.96a7.93 7.93 0 0 0-1.62-.94l-.36-2.54A.5.5 0 0 0 13.9 2h-3.84a.5.5 0 0 0-.5.42l-.36 2.54c-.59.24-1.13.55-1.62.94l-2.39-.96a.5.5 0 0 0-.6.22L2.67 8.48a.5.5 0 0 0 .12.64l2.03 1.58a7.84 7.84 0 0 0 0 1.88l-2.03 1.58a.5.5 0 0 0-.12.64l1.92 3.32a.5.5 0 0 0 .6.22l2.39-.96c.49.39 1.03.7 1.62.94l.36 2.54c.05.24.26.42.5.42h3.84c.24 0 .45-.18.5-.42l.36-2.54c.59-.24 1.13-.55 1.62-.94l2.39.96c.22.08.47-.02.6-.22l1.92-3.32a.5.5 0 0 0-.12-.64l-2.03-1.58zM12 15.5A3.5 3.5 0 1 1 12 8.5a3.5 3.5 0 0 1 0 7z'/></svg>");
}
.ds-btn--secondary.is-loading::before,
.ds-btn--tertiary.is-loading::before,
.ds-btn--danger.is-loading::before{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'><path d='M19.14 12.94a7.84 7.84 0 0 0 0-1.88l2.03-1.58a.5.5 0 0 0 .12-.64l-1.92-3.32a.5.5 0 0 0-.6-.22l-2.39.96a7.93 7.93 0 0 0-1.62-.94l-.36-2.54A.5.5 0 0 0 13.9 2h-3.84a.5.5 0 0 0-.5.42l-.36 2.54c-.59.24-1.13.55-1.62.94l-2.39-.96a.5.5 0 0 0-.6.22L2.67 8.48a.5.5 0 0 0 .12.64l2.03 1.58a7.84 7.84 0 0 0 0 1.88l-2.03 1.58a.5.5 0 0 0-.12.64l1.92 3.32a.5.5 0 0 0 .6.22l2.39-.96c.49.39 1.03.7 1.62.94l.36 2.54c.05.24.26.42.5.42h3.84c.24 0 .45-.18.5-.42l.36-2.54c.59-.24 1.13-.55 1.62-.94l2.39.96c.22.08.47-.02.6-.22l1.92-3.32a.5.5 0 0 0-.12-.64l-2.03-1.58zM12 15.5A3.5 3.5 0 1 1 12 8.5a3.5 3.5 0 0 1 0 7z'/></svg>");
}


/* ============================================================
   2. BADGES & PILLS
   ============================================================ */
.ds-badge{
  display:inline-flex; align-items:center; gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  background: var(--bg-surface-3);
  color: var(--fg-default);
  line-height: 1.4;
  border:1px solid transparent;
}
.ds-badge--yellow { background: var(--k-yellow);     color: var(--k-black); border-color: var(--k-yellow-700) }
.ds-badge--petrol { background: var(--k-petrol);     color: #fff }
.ds-badge--ok     { background: var(--color-success-bg); color: var(--color-success); border-color: var(--color-success-bd) }
.ds-badge--warn   { background: var(--color-warning-bg); color: var(--color-warning); border-color: var(--color-warning-bd) }
.ds-badge--err    { background: var(--color-error-bg);   color: var(--color-error);   border-color: var(--color-error-bd) }
.ds-badge--info   { background: var(--color-info-bg);    color: var(--color-info);    border-color: var(--color-info-bd) }

/* Status dot */
.ds-dot{
  width:8px; height:8px; border-radius:50%;
  background: var(--fg-muted); display:inline-block;
}
.ds-dot--ok  { background: var(--color-success); box-shadow: 0 0 0 4px rgba(46,125,50,.15) }
.ds-dot--warn{ background: var(--color-warning); box-shadow: 0 0 0 4px rgba(183,121,31,.15) }
.ds-dot--err { background: var(--color-error);   box-shadow: 0 0 0 4px rgba(176,0,32,.15) }


/* ============================================================
   3. CARDS
   ============================================================ */
.ds-card{
  background: var(--bg-surface);
  border:1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.ds-card--elevated{ box-shadow: var(--shadow-md) }
.ds-card--hover:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}

.ds-card--accent-yellow { border-top: 4px solid var(--k-yellow) }
.ds-card--accent-petrol { border-left: 4px solid var(--k-petrol) }
.ds-card--accent-black  { border-top: 4px solid var(--k-black) }

.ds-card--padless{ padding: 0 }

.ds-card__header{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.ds-card__title{
  font-family: var(--font-cond);
  font-size: var(--fs-lg);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  margin: 0;
  color: var(--fg-strong);
}
.ds-card__sub{ color: var(--fg-muted); font-size: var(--fs-sm); margin-top: 2px }
.ds-card__body{ color: var(--fg-default) }
.ds-card__footer{
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border-default);
  display:flex; justify-content:flex-end; gap: var(--sp-2);
}


/* ============================================================
   4. KPI CARD (dashboards / reportes)
   ------------------------------------------------------------
   Tarjeta de indicador con:
     · barra lateral de color semántico
     · icono temático con glow
     · valor grande Barlow Condensed
     · trend con flecha + color
     · patrón industrial decorativo de fondo
   ============================================================ */
.ds-kpi{
  position:relative; overflow:hidden;
  background: var(--bg-surface);
  border:1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.ds-kpi:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.ds-kpi::before{
  content:""; position:absolute; top:0; left:0; bottom:0; width:4px;
  background: var(--k-yellow);
}
.ds-kpi--petrol::before{ background: var(--k-petrol) }
.ds-kpi--success::before{ background: var(--color-success) }
.ds-kpi--danger::before { background: var(--color-error) }

/* Patrón industrial decorativo */
.ds-kpi::after{
  content:"";
  position: absolute; right:-30px; bottom:-30px;
  width:140px; height:140px;
  background: repeating-linear-gradient(45deg,
              currentColor 0 1px, transparent 1px 12px);
  color: var(--border-default);
  opacity:.5; pointer-events:none;
}

.ds-kpi__icon{
  width:44px; height:44px;
  border-radius: var(--radius-md);
  display:grid; place-items:center;
  font-size: 20px;
  background: var(--bg-surface-3);
  color: var(--k-petrol);
  margin-bottom: var(--sp-3);
}
.ds-kpi--petrol .ds-kpi__icon{ background: var(--k-petrol); color: #fff; box-shadow: var(--glow-petrol); }
.ds-kpi--yellow .ds-kpi__icon,
.ds-kpi:not(.ds-kpi--petrol):not(.ds-kpi--success):not(.ds-kpi--danger) .ds-kpi__icon{
  /* default = amarillo si no se especifica modificador */
}
.ds-kpi--success .ds-kpi__icon{ background: var(--color-success-bg); color: var(--color-success); }
.ds-kpi--danger .ds-kpi__icon{ background: var(--color-error-bg); color: var(--color-error); }

.ds-kpi__label{
  font-family: var(--font-cond);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.ds-kpi__value{
  font-family: var(--font-cond);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-black);
  color: var(--fg-strong);
  margin-top: var(--sp-1);
  line-height: 1;
}
.ds-kpi__trend{
  display:inline-flex; align-items:center; gap:4px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  margin-top: var(--sp-2);
  color: var(--color-success);
  padding: 2px 8px;
  background: var(--color-success-bg);
  border-radius: var(--radius-pill);
}
.ds-kpi__trend--down{
  color: var(--color-error);
  background: var(--color-error-bg);
}
.ds-kpi__trend i{ font-size: 12px; }


/* ============================================================
   5. FORMS  — input, textarea, checkbox, switch
   ============================================================ */
.ds-field{ display:flex; flex-direction:column; gap: var(--sp-1); margin-bottom: var(--sp-4) }
.ds-field__label{
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--fg-strong);
  letter-spacing: var(--ls-wide);
}
.ds-field__label .req{ color: var(--color-error); margin-left: 2px }
.ds-field__hint{ font-size: var(--fs-xs); color: var(--fg-muted) }
.ds-field__error{ font-size: var(--fs-xs); color: var(--color-error); font-weight: var(--fw-bold); display:flex; align-items:center; gap:4px; }
.ds-field__success{ font-size: var(--fs-xs); color: var(--color-success); font-weight: var(--fw-bold); display:flex; align-items:center; gap:4px; }

.ds-input, .ds-select, .ds-textarea{
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--border-strong);
  background: var(--bg-surface);
  color: var(--fg-default);
  border-radius: var(--radius-md);
  font: inherit;
  font-size: var(--fs-base);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow   var(--dur-fast) var(--ease-out),
              background   var(--dur-fast) var(--ease-out);
}
.ds-input::placeholder, .ds-textarea::placeholder{ color: var(--fg-subtle) }

.ds-input:hover, .ds-select:hover, .ds-textarea:hover{
  border-color: var(--k-anth-600);
}

/* FOCUS = BORDE AMARILLO + RING amarillo (KAESER) */
.ds-input:focus, .ds-select:focus, .ds-textarea:focus{
  outline: none;
  border-color: var(--k-yellow);
  box-shadow: var(--shadow-focus-yellow);
  background: var(--bg-surface);
}

.ds-input[disabled], .ds-select[disabled], .ds-textarea[disabled]{
  background: var(--bg-surface-3);
  color: var(--fg-subtle);
  cursor:not-allowed;
}

/* Estados por modificador en .ds-field */
.ds-field--error .ds-input,
.ds-field--error .ds-select,
.ds-field--error .ds-textarea{
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px rgba(176,0,32,.15);
}
.ds-field--success .ds-input,
.ds-field--success .ds-select,
.ds-field--success .ds-textarea{
  border-color: var(--color-success);
  box-shadow: 0 0 0 3px rgba(46,125,50,.15);
}

/* --- Native <select> con flecha custom (fallback) --- */
.ds-select{
  appearance:none; -webkit-appearance:none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23363C42' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
  background-repeat:no-repeat;
  background-position:right 12px center;
  padding-right: 36px;
}
[data-theme="dark"] .ds-select{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23F1F3F5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
}

/* Textarea altura mínima */
.ds-textarea{ min-height: 96px; resize: vertical }

/* Input con icono (grupo) */
.ds-input-group{ position:relative }
.ds-input-group .ds-input{ padding-left: 42px }
.ds-input-group__icon{
  position:absolute; left: 14px; top:50%; transform: translateY(-50%);
  font-size: 16px;
  color: var(--fg-muted);
  pointer-events:none;
}


/* ============================================================
   5b. SELECT CUSTOM (rediseñado, JS-driven)
   ------------------------------------------------------------
   Estructura:
     <div class="ds-select-custom" data-select>
       <button class="ds-select-custom__trigger">…</button>
       <ul class="ds-select-custom__menu">
         <li class="ds-select-custom__option" data-value="x">…</li>
       </ul>
     </div>
   ============================================================ */
.ds-select-custom{
  position: relative;
  width: 100%;
}
.ds-select-custom__trigger{
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-2);
  padding: 11px 14px;
  background: var(--bg-surface);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--fg-default);
  font-size: var(--fs-base);
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: border-color var(--dur-fast),
              box-shadow var(--dur-fast);
}
.ds-select-custom__trigger:hover{ border-color: var(--k-anth-600); }
.ds-select-custom.is-open .ds-select-custom__trigger,
.ds-select-custom__trigger:focus-visible{
  outline: none;
  border-color: var(--k-yellow);
  box-shadow: var(--shadow-focus-yellow);
}
.ds-select-custom__trigger .chev{
  font-size: 14px; color: var(--fg-muted);
  transition: transform var(--dur-base) var(--ease-spring);
}
.ds-select-custom.is-open .ds-select-custom__trigger .chev{
  transform: rotate(180deg);
}

.ds-select-custom__menu{
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  list-style: none; margin: 0; padding: 6px;
  max-height: 280px; overflow-y: auto;
  z-index: var(--z-dropdown);
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.ds-select-custom.is-open .ds-select-custom__menu{
  opacity: 1; transform: translateY(0); pointer-events: auto;
}

.ds-select-custom__option{
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-base);
  color: var(--fg-default);
  cursor: pointer;
  /* hover animado: padding y color */
  transition: background var(--dur-fast),
              color var(--dur-fast),
              padding-left var(--dur-base);
}
.ds-select-custom__option:hover{
  background: var(--k-yellow-100);
  color: var(--k-black);
  padding-left: 16px;
}
[data-theme="dark"] .ds-select-custom__option:hover{
  background: rgba(255,204,0,.12);
  color: #fff;
}
.ds-select-custom__option.is-selected{
  background: var(--k-yellow);
  color: var(--k-black);
  font-weight: var(--fw-bold);
}
.ds-select-custom__option i{
  font-size: 16px;
  color: var(--fg-muted);
}
.ds-select-custom__option.is-selected i,
.ds-select-custom__option:hover i{
  color: var(--k-black);
}


/* --- Multi-select tag-style (con chips) --- */
.ds-multiselect{
  display:flex; flex-wrap:wrap; gap: var(--sp-1);
  min-height: 40px;
  padding: 6px 8px;
  border:1.5px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}
.ds-multiselect:focus-within{
  border-color: var(--k-yellow);
  box-shadow: var(--shadow-focus-yellow);
}
.ds-multiselect__chip{
  display:inline-flex; align-items:center; gap: 4px;
  padding: 3px 4px 3px 8px;
  background: var(--k-yellow-100);
  color: var(--k-black);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}
[data-theme="dark"] .ds-multiselect__chip{
  background: rgba(255,204,0,.18); color: var(--k-yellow);
}
.ds-multiselect__chip button{
  border:0; background:transparent; cursor:pointer;
  width:18px; height:18px; display:grid; place-items:center;
  border-radius:50%; color: inherit;
}
.ds-multiselect__chip button:hover{ background: rgba(0,0,0,.10) }
.ds-multiselect__input{
  flex:1; min-width:80px;
  border:0; outline:none; background:transparent;
  padding: 4px 6px; font: inherit; color: inherit;
}

/* Checkbox/Radio custom */
.ds-check{
  display:inline-flex; align-items:center; gap: var(--sp-2);
  cursor:pointer; user-select:none;
  font-size: var(--fs-base);
  color: var(--fg-default);
}
.ds-check input{ position:absolute; opacity:0; pointer-events:none }
.ds-check__box{
  width:18px; height:18px; flex:0 0 18px;
  border:2px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  display:grid; place-items:center;
  transition: all var(--dur-fast) var(--ease-out);
}
.ds-check input:checked + .ds-check__box{
  background: var(--k-yellow);
  border-color: var(--k-yellow);
}
.ds-check input:checked + .ds-check__box::after{
  content:""; width:10px; height:6px;
  border-left: 2.5px solid var(--k-black);
  border-bottom: 2.5px solid var(--k-black);
  transform: rotate(-45deg) translate(1px,-1px);
}
.ds-check input:focus-visible + .ds-check__box{ box-shadow: var(--shadow-focus-yellow) }

.ds-radio .ds-check__box{ border-radius:50% }
.ds-radio input:checked + .ds-check__box{ background:#fff }
.ds-radio input:checked + .ds-check__box::after{
  content:""; width:10px; height:10px; border-radius:50%;
  background: var(--k-yellow); border:0; transform:none;
}

/* Switch */
.ds-switch{
  display:inline-flex; align-items:center; gap: var(--sp-2);
  cursor:pointer; user-select:none;
  color: var(--fg-default);
}
.ds-switch input{ position:absolute; opacity:0 }
.ds-switch__track{
  width:38px; height:22px; border-radius: var(--radius-pill);
  background: var(--border-strong); position:relative;
  transition: background var(--dur-fast) var(--ease-out);
}
.ds-switch__track::after{
  content:""; position:absolute; top:2px; left:2px;
  width:18px; height:18px; border-radius:50%;
  background:#fff; box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease-out);
}
.ds-switch input:checked + .ds-switch__track{ background: var(--k-yellow) }
.ds-switch input:checked + .ds-switch__track::after{ transform: translateX(16px) }
.ds-switch input:focus-visible + .ds-switch__track{ box-shadow: var(--shadow-focus-yellow) }


/* ============================================================
   6. FILTERS BAR
   ------------------------------------------------------------
   Barra horizontal con varios campos + botón Reajustar.
   ============================================================ */
.ds-filters{
  display:grid; gap: var(--sp-3);
  grid-template-columns: repeat(1,1fr);
  padding: var(--sp-4);
  background: var(--bg-surface);
  border:1px solid var(--border-default);
  border-radius: var(--radius-lg);
}
@media (min-width: 768px){
  .ds-filters{ grid-template-columns: repeat(4, 1fr) }
}
.ds-filters__actions{
  grid-column: 1 / -1;
  display:flex; gap: var(--sp-2); justify-content:flex-end;
  border-top: 1px dashed var(--border-default);
  padding-top: var(--sp-3);
}


/* ============================================================
   7. TABLES — TODO CENTRADO + iconos animados (requisito)
   ============================================================ */
.ds-table-wrap{
  overflow-x:auto;
  border:1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  box-shadow: var(--shadow-xs);
}

.ds-table{
  width:100%;
  border-collapse: collapse;
  font-size: var(--fs-base);
  text-align: center;     /* requisito: centrado por defecto */
}
.ds-table thead th{
  background: var(--bg-surface-2);
  color: var(--fg-muted);
  font-family: var(--font-cond);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  text-align: center;
  padding: 14px 14px;
  border-bottom: 1px solid var(--border-default);
  white-space: nowrap;
}
.ds-table tbody td{
  padding: 14px 14px;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
  color: var(--fg-default);
  text-align: center;
}
.ds-table tbody tr{ transition: background var(--dur-fast); }
.ds-table tbody tr:hover td{ background: var(--k-yellow-100) }
.ds-table tbody tr:last-child td{ border-bottom: 0 }

[data-theme="dark"] .ds-table tbody tr:hover td{ background: rgba(255,204,0,.08) }

/* Tabla zebra */
.ds-table--striped tbody tr:nth-child(even) td{ background: var(--bg-surface-2) }
.ds-table--striped tbody tr:hover td{ background: var(--k-yellow-100) }
[data-theme="dark"] .ds-table--striped tbody tr:hover td{ background: rgba(255,204,0,.08) }

/* Compact */
.ds-table--compact thead th,
.ds-table--compact tbody td{ padding: 10px 12px }

/* Acciones de fila — CENTRADAS con icon-buttons animados */
.ds-table__actions{
  display:inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
}

/* Icon button para tablas — con scale + glow + hover animation */
.ds-icon-btn{
  width: 34px; height: 34px;
  display: inline-grid; place-items: center;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--fg-muted);
  cursor: pointer;
  font-size: 15px;
  transition: all var(--dur-fast) var(--ease-out);
}
.ds-icon-btn i{
  transition: transform var(--dur-base) var(--ease-spring);
}
.ds-icon-btn:hover{
  transform: scale(1.10);
  background: var(--k-yellow);
  border-color: var(--k-yellow);
  color: var(--k-black);
  box-shadow: var(--glow-yellow);
}
.ds-icon-btn:hover i{
  transform: rotate(-8deg) scale(1.1);
}
.ds-icon-btn--info:hover{
  background: var(--k-petrol); border-color: var(--k-petrol);
  color: #fff; box-shadow: var(--glow-petrol);
}
.ds-icon-btn--danger:hover{
  background: var(--color-error); border-color: var(--color-error);
  color: #fff; box-shadow: 0 0 20px rgba(176,0,32,.45);
}


/* ============================================================
   8. MODAL
   ============================================================ */
.ds-modal-backdrop{
  position: fixed; inset: 0;
  background: rgba(11,13,16,.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: var(--z-modal);
  display:none; align-items:center; justify-content:center;
  padding: var(--sp-4);
  animation: ds-fade-in var(--dur-base) var(--ease-out);
}
.ds-modal-backdrop.is-open{ display:flex }

.ds-modal{
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  width: 100%; max-width: 520px;
  box-shadow: var(--shadow-lg);
  overflow:hidden;
  animation: ds-modal-in var(--dur-slow) var(--ease-out);
}
.ds-modal--lg{ max-width: 760px }
.ds-modal--sm{ max-width: 420px }

.ds-modal__bar{ height: 6px; background: var(--k-yellow) }
.ds-modal__header{
  display:flex; justify-content:space-between; align-items:flex-start;
  padding: var(--sp-4) var(--sp-5) var(--sp-2);
}
.ds-modal__title{
  font-family: var(--font-cond);
  font-size: var(--fs-xl);
  text-transform: uppercase;
  margin: 0;
}
.ds-modal__close{
  background:transparent; border:0; cursor:pointer;
  width:32px; height:32px; border-radius: var(--radius-sm);
  display:grid; place-items:center;
  color: var(--fg-muted);
  transition: background var(--dur-fast);
}
.ds-modal__close:hover{ background: var(--bg-surface-3); color: var(--fg-strong) }
.ds-modal__body{ padding: var(--sp-3) var(--sp-5) var(--sp-5); color: var(--fg-default) }
.ds-modal__footer{
  display:flex; justify-content:flex-end; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  background: var(--bg-surface-2);
  border-top: 1px solid var(--border-default);
}

@keyframes ds-modal-in{
  from{ opacity:0; transform: translateY(8px) scale(.98) }
  to  { opacity:1; transform: translateY(0)   scale(1)   }
}


/* ============================================================
   8b. MODAL DE FORMULARIO — Orden de Servicio Técnico
   ------------------------------------------------------------
   Modal industrial KAESER. Estructura:
     [HEAD]    código + título + estado (badge) + cerrar
     [TIMELINE] línea de progreso del workflow
     [BODY]    grid 2 cols → equipment card + form/checklist
     [FOOTBAR] acciones primarias/secundarias en barra fija
   Inspirado en órdenes de servicio reales: hereda colores de
   marca (amarillo/petróleo) y tipografía Barlow Condensed.
   ============================================================ */
.ds-modal--form{
  max-width: 920px;
  padding: 0;
  display: flex; flex-direction: column;
  max-height: 90vh;
  overflow: hidden;
}

/* ---- HEADER oscuro con franja amarilla decorativa lateral ---- */
.ds-modal__head-industrial{
  background:
    linear-gradient(135deg, var(--k-black) 0%, var(--k-anth) 100%);
  color: #fff;
  padding: var(--sp-5) var(--sp-6);
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-4);
  position: relative;
  overflow: hidden;
}
/* Patrón industrial sutil en el fondo del header */
.ds-modal__head-industrial::before{
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255,204,0,.04) 0 1px,
    transparent 1px 12px
  );
  pointer-events: none;
}
/* Franja amarilla vertical izquierda (firma KAESER) */
.ds-modal__head-industrial::after{
  content: ""; position: absolute;
  left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--k-yellow);
}
.ds-modal__head-industrial > *{ position: relative; z-index: 1; }

.ds-modal__head-meta{
  display: flex; align-items: center; gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}
.ds-modal__code{
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--k-yellow);
  color: var(--k-black);
  font-family: var(--font-mono);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  letter-spacing: .04em;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
}
.ds-modal__status{
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-cond);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-weight: var(--fw-bold);
}
.ds-modal__status .ds-dot{ width: 6px; height: 6px; }

.ds-modal__head-industrial .ds-modal__title{
  color: #fff;
  font-family: var(--font-cond);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-black);
  text-transform: uppercase;
  letter-spacing: var(--ls-tight);
  margin: 0 0 4px;
  line-height: 1.05;
}
.ds-modal__head-industrial .ds-modal__sub{
  font-size: var(--fs-sm);
  color: rgba(255,255,255,.65);
  margin: 0;
}
.ds-modal__head-industrial .ds-modal__close{
  color: rgba(255,255,255,.65);
  flex-shrink: 0;
}
.ds-modal__head-industrial .ds-modal__close:hover{
  background: rgba(255,255,255,.12);
  color: #fff;
}


/* ---- TIMELINE de workflow (línea horizontal con pasos) ---- */
.ds-workflow{
  display: flex; align-items: center;
  background: var(--bg-surface-2);
  padding: var(--sp-4) var(--sp-6);
  border-bottom: 1px solid var(--border-default);
  gap: 4px;
  overflow-x: auto;
}
.ds-workflow__step{
  display: flex; align-items: center; gap: var(--sp-2);
  flex: 1;
  min-width: 120px;
  position: relative;
}
.ds-workflow__step + .ds-workflow__step::before{
  content: ""; position: absolute;
  left: -2px; top: 50%; transform: translateY(-50%);
  width: 12px; height: 2px;
  background: var(--border-strong);
}
.ds-workflow__dot{
  width: 26px; height: 26px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bg-surface);
  border: 2px solid var(--border-strong);
  color: var(--fg-muted);
  font-size: 12px;
  flex-shrink: 0;
  transition: all var(--dur-fast) var(--ease-out);
}
.ds-workflow__step--done .ds-workflow__dot{
  background: var(--color-success);
  border-color: var(--color-success);
  color: #fff;
}
.ds-workflow__step--current .ds-workflow__dot{
  background: var(--k-yellow);
  border-color: var(--k-yellow);
  color: var(--k-black);
  box-shadow: 0 0 0 4px rgba(255,204,0,.20);
  animation: ds-pulse 2s var(--ease-in-out) infinite;
}
.ds-workflow__step--current + .ds-workflow__step::before,
.ds-workflow__step + .ds-workflow__step--current::before{ background: var(--border-strong); }
.ds-workflow__step--done + .ds-workflow__step::before{ background: var(--color-success); }

.ds-workflow__label{
  font-family: var(--font-cond);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-muted);
  font-weight: var(--fw-bold);
  white-space: nowrap;
}
.ds-workflow__step--done .ds-workflow__label,
.ds-workflow__step--current .ds-workflow__label{
  color: var(--fg-strong);
}


/* ---- BODY scrollable en 2 columnas ---- */
.ds-modal__body-scroll{
  overflow-y: auto;
  flex: 1;
}
.ds-modal__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 760px){ .ds-modal__grid{ grid-template-columns: 1fr; } }
.ds-modal__col{
  padding: var(--sp-5) var(--sp-6);
}
.ds-modal__col + .ds-modal__col{
  border-left: 1px solid var(--border-default);
}
@media (max-width: 760px){
  .ds-modal__col + .ds-modal__col{
    border-left: 0;
    border-top: 1px solid var(--border-default);
  }
}
.ds-modal__col-title{
  font-family: var(--font-cond);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--fg-muted);
  margin: 0 0 var(--sp-3);
  font-weight: var(--fw-bold);
  display: flex; align-items: center; gap: 6px;
}
.ds-modal__col-title i{ color: var(--k-petrol); font-size: 14px; }


/* ---- EQUIPMENT CARD (tarjeta destacada del equipo) ---- */
.ds-equipment-card{
  background: linear-gradient(135deg,
              var(--bg-surface-2) 0%,
              var(--bg-surface) 100%);
  border: 1px solid var(--border-default);
  border-left: 4px solid var(--k-yellow);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
  display: flex; gap: var(--sp-4);
  position: relative; overflow: hidden;
}
.ds-equipment-card::after{
  content: "";
  position: absolute; right: -20px; bottom: -20px;
  width: 100px; height: 100px;
  background: repeating-linear-gradient(45deg,
              currentColor 0 1px, transparent 1px 12px);
  color: var(--border-default);
  opacity: .5; pointer-events: none;
}
.ds-equipment-card__icon{
  width: 56px; height: 56px;
  border-radius: var(--radius-sm);
  background: var(--k-black);
  color: var(--k-yellow);
  display: grid; place-items: center;
  font-size: 28px;
  flex-shrink: 0;
}
.ds-equipment-card__body{ flex: 1; min-width: 0; }
.ds-equipment-card__id{
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--fg-muted);
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
}
.ds-equipment-card__name{
  font-family: var(--font-cond);
  font-size: var(--fs-lg);
  font-weight: var(--fw-black);
  text-transform: uppercase;
  color: var(--fg-strong);
  margin: 2px 0;
  line-height: 1.1;
}
.ds-equipment-card__client{
  font-size: var(--fs-sm);
  color: var(--fg-muted);
}


/* ---- DATA GRID (clave/valor en grid 2 cols) ---- */
.ds-data-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
}
.ds-data-grid__row{ display: grid; gap: 2px; min-width: 0; }
.ds-data-grid__label{
  font-family: var(--font-cond);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-muted);
  font-weight: var(--fw-bold);
}
.ds-data-grid__value{
  font-size: var(--fs-base);
  color: var(--fg-strong);
  font-weight: var(--fw-semibold);
}
.ds-data-grid__value--accent{ color: var(--color-warning); }
.ds-data-grid__value--mono{ font-family: var(--font-mono); font-size: var(--fs-sm); }


/* ---- PARTS LIST (lista de repuestos con cantidad) ---- */
.ds-parts-list{
  display: flex; flex-direction: column; gap: 6px;
}
.ds-parts-list__item{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-3);
  padding: 10px 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  color: var(--fg-default);
  transition: border-color var(--dur-fast);
}
.ds-parts-list__item:hover{ border-color: var(--k-yellow); }
.ds-parts-list__icon{
  width: 28px; height: 28px;
  border-radius: var(--radius-xs);
  background: var(--bg-surface-3);
  color: var(--k-petrol);
  display: grid; place-items: center;
  font-size: 14px;
}
.ds-parts-list__sku{
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--fg-muted);
  display: block;
  margin-top: 2px;
}
.ds-parts-list__qty{
  font-family: var(--font-cond);
  font-size: var(--fs-md);
  font-weight: var(--fw-black);
  background: var(--k-yellow);
  color: var(--k-black);
  padding: 4px 10px;
  border-radius: var(--radius-xs);
  min-width: 44px;
  text-align: center;
}


/* ---- CHECKLIST (verificaciones previas) ---- */
.ds-checklist{
  display: flex; flex-direction: column; gap: 4px;
  margin-bottom: var(--sp-4);
}
.ds-checklist__item{
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  color: var(--fg-default);
  cursor: pointer;
  transition: background var(--dur-fast);
}
.ds-checklist__item:hover{ background: var(--bg-surface-2); }
.ds-checklist__item input[type="checkbox"]{
  width: 18px; height: 18px;
  appearance: none;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-xs);
  background: var(--bg-surface);
  display: grid; place-items: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--dur-fast);
}
.ds-checklist__item input[type="checkbox"]:checked{
  background: var(--color-success);
  border-color: var(--color-success);
}
.ds-checklist__item input[type="checkbox"]:checked::after{
  content: "✓"; color: #fff; font-size: 12px; font-weight: var(--fw-bold);
}
.ds-checklist__item input[type="checkbox"]:checked + .ds-checklist__label{
  text-decoration: line-through;
  color: var(--fg-muted);
}


/* ---- FOOTER BAR (barra de acciones fija al pie del modal) ---- */
.ds-modal__footbar{
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-6);
  background: var(--bg-surface-2);
  border-top: 1px solid var(--border-default);
  flex-shrink: 0;
}
.ds-modal__footbar-meta{
  display: flex; flex-direction: column; gap: 2px;
  font-size: var(--fs-xs);
  color: var(--fg-muted);
}
.ds-modal__footbar-meta b{ color: var(--fg-strong); }
.ds-modal__footbar-actions{
  display: flex; gap: var(--sp-2); flex-wrap: wrap;
}

/* Variantes soft de botón usadas en el modal */
.ds-btn--soft-info{
  background: var(--color-info-bg);
  color: var(--color-info);
  border: 1px solid var(--color-info-bd);
}
.ds-btn--soft-info:hover{
  background: var(--color-info);
  color: #fff;
}
.ds-btn--soft-danger{
  background: var(--color-error-bg);
  color: var(--color-error);
  border: 1px solid var(--color-error-bd);
}
.ds-btn--soft-danger:hover{
  background: var(--color-error);
  color: #fff;
}


/* ============================================================
   8c. PAGINATION (paginación de tablas y listados)
   ============================================================ */
.ds-pagination{
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-top: 0;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.ds-pagination__info{
  font-size: var(--fs-sm);
  color: var(--fg-muted);
}
.ds-pagination__info b{ color: var(--fg-strong); font-weight: var(--fw-bold); }

.ds-pagination__pages{
  display: flex; align-items: center; gap: 4px;
}
.ds-page-btn{
  min-width: 34px; height: 34px;
  padding: 0 10px;
  display: inline-grid; place-items: center;
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--fg-default);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.ds-page-btn:hover:not(:disabled):not(.is-active){
  background: var(--bg-surface-3);
  border-color: var(--border-strong);
  transform: translateY(-1px);
}
.ds-page-btn.is-active{
  background: var(--k-yellow);
  border-color: var(--k-yellow);
  color: var(--k-black);
  box-shadow: 0 4px 10px rgba(255,204,0,.3);
}
.ds-page-btn:disabled{
  opacity: .4; cursor: not-allowed;
}
.ds-page-btn i{ font-size: 14px; }
.ds-page-btn--ellipsis{
  border: 0;
  background: transparent;
  cursor: default;
  color: var(--fg-muted);
}

/* Selector "filas por página" */
.ds-pagination__size{
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-sm); color: var(--fg-muted);
}
.ds-pagination__size select{
  padding: 6px 28px 6px 10px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-surface) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23363C42' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 8px center;
  appearance: none;
  font-size: var(--fs-sm);
  color: var(--fg-default);
  cursor: pointer;
}

/* Wrapper de tabla con scroll vertical Y horizontal */
.ds-table-wrap--scroll{
  max-height: 480px;
  overflow: auto;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.ds-table-wrap--scroll .ds-table thead th{
  position: sticky; top: 0;
  z-index: 2;
  /* Repintamos el background para que el header no quede transparente */
  background: var(--bg-surface-2);
  box-shadow: inset 0 -1px 0 var(--border-default);
}


/* ============================================================
   9. ALERTS  (inline / banners — el toast vive en sección 21)
   ============================================================ */
.ds-alert{
  display:flex; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border:1px solid;
  border-left-width: 4px;
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  align-items:flex-start;
}
.ds-alert__icon{
  flex:0 0 32px; width:32px; height:32px;
  border-radius:50%;
  display:grid; place-items:center;
  color:#fff;
  font-weight: var(--fw-black);
  font-size: 16px;
}
.ds-alert__title{ font-weight: var(--fw-bold); color: var(--fg-strong); font-size: var(--fs-base) }
.ds-alert__msg{ font-size: var(--fs-sm); color: var(--fg-default); margin-top: 2px }
.ds-alert__close{
  margin-left:auto; background:transparent; border:0; cursor:pointer;
  color: var(--fg-muted); padding: 2px;
}

.ds-alert--success{ background: var(--color-success-bg); border-color: var(--color-success-bd) }
.ds-alert--success .ds-alert__icon{ background: var(--color-success) }
.ds-alert--warning{ background: var(--color-warning-bg); border-color: var(--color-warning-bd) }
.ds-alert--warning .ds-alert__icon{ background: var(--color-warning) }
.ds-alert--error  { background: var(--color-error-bg);   border-color: var(--color-error-bd) }
.ds-alert--error   .ds-alert__icon{ background: var(--color-error) }
.ds-alert--info   { background: var(--color-info-bg);    border-color: var(--color-info-bd) }
.ds-alert--info    .ds-alert__icon{ background: var(--color-info) }


/* ============================================================
   10. GEAR LOADERS — engranaje VIVO + glow + gradiente
   ------------------------------------------------------------
   Cumple requisito CRÍTICO: TODOS los loaders del sistema son
   tipo engranaje (no spinners genéricos).
   - Tamaños: sm, md (default), lg
   - Versiones: claro, oscuro
   - Colores: amarillo, petróleo, dual (giro contrario)
   ============================================================ */
.ds-gear{
  --_gear-color : var(--k-yellow);
  --_gear-glow  : var(--glow-yellow);
  --_gear-size  : 56px;
  --_gear-speed : 2.4s;

  display: inline-block;
  width: var(--_gear-size); height: var(--_gear-size);
  position: relative;
  flex-shrink: 0;
}
.ds-gear svg{
  width: 100%; height: 100%;
  color: var(--_gear-color);
  filter: drop-shadow(var(--_gear-glow));
  animation: ds-spin var(--_gear-speed) linear infinite;
}

/* Tamaños */
.ds-gear--sm{ --_gear-size: 32px; }
.ds-gear--lg{ --_gear-size: 96px; }
.ds-gear--xl{ --_gear-size: 140px; }

/* Variantes de color */
.ds-gear--petrol{
  --_gear-color: var(--k-petrol);
  --_gear-glow : var(--glow-petrol);
}
.ds-gear--dark svg{
  filter: drop-shadow(0 0 18px rgba(255,204,0,.35));
}

/* GEAR DUAL — dos engranajes engranados girando en sentido opuesto.
   Clase wrapper .ds-gear-dual con dos hijos .ds-gear-dual__a y __b */
.ds-gear-dual{
  position: relative;
  display: inline-block;
  width: 110px; height: 90px;
}
.ds-gear-dual--lg{ width: 180px; height: 140px; }
.ds-gear-dual--sm{ width: 70px; height: 56px; }

.ds-gear-dual__a,
.ds-gear-dual__b{
  position: absolute;
  display: grid; place-items: center;
}
.ds-gear-dual__a{
  width: 64%; height: 80%;
  top: 0; left: 0;
}
.ds-gear-dual__b{
  width: 50%; height: 64%;
  bottom: 0; right: 0;
}
.ds-gear-dual__a svg,
.ds-gear-dual__b svg{
  width: 100%; height: 100%;
  filter: drop-shadow(var(--glow-yellow));
  animation: ds-spin 2.6s linear infinite;
}
.ds-gear-dual__a svg{ color: var(--k-yellow); }
.ds-gear-dual__b svg{
  color: var(--k-petrol);
  filter: drop-shadow(var(--glow-petrol));
  animation: ds-spin-rev 2s linear infinite;
}

/* GEAR LOADER OVERLAY (pantalla completa) */
.ds-loader-overlay{
  position: fixed; inset: 0;
  background: rgba(11,13,16,.65);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  z-index: var(--z-overlay);
  display: none;
  align-items: center; justify-content: center;
}
.ds-loader-overlay.is-open{ display: flex; animation: ds-fade-in var(--dur-base) var(--ease-out); }

.ds-loader-overlay__panel{
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--sp-8) var(--sp-10);
  display: flex; flex-direction: column; align-items: center;
  gap: var(--sp-4);
  box-shadow: var(--shadow-lg);
  text-align: center;
}
.ds-loader-overlay__title{
  font-family: var(--font-cond);
  font-weight: var(--fw-black);
  font-size: var(--fs-xl);
  text-transform: uppercase;
  color: var(--fg-strong);
  margin: 0;
}
.ds-loader-overlay__msg{
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  margin: 0;
}

/* Spinner clásico legacy — mantenido por compatibilidad */
.ds-spinner{
  display:inline-block;
  width: 32px; height: 32px;
  border: 3px solid var(--border-strong);
  border-top-color: var(--k-yellow);
  border-radius: 50%;
  animation: ds-spin .8s linear infinite;
}
.ds-spinner--sm  { width:18px; height:18px; border-width:2px }
.ds-spinner--lg  { width:48px; height:48px; border-width:4px }
.ds-spinner--dark{ border-color: rgba(255,255,255,.18); border-top-color: var(--k-yellow) }


/* ============================================================
   11. PROGRESS — lineal con TEXTURA INDUSTRIAL + ENERGÍA
   ------------------------------------------------------------
   - Gradiente petróleo→amarillo
   - Textura técnica (líneas) animada
   - Brillo "energy" recorriendo la barra
   - Determinate / Indeterminate
   - Circular (legacy, mantenida)
   ============================================================ */
.ds-progress{
  position: relative;
  width: 100%;
  height: 14px;
  background: var(--bg-surface-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.ds-progress--sm{ height: 8px; }
.ds-progress--lg{ height: 18px; }

.ds-progress__bar{
  height: 100%;
  border-radius: inherit;
  position: relative;
  overflow: hidden;
  /* gradiente principal: petróleo → amarillo */
  background: linear-gradient(90deg,
              var(--k-petrol) 0%,
              var(--k-petrol-500) 35%,
              var(--k-yellow) 100%);
  transition: width var(--dur-slow) var(--ease-out);
}

/* Textura técnica diagonal (líneas industriales animadas) */
.ds-progress__bar::before{
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255,255,255,.20) 0 8px,
    transparent 8px 18px
  );
  animation: ds-progress-stripes 1.2s linear infinite;
}
@keyframes ds-progress-stripes{
  from{ background-position: 0 0 }
  to  { background-position: 36px 0 }
}

/* Brillo "energía en movimiento" */
.ds-progress__bar::after{
  content:"";
  position: absolute; top: 0; bottom: 0;
  left: -30%; width: 30%;
  background: linear-gradient(90deg,
              transparent,
              rgba(255,255,255,.55),
              transparent);
  animation: ds-progress-shine 2s ease-in-out infinite;
}
@keyframes ds-progress-shine{
  0%   { left: -30% }
  100% { left: 130% }
}

/* Variante simple (sin brillo) */
.ds-progress--plain .ds-progress__bar::before,
.ds-progress--plain .ds-progress__bar::after{ display: none; }

/* Indeterminado */
.ds-progress--indeterminate .ds-progress__bar{
  width: 35% !important;
  animation: ds-progress-indet 1.4s var(--ease-in-out) infinite;
}
@keyframes ds-progress-indet{
  0%  { transform: translateX(-100%) }
  60% { transform: translateX(220%)  }
  100%{ transform: translateX(220%)  }
}

/* Meta (label + porcentaje) */
.ds-progress__meta{
  display: flex; justify-content: space-between;
  font-size: var(--fs-xs); color: var(--fg-muted);
  margin-bottom: 6px;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

/* Circular (mantenida por compatibilidad) */
.ds-progress-circ{
  --p: 50;
  --size: 80px;
  width: var(--size); height: var(--size);
  border-radius:50%;
  background:
    conic-gradient(var(--k-yellow) calc(var(--p) * 1%), var(--bg-surface-3) 0);
  display:grid; place-items:center;
  position:relative;
}
.ds-progress-circ::before{
  content:""; position:absolute; inset:8px;
  background: var(--bg-surface);
  border-radius:50%;
}
.ds-progress-circ__label{
  position:relative;
  font-family: var(--font-cond);
  font-weight: var(--fw-black);
  font-size: var(--fs-xl);
  color: var(--fg-strong);
}


/* ============================================================
   12. CAROUSEL (ligero, compatible con Bootstrap 5)
   ============================================================ */
.ds-carousel{
  display:flex; gap: var(--sp-4);
  overflow-x:auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: var(--sp-2) var(--sp-1);
  scrollbar-width: thin;
}
.ds-carousel__slide{
  flex: 0 0 auto;
  width: 80%;
  scroll-snap-align: center;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-surface);
  border:1px solid var(--border-default);
}
@media (min-width: 768px){ .ds-carousel__slide{ width: 45% } }
@media (min-width: 1280px){ .ds-carousel__slide{ width: 32% } }

/* Bootstrap 5 carousel — overrides KAESER */
.carousel-control-prev-icon,
.carousel-control-next-icon{
  background-color: var(--k-yellow);
  border-radius: var(--radius-pill);
  background-size: 50% 50%;
}
.carousel-indicators [data-bs-target]{
  background-color: var(--k-yellow) !important;
}


/* ============================================================
   13. CHARTS — contenedor y leyenda estandarizados
   ============================================================ */
.ds-chart{
  background: var(--bg-surface);
  border:1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  position:relative;
}
.ds-chart__head{
  display:flex; justify-content:space-between; align-items:flex-start;
  margin-bottom: var(--sp-3);
  gap: var(--sp-2);
}
.ds-chart__title{
  font-family: var(--font-cond);
  font-size: var(--fs-md);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  margin:0;
  color: var(--fg-strong);
}
.ds-chart__sub{ font-size: var(--fs-xs); color: var(--fg-muted); margin-top: 2px }
.ds-chart__canvas{ position: relative; height: 280px }
/* Variante "alta" — para charts que necesitan más espacio
   vertical (treemap, gráficos densos). En móvil se reduce
   automáticamente vía las queries de la sección 24. */
.ds-chart__canvas--tall{ height: 420px; }

/* Forzamos que el <canvas> llene su contenedor.
   Por defecto un <canvas> sin atributos width/height tiene
   tamaño intrínseco 300×150 px, lo que rompe los charts
   manuales (como el treemap) que miden clientWidth/Height
   antes de pintar. Chart.js setea el tamaño internamente,
   así que esta regla no afecta a sus canvases. */
.ds-chart__canvas > canvas{
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.ds-legend{ display:flex; flex-wrap:wrap; gap: var(--sp-3); margin-top: var(--sp-3) }
.ds-legend__item{
  display:inline-flex; align-items:center; gap: 6px;
  font-size: var(--fs-sm); color: var(--fg-default);
}
.ds-legend__sw{
  width: 10px; height:10px; border-radius: 2px;
  background: var(--k-yellow);
}


/* ============================================================
   14. TOOLTIP
   ============================================================ */
.ds-tooltip{ position:relative; display:inline-block }
.ds-tooltip::after{
  content: attr(data-tooltip);
  position:absolute; bottom: calc(100% + 6px); left:50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--k-black); color: #fff;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs); white-space: nowrap;
  opacity:0; pointer-events:none;
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
  z-index: var(--z-toast);
}
.ds-tooltip:hover::after,.ds-tooltip:focus-within::after{
  opacity:1; transform: translateX(-50%) translateY(0);
}


/* ============================================================
   15. TABS · v3.2 — con iconos, badge, estado disabled y panels
   ============================================================ */
.ds-tabs{
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border-default);
  flex-wrap: wrap;
  position: relative;
}
.ds-tab{
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 12px 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--fg-muted);
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  transition: color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
  position: relative;
  border-top-left-radius: var(--radius-sm);
  border-top-right-radius: var(--radius-sm);
}
.ds-tab i{ font-size: 16px; opacity: .85; }
.ds-tab:hover:not(:disabled):not(.is-disabled){
  color: var(--fg-strong);
  background: var(--bg-surface-3);
}
.ds-tab.is-active{
  color: var(--fg-strong);
  border-bottom-color: var(--k-yellow);
  font-weight: var(--fw-bold);
}
.ds-tab.is-active i{ opacity: 1; color: var(--k-petrol); }
.ds-tab:disabled,
.ds-tab.is-disabled{
  color: var(--fg-subtle);
  cursor: not-allowed;
  opacity: .55;
  pointer-events: none;
}
.ds-tab:focus-visible{
  outline: 2px solid var(--k-yellow);
  outline-offset: -2px;
}
.ds-tab__count{
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px;
  padding: 0 6px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--fg-strong);
  background: var(--bg-surface-3);
  border-radius: var(--radius-pill);
}
.ds-tab.is-active .ds-tab__count{
  background: var(--k-yellow);
  color: var(--k-black);
}

/* Variante "pills" (botones redondeados) */
.ds-tabs--pills{
  border-bottom: 0;
  gap: var(--sp-2);
  padding: 4px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  display: inline-flex;
  width: max-content;
}
.ds-tabs--pills .ds-tab{
  border-bottom: 0;
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  margin-bottom: 0;
}
.ds-tabs--pills .ds-tab.is-active{
  background: var(--bg-surface);
  color: var(--fg-strong);
  box-shadow: var(--shadow-sm);
  border-bottom: 0;
}

/* Tab panels (contenido) */
.ds-tab-panel{ display: none; padding: var(--sp-5) 0; }
.ds-tab-panel.is-active{ display: block; animation: ds-fade-in var(--dur-base) var(--ease-out); }


/* ============================================================
   16. BREADCRUMB
   ============================================================ */
.ds-breadcrumb{
  display:flex; flex-wrap:wrap; align-items:center; gap: 6px;
  font-size: var(--fs-sm); color: var(--fg-muted);
}
.ds-breadcrumb a{ color: var(--fg-muted); text-decoration:none }
.ds-breadcrumb a:hover{ color: var(--fg-strong) }
.ds-breadcrumb__sep{ opacity:.5 }
.ds-breadcrumb__current{ color: var(--fg-strong); font-weight: var(--fw-bold) }


/* ============================================================
   17. EMPTY STATE — reutilizable (nodata / inicial / error)
   ------------------------------------------------------------
   Componente unificado: reemplaza el "sin resultados" plano.
   ============================================================ */
.ds-empty{
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  gap: var(--sp-3);
  padding: var(--sp-9) var(--sp-6);
  background: var(--bg-surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  color: var(--fg-muted);
}
.ds-empty__icon{
  position: relative;
  width: 76px; height: 76px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--k-yellow-100);
  color: var(--k-petrol);
  font-size: 32px;
  margin-bottom: var(--sp-2);
}
.ds-empty__icon::after{
  /* anillo decorativo girando lentamente */
  content:"";
  position: absolute; inset: -8px;
  border: 1px dashed var(--border-strong);
  border-radius: 50%;
  animation: ds-spin 18s linear infinite;
}
.ds-empty--brand .ds-empty__icon{
  background: var(--k-yellow); color: var(--k-black);
  box-shadow: var(--glow-yellow);
}
.ds-empty--error .ds-empty__icon{
  background: var(--color-error-bg); color: var(--color-error);
}
.ds-empty--info .ds-empty__icon{
  background: var(--color-info-bg); color: var(--color-info);
}
[data-theme="dark"] .ds-empty__icon{
  background: rgba(255,204,0,.12); color: var(--k-yellow);
}

.ds-empty__title{
  font-family: var(--font-cond);
  font-size: var(--fs-xl);
  text-transform: uppercase;
  color: var(--fg-strong);
  margin: 0;
}
.ds-empty__msg{
  color: var(--fg-muted);
  max-width: 44ch;
  margin: 0;
  font-size: var(--fs-sm);
}


/* ============================================================
   18. EMAIL TEMPLATE — estilos reutilizables (legacy demo)
   ============================================================ */
.ds-email{
  max-width: 600px; margin: 0 auto;
  background: #FFFFFF; color: #1A1F25;
  border:1px solid #E6E8EB;
  border-radius: 8px;
  overflow:hidden;
  font-family: 'Helvetica Neue', Arial, sans-serif;
}
.ds-email__header{
  background: #111418; color: #fff;
  padding: 18px 24px;
  display:flex; align-items:center; justify-content:space-between;
}
.ds-email__brand{
  font-family: 'Arial Narrow', Impact, sans-serif;
  font-weight: 900; font-size: 18px;
  letter-spacing: .14em; text-transform: uppercase;
}
.ds-email__brand span{ color:#FFCC00 }
.ds-email__hero{
  background: linear-gradient(135deg, #2A2F36, #0B0D10);
  color:#fff; padding: 32px 24px;
  border-bottom: 4px solid #FFCC00;
}
.ds-email__hero h1{
  font-family:'Arial Narrow', Impact, sans-serif;
  font-size: 32px; line-height:1.05; margin: 0 0 8px;
  text-transform: uppercase;
}
.ds-email__hero p{ margin:0; color:#DEE2E6; font-size: 14px }
.ds-email__body{ padding: 24px; font-size: 14px; line-height: 1.65; color: #4A5158 }
.ds-email__cta{ text-align:center; padding: 0 24px 28px }
.ds-email__cta a{
  display:inline-block;
  background: #FFCC00; color: #111418;
  font-weight: 800; padding: 14px 28px;
  text-decoration:none; border-radius: 6px;
  text-transform: uppercase; letter-spacing: .08em; font-size: 13px;
}
.ds-email__footer{
  background: #F5F6F7; padding: 16px 24px;
  font-size: 11px; color:#6B7280; text-align:center;
}


/* ============================================================
   19. SKELETON LOADER
   ============================================================ */
.ds-skeleton{
  display:block;
  background: linear-gradient(90deg,
              var(--bg-surface-3) 0%,
              var(--border-subtle) 50%,
              var(--bg-surface-3) 100%);
  background-size: 200% 100%;
  border-radius: var(--radius-sm);
  animation: ds-skeleton 1.4s linear infinite;
  height: 14px; width: 100%;
}
@keyframes ds-skeleton{
  0%  { background-position: 200% 0 }
  100%{ background-position: -200% 0 }
}


/* ============================================================
   20. DIVIDER INDUSTRIAL
   ============================================================ */
.ds-divider{
  height: 1px;
  background: var(--border-default);
  margin: var(--sp-6) 0;
  border: 0;
}
.ds-divider--industrial{
  height: 8px;
  background-image: repeating-linear-gradient(
    -45deg,
    var(--k-yellow) 0 8px,
    var(--k-black) 8px 16px
  );
  border-radius: var(--radius-xs);
  opacity: .9;
}


/* ============================================================
   21. TOAST — esquina SUPERIOR DERECHA (requisito)
   ------------------------------------------------------------
   Animación fluida de entrada/salida + auto-dismiss visual
   con barra de progreso. Cuatro variantes semánticas.
   ============================================================ */
.ds-toast-area{
  position: fixed;
  top: var(--sp-5);              /* ARRIBA */
  right: var(--sp-5);            /* DERECHA */
  display: flex; flex-direction: column;
  gap: var(--sp-2);
  z-index: var(--z-toast);
  max-width: 380px;
  width: calc(100% - var(--sp-8));
  pointer-events: none;
}

.ds-toast{
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: var(--sp-3);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-left: 4px solid var(--color-info);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-3) var(--sp-4);
  position: relative;
  overflow: hidden;
  animation: ds-toast-in var(--dur-slow) var(--ease-spring);
}
.ds-toast.is-leaving{
  animation: ds-toast-out var(--dur-base) var(--ease-out) forwards;
}

@keyframes ds-toast-in{
  from{ opacity: 0; transform: translateX(40px) scale(.96) }
  to  { opacity: 1; transform: translateX(0) scale(1) }
}
@keyframes ds-toast-out{
  to  { opacity: 0; transform: translateX(40px) scale(.96) }
}

.ds-toast__icon{
  width: 32px; height: 32px; flex: 0 0 32px;
  border-radius: var(--radius-sm);
  display: grid; place-items: center;
  font-size: 16px;
  background: var(--color-info-bg);
  color: var(--color-info);
}
.ds-toast__body{ flex: 1; min-width: 0; }
.ds-toast__title{
  font-weight: var(--fw-bold);
  font-size: var(--fs-base);
  color: var(--fg-strong);
  margin: 0 0 2px;
}
.ds-toast__msg{
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  margin: 0;
  line-height: 1.45;
}
.ds-toast__close{
  background: none; border: 0; cursor: pointer;
  color: var(--fg-muted);
  width: 24px; height: 24px;
  border-radius: var(--radius-xs);
  display: grid; place-items: center;
  margin-left: auto;
  transition: background var(--dur-fast);
}
.ds-toast__close:hover{ background: var(--bg-surface-3); color: var(--fg-strong); }

/* Variantes semánticas */
.ds-toast--success{ border-left-color: var(--color-success); }
.ds-toast--success .ds-toast__icon{ background: var(--color-success-bg); color: var(--color-success); }
.ds-toast--error{ border-left-color: var(--color-error); }
.ds-toast--error .ds-toast__icon{ background: var(--color-error-bg); color: var(--color-error); }
.ds-toast--warning{ border-left-color: var(--color-warning); }
.ds-toast--warning .ds-toast__icon{ background: var(--color-warning-bg); color: var(--color-warning); }
.ds-toast--info{ border-left-color: var(--color-info); }
.ds-toast--info .ds-toast__icon{ background: var(--color-info-bg); color: var(--color-info); }

/* Barra de progreso del auto-dismiss */
.ds-toast__progress{
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px;
  background: currentColor;
  opacity: .4;
  transform-origin: left;
  animation: ds-toast-progress var(--ds-toast-dur, 4s) linear forwards;
}
.ds-toast--success .ds-toast__progress{ color: var(--color-success); }
.ds-toast--error   .ds-toast__progress{ color: var(--color-error); }
.ds-toast--warning .ds-toast__progress{ color: var(--color-warning); }
.ds-toast--info    .ds-toast__progress{ color: var(--color-info); }
@keyframes ds-toast-progress{ from { transform: scaleX(1); } to { transform: scaleX(0); } }


/* ============================================================
   22. ERROR PAGES (404 / 403) — estilo industrial fuerte
   ------------------------------------------------------------
   Layout centrado con número grande, icono dominante y CTA.
   Compatible con clases legacy k-error-* que usaban las
   versiones antiguas para evitar romper enlaces.
   ============================================================ */
.ds-error-page,
.k-error-page{
  position: relative;
  width: 100%;
  max-width: 720px;
  text-align: center;
  padding: var(--sp-9) var(--sp-7);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.ds-error-page::before,
.k-error-page::before{
  /* Banda industrial superior */
  content:"";
  position: absolute; top: 0; left: 0; right: 0; height: 6px;
  background: repeating-linear-gradient(-45deg,
    var(--k-yellow) 0 14px,
    var(--k-black) 14px 28px);
}

.ds-error-page__icon,
.k-error-icon{
  width: 120px; height: 120px;
  margin: 0 auto var(--sp-4);
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--k-yellow-100);
  color: var(--k-petrol);
  font-size: 56px;
  position: relative;
}
.ds-error-page__icon::after,
.k-error-icon::after{
  content:"";
  position: absolute; inset: -10px;
  border: 2px dashed var(--border-strong);
  border-radius: 50%;
  animation: ds-spin 18s linear infinite;
}
[data-theme="dark"] .ds-error-page__icon,
[data-theme="dark"] .k-error-icon{
  background: rgba(255,204,0,.10); color: var(--k-yellow);
}

.ds-error-page__code,
.k-error-code{
  font-family: var(--font-cond);
  font-size: 96px;
  font-weight: var(--fw-black);
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--fg-strong);
  margin: 0;
  background: linear-gradient(180deg, var(--k-yellow) 0%, var(--k-petrol) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ds-error-page__title,
.k-error-page h1{
  font-size: var(--fs-3xl);
  margin: var(--sp-2) 0 var(--sp-2);
  color: var(--fg-strong);
}
.ds-error-page__msg,
.k-text-secondary{
  color: var(--fg-muted);
  font-size: var(--fs-md);
  max-width: 48ch;
  margin: 0 auto var(--sp-6);
}

.ds-error-page__actions{
  display: inline-flex; gap: var(--sp-3); flex-wrap: wrap; justify-content: center;
}

/* Helpers legacy (k-btn) — alias a ds-btn */
.k-btn{
  display:inline-flex; align-items:center; gap: var(--sp-2);
  padding: 10px 18px;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  border-radius: var(--radius-md);
  border:1px solid transparent;
  cursor:pointer; text-decoration:none;
  transition: all var(--dur-fast);
}
.k-btn-primary{ background: var(--k-yellow); color: var(--k-black); }
.k-btn-primary:hover{ background: var(--k-yellow-700); transform: translateY(-1px); box-shadow: var(--shadow-md); text-decoration:none; }
.k-btn-outline{ background: transparent; color: var(--fg-strong); border-color: var(--border-strong); }
.k-btn-outline:hover{ background: var(--fg-strong); color: #fff; text-decoration: none; }
[data-theme="dark"] .k-btn-outline{ color: var(--k-yellow); border-color: var(--k-yellow); }
[data-theme="dark"] .k-btn-outline:hover{ background: var(--k-yellow); color: var(--k-black); }

.k-fade-in{ animation: ds-fade-in var(--dur-slow) var(--ease-out); }


/* ============================================================
   23. BOOTSTRAP 5 BRIDGE
   ------------------------------------------------------------
   Si el proyecto carga Bootstrap 5, estas reglas alinean la
   apariencia de sus componentes principales con KAESER, sin
   romper su funcionalidad.
   ============================================================ */
.btn-primary{
  background-color: var(--k-yellow) !important;
  border-color   : var(--k-yellow) !important;
  color          : var(--k-black)  !important;
  font-weight    : var(--fw-bold)  !important;
}
.btn-primary:hover,.btn-primary:focus{
  background-color: var(--k-yellow-700) !important;
  border-color   : var(--k-yellow-700) !important;
  color          : var(--k-black)  !important;
}
.btn-secondary{
  background-color: var(--k-black) !important;
  border-color   : var(--k-black) !important;
}
.form-control:focus{
  border-color: var(--k-yellow) !important;
  box-shadow: var(--shadow-focus-yellow) !important;
}
.bg-primary{ background-color: var(--k-yellow) !important; color: var(--k-black) !important }
.text-primary{ color: var(--k-petrol) !important }
.border-primary{ border-color: var(--k-yellow) !important }


/* ============================================================
   24. RESPONSIVE — ajustes finos por breakpoint
   ------------------------------------------------------------
   Breakpoints del DS:
     · ≤1023 px → tablet (sidebar pasa a drawer — ya en layout.css)
     · ≤768 px  → móvil grande (KPIs 2-col, cards 1-col, etc.)
     · ≤640 px  → móvil estándar (todos los grids 1-col, modal pleno,
                  filters apilados, footer bar vertical)
     · ≤480 px  → móvil pequeño (paddings reducidos, tipografía menor)
   ============================================================ */

/* ---------- TABLET ≤ 1023 px ---------- */
@media (max-width: 1023px){

  /* Header industrial del modal: badges + título se reorganizan */
  .ds-modal__head-industrial{
    flex-wrap: wrap;
    gap: var(--sp-3);
  }
  .ds-modal__head-industrial .ds-modal__title{ font-size: var(--fs-xl); }

  /* Workflow timeline: scroll horizontal con dots más compactos */
  .ds-workflow{ padding: var(--sp-3) var(--sp-4); }
  .ds-workflow__step{ min-width: 110px; }

  /* Page header del dashboard: acciones bajan a otra línea */
  .ds-page-header{ align-items: flex-start; }

  /* Filters bar: 2 cols en tablet */
  .ds-filters{ grid-template-columns: repeat(2, 1fr); }
}


/* ---------- MÓVIL GRANDE ≤ 768 px ---------- */
@media (max-width: 768px){

  /* ----- TIPOGRAFÍA: reduce h1/h2 grandes ----- */
  h1{ font-size: var(--fs-4xl); }
  h2{ font-size: var(--fs-3xl); }
  h3{ font-size: var(--fs-xl);  }
  .ds-display{ font-size: 44px; line-height: .95; }
  .ds-page-header__title{ font-size: var(--fs-3xl); }
  .ds-section__title{ font-size: var(--fs-2xl); }

  /* ----- CONTENIDO ----- */
  .ds-content{ padding: var(--sp-5) var(--sp-4); }
  .ds-section{ padding: var(--sp-7) 0; }

  /* ----- KPI cards ----- */
  .ds-kpi__value{ font-size: var(--fs-3xl); }

  /* ----- MODAL DE FORMULARIO ----- */
  .ds-modal-backdrop{ padding: var(--sp-2); align-items: flex-start; }
  .ds-modal--form{
    max-height: 96vh;
    margin-top: var(--sp-3);
  }
  .ds-modal__head-industrial{ padding: var(--sp-4); }
  .ds-modal__head-industrial .ds-modal__title{ font-size: var(--fs-lg); }
  .ds-modal__head-industrial .ds-modal__sub{ font-size: var(--fs-xs); }
  .ds-modal__col{ padding: var(--sp-4); }
  .ds-modal__col-title{ font-size: 10px; }

  /* Equipment card más compacta */
  .ds-equipment-card{ flex-direction: row; gap: var(--sp-3); }
  .ds-equipment-card__icon{ width: 44px; height: 44px; font-size: 22px; }
  .ds-equipment-card__name{ font-size: var(--fs-md); }

  /* Data grid en 1 col para no apretarse */
  .ds-data-grid{ grid-template-columns: 1fr; gap: var(--sp-3); }

  /* Footer bar: meta arriba + botones ocupando ancho abajo */
  .ds-modal__footbar{
    flex-direction: column;
    align-items: stretch;
    padding: var(--sp-3) var(--sp-4);
  }
  .ds-modal__footbar-actions{ width: 100%; justify-content: stretch; }
  .ds-modal__footbar-actions .ds-btn{ flex: 1; min-width: 0; }

  /* Modal estándar (no form) — full bleed */
  .ds-modal{ max-width: 100%; }

  /* ----- TOPBAR ----- */
  .ds-topbar{ padding: 0 var(--sp-4); gap: var(--sp-3); }
  .ds-topbar__title{ font-size: var(--fs-lg); }

  /* ----- TABLA + PAGINACIÓN ----- */
  .ds-table-wrap--scroll{ max-height: 360px; }
  .ds-table thead th, .ds-table tbody td{
    padding: 10px 8px;
    font-size: var(--fs-xs);
  }
  .ds-pagination{
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-3);
  }
  .ds-pagination__pages{ justify-content: center; flex-wrap: wrap; }
  .ds-pagination__info,
  .ds-pagination__size{ justify-content: center; text-align: center; }
  .ds-pagination__size{ display: flex; }

  /* ----- DASHBOARD CHARTS: 1 col ----- */
  .ds-dashboard__charts{ grid-template-columns: 1fr; }
  .ds-chart__canvas{ height: 240px; }
  .ds-chart__canvas--tall{ height: 380px; }   /* el treemap necesita
       más alto cuando va en 1 col vertical para que las cajas
       no se conviertan en franjas larguísimas */

  /* ----- FILTERS BAR ----- */
  .ds-filters{ grid-template-columns: 1fr; }
  .ds-filters__actions{ justify-content: stretch; flex-direction: column; }
  .ds-filters__actions .ds-btn{ width: 100%; }

  /* ----- TOASTS ----- */
  .ds-toast-area{
    top: var(--sp-3); right: var(--sp-3); left: var(--sp-3);
    width: auto; max-width: none;
  }
  .ds-toast{ padding: var(--sp-3); }

  /* ----- LOGIN: KPIs 3-col mantenidos ----- */
  .login-kpi-grid{ grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
  .login-kpi{ padding: var(--sp-3); }
  .login-kpi__value{ font-size: 22px; }

  /* ----- Footer del Design System ----- */
  .ds-footer__grid{ grid-template-columns: 1fr 1fr !important; }
  .ds-footer__bottom{ flex-direction: column; align-items: flex-start; }

  /* ----- Sidebar drawer ocupa más ancho ----- */
  .ds-sidebar{ width: min(var(--sidebar-w), 88vw); }
}


/* ---------- MÓVIL ESTÁNDAR ≤ 640 px ---------- */
@media (max-width: 640px){

  /* ----- BOTONES: tap targets mínimos 44 px (a11y) ----- */
  .ds-btn{ min-height: 44px; padding: 10px 16px; }
  .ds-btn--sm{ min-height: 36px; padding: 7px 12px; }
  .ds-btn--icon, .ds-icon-btn{ min-height: 40px; min-width: 40px; }

  /* ----- TARJETAS: padding reducido ----- */
  .ds-card{ padding: var(--sp-4); }
  .ds-kpi{ padding: var(--sp-4); }

  /* ----- MODAL: cubre toda la pantalla ----- */
  .ds-modal-backdrop{ padding: 0; align-items: stretch; }
  .ds-modal{
    max-width: 100%;
    border-radius: 0;
    height: 100vh; max-height: 100vh;
  }
  .ds-modal--form{
    margin-top: 0;
    border-radius: 0;
  }
  .ds-modal__head-industrial::before{ opacity: .5; }

  /* Workflow ultra compacto */
  .ds-workflow{ padding: var(--sp-3); gap: 0; }
  .ds-workflow__step{ min-width: 80px; gap: 4px; }
  .ds-workflow__label{ font-size: 9px; }
  .ds-workflow__dot{ width: 22px; height: 22px; font-size: 10px; }

  /* Parts list: SKU más pequeño */
  .ds-parts-list__item{ grid-template-columns: auto 1fr auto; gap: var(--sp-2); }
  .ds-parts-list__sku{ font-size: 10px; }

  /* Footer bar: botones full-width apilados */
  .ds-modal__footbar-actions{
    flex-direction: column;
    width: 100%;
  }
  .ds-modal__footbar-actions .ds-btn{ width: 100%; }
  .ds-modal__footbar-meta{ font-size: 10px; }

  /* ----- LOGIN: paneles compactos ----- */
  .ds-login__panel{ padding: var(--sp-6) var(--sp-4); }
  .ds-login__visual{ padding: var(--sp-6) var(--sp-4); min-height: 220px; }
  .ds-login__quote{ font-size: var(--fs-3xl); }
  .login-gear-bg{
    width: 280px !important; height: 280px !important;
    right: -60px !important; bottom: -60px !important;
  }
  .login-kpi-grid{ grid-template-columns: 1fr 1fr; }
  .login-kpi-grid > :last-child{ grid-column: 1 / -1; }

  /* ----- Drawer pleno ancho ----- */
  .ds-sidebar{ width: 100vw; }

  /* ----- Tabla scroll vertical más bajo ----- */
  .ds-table-wrap--scroll{ max-height: 320px; }

  /* ----- ERROR PAGES ----- */
  .ds-error-page,
  .k-error-page{
    padding: var(--sp-7) var(--sp-4);
    border-radius: var(--radius-lg);
  }
  .ds-error-page__code,
  .k-error-code{ font-size: 64px; }
  .ds-error-page__icon,
  .k-error-icon{ width: 84px; height: 84px; font-size: 38px; }

  /* ----- LOADER OVERLAY ----- */
  .ds-loader-overlay__panel{ padding: var(--sp-6); }

  /* ----- EMPTY STATE ----- */
  .ds-empty{ padding: var(--sp-6) var(--sp-4); }
  .ds-empty__icon{ width: 60px; height: 60px; font-size: 26px; }

  /* ----- Footer DS ----- */
  .ds-footer__grid{ grid-template-columns: 1fr !important; }
}


/* ---------- MÓVIL PEQUEÑO ≤ 480 px ---------- */
@media (max-width: 480px){

  .ds-display{ font-size: 36px; }
  .ds-page-header__title{ font-size: var(--fs-2xl); }
  .ds-section__title{ font-size: var(--fs-xl); padding-left: var(--sp-2); }

  .ds-kpi__value{ font-size: var(--fs-2xl); }
  .ds-kpi__icon{ width: 36px; height: 36px; font-size: 16px; }

  .ds-topbar{ padding: 0 var(--sp-3); }
  .ds-topbar__title{ font-size: var(--fs-md); }

  .ds-toast{ font-size: var(--fs-xs); }
  .ds-toast__title{ font-size: var(--fs-sm); }

  .ds-chart__canvas{ height: 200px; }
  .ds-chart__canvas--tall{ height: 320px; }

  .ds-modal__head-meta{ flex-wrap: wrap; gap: 6px; }
  .ds-equipment-card{ flex-direction: column; text-align: left; }

  .ds-page-btn{
    min-width: 32px; height: 32px;
    padding: 0 8px; font-size: var(--fs-xs);
  }
}


/* ============================================================
   25. PRINT — ocultamos chrome y dejamos solo contenido
   ------------------------------------------------------------
   Útil al imprimir cualquier vista del sistema desde el
   navegador (los documentos acta/pdf/manual ya tienen sus
   propios @page específicos en sus archivos).
   ============================================================ */
@media print{
  .ds-sidebar,
  .ds-drawer-overlay,
  .ds-topbar,
  .ds-toast-area,
  .ds-loader-overlay,
  .ds-sidebar__toggle,
  .ds-page-header__actions,
  .print-hide,
  .no-print{
    display: none !important;
  }
  .ds-modal-backdrop:not(.is-open){ display: none !important; }
  .ds-app{ grid-template-columns: 1fr; }
  .ds-content{ padding: 0; max-width: 100%; }
  .ds-card, .ds-kpi, .ds-chart, .ds-table-wrap{
    break-inside: avoid;
    box-shadow: none;
    border-color: #ccc;
  }
  body{ background: #fff; color: #000; }
}


/* ============================================================
   26. TOPBAR · BRAND INTEGRADO + DIVIDER + BELL DOT
   ------------------------------------------------------------
   Versión rediseñada del topbar: el logo KAESER vive aquí
   (integrado, no separado), pegado al cluster de acciones de
   la derecha y con un divider visual entre logo y botones.
   ============================================================ */
.ds-topbar__brand{
  display: inline-flex; align-items: center;
  height: 36px;
  padding: 0 4px;
  text-decoration: none;
  -webkit-user-select: none; user-select: none;
  touch-action: manipulation;
}
.ds-topbar__brand img{
  height: 26px; width: auto; display: block;
  pointer-events: none;
  filter: invert(1);                /* light: texto blanco → negro */
  opacity: .92;
  transition: opacity var(--dur-fast), filter var(--dur-base);
}
.ds-topbar__brand:hover img{ opacity: 1; }
[data-theme="dark"] .ds-topbar__brand img{
  filter: none;                     /* dark: deja el texto blanco original */
}

/* Separador vertical entre logo y acciones */
.ds-topbar__divider{
  display: inline-block;
  width: 1px; height: 24px;
  background: var(--border-default);
  margin: 0 var(--sp-1);
}

/* Punto rojo de notificaciones sin leer */
.ds-topbar__dot{
  position: absolute;
  top: 8px; right: 9px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-error);
  box-shadow: 0 0 0 2px var(--bg-surface);
  animation: ds-pulse 2s var(--ease-in-out) infinite;
}
.ds-btn--icon{ position: relative; }


/* ============================================================
   27. CALENDAR (vista mensual interactiva)
   ============================================================ */
.ds-calendar{
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  width: 100%; max-width: 360px;
  font-family: var(--font-sans);
}
.ds-calendar__head{
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--sp-3);
}
.ds-calendar__title{
  font-family: var(--font-cond);
  font-size: var(--fs-lg);
  font-weight: var(--fw-black);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--fg-strong);
  margin: 0;
}
.ds-calendar__nav{
  display: flex; gap: 4px;
}
.ds-calendar__nav button{
  width: 28px; height: 28px;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--fg-default);
  cursor: pointer;
  font-size: 12px;
  transition: all var(--dur-fast);
}
.ds-calendar__nav button:hover{
  background: var(--k-yellow);
  color: var(--k-black);
  border-color: var(--k-yellow);
}
.ds-calendar__weekdays{
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 2px; margin-bottom: 4px;
}
.ds-calendar__weekday{
  font-family: var(--font-cond);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-muted);
  text-align: center;
  padding: 6px 0;
  font-weight: var(--fw-bold);
}
.ds-calendar__grid{
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.ds-calendar__day{
  aspect-ratio: 1 / 1;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  color: var(--fg-default);
  cursor: pointer;
  position: relative;
  transition: all var(--dur-fast);
}
.ds-calendar__day:hover{
  background: var(--bg-surface-3);
  border-color: var(--border-strong);
}
.ds-calendar__day--muted{ color: var(--fg-subtle); opacity: .5; }
.ds-calendar__day--today{
  border-color: var(--k-yellow);
  font-weight: var(--fw-bold);
}
.ds-calendar__day--selected{
  background: var(--k-yellow);
  color: var(--k-black);
  font-weight: var(--fw-bold);
  border-color: var(--k-yellow);
  box-shadow: 0 4px 10px rgba(255,204,0,.3);
}
.ds-calendar__day--has-event::after{
  content: ""; position: absolute;
  bottom: 4px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--k-petrol);
}
.ds-calendar__day--selected.ds-calendar__day--has-event::after{
  background: var(--k-black);
}


/* ============================================================
   28. HOURGLASS LOADER (reloj de arena animado)
   ============================================================ */
.ds-hourglass{
  display: inline-block;
  width: 44px; height: 64px;
  position: relative;
  animation: ds-hourglass-flip 3s ease-in-out infinite;
}
.ds-hourglass__frame{
  position: absolute; inset: 0;
  border: 3px solid var(--k-black);
  border-radius: 4px 4px 0 0;
  clip-path: polygon(0 0, 100% 0, 70% 50%, 100% 100%, 0 100%, 30% 50%);
  background: linear-gradient(180deg, var(--k-yellow) 50%, transparent 50%);
}
.ds-hourglass__sand-top{
  position: absolute;
  top: 4px; left: 50%; transform: translateX(-50%);
  width: 24px; height: 22px;
  background: var(--k-yellow);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  animation: ds-sand-fall 3s linear infinite;
  transform-origin: center top;
}
.ds-hourglass__sand-bot{
  position: absolute;
  bottom: 4px; left: 50%; transform: translateX(-50%);
  width: 24px; height: 0;
  background: var(--k-yellow);
  clip-path: polygon(0 100%, 100% 100%, 50% 0);
  animation: ds-sand-grow 3s linear infinite;
}
.ds-hourglass__stream{
  position: absolute;
  top: 28px; left: 50%; transform: translateX(-50%);
  width: 2px; height: 8px;
  background: var(--k-yellow);
  animation: ds-sand-stream 3s linear infinite;
}
@keyframes ds-hourglass-flip{
  0%, 95% { transform: rotate(0deg); }
  100%    { transform: rotate(180deg); }
}
@keyframes ds-sand-fall{
  0%   { transform: translateX(-50%) scaleY(1); }
  90%  { transform: translateX(-50%) scaleY(0); }
  100% { transform: translateX(-50%) scaleY(0); }
}
@keyframes ds-sand-grow{
  0%   { height: 0; }
  90%  { height: 22px; }
  100% { height: 22px; }
}
@keyframes ds-sand-stream{
  0%, 90% { opacity: 1; }
  91%, 100% { opacity: 0; }
}


/* ============================================================
   29. TAGS (etiquetas — más compactas que badges, con × cerrar)
   ============================================================ */
.ds-tag{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 12px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--fg-default);
  white-space: nowrap;
  transition: all var(--dur-fast);
}
.ds-tag:hover{
  border-color: var(--border-strong);
  background: var(--bg-surface-3);
}
.ds-tag i:first-child{ font-size: 12px; }
.ds-tag__close{
  width: 16px; height: 16px;
  display: grid; place-items: center;
  border: 0; background: transparent;
  border-radius: 50%;
  color: inherit; cursor: pointer;
  font-size: 10px;
  transition: background var(--dur-fast);
}
.ds-tag__close:hover{ background: rgba(0,0,0,.12); }

.ds-tag--success{ background: var(--color-success-bg); color: var(--color-success); border-color: var(--color-success-bd); }
.ds-tag--warning{ background: var(--color-warning-bg); color: var(--color-warning); border-color: var(--color-warning-bd); }
.ds-tag--error  { background: var(--color-error-bg);   color: var(--color-error);   border-color: var(--color-error-bd); }
.ds-tag--info   { background: var(--color-info-bg);    color: var(--color-info);    border-color: var(--color-info-bd); }
.ds-tag--brand  { background: var(--k-yellow);         color: var(--k-black); border-color: var(--k-yellow-700); }


/* ============================================================
   30. FAB BOT — Asistente flotante (semi-3D + idle anim)
   ============================================================ */
.ds-fab{
  position: fixed;
  bottom: var(--sp-6);
  right: var(--sp-6);
  z-index: var(--z-overlay);
  width: 64px; height: 64px;
  border: 0; padding: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%,
              #FFE066 0%, var(--k-yellow) 50%, var(--k-yellow-700) 100%);
  box-shadow:
    0 10px 24px rgba(255,204,0,.45),
    inset 0 -4px 8px rgba(0,0,0,.15),
    inset 0 4px 8px rgba(255,255,255,.5);
  cursor: pointer;
  display: grid; place-items: center;
  animation: ds-fab-float 4s ease-in-out infinite;
  transition: transform var(--dur-base) var(--ease-spring);
}
.ds-fab:hover{
  transform: scale(1.1) rotate(-5deg);
}
.ds-fab:active{ transform: scale(.95); }

/* "Cara" del bot dentro del botón */
.ds-fab__face{
  width: 38px; height: 30px;
  background: var(--k-black);
  border-radius: 12px 12px 8px 8px / 14px 14px 8px 8px;
  position: relative;
  box-shadow: inset 0 -2px 4px rgba(255,255,255,.08);
}
.ds-fab__face::before,
.ds-fab__face::after{
  content: "";
  position: absolute;
  top: 9px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--k-yellow);
  box-shadow: 0 0 6px rgba(255,204,0,.8);
  animation: ds-fab-blink 4s ease-in-out infinite;
}
.ds-fab__face::before{ left: 8px; }
.ds-fab__face::after { right: 8px; }
/* Antenita arriba */
.ds-fab__antenna{
  position: absolute;
  top: -10px; left: 50%; transform: translateX(-50%);
  width: 2px; height: 10px;
  background: var(--k-black);
  border-radius: 1px;
}
.ds-fab__antenna::after{
  content: "";
  position: absolute;
  top: -6px; left: -3px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-error);
  box-shadow: 0 0 8px rgba(176,0,32,.6);
  animation: ds-pulse 1.4s var(--ease-in-out) infinite;
}

/* Tooltip "¿Necesitas ayuda?" al hacer hover */
.ds-fab__hint{
  position: absolute;
  right: calc(100% + 12px);
  top: 50%; transform: translateY(-50%) translateX(8px);
  background: var(--k-black);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: all var(--dur-fast);
}
.ds-fab__hint::after{
  content: "";
  position: absolute;
  right: -4px; top: 50%; transform: translateY(-50%) rotate(45deg);
  width: 8px; height: 8px;
  background: var(--k-black);
}
.ds-fab:hover .ds-fab__hint{
  opacity: 1; transform: translateY(-50%) translateX(0);
}

@keyframes ds-fab-float{
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes ds-fab-blink{
  0%, 96%, 100% { transform: scaleY(1); }
  98%           { transform: scaleY(.1); }
}


/* ============================================================
   31. CAROUSEL MODERNO (controles + indicadores)
   ------------------------------------------------------------
   Mejora del .ds-carousel base con flechas circulares y dots.
   ============================================================ */
.ds-carousel-wrap{
  position: relative;
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.ds-carousel-wrap .ds-carousel__slide{
  width: 100%;
  height: 320px;
  scroll-snap-align: start;
}
.ds-carousel-arrow{
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(17,20,24,.85);
  color: #fff;
  border: 0; cursor: pointer;
  display: grid; place-items: center;
  z-index: 2;
  font-size: 18px;
  backdrop-filter: blur(6px);
  transition: all var(--dur-fast);
}
.ds-carousel-arrow:hover{
  background: var(--k-yellow);
  color: var(--k-black);
  transform: translateY(-50%) scale(1.1);
}
.ds-carousel-arrow--prev{ left: var(--sp-4); }
.ds-carousel-arrow--next{ right: var(--sp-4); }

.ds-carousel-dots{
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: var(--sp-4);
  display: flex; gap: 6px;
  background: rgba(17,20,24,.5);
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  backdrop-filter: blur(6px);
  z-index: 2;
}
.ds-carousel-dots button{
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.4);
  border: 0; padding: 0;
  cursor: pointer;
  transition: all var(--dur-fast);
}
.ds-carousel-dots button.is-active{
  width: 24px; border-radius: 4px;
  background: var(--k-yellow);
}


/* ============================================================
   32. UPLOADER (drag & drop + lista archivos + preview)
   ============================================================ */
.ds-uploader{
  background: var(--bg-surface);
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  padding: var(--sp-7) var(--sp-5);
  text-align: center;
  cursor: pointer;
  transition: all var(--dur-base);
  position: relative;
}
.ds-uploader:hover,
.ds-uploader.is-drag{
  border-color: var(--k-yellow);
  background: var(--k-yellow-100);
  transform: scale(1.005);
}
[data-theme="dark"] .ds-uploader:hover,
[data-theme="dark"] .ds-uploader.is-drag{
  background: rgba(255,204,0,.06);
}

.ds-uploader__icon{
  width: 64px; height: 64px;
  margin: 0 auto var(--sp-3);
  background: var(--bg-surface-2);
  color: var(--k-petrol);
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 28px;
  transition: all var(--dur-base);
}
.ds-uploader.is-drag .ds-uploader__icon,
.ds-uploader:hover .ds-uploader__icon{
  background: var(--k-yellow);
  color: var(--k-black);
  transform: scale(1.1);
}
.ds-uploader__title{
  font-family: var(--font-cond);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  color: var(--fg-strong);
  margin: 0 0 4px;
}
.ds-uploader__hint{
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  margin: 0 0 var(--sp-3);
}
.ds-uploader__btn{
  margin-top: var(--sp-2);
}
.ds-uploader input[type="file"]{
  position: absolute; inset: 0;
  opacity: 0; cursor: pointer;
}

/* Lista de archivos cargados */
.ds-file-list{
  display: flex; flex-direction: column; gap: var(--sp-2);
  margin-top: var(--sp-4);
}
.ds-file-item{
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: var(--sp-3);
  padding: 10px 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  animation: ds-toast-in var(--dur-base) var(--ease-spring);
}
.ds-file-item.is-removing{
  animation: ds-toast-out var(--dur-base) ease-in forwards;
}
.ds-file-item__icon{
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  background: var(--k-petrol-100);
  color: var(--k-petrol);
  display: grid; place-items: center;
  font-size: 16px;
  flex-shrink: 0;
}
[data-theme="dark"] .ds-file-item__icon{
  background: rgba(50,128,149,.18);
}
.ds-file-item__name{
  font-size: var(--fs-sm);
  color: var(--fg-strong);
  font-weight: var(--fw-semibold);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ds-file-item__meta{
  font-size: var(--fs-xs);
  color: var(--fg-muted);
}
.ds-file-item__size{
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--fg-muted);
}
.ds-file-item__remove{
  width: 32px; height: 32px;
  border: 0; background: transparent;
  border-radius: var(--radius-sm);
  color: var(--fg-muted);
  cursor: pointer;
  display: grid; place-items: center;
  transition: all var(--dur-fast);
}
.ds-file-item__remove:hover{
  background: var(--color-error-bg);
  color: var(--color-error);
}

/* Mini progress bar dentro del file item */
.ds-file-item__progress{
  grid-column: 2 / 3;
  height: 3px;
  background: var(--bg-surface-3);
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin-top: 4px;
}
.ds-file-item__progress > span{
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--k-petrol), var(--k-yellow));
  border-radius: inherit;
  transition: width .25s linear;
}



/* ============================================================
   28. TOPBAR · v3.2 — Right-anchored panel + brand integrado
   ------------------------------------------------------------
   El cluster derecho (acciones + logo) se trata como un panel
   cohesivo, separado del buscador por un margen visual claro.
   Logo KAESER vive a la derecha del todo (ancla visual).
   ============================================================ */
.ds-topbar__right--panel{
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px 8px 6px 10px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--bg-surface);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow   var(--dur-fast) var(--ease-out);
}
.ds-topbar__right--panel:hover{
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .ds-topbar__right--panel{
  background: var(--bg-surface-2);
}

/* Logo dentro del panel agrupado: borde-radius alto para encajar */
.ds-topbar__right--panel .ds-topbar__brand{
  height: 32px;
  padding: 0 var(--sp-2);
  border-radius: var(--radius-pill);
  background: var(--k-black);
  transition: background var(--dur-fast) var(--ease-out);
}
.ds-topbar__right--panel .ds-topbar__brand img{
  height: 18px;
  filter: none;            /* logo blanco sobre fondo negro — sin invertir */
  opacity: 1;
}
[data-theme="dark"] .ds-topbar__right--panel .ds-topbar__brand{
  background: var(--k-yellow);
}
[data-theme="dark"] .ds-topbar__right--panel .ds-topbar__brand img{
  filter: invert(1);       /* dark: logo negro sobre amarillo */
  opacity: .95;
}
.ds-topbar__right--panel .ds-topbar__brand:hover{
  background: var(--k-anth);
}
[data-theme="dark"] .ds-topbar__right--panel .ds-topbar__brand:hover{
  background: var(--k-yellow-500);
}

/* Divider más sutil dentro del panel */
.ds-topbar__right--panel .ds-topbar__divider{
  height: 20px;
  background: var(--border-strong);
  opacity: .55;
}

/* KBD shortcut visual en el buscador (estilo modo command palette) */
.ds-topbar__kbd{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--fg-muted);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-bottom-width: 2px;
  border-radius: var(--radius-sm);
  letter-spacing: .04em;
}
@media (max-width: 768px){
  .ds-topbar__kbd{ display: none; }
}

/* En mobile el panel pierde el borde para no apretar el viewport */
@media (max-width: 640px){
  .ds-topbar__right--panel{
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
  }
  .ds-topbar__right--panel .ds-topbar__brand{
    display: none; /* en mobile el logo ya está en el sidebar/drawer */
  }
}


/* ============================================================
   29. HELP-BOT FAB · v3.2 — Mini bot semi-3D
   ------------------------------------------------------------
   Botón flotante mejorado: cuerpo neumórfico, ojos parpadeando,
   antena con LED, animación idle (bobbing). Mantiene API
   .ds-fab__antenna / .ds-fab__face / .ds-fab__hint.
   ============================================================ */
.ds-fab--bot{
  --bot-size: 64px;
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: var(--bot-size);
  height: var(--bot-size);
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  z-index: var(--z-toast);
  background:
    radial-gradient(circle at 30% 28%, #FFE066 0 18%, transparent 60%),
    radial-gradient(circle at 70% 80%, var(--k-yellow-700) 0 22%, transparent 60%),
    linear-gradient(145deg, var(--k-yellow) 0%, var(--k-yellow-700) 100%);
  box-shadow:
    0 16px 32px rgba(255,204,0,.35),
    0 6px 12px rgba(17,20,24,.18),
    inset 0 -4px 6px rgba(0,0,0,.18),
    inset 0 4px 6px rgba(255,255,255,.45);
  transition: transform var(--dur-base) var(--ease-spring),
              box-shadow var(--dur-base) var(--ease-out);
  animation: ds-bot-idle 4s var(--ease-in-out) infinite;
}
.ds-fab--bot:hover{
  transform: translateY(-4px) scale(1.06);
  box-shadow:
    0 22px 42px rgba(255,204,0,.45),
    0 10px 18px rgba(17,20,24,.22),
    inset 0 -4px 6px rgba(0,0,0,.18),
    inset 0 4px 6px rgba(255,255,255,.55);
}
.ds-fab--bot:active{ transform: translateY(-1px) scale(.98); }

/* Antena con LED rojo */
.ds-fab--bot .ds-fab__antenna{
  position: absolute;
  top: -10px; left: 50%;
  transform: translateX(-50%);
  width: 3px; height: 14px;
  background: var(--k-black);
  border-radius: var(--radius-pill);
}
.ds-fab--bot .ds-fab__antenna::before{
  content:"";
  position: absolute; top: -7px; left: 50%;
  transform: translateX(-50%);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-error);
  box-shadow: 0 0 8px rgba(176,0,32,.85);
  animation: ds-pulse 1.8s var(--ease-in-out) infinite;
}

/* Cara: pantalla negra + 2 ojos blancos parpadeando */
.ds-fab--bot .ds-fab__face{
  position: absolute;
  inset: 16px 14px;
  background: linear-gradient(160deg, #1A1F25 0%, #0B0D10 100%);
  border-radius: 14px;
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.10),
    inset 0 -2px 4px rgba(0,0,0,.40);
  display: grid;
  place-items: center;
}
.ds-fab--bot .ds-fab__face::before,
.ds-fab--bot .ds-fab__face::after{
  content:"";
  position: absolute;
  top: 50%;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px rgba(255,255,255,.8);
  animation: ds-bot-blink 4.5s var(--ease-in-out) infinite;
}
.ds-fab--bot .ds-fab__face::before{ left: 26%; transform: translateY(-50%); }
.ds-fab--bot .ds-fab__face::after { right: 26%; transform: translateY(-50%); }

/* Hint flotante (tooltip) */
.ds-fab--bot .ds-fab__hint{
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  background: var(--k-black);
  color: #fff;
  padding: 8px 12px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  border-radius: var(--radius-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-spring);
}
.ds-fab--bot .ds-fab__hint::after{
  content:"";
  position: absolute;
  right: -5px; top: 50%; transform: translateY(-50%) rotate(45deg);
  width: 10px; height: 10px;
  background: var(--k-black);
}
.ds-fab--bot:hover .ds-fab__hint{
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

@keyframes ds-bot-idle{
  0%,100%{ transform: translateY(0) rotate(0deg); }
  25%    { transform: translateY(-3px) rotate(-2deg); }
  50%    { transform: translateY(0) rotate(0deg); }
  75%    { transform: translateY(-3px) rotate(2deg); }
}
@keyframes ds-bot-blink{
  0%,92%,100% { transform: translateY(-50%) scaleY(1); }
  94%,98%     { transform: translateY(-50%) scaleY(.10); }
}

@media (max-width: 640px){
  .ds-fab--bot{ --bot-size: 56px; right: 16px; bottom: 16px; }
}


/* ============================================================
   30. TOPBAR · v3.4 — Restaurado, anclado a la derecha
   ------------------------------------------------------------
   Reintroduce la barra superior (eliminada en v3.3) pero con
   el cluster principal anclado al extremo derecho para
   eliminar el espacio en blanco a la derecha del contenido.
   ============================================================ */
.ds-topbar{
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  height: 52px;
  padding: 0 var(--sp-4);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-default);
  backdrop-filter: saturate(140%) blur(8px);
}
.ds-topbar__left{
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.ds-topbar__burger{
  display: none;
  width: 34px; height: 34px;
  align-items: center; justify-content: center;
  border: 1px solid var(--border-default);
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  color: var(--fg-default);
  cursor: pointer;
  font-size: 15px;
}
.ds-topbar__title{
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: var(--fs-md);
  letter-spacing: .02em;
  margin: 0;
  color: var(--fg-default);
}
.ds-topbar__right{
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
}
.ds-topbar .ds-topbar__right--panel{
  padding: 4px 8px;
}
.ds-topbar__search{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  height: 32px;
  padding: 0 10px;
  background: var(--bg-surface-2, var(--bg-surface));
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
}
.ds-topbar__search i{ color: var(--fg-muted); font-size: 13px; }
.ds-topbar__search input{
  border: 0;
  background: transparent;
  outline: none;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--fg-default);
  width: 170px;
}
.ds-topbar__search input::placeholder{ color: var(--fg-muted); }
.ds-topbar .ds-topbar__divider{ height: 22px; }

@media (max-width: 1024px){
  .ds-topbar{ padding: 0 var(--sp-3); }
  .ds-topbar__search input{ width: 110px; }
}
@media (max-width: 768px){
  .ds-topbar__burger{ display: inline-flex; }
  .ds-topbar__search{ display: none; }
}


/* ============================================================
   31. DIGITAL CLOCK · v3.4
   ------------------------------------------------------------
   Reloj digital estilo display 7-segmentos. Reemplaza al
   reloj de arena. Hora en mono, fecha en kicker.
   ============================================================ */
.ds-digital-clock{
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px 38px 20px;
  border-radius: 16px;
  background: #FFFFFF;
  border: 1px solid rgba(17,20,24,.08);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 12px 28px -14px rgba(17,20,24,.14),
    0 4px 10px -6px rgba(17,20,24,.08);
  overflow: hidden;
  transition: background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
/* Acento amarillo lateral — sello KAESER discreto */
.ds-digital-clock::before{
  content: "";
  position: absolute;
  top: 14px; bottom: 14px;
  left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--k-yellow, #FFCC00);
}
.ds-digital-clock::after{ content: none; }

.ds-digital-clock__time{
  position: relative;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 42px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--k-black, #111418);
  text-shadow: none;
  -webkit-text-fill-color: currentColor;
  background: none;
  transition: color var(--dur-base) var(--ease-out);
}
.ds-digital-clock__date{
  position: relative;
  font-family: var(--font-cond, 'Barlow Condensed', sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .28em;
  color: var(--fg-muted);
  text-transform: uppercase;
  padding: 0;
  background: transparent;
  border-radius: 0;
}

/* ───── Dark mode ───── */
[data-theme="dark"] .ds-digital-clock{
  background: #15181D;
  border-color: rgba(255,255,255,.06);
  box-shadow:
    0 1px 0 rgba(255,255,255,.04) inset,
    0 16px 36px -14px rgba(0,0,0,.6),
    0 4px 10px -6px rgba(0,0,0,.4);
}
[data-theme="dark"] .ds-digital-clock::before{
  background: var(--k-yellow, #FFCC00);
  box-shadow: 0 0 10px rgba(255,204,0,.45);
}
[data-theme="dark"] .ds-digital-clock__time{
  color: var(--k-yellow, #FFCC00);
  text-shadow: 0 0 12px rgba(255,204,0,.35);
}
[data-theme="dark"] .ds-digital-clock__date{
  color: rgba(255,255,255,.6);
}