/* ═══════════════════════════════════════════════
   MELIORA DESIGN SYSTEM v1.0 — CSS reutilizable
   Importar en cualquier página:
   <link rel="stylesheet" href="css/meliora.css">
   Requiere Google Fonts:
   Plus Jakarta Sans (400-800), Instrument Serif (italic), JetBrains Mono
═══════════════════════════════════════════════ */

/* ── DESIGN TOKENS ─────────────────────────────── */
:root {
  /* BRAND BLUE (default / Perfil Empresarial — Negro) */
  --blue:   #0166FF;
  --bdk:    #004EDB;
  --blight: #3385FF;
  --bt:     #EBF3FF;
  --bl2:    #DBEAFE;

  /* TEAL / CYAN accent */
  --cyan:   #00D4BE;
  --teal:   #0EA08F;
  --ts:     #EDFAF8;
  --tb:     #B2EAE6;

  /* SEMANTIC */
  --red:    #EF4444; --red2:  #FEE2E2;
  --amber:  #D97706; --amb2:  #FFFBEB; --amb3: #FDE68A;
  --grn:    #16A34A; --grn2:  #DCFCE7;
  --purple: #7C3AED; --pur2:  #EDE9FE;

  /* NEUTRAL / INK */
  --ink: #0D1526;
  --i2:  #2D3A50;
  --i3:  #5E6E8A;
  --i4:  #94A3B8;

  /* SURFACE */
  --bg:  #EEF2F7;
  --s:   #FFFFFF;
  --s2:  #F7FAFC;
  --bd:  #E2E8F0;
  --bd2: #CBD5E1;

  /* SHADOWS */
  --sh1: 0 1px 3px rgba(13,21,38,.07), 0 1px 2px rgba(13,21,38,.04);
  --sh2: 0 4px 18px rgba(13,21,38,.09), 0 2px 4px rgba(13,21,38,.05);
  --sh3: 0 24px 56px rgba(13,21,38,.18), 0 6px 16px rgba(13,21,38,.07);

  /* RADII */
  --r:  8px;
  --r2: 8px;
  --r3: 8px;
  --r4: 8px;

  /* BOTÓN */
  --btn-shadow: 0 3px 10px rgba(1,102,255,.28);
  --sidebar-accent: var(--blue);

  /* ESQUEMAS DE PERFIL · colorimetría
     Todos los perfiles comparten la UI; solo cambia el color
     primario + el sidebar. Se activa con [data-scheme]. */
  /* 1 · Azul Claro → Personal */
  --pc-blue:#3B9EFF; --pc-dark:#1A7AE5; --pc-tint:#E0F2FF; --pc-side:#0E3878;
  /* 2 · Azul Marino → Emprendedor */
  --pm-blue:#1235C2; --pm-dark:#0A26A0; --pm-tint:#EEF1FF; --pm-side:#060B26;
  /* 3 · Negro → Empresarial */
  --pn-blue:#18181B; --pn-dark:#09090B; --pn-tint:#F4F4F5; --pn-side:#0A0A0B; --pn-accent:#0166FF;
}

/* ── ESQUEMAS APLICABLES (data-scheme) ── */
[data-scheme="PERSONAL"]     { --blue:var(--pc-blue); --bdk:var(--pc-dark); --bt:var(--pc-tint); --btn-shadow:0 3px 10px rgba(59,158,255,.32); --sidebar-color:var(--pc-side); }
[data-scheme="EMPRENDEDOR"]  { --blue:var(--pm-blue); --bdk:var(--pm-dark); --bt:var(--pm-tint); --btn-shadow:0 3px 10px rgba(18,53,194,.38); --sidebar-color:var(--pm-side); }
[data-scheme="EMPRESARIAL"]  { --blue:var(--pn-blue); --bdk:var(--pn-dark); --bt:var(--pn-tint); --btn-shadow:0 3px 10px rgba(0,0,0,.30); --sidebar-accent:var(--pn-accent); --sidebar-color:var(--pn-side); }

/* Backward compatibility con nombres antiguos */
[data-scheme="azul-claro"]  { --blue:var(--pc-blue); --bdk:var(--pc-dark); --bt:var(--pc-tint); --btn-shadow:0 3px 10px rgba(59,158,255,.32); --sidebar-color:var(--pc-side); }
[data-scheme="azul-marino"] { --blue:var(--pm-blue); --bdk:var(--pm-dark); --bt:var(--pm-tint); --btn-shadow:0 3px 10px rgba(18,53,194,.38); --sidebar-color:var(--pm-side); }
[data-scheme="negro"]       { --blue:var(--pn-blue); --bdk:var(--pn-dark); --bt:var(--pn-tint); --btn-shadow:0 3px 10px rgba(0,0,0,.30); --sidebar-accent:var(--pn-accent); --sidebar-color:var(--pn-side); }

/* ── RESET ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
  font-size: 14px; line-height: 1.6;
  background: var(--bg); color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; cursor: pointer; border: none; background: none; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
code, pre {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
}

/* ── TIPOGRAFÍA · escala ───────────────────────── */
.h1 { font-size: 32px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.h2 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.h3 { font-size: 17px; font-weight: 800; }
.h4 { font-size: 15px; font-weight: 800; }
.label   { font-size: 14px; font-weight: 700; }
.body-text { font-size: 13px; color: var(--i2); line-height: 1.7; }
.meta    { font-size: 11.5px; font-weight: 600; color: var(--i3); }
.overline {
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; color: var(--i4);
}
/* Precio / estadística — Instrument Serif italic exclusivamente */
.price {
  font-family: 'Instrument Serif', serif; font-style: italic;
  color: var(--teal);
}
.price-lg { font-size: 28px; }
.price-md { font-size: 22px; }
.price-sm { font-size: 16px; }

/* ── LAYOUT UTILITIES ──────────────────────────── */
.container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }
.flex { display: flex; align-items: center; gap: 8px; }
.flex-col { display: flex; flex-direction: column; gap: 8px; }
.flex-wrap { flex-wrap: wrap; }
.spacer { flex: 1; }
.mt-1 { margin-top: 8px; }  .mt-2 { margin-top: 16px; }  .mt-3 { margin-top: 24px; }
.mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; }
/* Visibilidad por dispositivo */
.only-mobile { display: none; }
.btn-block { width: 100%; justify-content: center; }

