/* ════════════════════════════════════════════════════════════════════
   BIGBUDA HQ · DESIGN TOKENS
   Sistema de tokens base · light + dark
   Estilo target: Cloudflare Analytics / Apple HIG / Linear / Stripe / Vercel
   Restricciones: cero gradients · radius 4px · paleta clara · idioma chileno
   ════════════════════════════════════════════════════════════════════ */

:root {
  /* ─── COLOR · superficies y bordes ─── */
  --bg-base:           #F4F4F5;
  --bg-card:           #FFFFFF;
  --bg-elevated:       #FAFAFA;
  --bg-tinted:         #F0F0F0;
  --bg-muted:          #F4F4F5;

  --border-subtle:     #ECECEC;
  --border:            #D4D4D8;
  --border-strong:     #A1A1AA;

  /* ─── COLOR · texto ─── */
  --text-primary:      #0A0A0A;
  --text-secondary:    #525252;
  --text-muted:        #737373;
  --text-tertiary:     #767676; /* v181 · au-7 fix WCAG · era #A3A3A3 (2.59:1 fail) · ahora 4.54:1 AA contra #FFF */

  /* ─── COLOR · marca Bigbuda ───
     [18may · Marcel "sigue púrpura · no quiero TANTO púrpura · solo el borde
     del copiloto puede ser el púrpura original"] Dirección premium definitiva
     (Linear/Vercel/Stripe): UI casi monocromática en grafito neutro + UN solo
     acento de firma (púrpura original) concentrado en el COPILOTO = hero/foco
     visual → máximo CRO (el ojo va a la zona de acción) y descanso visual.
     --brand pasa a grafito-tinta neutro (NO púrpura) para los ~74 usos de
     accento/texto/borde/focus. El púrpura vive en --copilot-accent. */
  --brand:             #3A3F4C;
  --brand-hover:       #262A34;
  --brand-tint:        rgba(58, 63, 76, 0.06);
  --brand-border:      rgba(58, 63, 76, 0.18);
  --brand-foreground:  #FFFFFF;
  --copilot-accent:    #6366F1;  /* púrpura ORIGINAL · SOLO copiloto (firma) */

  /* ─── COLOR · semánticos ─── */
  --success:           #10B981;
  --success-soft:      #ECFDF5;
  --success-border:    #D1FAE5;
  --warning:           #F59E0B;
  --warning-soft:      #FFFBEB;
  --warning-border:    #FEF3C7;
  --danger:            #DC2626;
  --danger-soft:       #FEF2F2;
  --danger-border:     #FEE2E2;
  --info:              #3B82F6;
  --info-soft:         #EFF6FF;
  --info-border:       #DBEAFE;

  /* ─── COLOR · sistema cromático LEAD SCORE (todos los pills/badges) ─── */
  --hot:               #DC2626;    /* score ≥75 */
  --hot-soft:          #FEF2F2;
  --hot-border:        #FEE2E2;
  --warm:              #B45309;    /* score 60-74 */
  --warm-soft:         #FFFBEB;
  --warm-border:       #FEF3C7;
  --cold:              #71717A;    /* score <60 */
  --cold-soft:         #F4F4F5;
  --cold-border:       #E4E4E7;

  /* ─── TIPOGRAFÍA · familias ─── */
  --font-sans:         -apple-system, BlinkMacSystemFont, "Inter", system-ui, "Segoe UI", Roboto, sans-serif;
  --font-mono:         "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  /* ─── TIPOGRAFÍA · tamaños (con line-height base 1.5) ─── */
  --text-xs:           11px;       /* Labels, captions, eyebrows uppercase */
  --text-sm:           12px;       /* Helper text · secondary info */
  --text-base:         13px;       /* Body default */
  --text-md:           14px;       /* Body principal · etiquetas */
  --text-lg:           16px;       /* Subtítulos zona */
  --text-xl:           18px;       /* Títulos sección */
  --text-2xl:          22px;       /* H2 */
  --text-3xl:          28px;       /* H1 / KPIs satélites grandes */
  --text-4xl:          40px;       /* Hero secundario */
  --text-5xl:          56px;       /* Hero móvil */

  /* ─── TIPOGRAFÍA · pesos ─── */
  --weight-regular:    400;
  --weight-medium:     500;
  --weight-semibold:   600;
  --weight-bold:       700;

  /* ─── TIPOGRAFÍA · letter-spacing ─── */
  --ls-tight:          -0.04em;    /* Hero $48 MM · números muy grandes */
  --ls-snug:           -0.02em;    /* H1 · H2 · KPIs satélites */
  --ls-normal:         -0.005em;   /* Body */
  --ls-wide:           0.06em;     /* Eyebrows uppercase corta */
  --ls-wider:          0.12em;     /* "PIPELINE ACTIVO EN CIERRE" tipo Stripe */

  /* ─── ESPACIADO (escala fija) ─── */
  --space-1:           4px;
  --space-2:           8px;
  --space-3:           12px;
  --space-4:           16px;
  --space-5:           20px;
  --space-6:           24px;
  --space-8:           32px;
  --space-10:          40px;
  --space-12:          48px;
  --space-16:          64px;       /* Entre secciones mayores · estándar */
  --space-20:          80px;       /* Entre zonas hero */
  --space-24:          96px;       /* Padding superior pantalla desktop */

  /* ─── RADIOS ─── [Marcel · 2026-05-19] "no me gustan los bordes redondos".
   * Cap apretado: xs=2 · sm=4 (standard del sistema · .btn) · md=4 · lg=6.
   * Pills full-rounded SOLO en status pills (Hot/Tibio/Frío · cohort). */
  --radius-xs:         2px;        /* Mini elementos · dots · lines · email preview card */
  --radius-sm:         4px;        /* Standard del sistema · TODO usa esto · .btn */
  --radius-md:         4px;        /* Cards · chips · contenedores (antes 6px) */
  --radius-lg:         4px;        /* Modales completos (antes 8px) */
  --radius-pill:       999px;      /* SOLO status pills (Hot/Tibio/Frío) */
  --radius-full:       50%;        /* Avatares · iconos circulares */

  /* ─── SOMBRAS · cero dramatismo ─── */
  --shadow-none:       none;
  --shadow-sm:         0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:         0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.03);
  --shadow-lg:         0 12px 32px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
  --shadow-card:       0 1px 0 0 rgba(0, 0, 0, 0.02), 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-card-hover: 0 1px 0 0 rgba(0, 0, 0, 0.03), 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-modal:      0 16px 48px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-popover:    0 4px 16px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04);

  /* ─── ANIMACIONES · easings y duraciones ─── */
  --ease-out:          cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:       cubic-bezier(0.4, 0, 0.2, 1);
  --ease-emphasis:     cubic-bezier(0.32, 0.72, 0, 1);
  --duration-fast:     120ms;
  --duration-base:     220ms;
  --duration-slow:     320ms;
  --duration-emphasis: 480ms;

  /* ─── Z-INDEX ─── (v316 · tokens completos para evitar guerra !important futura) */
  --z-base:            0;
  --z-sticky:          100;
  --z-dropdown:        300;
  --z-modal-bg:        500;
  --z-modal:           600;
  --z-drawer-backdrop: 1199;   /* sidebar mobile backdrop */
  --z-drawer:          1200;   /* sidebar mobile drawer */
  --z-toast:           9500;
  --z-popover:         9650;
  --z-tooltip:         9700;
  --z-claude-banner:   9998;   /* claude-health-banner */
  --z-boot-splash:     9999;   /* bb-boot-loading */
  --z-focus-overlay:   100000; /* focus-overlay mobile */
  --z-bb-modal:        200000; /* bb-schedule-overlay y modales críticos */

  /* ─── SIDEBAR · tokens específicos · rediseño premium 19 may ───
     Linear/Stripe/Notion-grade · sutil, compacto, integrado. */
  --sb-header-size:    11px;
  --sb-header-tracking: 0.04em;
  --sb-header-weight:  600;
  --sb-section-gap:    24px;   /* spacing entre secciones · era 32px (saturado) */
  --sb-item-pad-y:     8px;
  --sb-item-pad-x:     12px;
  --sb-item-icon:      16px;
}

