/* =====================================================================
   IMA Virtual · Design System — COMPONENTES BASE
   Requiere tokens.css. Framework-agnostic (portable a Tailwind/React).
   ===================================================================== */

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--bg);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
h1,h2,h3,h4{ font-family:var(--font); line-height:var(--lh-tight); color:var(--ink); }
a{ color:var(--blue); text-decoration:none; }
img{ max-width:100%; display:block; }

/* ---- Eyebrow (etiqueta de sección, patrón de la landing) ---- */
.ds-eyebrow{
  display:inline-block; font-family:var(--font); font-weight:var(--fw-bold);
  font-size:var(--fs-xs); letter-spacing:1.4px; text-transform:uppercase;
  color:var(--red); margin-bottom:var(--sp-2);
}

/* ============================ BOTONES ============================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  font-family:var(--font); font-weight:var(--fw-medium); font-size:.98rem;
  padding:13px 24px; border-radius:var(--radius-pill); cursor:pointer;
  border:2px solid transparent; line-height:1;
  transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn:active{ transform:translateY(1px); }
.btn:focus-visible{ outline:3px solid var(--blue-bright); outline-offset:2px; }
.btn--red{ background:var(--red); color:#fff; box-shadow:0 10px 24px -12px rgba(225,35,30,.7); }
.btn--red:hover{ background:var(--red-dark); transform:translateY(-2px); }
.btn--blue{ background:var(--blue); color:#fff; box-shadow:var(--shadow-sm); }
.btn--blue:hover{ background:var(--blue-dark); transform:translateY(-2px); }
.btn--ghost{ background:transparent; color:var(--blue); border-color:var(--blue); }
.btn--ghost:hover{ background:var(--blue); color:#fff; }
.btn--outline{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn--outline:hover{ border-color:var(--blue); color:var(--blue); }
.btn--sm{ padding:8px 16px; font-size:var(--fs-sm); }
.btn--block{ width:100%; }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; }

/* ============================ BADGES / PILLS ============================ */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 12px; border-radius:var(--radius-pill);
  font-family:var(--font); font-weight:var(--fw-bold); font-size:var(--fs-xs);
  letter-spacing:.3px;
}
.badge--red{ background:var(--danger-bg); color:var(--red); }
.badge--blue{ background:var(--info-bg); color:var(--blue-dark); }
.badge--success{ background:var(--success-bg); color:var(--success); }
.badge--warning{ background:var(--warning-bg); color:var(--warning); }
.badge--solid-red{ background:var(--red); color:#fff; }

/* ============================ CARD ============================ */
.card{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius); padding:var(--sp-6);
  box-shadow:var(--shadow-sm);
  transition:transform .18s var(--ease), box-shadow var(--dur) var(--ease);
}
.card--hover:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.card--top-red{ border-top:5px solid var(--red); }   /* urgente / pendiente */
.card--top-blue{ border-top:5px solid var(--blue); } /* informativo */
.card__title{ font-size:var(--fs-lg); font-weight:var(--fw-bold); margin-bottom:var(--sp-2); display:flex; align-items:center; gap:var(--sp-2); }
.card__text{ color:var(--ink-soft); font-size:var(--fs-sm); }

/* Icono cuadrado redondeado (patrón .benefit__ic de la landing) */
.icon-box{
  width:54px; height:54px; display:grid; place-items:center;
  background:var(--bg-soft); border-radius:16px; color:var(--blue);
  flex-shrink:0;
}
.icon-box svg{ width:28px; height:28px; }
.icon-box--red{ color:var(--red); }

/* ============================ STAT ============================ */
.stat{ text-align:left; }
.stat strong{ display:block; font-family:var(--font); font-size:var(--fs-2xl); color:var(--blue); }
.stat span{ font-size:var(--fs-sm); color:var(--ink-soft); }

