/*
 * ============================================================
 *  Kiosko Grupo Carbon — Design System "Carbon & Ember"
 *  Tokens compartidos: colores, tipografía, sombras, radios.
 *  Versión: Junio 2026
 *
 *  Importar ANTES del <style> local en cada módulo:
 *    <link rel="stylesheet" href="../assets/ds.css">   (subdirectorios)
 *    <link rel="stylesheet" href="assets/ds.css">      (raíz)
 *
 *  Los bloques :root locales de cada archivo pueden anular
 *  estos valores si el módulo necesita tokens propios.
 * ============================================================
 */

/* ─── Tokens base (tema claro) ─────────────────────────────────────── */
:root {
  color-scheme: light dark;

  /* Marca — teal (confianza/acción primaria) + ember (chispa/acento) */
  --brand-700: #115e59;
  --brand-600: #0f766e;
  --brand-500: #0d9488;
  --brand-050: #ecfdf5;
  --ember-700: #c2410c;
  --ember-600: #ea580c;
  --ember-500: #f97316;

  /* Grises oscuros — fondos de panels y gradientes de login */
  --ink-900: #0b1220;
  --ink-800: #111a2b;

  /* Texto y superficies */
  --text:          #182033;
  --text-muted:    #586a86;
  --surface:       #ffffff;
  --surface-2:     #f6f8fb;
  --surface-3:     #eef2f7;
  --border:        #e4e9f1;
  --border-strong: #cdd7e5;

  /* Semánticos */
  --success:    #16a34a;
  --success-bg: #ecfdf5;
  --warning:    #d97706;
  --warning-bg: #fffbeb;
  --danger:     #dc2626;
  --danger-bg:  #fef2f2;
  --info:       #2563eb;
  --info-bg:    #eff6ff;

  /* Radios */
  --radius-sm: 10px;
  --radius:    14px;
  --radius-lg: 22px;

  /* Sombras */
  --shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 1px rgba(15,23,42,.04);
  --shadow-md: 0 12px 32px -14px rgba(15,23,42,.22);
  --shadow-lg: 0 36px 70px -24px rgba(11,18,32,.42);

  /* Focus ring */
  --ring: 0 0 0 4px rgba(15,118,110,.22);

  /* Animación */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur:  180ms;

  /* Tipografía */
  --font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
}

/* ─── Tokens modo oscuro ────────────────────────────────────────────── */
[data-theme="dark"] {
  --text:          #e7eef8;
  --text-muted:    #9eb0ca;
  --surface:       #101a2b;
  --surface-2:     #152033cc;  /* semi-transparente → mejor profundidad */
  --surface-3:     #1b2740;
  --border:        #243250;
  --border-strong: #30436b;
  --brand-050:     rgba(13,148,136,.16);
  --success-bg:    rgba(22,163,74,.14);
  --warning-bg:    rgba(217,119,6,.14);
  --danger-bg:     rgba(220,38,38,.14);
  --info-bg:       rgba(37,99,235,.14);
  --shadow-sm:     0 1px 2px rgba(0,0,0,.45);
  --shadow-md:     0 16px 42px -18px rgba(0,0,0,.65);
  --shadow-lg:     0 40px 80px -28px rgba(0,0,0,.7);
  --ring:          0 0 0 4px rgba(13,148,136,.32);
}

/* ─── Reset mínimo ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { -webkit-text-size-adjust: 100%; }

/* ─── Focus ring accesible (todos los módulos) ──────────────────────── */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--radius-sm);
}

[hidden] { display: none !important; }

/* ─── Skip link — accesibilidad de teclado/lectores de pantalla ─────── */
.skip-link {
  position: fixed;
  left:   1rem;
  top:   -70px;
  z-index: 2000;
  background:    var(--brand-600);
  color:         #fff;
  padding:       .6rem 1.1rem;
  border-radius: var(--radius-sm);
  font-weight:   600;
  font-size:     .9rem;
  text-decoration: none;
  white-space:   nowrap;
  transition:    top var(--dur) var(--ease);
  box-shadow:    var(--shadow-md);
}
.skip-link:focus {
  top:        1rem;
  color:      #fff;
  outline:    none;
  box-shadow: 0 0 0 3px rgba(255,255,255,.6), var(--ring);
}

