/**
 * MisparBit v2 — Design System CSS
 * Tema CLARO: fondo blanco/pergamino, acento índigo + dorado
 */

/* ============================================================
   VARIABLES GLOBALES
   ============================================================ */
:root {
  /* Colores principales */
  --mb-bg:           #FFFFFF;
  --mb-bg-soft:      #F2F4F7;         /* gris neutro muy suave */
  --mb-bg-card:      #FFFFFF;
  --mb-bg-alt:       #EBF4FD;         /* celeste muy suave */
  --mb-border:       #D8E4EE;

  /* Texto */
  --mb-text:         #1A1B2E;          /* casi negro */
  --mb-text-muted:   #6B7280;
  --mb-text-light:   #9CA3AF;

  /* Índigo (primario UI) ->  Azul Clásico MisparBit */
  --mb-indigo:       #1b3045;
  --mb-indigo-mid:   #2c4969;
  --mb-indigo-light: #e6eef5;
  --mb-indigo-dark:  #0f1f2e;

  /* Violeta (acento secundario) -> Celeste Cielo Israel */
  --mb-violet:       #005eb8;
  --mb-violet-light: #e0f0fd;

  /* Dorado (gematría y hebreo) */
  --mb-gold:         #B8860B;
  --mb-gold-bright:  #D4A017;
  --mb-gold-soft:    #FEF9EC;

  /* Estado */
  --mb-success:      #059669;
  --mb-warning:      #D97706;
  --mb-danger:       #DC2626;

  /* Sombras */
  --mb-shadow-sm:    0 1px 3px rgba(0,0,0,.08);
  --mb-shadow:       0 4px 20px rgba(30,38,96,.10);
  --mb-shadow-lg:    0 8px 40px rgba(30,38,96,.16);

  /* Bordes */
  --mb-radius-sm:    6px;
  --mb-radius:       12px;
  --mb-radius-lg:    20px;
  --mb-radius-full:  9999px;

  /* Espaciado */
  --mb-space-1: 4px;  --mb-space-2: 8px;  --mb-space-3: 12px;
  --mb-space-4: 16px; --mb-space-5: 24px; --mb-space-6: 32px;
  --mb-space-8: 48px; --mb-space-10: 64px;

  /* Tipografía */
  --mb-font-ui:     'Inter', system-ui, sans-serif;
  --mb-font-heb:    'Noto Sans Hebrew', serif;
  --mb-font-title:  'Cinzel', serif;
  --mb-font-size:   16px;
  --mb-lh:          1.6;

  /* Transiciones */
  --mb-transition: 200ms cubic-bezier(.4,0,.2,1);

  /* Sistema de Z-Index */
  --mb-z-base:    0;
  --mb-z-sticky:  100;
  --mb-z-toolbar: 1000;
  --mb-z-panel:   1050;
  --mb-z-overlay: 1500;
  --mb-z-modal:   2000;
  --mb-z-toast:   2100;
}

/* ============================================================
   RESET Y BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: var(--mb-font-size);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--mb-font-ui);
  background: var(--mb-bg-soft);
  color: var(--mb-text);
  line-height: var(--mb-lh);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--mb-indigo); text-decoration: none; transition: color var(--mb-transition); }
a:hover { color: var(--mb-violet); }
img { max-width: 100%; display: block; }

/* ============================================================
   TIPOGRAFÍA
   ============================================================ */
h1,h2,h3,h4,h5,h6 {
  font-family: var(--mb-font-title);
  line-height: 1.2;
  color: var(--mb-indigo-dark);
}
h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
h3 { font-size: 1.25rem; }

.mb-hebrew-text {
  font-family: var(--mb-font-heb);
  direction: rtl;
  unicode-bidi: embed;
}
.mb-cinzel { font-family: var(--mb-font-title); }

/* ============================================================
   BOTONES
   ============================================================ */
.mb-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--mb-space-2);
  padding: .6rem 1.25rem;
  border-radius: var(--mb-radius-full);
  border: 2px solid transparent;
  font-family: var(--mb-font-ui);
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--mb-transition);
  white-space: nowrap;
  text-decoration: none;
  user-select: none;
}
.mb-btn--primary {
  background: var(--mb-indigo);
  color: #fff;
  border-color: var(--mb-indigo);
}
.mb-btn--primary:hover {
  background: var(--mb-indigo-dark);
  border-color: var(--mb-indigo-dark);
  transform: translateY(-1px);
  box-shadow: var(--mb-shadow);
}
.mb-btn--secondary {
  background: var(--mb-violet);
  color: #fff;
  border-color: var(--mb-violet);
}
.mb-btn--secondary:hover {
  background: #004b93;
  border-color: #004b93;
  transform: translateY(-1px);
}
.mb-btn--outline {
  background: transparent;
  color: var(--mb-indigo);
  border-color: var(--mb-indigo);
}
.mb-btn--outline:hover {
  background: var(--mb-indigo-light);
  transform: translateY(-1px);
}
.mb-btn--gold {
  background: var(--mb-gold);
  color: #fff;
  border-color: var(--mb-gold);
}
.mb-btn--gold:hover {
  background: var(--mb-gold-bright);
  transform: translateY(-1px);
  box-shadow: var(--mb-shadow);
}
.mb-btn--ghost {
  background: transparent;
  color: var(--mb-text-muted);
  border-color: var(--mb-border);
}
.mb-btn--ghost:hover { background: var(--mb-bg-alt); color: var(--mb-text); }
.mb-btn--sm { padding: .35rem .9rem; font-size: .8rem; }
.mb-btn--lg { padding: .85rem 2rem; font-size: 1rem; }
.mb-btn--icon { padding: .5rem; border-radius: var(--mb-radius-full); aspect-ratio: 1; }