/* ============================ INPUTS ============================ */
.field{ display:grid; gap:6px; }
.field label{ font-family:var(--font); font-weight:var(--fw-medium); font-size:var(--fs-sm); color:var(--ink); }
.input, .select, .textarea{
  width:100%; font-family:var(--font-body); font-size:var(--fs-base); color:var(--ink);
  background:var(--bg); border:1.5px solid var(--line); border-radius:var(--radius-sm);
  padding:12px 14px; transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.input::placeholder{ color:var(--ink-soft); opacity:.7; }
.input:focus, .select:focus, .textarea:focus{
  outline:none; border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(21,119,201,.15);
}
.field--error .input{ border-color:var(--red); }
.field__error{ font-size:var(--fs-xs); color:var(--red); }

/* ============================ PROGRESS ============================ */
.progress{ height:10px; background:var(--bg-soft); border-radius:var(--radius-pill); overflow:hidden; }
.progress__bar{ height:100%; border-radius:var(--radius-pill); background:linear-gradient(90deg,var(--blue),var(--blue-bright)); }
.progress__bar--red{ background:linear-gradient(90deg,var(--red),#f0654f); }

/* ============================ TABS ============================ */
.tabs{ display:flex; gap:var(--sp-2); border-bottom:1px solid var(--line); }
.tab{
  font-family:var(--font); font-weight:var(--fw-medium); font-size:var(--fs-sm);
  color:var(--ink-soft); background:none; border:0; cursor:pointer;
  padding:12px 6px; border-bottom:3px solid transparent; margin-bottom:-1px;
}
.tab:hover{ color:var(--blue); }
.tab[aria-selected="true"]{ color:var(--blue); border-bottom-color:var(--red); }

/* ============================ TOPBAR (nav flotante de la landing) ============================ */
.topbar{
  position:sticky; top:0; z-index:var(--z-nav);
  display:flex; align-items:center; gap:var(--sp-5);
  height:var(--topbar-h); padding:0 var(--sp-6);
  background:rgba(255,255,255,.96); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
[data-theme="dark"] .topbar{ background:rgba(12,28,61,.9); }
.topbar__search{ flex:1; max-width:420px; }
.topbar__spacer{ flex:1; }
.topbar__actions{ display:flex; align-items:center; gap:var(--sp-4); }
.icon-btn{
  width:42px; height:42px; display:grid; place-items:center; border-radius:var(--radius-pill);
  background:var(--bg-soft); color:var(--ink); border:0; cursor:pointer; position:relative;
}
.icon-btn:hover{ color:var(--blue); }
.icon-btn .dot{ position:absolute; top:8px; right:9px; width:9px; height:9px; border-radius:50%; background:var(--red); border:2px solid var(--white); }
.avatar{ width:40px; height:40px; border-radius:50%; background:var(--blue); color:#fff; display:grid; place-items:center; font-family:var(--font); font-weight:var(--fw-bold); }

/* ============================ SIDEBAR ============================ */
.sidebar{
  width:var(--sidebar-w); flex-shrink:0; min-height:100%;
  background:var(--blue-deep); color:#fff; padding:var(--sp-6) var(--sp-4);
  display:flex; flex-direction:column; gap:var(--sp-2);
}
.sidebar__brand{ display:flex; align-items:center; gap:10px; padding:0 var(--sp-3) var(--sp-6); }
.sidebar__brand b{ font-family:var(--font); font-weight:var(--fw-black); font-size:var(--fs-lg); color:#fff; }
.sidebar__brand small{ display:block; font-size:var(--fs-xs); color:#9ec9fb; }
.nav-item{
  display:flex; align-items:center; gap:12px;
  padding:11px var(--sp-3); border-radius:14px; cursor:pointer;
  color:#c4dbf3; font-family:var(--font); font-weight:var(--fw-medium); font-size:var(--fs-sm);
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav-item svg{ width:20px; height:20px; flex:none; }
.nav-item:hover{ background:rgba(255,255,255,.08); color:#fff; }
.nav-item--active{ background:#fff; color:var(--blue-dark); }
.nav-item--active:hover{ background:#fff; color:var(--blue-dark); }
.sidebar__help{ margin-top:auto; }

/* ============================ ALERT / TOAST ============================ */
.alert{ display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border-radius:var(--radius-sm); font-size:var(--fs-sm); }
.alert--info{ background:var(--info-bg); color:var(--blue-dark); }
.alert--success{ background:var(--success-bg); color:var(--success); }
.alert--warning{ background:var(--warning-bg); color:var(--warning); }
.alert--danger{ background:var(--danger-bg); color:var(--red-dark); }

/* ============================ SKELETON ============================ */
.skeleton{ background:linear-gradient(90deg,var(--bg-soft) 25%,var(--bg-soft-2) 50%,var(--bg-soft) 75%); background-size:200% 100%; animation:sk 1.2s infinite; border-radius:8px; }
@keyframes sk{ to{ background-position:-200% 0; } }

/* ============================ EMPTY STATE ============================ */
.empty{ text-align:center; padding:var(--sp-12) var(--sp-6); color:var(--ink-soft); }
.empty .icon-box{ margin:0 auto var(--sp-4); width:64px; height:64px; }

/* ============================ AVATAR/PILL CHECKLIST ============================ */
.check-list{ list-style:none; display:grid; gap:10px; }
.check-list li{ padding-left:28px; position:relative; color:var(--ink-soft); font-size:var(--fs-sm); }
.check-list li::before{ content:"✓"; position:absolute; left:0; top:1px; color:#fff; background:var(--red); width:18px; height:18px; border-radius:50%; font-size:.62rem; display:grid; place-items:center; }