/* ─── Movimiento reducido — respetar preferencias del SO ────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:        .001ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       .001ms !important;
  }
}

/* ─── Componente: spinner de carga ─────────────────────────────────── */
.ds-spin {
  display:       inline-block;
  width:         1.1em;
  height:        1.1em;
  border:        2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation:     ds-spin-kf .7s linear infinite;
  vertical-align: -.15em;
}
@keyframes ds-spin-kf { to { transform: rotate(360deg); } }

/* ─── Componente: badges/pills semánticos ───────────────────────────── */
.ds-pill {
  display:       inline-flex;
  align-items:   center;
  gap:           .3rem;
  padding:       .18rem .55rem;
  border-radius: 999px;
  font-size:     .72rem;
  font-weight:   600;
  white-space:   nowrap;
}
.ds-pill-ok     { background: var(--success-bg); color: var(--success); }
.ds-pill-warn   { background: var(--warning-bg); color: var(--warning); }
.ds-pill-danger { background: var(--danger-bg);  color: var(--danger);  }
.ds-pill-info   { background: var(--info-bg);    color: var(--info);    }
.ds-pill-muted  { background: var(--surface-3);  color: var(--text-muted); }

/* ─── Componente: paginación compartida ────────────────────────────── */
/*
 * Recomendación 4: usar buildPgn() de /assets/pagination.js con
 * esta clase de contenedor para estilo consistente.
 */
.ds-pgn {
  display:     flex;
  flex-wrap:   wrap;
  gap:         .35rem;
  align-items: center;
}
.ds-pgn-btn {
  min-width:    36px;
  height:       36px;
  padding:      0 .4rem;
  border:       1px solid var(--border-strong);
  background:   var(--surface);
  color:        var(--text);
  border-radius: var(--radius-sm);
  font-weight:  600;
  font-size:    .85rem;
  cursor:       pointer;
  display:      inline-flex;
  align-items:  center;
  justify-content: center;
  transition:   background var(--dur) var(--ease), color var(--dur) var(--ease);
  font-family:  var(--font-body);
}
.ds-pgn-btn:hover:not(:disabled)     { background: var(--surface-3); }
.ds-pgn-btn[aria-current="page"]     { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.ds-pgn-btn:disabled:not([aria-current]) { opacity: .4; cursor: not-allowed; }

/* ─── Componente: toast / notificación ─────────────────────────────── */
.ds-toasts {
  position: fixed;
  top:      1rem;
  right:    1rem;
  z-index:  2000;
  width:    min(340px, calc(100vw - 2rem));
  display:  flex;
  flex-direction: column;
  gap:      .5rem;
  pointer-events: none;
}
.ds-toast {
  display:       flex;
  align-items:   flex-start;
  gap:           .6rem;
  background:    var(--surface);
  border:        1px solid var(--border);
  border-left:   4px solid var(--brand-600);
  border-radius: var(--radius-sm);
  padding:       .75rem .9rem;
  box-shadow:    var(--shadow-md);
  animation:     ds-toast-in .26s var(--ease);
  pointer-events: auto;
  font-size:     .88rem;
}
.ds-toast.ds-success { border-left-color: var(--success); }
.ds-toast.ds-danger  { border-left-color: var(--danger);  }
.ds-toast.ds-warning { border-left-color: var(--warning); }
.ds-toast .ds-toast-icon.ds-success { color: var(--success); }
.ds-toast .ds-toast-icon.ds-danger  { color: var(--danger);  }
.ds-toast .ds-toast-icon.ds-warning { color: var(--warning); }
@keyframes ds-toast-in {
  from { transform: translateX(110%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}