/* ============================================================
   GRD IA — Design System "Bento Azul"  (v1, 2026-08-30)
   OPT-IN: todo vive bajo .ds / .ds-* — no afecta páginas sin migrar.
   Grounded en el mockup BentoAzul.dc.html.
   ============================================================ */

:root {
  /* Superficie / neutros cálidos */
  --ds-bg:            #FAF7F2;   /* fondo crema tibio */
  --ds-surface:       #FFFFFF;   /* tarjetas */
  --ds-surface-2:     #FBF9F5;   /* superficie interior */
  --ds-border:        #EDE6DB;   /* borde cálido */
  --ds-border-soft:   #ECE5DA;

  /* Marca — indigo */
  --ds-primary:       #4F46E5;
  --ds-primary-dark:  #4338CA;
  --ds-accent:        #818CF8;   /* indigo claro (sobre oscuro) */
  --ds-soft-bg:       #EEF0FD;   /* fondo suave de acento */
  --ds-soft-border:   #D9DEFB;

  /* Texto */
  --ds-text:          #0E1A2E;   /* navy */
  --ds-text-2:        #3B4A63;
  --ds-muted:         #5A6B85;
  --ds-faint:         #8A94A6;
  --ds-on-primary:    #FFFFFF;

  /* Oscuro (tarjetas navy) */
  --ds-dark:          #0E1A2E;
  --ds-on-dark:       #C7D3E6;

  /* Semánticos clínicos */
  --ds-mcc-bg: #FEF3C7; --ds-mcc-tx: #92400E;   /* MCC ámbar */
  --ds-cc-bg:  #DBEAFE; --ds-cc-tx:  #1E40AF;   /* CC azul */
  --ds-proc-bg:#CCFBF1; --ds-proc-tx:#0F766E;   /* Procedimientos TEAL (movido de violeta) */

  /* Estado */
  --ds-danger:  #DC2626; --ds-danger-bg: #FEE2E2;
  --ds-success: #16A34A; --ds-success-bg: #DCFCE7;

  /* Tipografía */
  --ds-font-display: 'Bricolage Grotesque', 'Hanken Grotesk', system-ui, sans-serif;
  --ds-font-body:    'Hanken Grotesk', system-ui, -apple-system, sans-serif;

  /* Radios */
  --ds-r-card: 20px; --ds-r-md: 13px; --ds-r-sm: 9px; --ds-r-pill: 999px;

  /* Sombras */
  --ds-shadow-sm: 0 1px 3px rgba(14,26,46,.05), 0 1px 2px rgba(14,26,46,.05);
  --ds-shadow-md: 0 10px 30px rgba(14,26,46,.06);
}

/* ---- Base de página migrada (opt-in) ---- */
.ds {
  font-family: var(--ds-font-body);
  background: var(--ds-bg);
  color: var(--ds-text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.ds *, .ds *::before, .ds *::after { box-sizing: border-box; }
.ds a { color: var(--ds-primary); text-decoration: none; }
.ds a:hover { color: var(--ds-primary-dark); }

/* ---- Tipografía ---- */
.ds-display { font-family: var(--ds-font-display); letter-spacing: -0.02em; font-weight: 800; }
.ds-h1 { font-family: var(--ds-font-display); font-weight: 800; font-size: 54px; line-height: 1.05; letter-spacing: -0.02em; margin: 0; }
.ds-h2 { font-family: var(--ds-font-display); font-weight: 700; font-size: 32px; line-height: 1.1; letter-spacing: -0.02em; margin: 0; }
.ds-h3 { font-family: var(--ds-font-display); font-weight: 700; font-size: 21px; line-height: 1.15; margin: 0; }
.ds-lead { font-size: 18px; color: var(--ds-muted); line-height: 1.55; }
.ds-eyebrow { font-size: 12.5px; font-weight: 700; color: var(--ds-primary); text-transform: uppercase; letter-spacing: 0.06em; }

/* ---- Botones ---- */
.ds-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--ds-font-body); font-weight: 600; font-size: 15px; line-height: 1;
  padding: 13px 24px; border-radius: var(--ds-r-md); border: 1px solid transparent;
  cursor: pointer; transition: all .18s ease; text-decoration: none; }
.ds-btn--primary { background: var(--ds-primary); color: var(--ds-on-primary); }
.ds-btn--primary:hover { background: var(--ds-primary-dark); color: #fff; }
.ds-btn--ghost { background: var(--ds-surface); border-color: var(--ds-border); color: var(--ds-text); }
.ds-btn--ghost:hover { border-color: var(--ds-primary); color: var(--ds-primary); }
.ds-btn--sm { padding: 9px 16px; font-size: 13.5px; border-radius: var(--ds-r-sm); }

/* ---- Tarjetas / bento ---- */
.ds-card { background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-r-card); padding: 24px; }
.ds-card--dark { background: var(--ds-dark); color: #fff; border: none; }
.ds-card--soft { background: var(--ds-soft-bg); border-color: var(--ds-soft-border); }
.ds-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }

/* ---- Badges / pills ---- */
.ds-pill { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600;
  padding: 6px 14px; border-radius: var(--ds-r-pill); background: var(--ds-soft-bg);
  border: 1px solid var(--ds-soft-border); color: var(--ds-primary-dark); }
.ds-badge { font-size: 10.5px; font-weight: 700; padding: 2px 9px; border-radius: var(--ds-r-pill); }
.ds-badge--mcc  { background: var(--ds-mcc-bg);  color: var(--ds-mcc-tx); }
.ds-badge--cc   { background: var(--ds-cc-bg);   color: var(--ds-cc-tx); }
.ds-badge--proc { background: var(--ds-proc-bg); color: var(--ds-proc-tx); }

/* ---- Inputs ---- */
.ds-input, .ds-textarea, .ds-select {
  width: 100%; font-family: var(--ds-font-body); font-size: 15px; color: var(--ds-text);
  background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-r-md);
  padding: 12px 14px; transition: border-color .15s, box-shadow .15s; }
.ds-input:focus, .ds-textarea:focus, .ds-select:focus {
  outline: none; border-color: var(--ds-primary); box-shadow: 0 0 0 3px rgba(79,70,229,.12); }
.ds-label { display: block; font-size: 13px; font-weight: 600; color: var(--ds-text-2); margin-bottom: 6px; }

/* ---- Nav / marca ---- */
.ds-logo { width: 32px; height: 32px; border-radius: 9px; background: var(--ds-primary); color: #fff;
  display: flex; align-items: center; justify-content: center; font-family: var(--ds-font-display); font-weight: 800; font-size: 13px; }
.ds-brand { font-family: var(--ds-font-display); font-weight: 700; font-size: 19px; color: var(--ds-text); }

/* ---- Layout helpers ---- */
.ds-container { max-width: 1080px; margin: 0 auto; padding: 0 44px; }

/* ---- Responsive (mobile-first safe: apila el bento) ---- */
@media (max-width: 820px) {
  .ds-bento { grid-template-columns: 1fr; }
  .ds-bento > * { grid-column: auto !important; grid-row: auto !important; }
  .ds-h1 { font-size: 38px; }
  .ds-h2 { font-size: 26px; }
  .ds-container { padding: 0 20px; }
}