/* ============================================================
   INPUTS Y SELECTS
   ============================================================ */
.mb-input, .mb-select {
  display: block;
  width: 100%;
  padding: .6rem 1rem;
  border: 1.5px solid var(--mb-border);
  border-radius: var(--mb-radius-sm);
  background: var(--mb-bg);
  color: var(--mb-text);
  font-family: var(--mb-font-ui);
  font-size: .9rem;
  transition: border-color var(--mb-transition), box-shadow var(--mb-transition);
}
.mb-input:focus, .mb-select:focus {
  outline: none;
  border-color: var(--mb-indigo-mid);
  box-shadow: 0 0 0 3px rgba(79,94,189,.15);
}
.mb-label {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  color: var(--mb-text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: var(--mb-space-1);
}

/* ============================================================
   CARDS
   ============================================================ */
.mb-card {
  background: var(--mb-bg-card);
  border-radius: var(--mb-radius);
  border: 1px solid var(--mb-border);
  box-shadow: var(--mb-shadow-sm);
  overflow: hidden;
  transition: transform var(--mb-transition), box-shadow var(--mb-transition);
}
.mb-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--mb-shadow);
}
.mb-card__body { padding: var(--mb-space-5); }

/* ============================================================
   LOADER
   ============================================================ */
.mb-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--mb-space-3);
  padding: var(--mb-space-8);
  color: var(--mb-text-muted);
}
.mb-loader__spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--mb-border);
  border-top-color: var(--mb-indigo);
  border-radius: 50%;
  animation: mb-spin 0.8s linear infinite;
}
@keyframes mb-spin { to { transform: rotate(360deg); } }

/* ============================================================
   TOGGLE
   ============================================================ */
.mb-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--mb-space-2);
  cursor: pointer;
  user-select: none;
}
.mb-toggle input { display: none; }
.mb-toggle__track {
  width: 36px;
  height: 20px;
  background: var(--mb-border);
  border-radius: var(--mb-radius-full);
  position: relative;
  transition: background var(--mb-transition);
}
.mb-toggle__track::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 14px; height: 14px;
  background: white;
  border-radius: 50%;
  transition: transform var(--mb-transition);
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.mb-toggle input:checked + .mb-toggle__track {
  background: var(--mb-indigo);
}
.mb-toggle input:checked + .mb-toggle__track::after {
  transform: translateX(16px);
}
.mb-toggle__label {
  font-size: .8rem;
  color: var(--mb-text-muted);
}

/* ============================================================
   BADGE / PILL
   ============================================================ */
.mb-badge {
  display: inline-flex;
  align-items: center;
  padding: .15rem .6rem;
  border-radius: var(--mb-radius-full);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.mb-badge--gold { background: var(--mb-gold-soft); color: var(--mb-gold); }
.mb-badge--indigo { background: var(--mb-indigo-light); color: var(--mb-indigo); }
.mb-badge--violet { background: var(--mb-violet-light); color: var(--mb-violet); }

/* ============================================================
   SKELETON
   ============================================================ */
.mb-skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: mb-shimmer 1.5s infinite;
  border-radius: var(--mb-radius-sm);
}
@keyframes mb-shimmer { to { background-position: -200% 0; } }
.mb-skeleton--sidebar { height: 100%; min-height: 300px; }

/* ============================================================
   FOCUS VISIBLE UNIVERSAL — WCAG 2.4.11
   ============================================================ */
.mb-btn:focus-visible,
.mb-input:focus-visible,
.mb-select:focus-visible {
  outline: 3px solid var(--mb-indigo-mid);
  outline-offset: 2px;
}

/* Toggle accesible: mantener en flujo pero visualmente oculto */
.mb-toggle input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.mb-toggle input:focus-visible + .mb-toggle__track {
  outline: 3px solid var(--mb-indigo-mid);
  outline-offset: 2px;
}