/* q_stepper_hybrid.css — Usa variables de _globales.css SI existen; fallback a valores del componente.
   - No redefine :root ni [data-theme].
   - Sólo referencia las globales dentro de var(), sin sobreescribirlas.
   - Incluye rail, percent y themes (timeline, formal, academic, informal, circles).
*/

/* === Q_Stepper: variables con prioridad a tema (light/dark) y fallbacks === */
.q_stepper{
  /* Texto y fondos (tema -> global -> fallback local) */
  --qs-text:      var(--q_color-text,      var(--q_global-text-color-dark, #111827));
  --qs-bg:        var(--q_color-bg,        var(--q_global-bg-color-light, #ffffff));
  --qs-bg-soft:   var(--q_color-bg-soft,   var(--q_global-color-gray-100, #f8fafc));
  --qs-bg-muted:  var(--q_color-bg-muted,  var(--q_global-border-color-muted, #eef2f7));
  --qs-border:    var(--q_color-border,    var(--q_global-border-color-light, #e5e7eb));

  /* Paleta semántica */
  --qs-primary:   var(--q_color-primary,   var(--q_global-color-primary,  #2563eb));
  --qs-success:   var(--q_color-success,   var(--q_global-color-success,  #22c55e));
  --qs-warning:   var(--q_color-warning,   var(--q_global-color-warning,  #eab308));
  --qs-danger:    var(--q_color-danger,    var(--q_global-color-danger,   #dc2626));
  --qs-info:      var(--q_color-info,      var(--q_global-color-info,     #0284c7));

  /* Bordes/Sombras/Radius desde globales con fallback */
  --qs-radius:    var(--q_global-border-radius-lg, 12px);
  --qs-shadow-sm: var(--q_shadow-sm, var(--q_global-shadow-sm, 0 2px 4px rgba(0,0,0,.06)));
  --qs-shadow-md: var(--q_shadow-md, var(--q_global-shadow-md, 0 8px 20px rgba(0,0,0,.08)));

  /* Derivadas locales del componente */
  --ok:  var(--qs-success);
  --cur: var(--qs-primary);
  --rail-muted: color-mix(in srgb, var(--qs-text) 8%, var(--qs-bg) 92%);
}


.q_stepper{ display:grid; gap:16px; margin:18px 0; color:var(--qs-text); background:transparent }
.q_stepper *, .q_stepper *::before, .q_stepper *::after{ box-sizing:border-box }

/* Rail global */
.q_stepper .rail{
  height:4px; border-radius:999px; background:var(--rail-muted);
  position:relative; overflow:hidden;
}
.q_stepper .rail::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, var(--ok) 0 var(--p,0%), var(--rail-muted) var(--p,0%));
}

/* Lista */
.q_stepper ol{ list-style:none; margin:0; padding:0; display:grid; gap:12px }
.q_stepper li{
  border:1px solid var(--qs-border);
  border-radius:var(--qs-radius);
  overflow:hidden;
  background:var(--qs-bg);
}
.q_stepper li.done{ box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ok) 35%, var(--qs-bg) 65%) }
.q_stepper li.active{ box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--cur) 35%, var(--qs-bg) 65%) }

/* Cabecera */
.q_stepper .head{
  all:unset;
  display:grid; grid-auto-flow:column;
  grid-template-columns:auto 1fr auto auto; grid-auto-columns:max-content;
  gap:12px; align-items:center; width:100%;
  cursor:pointer; padding:14px 16px; position:relative;
  color:var(--qs-text); background:var(--qs-bg);
}
.q_stepper .head:focus-visible{ outline:3px solid color-mix(in oklab,var(--cur),transparent 60%); outline-offset:2px; border-radius:10px }
.q_stepper .idx{ width:32px; height:32px; border-radius:999px; border:2px solid var(--qs-border);
  display:grid; place-items:center; font-weight:800 }
.q_stepper li.done .idx{ border-color:var(--ok); color:var(--ok) }
.q_stepper li.active .idx{ border-color:var(--cur); color:var(--cur) }
.q_stepper .title{ font-weight:700 }
.q_stepper .meta{ font-size:.85rem; opacity:.8 }
.q_stepper .chev{ transition:transform .2s ease }
.q_stepper [aria-expanded="true"] .chev{ transform:rotate(180deg) }
.q_stepper .percent{ margin-left:8px; font-size:.85rem; opacity:.7 }

/* Panel */
.q_stepper .panel{
  overflow:hidden; height:0; transition:height .28s ease;
  border-top:1px dashed var(--qs-border);
  background:var(--qs-bg-soft);
}
.q_stepper .panel .box{ padding:14px 16px; display:grid; gap:10px }

/* Chips */
.q_stepper .chip{ display:inline-grid; grid-auto-flow:column; align-items:center; gap:6px;
  border:1px solid var(--qs-border); border-radius:.5rem; padding:.2rem .5rem; font-size:.8rem }
.q_stepper .chip.ok{ border-color:var(--ok); color:var(--ok) }
.q_stepper .chip.cur{ border-color:var(--cur); color:var(--cur) }

/* Variantes */
.q_stepper.is-horizontal .rail{ grid-column:1/-1 }
.q_stepper.is-compact .title{ font-size:.95rem }
.q_stepper.is-compact .meta{ display:none }
.q_stepper[data-progress="percent"] .rail{ display:none }
.q_stepper[data-accordion="none"] .chev,
.q_stepper[data-accordion="none"] .panel{ display:none }
.q_stepper[data-accordion="none"] li{ padding:10px 14px }

/* Theme: circles */
.q_stepper[data-theme="circles"].is-vertical li{ position:relative; border:none; background:transparent; box-shadow:none }
.q_stepper[data-theme="circles"].is-vertical .head{ background:var(--qs-bg); border:1px solid var(--qs-border); border-radius:var(--qs-radius) }
.q_stepper[data-theme="circles"].is-vertical li::before{
  content:""; position:absolute; left:30px; top:40px; bottom:-6px; width:2px; background:var(--qs-border);
}
.q_stepper[data-theme="circles"].is-vertical li:last-child::before{ display:none }
.q_stepper[data-theme="circles"] .idx{
  width:12px; height:12px; border-radius:999px; border:2px solid var(--qs-border);
  font-size:0; line-height:0; background:var(--qs-bg);
}
.q_stepper[data-theme="circles"] li.done .idx{ background:var(--ok); border-color:var(--ok) }
.q_stepper[data-theme="circles"] li.active .idx{ background:var(--cur); border-color:var(--cur) }
.q_stepper[data-theme="circles"] .head{ grid-template-columns:24px 1fr auto }
.q_stepper[data-theme="circles"] .title{ font-weight:700 }
.q_stepper[data-theme="circles"] .meta{ opacity:.7 }

/* Theme: academic */
.q_stepper[data-theme="academic"] .head{
  background:var(--qs-bg); border:1.5px solid var(--qs-border); border-radius:10px;
}
.q_stepper[data-theme="academic"] .meta{ font-style:italic; opacity:.75 }
.q_stepper[data-theme="academic"] .chip{ border-radius:999px }
.q_stepper[data-theme="academic"] .idx{ width:14px; height:14px; border-radius:999px; font-size:0; line-height:0 }
.q_stepper[data-theme="academic"] li.done .idx{ background:var(--ok); border-color:var(--ok) }
.q_stepper[data-theme="academic"] li.active .idx{ background:var(--cur); border-color:var(--cur) }

/* Theme: formal */
.q_stepper[data-theme="formal"] .head{
  background:var(--qs-bg); border:1px solid var(--qs-border); border-radius:8px; box-shadow:none;
}
.q_stepper[data-theme="formal"] .idx{ width:10px; height:10px; border-radius:999px; font-size:0; line-height:0 }
.q_stepper[data-theme="formal"] li.done .idx{ background:var(--ok); border-color:var(--ok) }
.q_stepper[data-theme="formal"] li.active .idx{ background:var(--cur); border-color:var(--cur) }

/* Theme: informal */
.q_stepper[data-theme="informal"] .head{
  background:color-mix(in srgb, var(--qs-primary) 6%, var(--qs-bg) 94%);
  border:1px solid color-mix(in srgb, var(--qs-primary) 25%, var(--qs-border) 75%);
  border-radius:16px;
}
.q_stepper[data-theme="informal"] .idx{
  background:color-mix(in srgb, var(--qs-primary) 15%, var(--qs-bg) 85%);
  border-color:color-mix(in srgb, var(--qs-primary) 35%, var(--qs-border) 65%);
}
.q_stepper[data-theme="informal"] li.done .idx{ background:color-mix(in srgb, var(--qs-success) 25%, var(--qs-bg) 75%); border-color:var(--qs-success) }
.q_stepper[data-theme="informal"] li.active .idx{ background:color-mix(in srgb, var(--qs-primary) 30%, var(--qs-bg) 70%); border-color:var(--qs-primary) }

/* Theme: timeline */
.q_stepper[data-theme="timeline"]{ --tl-x: 20px; --tl-dot: 12px; --tl-gutter: 16px; }
.q_stepper[data-theme="timeline"].is-vertical li{
  position:relative; overflow:visible; border:none; background:transparent; box-shadow:none;
  padding-left: calc(var(--tl-x) + var(--tl-gutter));
}
.q_stepper[data-theme="timeline"].is-vertical li::before{
  content:""; position:absolute; left:var(--tl-x); top:0; bottom:0; width:2px;
  background: color-mix(in srgb, var(--qs-text) 12%, var(--qs-border) 88%);
}
.q_stepper[data-theme="timeline"].is-vertical li:last-child::before{ bottom: 22px; }
.q_stepper[data-theme="timeline"] .head{ position: static; grid-template-columns: 1fr auto; }
.q_stepper[data-theme="timeline"] .idx{
  position:absolute;
  left: calc(var(--tl-x) - var(--tl-dot)/2);
  top: 22px;
  width: var(--tl-dot); height: var(--tl-dot); border-radius:999px;
  border:2px solid var(--qs-border); background:var(--qs-bg); font-size:0; line-height:0;
  z-index: 1;
}
.q_stepper[data-theme="timeline"] li.done .idx{ background:var(--ok); border-color:var(--ok) }
.q_stepper[data-theme="timeline"] li.active .idx{ background:var(--cur); border-color:var(--cur) }

/* Indicador percent (cuando data-progress="percent") */
.q_stepper[data-progress="percent"] .percent{
  justify-self:end; display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; padding:.15rem .5rem; border:1px solid var(--qs-border);
  border-radius:999px; font-variant-numeric:tabular-nums; line-height:1; white-space:nowrap;
  background:var(--qs-bg); color:var(--qs-text);
}
.q_stepper[data-progress="percent"][data-percent-style="plain"] .percent{
  border:none; border-radius:0; min-width:auto; padding:0; background:transparent;
}
.q_stepper[data-progress="percent"][data-percent-style="none"] .percent{ display:none }

/* Separadores del panel */
.q_stepper .panel{ border-top:none }
.q_stepper .panel[data-open="1"]{ position:relative }
.q_stepper[data-separator="inset"] .panel[data-open="1"]::before,
.q_stepper:not([data-separator]) .panel[data-open="1"]::before{
  content:""; position:absolute; left:16px; right:16px; top:0; height:1px; background:var(--qs-border);
}
.q_stepper[data-separator="full"] .panel[data-open="1"]::before{
  content:""; position:absolute; left:0; right:0; top:0; height:1px; background:var(--qs-border);
}
.q_stepper[data-separator="none"] .panel[data-open="1"]::before{ content:none }

/* Responsive */
@media (max-width: 520px){
  .q_stepper .head{ grid-template-columns: auto 1fr auto }
  .q_stepper[data-progress="percent"] .percent{ display:none }
}