/* ════════════════════════════════════════════════════════════════════
   DARK MODE · mismas semánticas, valores adaptados
   ════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  /* [18may · Marcel "dark mode DEMASIADO oscuro · no contrasta · los elementos
     no se distinguen"] CAUSA: base #0A0A0B y card #131316 casi idénticos (las
     cards no se despegaban del fondo) y border-subtle #1F1F25 = bg-tinted →
     bordes invisibles, todo una sopa negra plana. FIX: escalones de superficie
     claros (base→card→elevated→tinted con +luminancia perceptible) + bordes
     visibles · sigue siendo OSCURO (Marcel lo quiere dark) pero con jerarquía
     y separación tipo Linear/Stripe. Solo tokens de color · net-safe. */
  --bg-base:           #0B0B0D;
  --bg-card:           #17181B;
  --bg-elevated:       #202126;
  --bg-tinted:         #26272D;
  --bg-muted:          #202126;

  --border-subtle:     #2B2C32;
  --border:            #3A3B42;
  --border-strong:     #56575F;

  --text-primary:      #FAFAFA;
  --text-secondary:    #B6B6BF;
  --text-muted:        #8A8A94;
  --text-tertiary:     #6B6B74;

  /* [18may] Dark · grafito neutro claro (NO púrpura · monocromático premium) ·
     púrpura original solo en --copilot-accent */
  --brand:             #AEB4C2;
  --brand-hover:       #C7CCD7;
  --brand-tint:        rgba(174, 180, 194, 0.12);
  --brand-border:      rgba(174, 180, 194, 0.28);
  --copilot-accent:    #6366F1;  /* púrpura ORIGINAL · SOLO copiloto (firma) */

  --success:           #34D399;
  --success-soft:      rgba(52, 211, 153, 0.10);
  --success-border:    rgba(52, 211, 153, 0.24);
  --warning:           #FBBF24;
  --warning-soft:      rgba(251, 191, 36, 0.10);
  --warning-border:    rgba(251, 191, 36, 0.24);
  --danger:            #F87171;
  --danger-soft:       rgba(248, 113, 113, 0.10);
  --danger-border:     rgba(248, 113, 113, 0.24);
  --info:              #60A5FA;
  --info-soft:         rgba(96, 165, 250, 0.10);
  --info-border:       rgba(96, 165, 250, 0.24);

  --hot:               #FB7185;
  --hot-soft:          rgba(251, 113, 133, 0.16);
  --hot-border:        rgba(251, 113, 133, 0.30);
  --warm:              #FCD34D;
  --warm-soft:         rgba(252, 211, 77, 0.14);
  --warm-border:       rgba(252, 211, 77, 0.28);
  --cold:              #A1A1AA;
  --cold-soft:         rgba(161, 161, 170, 0.14);
  --cold-border:       rgba(161, 161, 170, 0.28);

  /* Sombras en dark son apenas perceptibles · mantener sutil */
  --shadow-card:       0 1px 0 0 rgba(0, 0, 0, 0.20), 0 1px 3px rgba(0, 0, 0, 0.18);
  --shadow-card-hover: 0 1px 0 0 rgba(0, 0, 0, 0.30), 0 4px 12px rgba(0, 0, 0, 0.24);
  --shadow-modal:      0 16px 48px rgba(0, 0, 0, 0.40), 0 4px 12px rgba(0, 0, 0, 0.30);
}