/* ── APP SHELL (topbar + sidebar + content) ────── */
.app-shell { display: flex; min-height: 100vh; }
.app-sidebar {
  width: 224px; flex-shrink: 0; background: #0D1120;
  border-right: 1px solid rgba(255,255,255,.07);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  padding: 16px 10px;
  transition: width .22s cubic-bezier(.4,0,.2,1);
}
.app-content { flex: 1; min-width: 0; padding: 24px 48px 80px; }
.app-topbar {
  display: flex; align-items: center; gap: 8px;
  height: 52px; background: var(--s);
  border-bottom: 1px solid var(--bd);
  padding: 0 16px;
  position: sticky; top: 0; z-index: 50;
}
/* Sidebar nav item */
.snav-item {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: 8px; height: 36px;
  font-size: 12.5px; font-weight: 600;
  color: rgba(255,255,255,.42); transition: .12s;
  position: relative; cursor: pointer;
}
.snav-item:hover { background: rgba(255,255,255,.07); color: rgba(255,255,255,.8); }
.snav-item.on { background: rgba(255,255,255,.1); color: #fff; }
.snav-item.on::before {
  content: ''; position: absolute; left: 0; top: 25%; bottom: 25%;
  width: 3px; border-radius: 0 3px 3px 0;
  background: var(--sidebar-accent);
}
.snav-badge {
  background: var(--red); color: #fff;
  font-size: 10px; font-weight: 900; border-radius: 99px;
  display: flex; align-items: center; justify-content: center;
  padding: 0; line-height: 1; border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.5);
}
/* Badges en sidebar (flexbox) */
.snav-item .snav-badge {
  margin-left: auto; min-width: 20px; height: 20px;
}
/* Badges en topbar (position absolute) */
.icon-btn .snav-badge {
  position: absolute; top: -6px; right: -6px;
  width: 22px; height: 22px; min-width: auto;
}
/* Account footer pegado al fondo */
.account-footer { margin-top: auto; }

/* Sidebar por esquema */
[data-scheme="PERSONAL"]     .app-sidebar { background: var(--pc-side); }
[data-scheme="EMPRENDEDOR"]  .app-sidebar { background: var(--pm-side); }
[data-scheme="EMPRESARIAL"]  .app-sidebar { background: var(--pn-side); }

/* Backward compatibility */
[data-scheme="azul-claro"]  .app-sidebar { background: var(--pc-side); }
[data-scheme="azul-marino"] .app-sidebar { background: var(--pm-side); }
[data-scheme="negro"]       .app-sidebar { background: var(--pn-side); }

/* ── BOTONES — border homologado 1.5px · radius --r2 ── */
.btn { display: inline-flex !important; align-items: center !important; gap: 7px !important;
  padding: 6px 14px !important; border-radius: var(--r2) !important;
  font: 700 12px/1 'Plus Jakarta Sans', sans-serif !important;
  cursor: pointer !important; transition: .13s !important;
  border: 1.5px solid transparent !important; }
.btn-primary { background: var(--blue) !important; color: #fff !important;
  border-color: var(--blue) !important; box-shadow: var(--btn-shadow) !important; }
.btn-primary:hover { background: var(--bdk) !important; border-color: var(--bdk) !important; }
.btn-secondary { background: var(--s) !important; color: var(--i2) !important;
  border-color: var(--bd2) !important; }
.btn-secondary:hover { border-color: var(--blue) !important; color: var(--blue) !important; }
.btn-light { background: var(--bt) !important; color: var(--blue) !important;
  border-color: var(--bl2) !important; }
.btn-light:hover { background: var(--bl2) !important; border-color: var(--blue) !important; }
.btn-default { background: var(--s) !important; color: var(--i2) !important;
  border-color: var(--bd) !important; }