/* ════════════════════════════════════════════════════════════════════
   PREFERENCIAS · respeta accesibilidad y sistema
   ════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   BREAKPOINTS · solo referencia (usar en media queries)
   320px  · móvil pequeño
   375px  · móvil estándar (iPhone)
   414px  · móvil grande
   768px  · tablet vertical
   1024px · tablet horizontal / laptop pequeño
   1280px · desktop estándar
   1440px · laptop 14"+
   1920px · desktop ancho
   2560px · 4K
   ════════════════════════════════════════════════════════════════════ */

/* ─── DISEÑO STAGE · Sprint 5 · Claude Design AI OS ─── */
.diseno-stage{display:flex;flex-direction:column;gap:14px;padding:0;}
.diseno-stage__head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 18px;background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:4px;}
.diseno-stage__title-block{min-width:0;flex:1;}
.diseno-stage__title{margin:0;font-size:18px;font-weight:600;color:var(--text-primary);letter-spacing:-0.02em;}
.diseno-stage__sub{margin:2px 0 0;font-size:12px;color:var(--text-muted);}
.diseno-stage__actions{display:flex;gap:10px;align-items:center;flex-shrink:0;}
.diseno-stage__state{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:4px;font-size:11px;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;background:var(--bg-elevated);color:var(--text-secondary);}
.diseno-stage__state-dot{width:7px;height:7px;border-radius:50%;background:var(--text-muted);}
.diseno-stage__state[data-state="empezando"]{background:rgba(168,85,247,0.10);color:#7C3AED;} .diseno-stage__state[data-state="empezando"] .diseno-stage__state-dot{background:#A855F7;animation:bb-pulse 1.6s infinite;}
.diseno-stage__state[data-state="generando"]{background:rgba(99,102,241,0.12);color:#4F46E5;} .diseno-stage__state[data-state="generando"] .diseno-stage__state-dot{background:#6366F1;animation:bb-pulse 1.2s infinite;}
.diseno-stage__state[data-state="listo"]{background:rgba(245,158,11,0.12);color:#B45309;} .diseno-stage__state[data-state="listo"] .diseno-stage__state-dot{background:#F59E0B;}
.diseno-stage__state[data-state="revision"]{background:rgba(14,165,233,0.12);color:#0369A1;} .diseno-stage__state[data-state="revision"] .diseno-stage__state-dot{background:#0EA5E9;}
.diseno-stage__state[data-state="aprobado"]{background:rgba(16,185,129,0.14);color:#047857;} .diseno-stage__state[data-state="aprobado"] .diseno-stage__state-dot{background:#10B981;}
@keyframes bb-pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:0.6;transform:scale(1.4);}}

.diseno-projects-row{display:flex;gap:10px;overflow-x:auto;padding:4px 2px;scroll-snap-type:x mandatory;}
.diseno-project-card{flex:0 0 auto;width:240px;padding:12px 14px;background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:4px;cursor:pointer;transition:border-color 180ms,box-shadow 180ms;scroll-snap-align:start;}
.diseno-project-card:hover{border-color:var(--border);box-shadow:0 2px 8px rgba(0,0,0,0.04);}
.diseno-project-card[aria-selected="true"]{border-color:#7C3AED;box-shadow:0 0 0 2px rgba(124,58,237,0.18);}
.diseno-project-card__name{font-size:13px;font-weight:600;color:var(--text-primary);margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.diseno-project-card__meta{font-size:11px;color:var(--text-muted);display:flex;align-items:center;gap:6px;}

.diseno-grid{display:grid;grid-template-columns:320px 1fr 320px;gap:14px;min-height:580px;}
.diseno-col{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:4px;display:flex;flex-direction:column;overflow:hidden;}
.diseno-col__head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border-subtle);}
.diseno-col__title{margin:0;font-size:13px;font-weight:600;color:var(--text-primary);}
.diseno-col__meta{font-size:11px;color:var(--text-muted);}
.diseno-col__body{flex:1;padding:14px 16px;overflow-y:auto;}
.diseno-col__head--preview{justify-content:space-between;}
.diseno-preview-body{padding:0;display:flex;align-items:center;justify-content:center;background:var(--bg-elevated);}
.diseno-preview-body iframe{border:0;width:100%;height:100%;display:block;background:#fff;border-radius:0;transition:width 280ms cubic-bezier(0.16,1,0.3,1),max-width 280ms cubic-bezier(0.16,1,0.3,1);}
.diseno-preview-body[data-device="mobile"] iframe{max-width:375px;}
.diseno-preview-body[data-device="tablet"] iframe{max-width:768px;}
.diseno-preview-body[data-device="desktop"] iframe{max-width:100%;}

.diseno-device-toggle{display:inline-flex;gap:2px;background:var(--bg-elevated);border-radius:4px;padding:2px;}
.diseno-device-btn{all:unset;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:28px;height:24px;border-radius:2px;color:var(--text-muted);transition:all 140ms;}
.diseno-device-btn:hover{color:var(--text-primary);}
.diseno-device-btn[aria-pressed="true"]{background:var(--bg-card);color:#7C3AED;box-shadow:0 1px 2px rgba(0,0,0,0.06);}

.diseno-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:32px 16px;text-align:center;color:var(--text-muted);font-size:12.5px;line-height:1.5;}
.diseno-empty--center{height:100%;min-height:420px;}
.diseno-empty svg{color:var(--text-tertiary);opacity:0.6;}
.diseno-empty p{margin:0;}
.diseno-empty p span{display:block;margin-top:4px;font-size:11px;color:var(--text-tertiary);}
.diseno-empty--small{padding:14px 8px;font-size:11.5px;}

.diseno-score-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:12px;}
.diseno-score-cell{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;background:var(--bg-elevated);border-radius:4px;}
.diseno-score-cell__lbl{font-size:10.5px;color:var(--text-muted);font-weight:600;letter-spacing:0.04em;text-transform:uppercase;}
.diseno-score-cell__val{font-size:13px;color:var(--text-primary);font-weight:700;font-variant-numeric:tabular-nums;}
.diseno-score-cell[data-status="ok"] .diseno-score-cell__val{color:#059669;}
.diseno-score-cell[data-status="warn"] .diseno-score-cell__val{color:#B45309;}
.diseno-score-cell[data-status="fail"] .diseno-score-cell__val{color:#DC2626;}
.diseno-score-total{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;background:linear-gradient(135deg,rgba(168,85,247,0.10),rgba(124,58,237,0.06));border-radius:4px;border:1px solid rgba(168,85,247,0.20);margin-bottom:14px;}
.diseno-score-total__lbl{font-size:11px;color:#7C3AED;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;}
.diseno-score-total__val{font-size:22px;color:#4C1D95;font-weight:700;font-variant-numeric:tabular-nums;}
.diseno-audit-list{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;}
.diseno-actions{display:flex;flex-direction:column;gap:6px;}

@media (max-width:1100px){
  .diseno-grid{grid-template-columns:1fr;grid-template-rows:auto auto auto;}
  .diseno-col{min-height:260px;}
}