.btn-default:hover { background: var(--s2) !important; border-color: var(--bd2) !important; }
.btn-teal { background: linear-gradient(120deg, var(--teal), var(--cyan)) !important;
  color: #fff !important; border-color: var(--teal) !important; }
.btn-teal:hover { filter: brightness(1.05) !important; }
.btn-ghost { color: var(--blue) !important; background: transparent !important;
  border-color: transparent !important; }
.btn-ghost:hover { background: var(--bt) !important; }
.btn-danger { color: var(--red) !important; border-color: #FCA5A5 !important;
  background: var(--s) !important; }
.btn-danger:hover { background: var(--red2) !important; }
.btn-success { background: #16A34A !important; color: #fff !important;
  border-color: #16A34A !important; }
.btn-success:hover { background: #15803D !important; border-color: #15803D !important; }
.btn-info { background: #0EA5E9 !important; color: #fff !important;
  border-color: #0EA5E9 !important; }
.btn-info:hover { background: #0284C7 !important; border-color: #0284C7 !important; }
.btn-sm { padding: 6px 12px !important; font-size: 12px !important; }
.btn-lg { padding: 12px 24px !important; font-size: 14.5px !important; }
.btn-icon { width: 36px !important; height: 36px !important; padding: 0 !important;
  border-radius: var(--r2) !important; justify-content: center !important; }
.btn[disabled] { opacity: .4 !important; cursor: not-allowed !important; }
.btn-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── CHIPS / BADGES ────────────────────────────── */
.chip { font-size: 10px; font-weight: 700; padding: 2px 8px;
  border-radius: 99px; display: inline-flex; align-items: center; gap: 4px; }
.chip-blue   { background: var(--bt);   color: var(--blue); }
.chip-green  { background: var(--grn2); color: var(--grn); }
.chip-teal   { background: var(--ts);   color: var(--teal); }
.chip-red    { background: var(--red2); color: var(--red); }
.chip-amber  { background: var(--amb2); color: var(--amber); }
.chip-purple { background: var(--pur2); color: var(--purple); }
.chip-neutral{ background: var(--s2); color: var(--i3);
  border: 1px solid var(--bd); }

/* ── FORMULARIOS ───────────────────────────────── */
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 12px; font-weight: 700;
  color: var(--i2); margin-bottom: 6px; }
.field-hint { font-size: 11px; color: var(--i4); margin-top: 4px; }
.field-hint.error-text { color: var(--red); }
.input {
  display: flex; align-items: center; gap: 8px;
  background: var(--s2); border: 1.5px solid var(--bd);
  border-radius: var(--r2); padding: 0 12px; height: 40px;
  font: 13px 'Plus Jakarta Sans', sans-serif; color: var(--ink);
  width: 100%; transition: .14s;
}
.input:focus-within, .input.focus { border-color: var(--blue); background: #fff;
  box-shadow: 0 0 0 3px rgba(1,102,255,.1); outline: none; }
.input.error { border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(239,68,68,.1); }
.input.success { border-color: var(--grn); }
.input input, .input select {
  border: none; background: none; outline: none;
  flex: 1; font: inherit; color: inherit; min-width: 0;
}
.input input::placeholder { color: var(--i4); }
.input svg { color: var(--i4); flex-shrink: 0; }
.input:focus-within svg { color: var(--blue); }
.input.disabled, .input:has(input[disabled]) { opacity: .45; cursor: not-allowed; }
.textarea {
  background: var(--s2); border: 1.5px solid var(--bd);
  border-radius: var(--r2); padding: 10px 12px;
  font: 13px/1.6 'Plus Jakarta Sans', sans-serif; color: var(--ink);
  width: 100%; resize: vertical; min-height: 80px; transition: .14s;
}
.textarea:focus { border-color: var(--blue); background: #fff;
  box-shadow: 0 0 0 3px rgba(1,102,255,.1); outline: none; }
.toggle-wrap { display: flex; align-items: center; gap: 10px; }
.toggle-wrap label { font-size: 13px; font-weight: 600; color: var(--i2); cursor: pointer; }
.toggle {
  width: 36px; height: 20px; border-radius: 99px;
  background: var(--bd2); position: relative;
  cursor: pointer; transition: .2s; flex-shrink: 0;
}
.toggle::after { content: ''; position: absolute; top: 3px; left: 3px;
  width: 14px; height: 14px; border-radius: 99px;
  background: #fff; transition: .2s; }
.toggle.on { background: var(--blue); }
.toggle.on::after { left: 19px; }

/* ── CARDS ─────────────────────────────────────── */
.card { background: var(--s); border: 1px solid var(--bd);
  border-radius: var(--r3); box-shadow: var(--sh1); overflow: hidden;
  transition: box-shadow .14s; }
.card:hover { box-shadow: var(--sh2); }
.card-head { display: flex; align-items: center; gap: 8px;
  padding: 14px 18px; border-bottom: 1px solid var(--bd); }
.card-head h3 { margin: 0; font-size: 14px; font-weight: 800; flex: 1; }
.card-body { padding: 16px 18px; }
.card-strip { height: 6px;
  background: linear-gradient(90deg, #0D1120, #0166FF 60%, #00D4BE); }

/* ── TABLE ─────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
.ds-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ds-table th {
  text-align: left; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--i4);
  padding: 9px 16px; background: var(--s2);
  border-bottom: 1px solid var(--bd); white-space: nowrap;
}
.ds-table td { padding: 11px 16px; border-bottom: 1px solid var(--bd); }
.ds-table tr:last-child td { border-bottom: none; }
.ds-table tr:hover td { background: var(--s2); }

/* ── ALERTS ────────────────────────────────────── */
.alert {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 14px; border-radius: var(--r2);
  font-size: 12.5px; margin-bottom: 8px;
}
.alert svg { display: none; }
.alert-info    { background: var(--bt);   border: 1px solid #BFDBFE; color: #1D4ED8; }
.alert-success { background: var(--grn2); border: 1px solid #86EFAC; color: #15803D; }
.alert-warning { background: var(--amb2); border: 1px solid var(--amb3); color: #92400E; }
.alert-error   { background: var(--red2); border: 1px solid #FCA5A5; color: #B91C1C; }

/* ── AVATAR ────────────────────────────────────── */
.avatar {
  width: 32px; height: 32px; border-radius: 8px;
  background: linear-gradient(135deg, #0D1120, #0166FF);
  display: grid; place-items: center; color: #fff;
  font-weight: 800; font-size: 11px; flex-shrink: 0;
}
.avatar-sm { width: 28px; height: 28px; font-size: 10px; }
.avatar-lg { width: 48px; height: 48px; font-size: 16px; border-radius: 12px; }

/* ── PROGRESS BAR ──────────────────────────────── */
.progress {
  height: 6px; background: var(--bd); border-radius: 99px; overflow: hidden;
}
.progress > div {
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--cyan), var(--blue));
  transition: width .3s ease;
}

/* ── MODAL ─────────────────────────────────────── */
.modal-overlay {
  position: fixed !important; top: 0 !important; bottom: 0 !important; left: 0 !important; right: 0 !important;
  z-index: 99000 !important;
  background: rgba(13,21,38,.5) !important;
  display: flex !important; justify-content: center !important; align-items: center !important;
  padding: 16px !important;
}
.modal-overlay[hidden] { display: none !important; }

/* Z-index specifics: compartir siempre encima de publicación detalle */
#modal_compartir { z-index: 99999 !important; }
#modal_publicacion_detalle { z-index: 99998 !important; }
.modal {
  background: var(--s) !important; border-radius: 18px !important;
  box-shadow: var(--sh3) !important; width: auto !important; max-width: 440px !important;
  overflow: hidden !important; display: flex !important; flex-direction: column !important;
  position: static !important; top: auto !important; left: auto !important; height: auto !important;
}
.modal-head { display: flex; align-items: center; gap: 10px; padding: 14px 20px 8px; border-bottom: 1px solid var(--bd); flex-shrink: 0; }
.modal-head h3 { font-weight: 800; font-size: 15px; flex: 1; }
.modal-body { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 22px 22px; }
.modal-body::-webkit-scrollbar { width: 4px; }
.modal-body::-webkit-scrollbar-thumb { background: var(--bd2); border-radius: 99px; }
.modal-foot { display: flex; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--bd); flex-shrink: 0; align-items: center; justify-content: flex-end; }

/* Botón cerrar modal */
.modal-close-btn {
  background: var(--s2); border: 1px solid var(--bd); padding: 0;
  cursor: pointer; color: var(--i3); display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px; transition: .13s; flex-shrink: 0;
}
.modal-close-btn:hover { background: var(--bd); color: var(--ink); }

/* Modal de publicación detalle */
#modal_publicacion_detalle .modal { width: 720px !important; max-width: 90vw !important; max-height: 880px !important; }

/* ── MENÚ HAMBURGUESA ──────────────────────────────
   Botón: <button class="icon-btn hamburger" data-sidebar-toggle>
   Escritorio (>768px): compacta el sidebar a riel de iconos (68px).
   Móvil (≤768px): abre el sidebar como drawer off-canvas.
   El backdrop lo inyecta meliora.js automáticamente. */
.sidebar-backdrop {
  position: fixed; inset: 0; z-index: 95;
  background: rgba(13,21,38,.5);
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
}
body.sidebar-open .sidebar-backdrop { opacity: 1; pointer-events: auto; }

/* Compactado escritorio */
@media (min-width: 769px) {
  body.sidebar-compact .app-sidebar { width: 68px; padding: 16px 8px; }
  body.sidebar-compact .app-sidebar .snav-label,
  body.sidebar-compact .app-sidebar .snav-badge { display: none; }
  body.sidebar-compact .app-sidebar .snav-item { justify-content: center; }
  body.sidebar-compact .app-sidebar .brand { justify-content: center; }
  body.sidebar-compact .app-sidebar .plan-widget { display: none !important; }
}

/* ── SCROLLBAR ─────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-thumb { background: var(--bd2); border-radius: 99px; }
.app-sidebar::-webkit-scrollbar { width: 3px; }
.app-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); }

/* ═══════════════════════════════════════════════
   RESPONSIVIDAD
   Breakpoints: 1024px (tablet) · 768px (tablet chica) · 560px (móvil)
═══════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .app-content { padding: 20px 24px 60px; }
  .grid-4 { grid-template-columns: repeat(2,1fr); }
  .grid-3 { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 768px) {
  /* Sidebar pasa a drawer off-canvas; abre con la hamburguesa */
  .hamburger { display: grid; }
  .app-sidebar {
    position: fixed; left: 0; top: 0; bottom: 0;
    height: 100vh; height: 100dvh; width: 248px; z-index: 96;
    transform: translateX(-100%);
    transition: transform .22s cubic-bezier(.4,0,.2,1);
    box-shadow: none;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }
  body.sidebar-open .app-sidebar {
    transform: none;
    box-shadow: var(--sh3);
  }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .app-content { padding: 16px; }
  .container { padding: 0 16px; }
  .hide-tablet { display: none !important; }
}

@media (max-width: 560px) {
  /* ── MÓVIL ── */
  .hide-mobile { display: none !important; }
  .only-mobile { display: initial; }

  /* El drawer (definido en ≤768px) sigue activo; solo ajustes de espacio */
  .app-content { padding: 12px 12px 32px; }
  .snav-item { height: 44px; }                     /* touch target en el drawer */

  /* Topbar: permite scroll horizontal si no cabe, sticky se mantiene */
  .app-topbar { gap: 6px; padding: 0 10px; overflow-x: auto; }
  .app-topbar .input { min-width: 120px; }

  /* Touch targets y anti-zoom iOS (inputs <16px hacen zoom en Safari) */
  .btn { min-height: 40px; }
  .btn-sm { min-height: 36px; }
  .input { height: 44px; }
  .input input, .input select, .textarea { font-size: 16px; }

  /* Grids y tipografía */
  .grid-4 { grid-template-columns: 1fr 1fr; }      /* stats en 2 columnas */
  .grid-auto { grid-template-columns: 1fr 1fr; }
  .h1 { font-size: 26px; }
  .h2 { font-size: 21px; }
  .card-head { padding: 12px 14px; }
  .card-body { padding: 14px; }
  .ds-table th, .ds-table td { padding: 9px 10px; }
  .btn-row .btn { flex: 1 1 auto; justify-content: center; }

  /* Modal como bottom-sheet */
  .modal-overlay { place-items: end center; padding: 0; }
  .modal {
    max-width: 100%; border-radius: var(--r4) var(--r4) 0 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
}

@media (max-width: 380px) {
  /* móviles chicos: stats a 1 columna */
  .grid-4, .grid-auto { grid-template-columns: 1fr; }
}

/* ── MODO OSCURO COMPLETO (opcional) ───────────── */
@media (prefers-color-scheme: dark) {
  [data-theme="auto-dark"] {
    --bg:  #0A0F1E;
    --s:   #111827;
    --s2:  #1A2235;
    --bd:  #1E2D45;
    --bd2: #263550;
    --ink: #F0F4F8;
    --i2:  #CBD5E1;
    --i3:  #7E97B5;
    --i4:  #4A6080;
  }
}

/* ═══════════════════════════════════════════════
   ESTILOS DE LA GUÍA (guia-design-system.html)
   Documentación del design system: nav lateral, spec-cards,
   swatches, especímenes tipográficos, demos.
═══════════════════════════════════════════════ */
/* ── Estilos exclusivos de esta guía (no reutilizables) ── */
.ds-shell { display: flex; min-height: 100vh; }
.ds-nav {
  width: 220px; flex-shrink: 0; background: #0D1120;
  border-right: 1px solid rgba(255,255,255,.07);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.ds-nav::-webkit-scrollbar { width: 3px; }
.ds-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); }
.ds-content { flex: 1; min-width: 0; max-width: 1120px; padding: 0 48px 80px; }

.nav-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 24px 18px 16px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.nav-brand .logo {
  width: 28px; height: 28px; border-radius: 8px;
  background: linear-gradient(135deg, #0D1120, #0166FF);
  display: grid; place-items: center; color: #fff;
  font-weight: 800; font-size: 13px; flex-shrink: 0;
}
.nav-brand span { font-size: 14px; font-weight: 700; color: #fff; }
.nav-brand small { font-size: 9px; font-weight: 700; color: rgba(255,255,255,.3);
  text-transform: uppercase; letter-spacing: .1em; display: block; margin-top: 1px; }
.nav-section { padding: 16px 10px 4px; }
.nav-section label {
  font-size: 9px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.25);
  padding: 0 8px; display: block; margin-bottom: 4px;
}
.nav-section a {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 8px;
  font-size: 12.5px; font-weight: 600;
  color: rgba(255,255,255,.42); transition: .12s;
}
.nav-section a:hover { background: rgba(255,255,255,.07); color: rgba(255,255,255,.8); }
.nav-section a.on { background: rgba(255,255,255,.1); color: #fff; }

.ds-section { padding: 56px 0 0; scroll-margin-top: 20px; }
.ds-section + .ds-section { border-top: 1px solid var(--bd); margin-top: 56px; }
.section-tag {
  font-size: 10px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--blue); margin-bottom: 8px;
}
.section-title {
  font-size: 28px; font-weight: 800; letter-spacing: -.02em;
  margin-bottom: 6px;
}
.section-sub { font-size: 14px; color: var(--i3); margin-bottom: 36px; line-height: 1.7; }

.spec-card {
  background: var(--s); border: 1px solid var(--bd);
  border-radius: var(--r3); padding: 20px;
  box-shadow: var(--sh1);
}
.spec-label { font-size: 11px; font-weight: 700; color: var(--i4);
  text-transform: uppercase; letter-spacing: .07em; margin-bottom: 12px; }
.spec-token {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  color: var(--blue); background: var(--bt); padding: 2px 7px;
  border-radius: 5px; display: inline-block; margin-top: 6px;
}

.swatch-group { display: flex; flex-direction: column; gap: 6px; }
.swatch {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px; border-radius: var(--r); border: 1px solid transparent;
}
.swatch-dot { width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0; }
.swatch-name { font-size: 13px; font-weight: 700; }
.swatch-hex { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--i3); }
.swatch-var { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--i4); margin-top: 1px; }

.palette-strip { display: flex; border-radius: var(--r3); overflow: hidden;
  height: 64px; box-shadow: var(--sh1); margin-bottom: 24px; }
.palette-strip div { flex: 1; }

.type-specimen { margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--bd); }
.type-specimen:last-child { border-bottom: none; }
.type-meta { font-size: 11px; color: var(--i3); margin-top: 6px;
  font-family: 'JetBrains Mono', monospace; }

.space-row { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; }
.space-bar { background: var(--blue); height: 8px; border-radius: 99px; opacity: .8; }
.space-info { font-size: 12px; font-weight: 600; }
.space-info code { color: var(--i3); }

.radius-demo {
  width: 64px; height: 64px; background: var(--bt);
  border: 2px solid var(--blue); display: grid;
  place-items:center; font-size: 11px; font-weight: 700; color: var(--blue);
}

.shadow-card {
  background: var(--s); border-radius: var(--r3);
  padding: 20px; text-align: center;
  font-size: 12px; font-weight: 700; color: var(--i3);
}

.ci { display:inline-block; width:12px; height:12px; border-radius:3px;
  vertical-align:-1px; margin-right:6px; }

.icon-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.icon-item {
  width: 52px; height: 52px; border-radius: var(--r);
  background: var(--s2); border: 1px solid var(--bd);
  display: grid; place-items: center; color: var(--i3);
  transition: .13s;
}
.icon-item:hover { background: var(--bt); border-color: var(--blue); color: var(--blue); }

.token-row { display: grid; grid-template-columns: 160px 140px 1fr;
  gap: 0; border-bottom: 1px solid var(--bd); }
.token-row:last-child { border-bottom: none; }
.token-row > * { padding: 9px 14px; font-size: 12.5px; }
.token-row code { color: var(--blue); font-size: 11.5px; }
.token-header { background: var(--s2); font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .07em; color: var(--i4); }

.state-row { display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-bottom: 1px solid var(--bd); }
.state-row:last-child { border-bottom: none; }
.state-label { font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; width: 80px; color: var(--i4); }

.theme-card { border-radius: var(--r3); overflow: hidden; box-shadow: var(--sh2); }
.theme-sidebar { padding: 16px 14px; display: flex; flex-direction: column; gap: 6px; }
.theme-main { background: var(--bg); padding: 14px; flex: 1; }
.theme-nav-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 9px; border-radius: 9px;
  font-size: 12px; font-weight: 600;
  color: rgba(255,255,255,.42);
}
.theme-nav-item.on { background: rgba(255,255,255,.1); color: #fff; }
.theme-dot { width: 8px; height: 8px; border-radius: 99px; flex-shrink: 0; }

.dark-preview {
  background: #0D1120; border-radius: var(--r3);
  padding: 24px; color: #fff;
  box-shadow: var(--sh3);
}
.dark-card {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--r3); padding: 14px 16px; margin-bottom: 10px;
}
.dark-input {
  background: rgba(255,255,255,.05); border: 1.5px solid rgba(255,255,255,.1);
  border-radius: var(--r2); padding: 8px 12px; color: #fff;
  font: 13px 'Plus Jakarta Sans', sans-serif; width: 100%;
}

.intro-block {
  background: linear-gradient(135deg, #0D1120, #0052CC 55%, #0166FF 80%, #00D4BE);
  border-radius: var(--r4); padding: 48px 52px; margin-bottom: 0;
  color: #fff; position: relative; overflow: hidden;
}
.intro-block::before {
  content: ''; position: absolute; top: -60px; right: -40px;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(0,212,190,.25), transparent 65%);
}
.intro-block h1 { font-size: 40px; font-weight: 800; letter-spacing: -.03em;
  line-height: 1.1; margin-bottom: 12px; position: relative; }
.intro-block h1 em { font-family: 'Instrument Serif', serif; font-style: italic;
  color: #00D4BE; }
.intro-block p { font-size: 15px; color: rgba(255,255,255,.6);
  max-width: 540px; line-height: 1.7; position: relative; }
.intro-meta { display: flex; gap: 24px; margin-top: 28px; position: relative; flex-wrap: wrap; }
.intro-meta div { font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: rgba(255,255,255,.35); }
.intro-meta div strong { display: block; font-size: 15px; color: #fff;
  text-transform: none; letter-spacing: 0; margin-top: 2px; font-weight: 800; }

/* Nav móvil de la guía (oculto en desktop) */
.ds-mobilebar {
  display: none;
  position: sticky; top: 0; z-index: 80;
  background: #0D1120; color: #fff;
  padding: 10px 16px; align-items: center; gap: 10px;
}
.ds-mobilebar .logo {
  width: 26px; height: 26px; border-radius: 7px;
  background: linear-gradient(135deg, #0D1120, #0166FF);
  display: grid; place-items: center; font-weight: 800; font-size: 12px;
  flex-shrink: 0;
}
.ds-mobilebar select {
  flex: 1; height: 36px; border-radius: 10px;
  background: rgba(255,255,255,.08); color: #fff;
  border: 1px solid rgba(255,255,255,.15);
  font: 600 13px 'Plus Jakarta Sans', sans-serif;
  padding: 0 10px; outline: none;
}

/* Responsividad de la guía */
@media (max-width: 900px) {
  .ds-nav { display: none; }
  .ds-mobilebar { display: flex; }
  .ds-shell { flex-direction: column; }
  .ds-content { padding: 0 20px 60px; }
  .ds-section { padding-top: 36px; scroll-margin-top: 64px; }
  .intro-block { padding: 32px 24px; }
  .intro-block h1 { font-size: 30px; }
  .token-row { grid-template-columns: 110px 100px 1fr; }
}

@media (max-width: 560px) {
  .ds-content { padding: 0 14px 48px; }
  .section-title { font-size: 23px; }
  .palette-strip { height: 44px; }
  .token-row { grid-template-columns: 90px 1fr; }
  .token-row > div:nth-child(3) { grid-column: 1 / -1; padding-top: 0; color: var(--i3); font-size: 11.5px; }
  .token-header > div:nth-child(3) { display: none; }
  .state-row { flex-wrap: wrap; }
  .state-row > div:last-child { margin-left: 0 !important; width: 100%; }
  .state-row .input { width: 100% !important; margin-left: 0 !important; }
  .spec-card { padding: 14px; }
  .intro-block h1 { font-size: 26px; }
  .intro-meta { gap: 14px; }
  .radius-demo { width: 52px; height: 52px; }
}

/* ═══════════════════════════════════════════════
   UTILIDADES ATÓMICAS
   Clases para componer vistas sin CSS inline.
═══════════════════════════════════════════════ */
/* Fondos (tokens) */
.bg-blue{background:var(--blue)} .bg-bdk{background:var(--bdk)} .bg-bt{background:var(--bt)}
.bg-teal{background:var(--teal)} .bg-cyan{background:var(--cyan)} .bg-ts{background:var(--ts)}
.bg-ink{background:var(--ink)} .bg-i2{background:var(--i2)} .bg-i3{background:var(--i3)} .bg-i4{background:var(--i4)}
.bg-page{background:var(--bg)} .bg-white{background:#fff} .bg-s2{background:var(--s2)} .bg-bd{background:var(--bd)}
.bg-grn{background:var(--grn)} .bg-grn2{background:var(--grn2)}
.bg-red{background:var(--red)} .bg-red2{background:var(--red2)}
.bg-amber{background:var(--amber)} .bg-amb2{background:var(--amb2)}
.bg-purple{background:var(--purple)} .bg-pur2{background:var(--pur2)}
.bg-dark{background:#0D1120}
/* Paletas de perfil (hex fijos, para muestras de colorimetría) */
.bg-pc-blue{background:#3B9EFF} .bg-pc-dark{background:#1A7AE5} .bg-pc-tint{background:#E0F2FF} .bg-pc-side{background:#0E3878}
.bg-pm-blue{background:#1235C2} .bg-pm-dark{background:#0A26A0} .bg-pm-tint{background:#EEF1FF} .bg-pm-side{background:#060B26}
.bg-pn-blue{background:#18181B} .bg-pn-dark{background:#09090B} .bg-pn-tint{background:#F4F4F5} .bg-pn-side{background:#0A0A0B}
/* Gradientes de marca */
.bg-grad-brand{background:linear-gradient(135deg,#0D1120,#0166FF)}
.bg-grad-strip{background:linear-gradient(90deg,#0D1120,#0166FF 60%,#00D4BE)}
.side-pc{background:#0E3878}
.side-pm{background:radial-gradient(140% 60% at 0% 0%,rgba(18,53,194,.28),transparent 55%),#060B26}
.side-pn{background:radial-gradient(140% 60% at 0% 0%,rgba(1,102,255,.1),transparent 55%),#0A0A0B}

/* Texto */
.tx-blue{color:var(--blue)} .tx-teal{color:var(--teal)} .tx-ink{color:var(--ink)}
.tx-i2{color:var(--i2)} .tx-i3{color:var(--i3)} .tx-i4{color:var(--i4)}
.tx-red{color:var(--red)} .tx-amber{color:var(--amber)} .tx-grn{color:var(--grn)} .tx-white{color:#fff}
.fw-4{font-weight:400} .fw-6{font-weight:600} .fw-7{font-weight:700} .fw-8{font-weight:800}
.fs-10{font-size:10px} .fs-11{font-size:11px} .fs-115{font-size:11.5px} .fs-12{font-size:12px}
.fs-125{font-size:12.5px} .fs-13{font-size:13px} .fs-14{font-size:14px} .fs-16{font-size:16px} .fs-20{font-size:20px}
.lh-17{line-height:1.7} .lh-18{line-height:1.8}
.tc{text-align:center} .tl{text-align:left}
.upper{text-transform:uppercase;letter-spacing:.06em}
.underline{text-decoration:underline}
.mono{font-family:'JetBrains Mono',monospace}
.nowrap{white-space:nowrap}

/* Layout / spacing extra */
.gap-2{gap:2px} .gap-4{gap:4px} .gap-6{gap:6px} .gap-10{gap:10px} .gap-12{gap:12px}
.gap-16{gap:16px} .gap-20{gap:20px}
.items-start{align-items:flex-start} .items-end{align-items:flex-end}
.ml-auto{margin-left:auto} .mt-0{margin-top:0} .mb-0{margin-bottom:0}
.w-full{width:100%} .w-200{width:200px} .maxw-240{max-width:240px} .maxw-540{max-width:540px}
.flex-1{flex:1;min-width:0} .shrink-0{flex-shrink:0}
.bordered{border:1px solid var(--bd)} .bordered-tint{border:1px solid rgba(13,21,38,.08)}
.rounded{border-radius:var(--r)} .rounded-2{border-radius:var(--r2)}
/* Anchos fijos (barras de espaciado, demos) */
.w-4{width:4px} .w-8{width:8px} .w-12{width:12px} .w-16{width:16px} .w-20{width:20px}
.w-24{width:24px} .w-32{width:32px} .w-48{width:48px} .w-64{width:64px}
/* Progreso (porcentajes comunes) */
.p-25{width:25%} .p-50{width:50%} .p-75{width:75%} .p-85{width:85%} .p-100{width:100%}

/* Cuadros de color (muestras) */
.sq{width:14px;height:14px;border-radius:4px;flex-shrink:0;display:inline-block}
.sq-24{width:24px;height:24px;border-radius:6px;flex-shrink:0}
.ci{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-1px;margin-right:6px}

/* Bloques de código */
.code-dark{background:#0D1120;color:#00D4BE;padding:16px;border-radius:var(--r2);
  font-size:12px;line-height:1.8;overflow-x:auto}
.code-dark.muted{color:#94A3B8}
.code-inline{background:var(--bt);color:var(--blue);padding:1px 6px;border-radius:4px;font-size:11px}
.code-box{background:var(--s2);border:1px solid var(--bd);border-radius:6px;
  padding:8px;font-size:10.5px;margin-top:4px;overflow-x:auto}
.kbd{font-size:10px;background:var(--bd);padding:1px 5px;border-radius:4px}

/* Botón de icono para topbar (32px, neutro) */
.icon-btn{position:relative;width:32px;height:32px;border-radius:8px;background:var(--s2);
  border:1px solid var(--bd);display:grid;place-items:center;color:var(--i3);
  flex-shrink:0;cursor:pointer;transition:.13s}
.icon-btn:hover{background:var(--bt);border-color:var(--blue);color:var(--blue)}

/* Search compacto del topbar */
.topbar-search{display:flex;align-items:center;gap:7px;background:var(--s2);
  border:1px solid var(--bd);border-radius:12px;padding:0 10px;height:32px;
  flex:1;max-width:240px;font-size:12px;color:var(--i4)}

/* Divisores */
.divider{height:1px;background:var(--bd);margin:8px 0}
.divider-dark{height:1px;background:rgba(255,255,255,.12);margin:6px 0}

/* Celdas de tabla */
.cell-title{font-weight:700}
.cell-sub{font-size:11.5px;color:var(--i4)}

/* Radius demos */
.rd-8{border-radius:8px} .rd-12{border-radius:12px} .rd-16{border-radius:16px} .rd-20{border-radius:20px}
.rd-pill{border-radius:99px;width:auto;padding:0 16px;height:36px;font-size:11px}

/* Card de oferta (variante teal) */
.card-teal{border-color:var(--tb);background:linear-gradient(180deg,var(--ts),var(--s) 30%)}
.card-teal-head{display:flex;align-items:center;gap:8px;padding:9px 16px;color:var(--teal);
  font-weight:800;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  border-bottom:1px solid var(--tb)}

/* Dark preview (modo oscuro / sidebar style) */
.dark-title{font-size:13px;font-weight:700;color:#fff;margin-bottom:4px}
.dark-sub{font-size:11.5px;color:rgba(255,255,255,.45)}
.dark-progress{height:3px;background:rgba(255,255,255,.1);border-radius:99px;
  margin:10px 0 4px;overflow:hidden}
.dark-progress>div{height:100%;background:linear-gradient(90deg,#00D4BE,#0166FF);border-radius:99px}
.dark-stat{flex:1;text-align:center;padding:12px}
.dark-stat .num{font-family:'Instrument Serif',serif;font-style:italic;font-size:22px;color:#00D4BE}
.dark-stat .lbl{font-size:10px;color:rgba(255,255,255,.35);text-transform:uppercase;
  letter-spacing:.05em;font-weight:700;margin-top:2px}
.dark-label{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.3);margin-bottom:16px}
.tx-dark-dim{color:rgba(255,255,255,.4)}

/* Mini marca (logo + nombre, sidebar/demos) */
.brand{display:flex;align-items:center;gap:8px}
.brand .brand-logo{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;
  color:#fff;font-weight:800;font-size:9px;flex-shrink:0}
.brand .brand-name{color:#fff;font-size:13px;font-weight:700}

/* Píldora de perfil activo (sidebar demos) */
.profile-pill{display:flex;align-items:center;gap:5px;padding:5px 8px;border-radius:6px;
  background:rgba(255,255,255,.1)}
.profile-pill .theme-dot{border:1.5px solid #fff}
.profile-pill span:last-child{color:#fff;font-size:11px;font-weight:700}

/* Footer de página de la guía */
.page-footer{padding:56px 0 0;border-top:1px solid var(--bd);margin-top:56px;
  display:flex;align-items:center;gap:16px;color:var(--i4);font-size:12px;flex-wrap:wrap}

/* ── Clases de demo/especímenes de la guía ────── */
.t-20{font-size:20px;font-weight:800;letter-spacing:-.02em}
.t-21{font-size:21px;font-weight:800;letter-spacing:-.02em}
.spec-aa{font-size:36px;font-weight:800;letter-spacing:-.02em;margin-bottom:8px}
.spec-price-xl{font-family:'Instrument Serif',serif;font-style:italic;font-size:42px;
  letter-spacing:-.01em;color:var(--teal);margin-bottom:8px}
.price-unit{font-family:'Plus Jakarta Sans',sans-serif;font-size:12px;color:var(--i4);font-style:normal}
.ml-12{margin-left:12px}
.ring-blue{box-shadow:0 0 0 3px rgba(1,102,255,.25)}
.sh-1{box-shadow:var(--sh1)} .sh-2{box-shadow:var(--sh2)} .sh-3{box-shadow:var(--sh3)}
.shadow-name{font-size:14px;font-weight:800;color:var(--ink);margin-bottom:4px}
.shadow-use{font-size:11px;color:var(--i4);margin-bottom:10px}
.shadow-code{font-size:10.5px;color:var(--i3);line-height:1.7;display:block;text-align:left}
.radius-caption{font-size:10px;color:var(--i4);margin-top:6px;font-weight:700}
.bdemo{width:48px;height:32px;border-radius:8px;background:var(--s2);flex-shrink:0}
.bdemo-std{border:1px solid var(--bd)}
.bdemo-strong{border:1.5px solid var(--bd2)}
.bdemo-active{border:1.5px solid var(--blue);background:var(--bt)}
.bdemo-dark{border:1px solid rgba(13,21,38,.15);background:#0D1120}
.topbar-demo{display:flex;align-items:center;gap:8px;height:52px;background:var(--s);
  border:1px solid var(--bd);border-radius:var(--r2);padding:0 16px}
.sidebar-demo{background:#0D1120;border-radius:var(--r2);padding:10px;
  display:flex;flex-direction:column;gap:2px}
.demo-note{font-size:11.5px;color:var(--i3);margin-top:10px;line-height:1.7}
.check-grid{display:grid;grid-template-columns:24px 1fr;gap:6px 10px}
.grad-pc{background:linear-gradient(135deg,#0E3878,#3B9EFF)}
.grad-pm{background:linear-gradient(135deg,#060B26,#1235C2)}
.grad-pn{background:linear-gradient(135deg,#0A0A0B,#0166FF)}

/* ── ICONOS LUCIDE (CDN, invocados con data-lucide) ──
   Uso: <i data-lucide="house" class="ic-16"></i>
   lucide.createIcons() los convierte en <svg> heredando clase y color. */
svg.lucide{flex-shrink:0}
.ic-9{width:9px;height:9px} .ic-12{width:12px;height:12px}
.ic-13{width:13px;height:13px} .ic-14{width:14px;height:14px}
.ic-15{width:15px;height:15px} .ic-16{width:16px;height:16px}
.ic-18{width:18px;height:18px}
/* punto de estado (sustituye al svg de círculo relleno en chips) */
.dot{width:8px;height:8px;border-radius:99px;background:currentColor;
  display:inline-block;flex-shrink:0}

/* ═══════════════════════════════════════════════
   INTEGRACIONES: SELECT2 + DATATABLES
   Overrides para que respeten el design system.
   Requieren sus CDNs (ver sección Integraciones de la guía);
   si no están cargados, estas reglas no afectan nada.
═══════════════════════════════════════════════ */
/* ── Select2 — mismo look que .input ── */
.select2-container { width: 100% !important; font: 13px 'Plus Jakarta Sans', sans-serif; }
.select2-container--default .select2-selection--single {
  height: 40px; background: var(--s2);
  border: 1.5px solid var(--bd); border-radius: var(--r2);
  display: flex; align-items: center; transition: .14s;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 40px; padding: 0 28px 0 12px; color: var(--ink); font-size: 13px;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--i4); }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 38px; right: 8px; }
.select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: var(--i4) transparent transparent; }
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: transparent transparent var(--blue); }
/* múltiple: chips del sistema */
.select2-container--default .select2-selection--multiple {
  min-height: 40px; background: var(--s2);
  border: 1.5px solid var(--bd) !important; border-radius: var(--r2);
  padding: 3px 8px; transition: .14s;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: var(--bt); border: 1px solid var(--bl2); border-radius: 99px;
  color: var(--blue); font-size: 11px; font-weight: 700;
  padding: 1px 8px 1px 4px; margin: 3px 4px 3px 0; display: inline-flex; align-items: center;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  border: none; background: none; color: var(--blue); font-weight: 700;
  margin-right: 4px; padding: 0 2px; position: static;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover { color: var(--bdk); background: none; }
.select2-container--default .select2-search--inline .select2-search__field {
  font: 13px 'Plus Jakarta Sans', sans-serif; color: var(--ink); margin-top: 6px;
}
/* focus / open — ring del sistema */
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--multiple,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--blue) !important; background: #fff;
  box-shadow: 0 0 0 3px rgba(1,102,255,.1);
}
/* dropdown */
.select2-dropdown {
  border: 1px solid var(--bd); border-radius: var(--r2);
  box-shadow: var(--sh2); overflow: hidden;
  font: 13px 'Plus Jakarta Sans', sans-serif;
}
.select2-search--dropdown { padding: 8px; }
.select2-search--dropdown .select2-search__field {
  border: 1.5px solid var(--bd); border-radius: var(--r);
  padding: 7px 10px; font: 13px 'Plus Jakarta Sans', sans-serif; outline: none;
}
.select2-search--dropdown .select2-search__field:focus {
  border-color: var(--blue); box-shadow: 0 0 0 3px rgba(1,102,255,.1);
}
.select2-results__option { padding: 8px 12px; font-size: 13px; }
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background: var(--bt); color: var(--blue);
}
.select2-container--default .select2-results__option--selected { background: var(--s2); color: var(--i2); }

/* ── DataTables (v2) — controles del sistema ── */
.dt-container { font-size: 13px; color: var(--i2); }
.dt-container .dt-layout-row { padding: 10px 16px; }
.dt-container .dt-layout-row:has(table) { padding: 0; }
.dt-container .dt-search input {
  height: 36px; background: var(--s2);
  border: 1.5px solid var(--bd); border-radius: var(--r2);
  padding: 0 12px; margin-left: 8px;
  font: 13px 'Plus Jakarta Sans', sans-serif; color: var(--ink);
  outline: none; transition: .14s;
}
.dt-container .dt-search input:focus {
  border-color: var(--blue); background: #fff;
  box-shadow: 0 0 0 3px rgba(1,102,255,.1);
}
.dt-container .dt-length select {
  height: 36px; background: var(--s2);
  border: 1.5px solid var(--bd); border-radius: var(--r2);
  padding: 0 8px; margin-right: 8px;
  font: 13px 'Plus Jakarta Sans', sans-serif; color: var(--ink);
  outline: none;
}
.dt-container .dt-info { color: var(--i3); font-size: 12px; }
.dt-container .dt-paging .dt-paging-button {
  border: 1.5px solid var(--bd); border-radius: 10px;
  background: var(--s); color: var(--i2);
  font: 700 12px 'Plus Jakarta Sans', sans-serif;
  padding: 6px 11px; margin-left: 4px; cursor: pointer; transition: .13s;
}
.dt-container .dt-paging .dt-paging-button:hover:not(.disabled):not(.current) {
  border-color: var(--blue); color: var(--blue); background: var(--bt);
}
.dt-container .dt-paging .dt-paging-button.current {
  background: var(--blue); border-color: var(--blue); color: #fff;
}
.dt-container .dt-paging .dt-paging-button.disabled { opacity: .4; cursor: not-allowed; }
/* la tabla usa .ds-table; solo ajustar indicadores de orden */
table.dataTable thead th { cursor: pointer; }
table.dataTable thead th.dt-ordering-asc,
table.dataTable thead th.dt-ordering-desc { color: var(--blue); }
table.dataTable td, table.dataTable th { box-sizing: border-box; }

/* ═══════════════════════════════════════════════
   COMPONENTES DE INTERACCIÓN v1.1
   Toasts · Tabs · Acordeón · Dropdown · Tooltip ·
   Loaders · Estados vacíos · Panel lateral · A11y
═══════════════════════════════════════════════ */

/* ── TOASTS — Meliora.toast(msg, tipo) ── */
.toast-stack {
  position: fixed !important; top: 16px !important; right: 16px !important; z-index: 100000 !important;
  display: flex !important; flex-direction: column !important; gap: 8px !important;
  width: 340px !important;
  pointer-events: none !important;
}
.toast-stack > .toast {
  display: flex !important; align-items: flex-start !important; gap: 10px !important;
  padding: 12px 14px !important; border-radius: var(--r2) !important;
  background: var(--s) !important; border: 1px solid var(--bd) !important;
  border-left-width: 3px !important; box-shadow: var(--sh2) !important;
  font-size: 12.5px !important; color: var(--i2) !important;
  animation: toast-in .22s ease !important;
  pointer-events: auto !important;
}
.toast.closing { opacity: 0; transform: translateY(-6px); transition: .18s ease; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } }
.toast .toast-msg { flex: 1; padding-top: 1px; }
.toast .toast-close { color: var(--i4); padding: 2px; border-radius: 6px; flex-shrink: 0; pointer-events: auto !important; }
.toast .toast-close:hover { color: var(--i2); background: var(--s2); }
.toast-info    { border-left-color: var(--blue); }  .toast-info    > svg { color: var(--blue); }
.toast-success { border-left-color: var(--grn); }   .toast-success > svg { color: var(--grn); }
.toast-warning { border-left-color: var(--amber); } .toast-warning > svg { color: var(--amber); }
.toast-error   { border-left-color: var(--red); }   .toast-error   > svg { color: var(--red); }

/* ── TABS ── */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--bd); }
.tab {
  padding: 9px 14px; font: 700 13px 'Plus Jakarta Sans', sans-serif;
  color: var(--i3); border-bottom: 2px solid transparent;
  margin-bottom: -1px; cursor: pointer; transition: .13s;
  display: inline-flex; align-items: center; gap: 6px;
}
.tab:hover { color: var(--i2); }
.tab.on { color: var(--blue); border-bottom-color: var(--blue); }
.tab-panel { display: none; padding-top: 16px; }
.tab-panel.on { display: block; }

/* ── ACORDEÓN — <details> nativo ── */
.accordion {
  border: 1px solid var(--bd); border-radius: var(--r3);
  background: var(--s); overflow: hidden; box-shadow: var(--sh1);
}
.accordion details + details { border-top: 1px solid var(--bd); }
.accordion summary {
  padding: 13px 16px; font-size: 13px; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; gap: 8px;
  list-style: none; transition: .13s;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary:hover { background: var(--s2); }
.accordion summary::after {
  content: '+'; margin-left: auto; color: var(--i4);
  font-size: 16px; font-weight: 600; line-height: 1;
}
.accordion details[open] summary::after { content: '−'; color: var(--blue); }
.accordion details[open] summary { color: var(--blue); }
.accordion .acc-body { padding: 0 16px 14px; font-size: 13px; color: var(--i2); line-height: 1.7; }

/* ── DROPDOWN (menú de acciones) ── */
.dropdown { position: relative; display: inline-block; }
.dropdown-menu {
  position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 190px; background: var(--s);
  border: 1px solid var(--bd); border-radius: var(--r2);
  box-shadow: var(--sh2); padding: 6px; z-index: 80; display: none;
}
.dropdown.open .dropdown-menu { display: block; animation: toast-in .15s ease; }
.dropdown-menu.left { right: auto; left: 0; }
.dropdown-item {
  display: flex; align-items: center; gap: 9px;
  width: 100%; text-align: left;
  padding: 8px 10px; border-radius: 8px;
  font: 600 13px 'Plus Jakarta Sans', sans-serif; color: var(--i2);
  cursor: pointer; transition: .12s;
}
.dropdown-item:hover { background: var(--s2); color: var(--ink); }
.dropdown-item.danger { color: var(--red); }
.dropdown-item.danger:hover { background: var(--red2); }
.dropdown-divider { height: 1px; background: var(--bd); margin: 6px 4px; }

/* ── TOOLTIP — CSS puro con data-tip ── */
[data-tip] { position: relative; }
[data-tip]:hover::after, [data-tip]:focus-visible::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%);
  background: var(--ink); color: #fff;
  font: 600 11px/1.4 'Plus Jakarta Sans', sans-serif;
  padding: 5px 10px; border-radius: 7px;
  white-space: nowrap; z-index: 90; pointer-events: none;
}
[data-tip]:hover::before, [data-tip]:focus-visible::before {
  content: ''; position: absolute; bottom: calc(100% + 3px); left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--ink);
  border-bottom: none; z-index: 90; pointer-events: none;
}

/* ── LOADERS: spinner + skeleton ── */
.spinner {
  width: 18px; height: 18px; flex-shrink: 0;
  border: 2.5px solid var(--bd); border-top-color: var(--blue);
  border-radius: 99px; animation: spin .7s linear infinite;
}
.spinner-lg { width: 28px; height: 28px; border-width: 3px; }
.spinner-sm { width: 14px; height: 14px; border-width: 2px; }
.btn-primary .spinner, .btn-teal .spinner {
  border-color: rgba(255,255,255,.35); border-top-color: #fff;
}
@keyframes spin { to { transform: rotate(360deg); } }
.skeleton {
  background: linear-gradient(90deg, var(--bd) 25%, var(--s2) 50%, var(--bd) 75%);
  background-size: 200% 100%;
  animation: skel 1.3s ease infinite;
  border-radius: 6px;
}
@keyframes skel { to { background-position: -200% 0; } }
.sk-text   { height: 12px; }
.sk-title  { height: 18px; width: 55%; }
.sk-avatar { width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; }
.sk-thumb  { height: 90px; border-radius: var(--r2); }
.w-40p { width: 40% } .w-60p { width: 60% } .w-80p { width: 80% }

/* ── ESTADO VACÍO ── */
.empty { padding: 40px 20px; text-align: center; }
.empty-icon {
  width: 56px; height: 56px; border-radius: 16px;
  background: var(--bt); color: var(--blue);
  display: grid; place-items: center; margin: 0 auto 14px;
}
.empty h4 { font-size: 15px; font-weight: 800; margin-bottom: 4px; }
.empty p { font-size: 13px; color: var(--i3); max-width: 320px; margin: 0 auto 16px; line-height: 1.6; }

/* ── PANEL LATERAL (slide-over) ── */
.panel-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(13,21,38,.5);
  display: flex; justify-content: flex-end;
}
.panel-overlay[hidden] { display: none; }
.panel {
  background: var(--s); width: 420px; max-width: 92vw; height: 100%;
  box-shadow: var(--sh3); display: flex; flex-direction: column;
  animation: panel-in .25s cubic-bezier(.4,0,.2,1);
}
@keyframes panel-in { from { transform: translateX(100%); } }
.panel-head {
  display: flex; align-items: center; gap: 8px;
  padding: 16px 20px; border-bottom: 1px solid var(--bd);
}
.panel-head h3 { font-size: 16px; font-weight: 800; flex: 1; }
.panel-body { padding: 18px 20px; overflow-y: auto; flex: 1; }
.panel-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 14px 20px; border-top: 1px solid var(--bd);
  padding-bottom: calc(14px + env(safe-area-inset-bottom));
}

/* ── ACCESIBILIDAD ── */
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
.btn:focus-visible, .input:focus-within, .tab:focus-visible { outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* móvil: toasts abajo, panel full-width */
@media (max-width: 560px) {
  .toast-stack { top: auto; bottom: calc(16px + env(safe-area-inset-bottom)); right: 16px; }
  .panel { width: 100%; max-width: 100%; }
}