/*
 * Asamblea Popular — Theme v2.0
 * ─────────────────────────────────────────────────────────────────────────────
 * IMPORTANTE: Este plugin es 100% autónomo y vive EXCLUSIVAMENTE dentro del
 * shortcode [asamblea_inscripcion] y del contexto del dispositivo del usuario.
 * NO toca body, html, ni ningún elemento externo al contenedor #ai-inscripcion-app.
 *
 * El sitio usa BuddyBoss Theme + Plugin. Para evitar que BuddyBoss pise los
 * estilos internos, TODOS los selectores están prefijados con #ai-inscripcion-app
 * y los paddings/layouts críticos usan !important para garantizar aislamiento total.
 * ─────────────────────────────────────────────────────────────────────────────
 * Sin fuentes externas — usa fuentes del sistema
 */

/* ── Variables ─────────────────────────────────────── */
#ai-inscripcion-app {
  --ai-accent:    #2563eb;
  --ai-accent-lt: #eff6ff;
  --ai-accent-mid:#bfdbfe;
  --ai-ok:        #16a34a;
  --ai-ok-lt:     #f0fdf4;
  --ai-ok-mid:    #bbf7d0;
  --ai-warn:      #d97706;
  --ai-warn-lt:   #fffbeb;
  --ai-warn-mid:  #fde68a;
  --ai-err:       #dc2626;
  --ai-err-lt:    #fef2f2;
  --ai-bg:        #e8eaed;
  --ai-panel:     #ffffff;
  --ai-surface:   #f4f5f8;
  --ai-border:    #b0b4be;
  --ai-border2:   #9098a8;
  --ai-text:      #000000;
  --ai-text2:     #111827;
  --ai-text3:     #4b5563;
  --ai-sb-bg:     #ffffff;
  --ai-font:      system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ai-mono:      'Courier New', Courier, monospace;
  --ai-radius:    8px;
  --ai-t:         0.15s ease;
}

/* ── Reset scoped ── crítico contra BuddyBoss ─────── */
#ai-inscripcion-app,
#ai-inscripcion-app * { box-sizing: border-box !important; margin: 0; padding: 0; }
#ai-inscripcion-app a       { color: var(--ai-accent); }
#ai-inscripcion-app button  { font-family: var(--ai-font); cursor: pointer; }
#ai-inscripcion-app input,
#ai-inscripcion-app select  { font-family: var(--ai-mono); }

/* ══ CONTENEDOR PRINCIPAL ════════════════════════════ */
#ai-inscripcion-app {
  font-family:    var(--ai-font);
  background:     var(--ai-bg);
  border:         1px solid var(--ai-border);
  border-radius:  10px;
  overflow:       hidden;
  display:        flex;
  flex-direction: column;
  min-height:     680px;
  height:         calc(100vh - 200px);
  max-height:     900px;
  max-width:      1100px;
  width:          100%;
  margin:         0 auto 32px;
  box-shadow:     0 4px 24px rgba(0,0,0,0.10);
}

/* ══ TOPBAR ══════════════════════════════════════════ */
#ai-inscripcion-app .ai-topbar {
  height:        44px;
  background:    var(--ai-sb-bg);
  border-bottom: 1px solid var(--ai-border);
  display:       flex;
  align-items:   center;
  padding:       0 20px !important;
  gap:           16px;
  flex-shrink:   0;
  z-index:       10;
}
/* Topbar — todo el contenido en el tercio central */
#ai-inscripcion-app .ai-topbar-left    { flex: 1; }
#ai-inscripcion-app .ai-topbar-right   { flex: 1; }
#ai-inscripcion-app .ai-topbar-center  {
  flex: 0 0 33.333%;
  display: flex; align-items: center; gap: 8px;
  justify-content: center;
}
#ai-inscripcion-app .ai-topbar-security { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
#ai-inscripcion-app .ai-tb-sec-icon     { font-size: 13px; line-height: 1; }
#ai-inscripcion-app .ai-tb-sec-text     { font-size: 11px; font-weight: 600; color: var(--ai-text3); white-space: nowrap; transition: color 0.3s; }
#ai-inscripcion-app .ai-tb-sec-text.verifying { color: var(--ai-accent); }
#ai-inscripcion-app .ai-tb-sec-text.verified  { color: var(--ai-ok); }
#ai-inscripcion-app .ai-topbar-bar     { width: 80px; height: 5px; background: var(--ai-border); border-radius: 3px; overflow: hidden; flex-shrink: 0; }
#ai-inscripcion-app .ai-topbar-bar-fill{ height: 100%; width: 0%; background: var(--ai-accent); border-radius: 3px; transition: width 0.5s ease; }
#ai-inscripcion-app .ai-topbar-pct     { font-family: var(--ai-mono); font-size: 11px; font-weight: 700; color: var(--ai-accent); flex-shrink: 0; }
#ai-inscripcion-app .ai-topbar-status  { width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--ai-text3); flex-shrink: 0; }
#ai-inscripcion-app .ai-topbar-status.spinning { color: var(--ai-accent); animation: aiSpin 1.2s linear infinite; display: inline-block; }
#ai-inscripcion-app .ai-topbar-status.done     { color: var(--ai-ok); animation: none; }
#ai-inscripcion-app .ai-topbar-status.error    { color: var(--ai-err); animation: none; }

/* Privacy notice */
#ai-inscripcion-app .ai-privacy-notice {
  display: flex; align-items: center; gap: 8px;
  background: var(--ai-accent-lt); border: 1px solid var(--ai-accent-mid);
  border-radius: var(--ai-radius); padding: 8px 14px !important;
  font-size: 11px; color: var(--ai-accent); font-weight: 500; line-height: 1.4;
}
#ai-inscripcion-app .ai-privacy-icon { font-size: 14px; flex-shrink: 0; }

/* ══ LAYOUT PRINCIPAL ════════════════════════════════ */
#ai-inscripcion-app .ai-main { display: flex; flex: 1; overflow: hidden; }

/* ══ SIDEBAR — diseño fusionado ══════════════════════
   Sin bandas de título separadas. Todo en flujo continuo
   para que datos + procesos sean visibles sin scroll.   */
#ai-inscripcion-app .ai-sidebar {
  width:          300px;
  background:     var(--ai-sb-bg);
  border-right:   1px solid var(--ai-border);
  display:        flex;
  flex-direction: column;
  overflow:       hidden;
  flex-shrink:    0;
}

/* Persona card — compacta y reorganizada */
#ai-inscripcion-app .ai-persona-card {
  background:    var(--ai-surface);
  border-bottom: 1px solid var(--ai-border);
  padding:       12px 14px !important;
  display:       flex;
  gap:           10px;
  align-items:   flex-start;
  position:      relative;
  overflow:      hidden;
  flex-shrink:   0;
}
#ai-inscripcion-app .ai-persona-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 2px; background: var(--ai-accent);
}
#ai-inscripcion-app .ai-persona-avatar {
  width: 36px; height: 36px; border-radius: 50%; background: var(--ai-accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 900; font-family: Georgia, serif;
  color: #fff; flex-shrink: 0; line-height: 1; margin-top: 2px;
}
#ai-inscripcion-app .ai-persona-info    { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#ai-inscripcion-app .ai-persona-name    { font-size: 13px; font-weight: 700; color: var(--ai-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
#ai-inscripcion-app .ai-persona-run     { font-family: var(--ai-mono); font-size: 11px; color: var(--ai-text3); }
#ai-inscripcion-app .ai-persona-correo  { font-size: 10px; color: var(--ai-text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ai-inscripcion-app .ai-persona-badges  { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 3px; }
#ai-inscripcion-app .ai-persona-servel  { display: none; }
#ai-inscripcion-app .ai-servel-ok       { font-size: 10px; font-weight: 700; color: var(--ai-ok); background: var(--ai-ok-lt); border: 1px solid var(--ai-ok-mid); border-radius: 4px; padding: 1px 6px !important; }
#ai-inscripcion-app .ai-persona-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px !important; border-radius: 4px; font-size: 10px; font-weight: bold; }
#ai-inscripcion-app .ai-badge-process { background: var(--ai-accent-lt); color: var(--ai-accent); border: 1px solid var(--ai-accent-mid); }
#ai-inscripcion-app .ai-badge-ok      { background: var(--ai-ok-lt); color: var(--ai-ok); border: 1px solid var(--ai-ok-mid); }

/* ── Secciones sidebar — sin ai-sb-section ni ai-sb-band ──
   Reemplazado por micro-labels inline                      */
#ai-inscripcion-app .ai-sb-section      { flex-shrink: 0; }
#ai-inscripcion-app .ai-sb-section.grow { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
/* Bandas de título — ocultas, reemplazadas por micro-labels */
#ai-inscripcion-app .ai-sb-band { display: none !important; }

/* Micro-label — etiqueta de sección mínima */
#ai-inscripcion-app .ai-sb-label {
  font-size:      9px;
  font-weight:    700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color:          var(--ai-border2);
  padding:        10px 16px 6px !important;
  border-bottom:  1px solid var(--ai-border);
  margin-bottom:  2px;
}

/* ── Data rows ────────────────────────────────────────
   RUN → verde solo cuando SERVEL aprueba (.ok)
   Correo → verde cuando se ingresa y acepta (.ok)       */
#ai-inscripcion-app .ai-data-rows { display: flex; flex-direction: column; padding: 0 16px 8px !important; }
#ai-inscripcion-app .ai-data-row  { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 0 !important; border-bottom: 1px solid var(--ai-border); }
#ai-inscripcion-app .ai-data-row:last-child { border-bottom: none; }
#ai-inscripcion-app .ai-data-key  { font-size: 11px; color: var(--ai-text3); font-weight: 500; flex-shrink: 0; }
#ai-inscripcion-app .ai-data-val  { font-family: var(--ai-mono); font-size: 11px; text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 2px !important; }
#ai-inscripcion-app .ai-dv-pending { color: var(--ai-warn); font-weight: 600; }
#ai-inscripcion-app .ai-dv-ok      { color: var(--ai-ok);  font-weight: 600; }
#ai-inscripcion-app .ai-dv-error   { color: var(--ai-err); font-weight: 600; }
#ai-inscripcion-app .ai-data-val.ok { color: var(--ai-ok); font-weight: 600; }

/* Separador entre datos y procesos */
#ai-inscripcion-app .ai-sb-divider {
  height: 1px; background: var(--ai-border); margin: 0 !important;
}

/* ── Process list — compacta ──────────────────────────
   Padding vertical reducido al mínimo               */
#ai-inscripcion-app .ai-process-list {
  display: flex; flex-direction: column; gap: 6px !important;
  flex: 1; overflow-y: auto; padding: 8px 10px !important;
}
#ai-inscripcion-app .ai-process-item {
  display:       flex;
  align-items:   center;
  gap:           8px;
  padding:       8px 10px !important;
  border-radius: 6px;
  background:    var(--ai-surface);
  border:        1px solid var(--ai-border);
  transition:    all var(--ai-t);
  flex-shrink:   0;
}
#ai-inscripcion-app .ai-process-item.active  { background: var(--ai-surface); border-color: var(--ai-border); }
#ai-inscripcion-app .ai-process-item.done    { background: var(--ai-surface); border-color: var(--ai-border); }
#ai-inscripcion-app .ai-process-item.done .ai-process-name { color: var(--ai-text); }
#ai-inscripcion-app .ai-process-item.done .ai-process-sub  { color: var(--ai-text3); }

#ai-inscripcion-app .ai-process-icon { width: 24px; height: 24px; border-radius: 5px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--ai-accent-lt); color: var(--ai-accent); transition: all var(--ai-t); }
#ai-inscripcion-app .ai-pi-pending   { background: var(--ai-accent-lt); color: var(--ai-accent); }
#ai-inscripcion-app .ai-pi-active    { background: var(--ai-accent-lt); color: var(--ai-accent); }
#ai-inscripcion-app .ai-pi-done      { background: var(--ai-accent-lt); color: var(--ai-accent); }
#ai-inscripcion-app .ai-process-text { flex: 1; min-width: 0; }
#ai-inscripcion-app .ai-process-name { font-size: 12px; font-weight: 600; color: var(--ai-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ai-inscripcion-app .ai-process-sub  { font-size: 10px; color: var(--ai-text3); margin-top: 1px; }
#ai-inscripcion-app .ai-process-dot  { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
#ai-inscripcion-app .ai-pd-pending   { background: var(--ai-warn); }
#ai-inscripcion-app .ai-pd-active    { background: var(--ai-accent); box-shadow: 0 0 5px rgba(37,99,235,0.4); animation: aiPulse 1.5s infinite; }
#ai-inscripcion-app .ai-pd-done      { background: var(--ai-ok); }

/* Sidebar progress bar — eliminada */

/* ══ CONTENT ══════════════════════════════════════════ */
#ai-inscripcion-app .ai-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: var(--ai-bg); }

/* ══ STEPS NAV ════════════════════════════════════════ */
#ai-inscripcion-app .ai-steps-nav {
  padding: 0 24px !important; height: 60px; background: #ffffff;
  border-bottom: 1px solid var(--ai-border);
  display: flex; align-items: center; flex-shrink: 0; gap: 0;
}
#ai-inscripcion-app .ai-step-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; cursor: pointer; flex-shrink: 0; position: relative; }
#ai-inscripcion-app .ai-step-tab.active .ai-step-label { color: var(--ai-accent); font-weight: 600; }
#ai-inscripcion-app .ai-step-tab.done   .ai-step-label { color: var(--ai-ok); }
#ai-inscripcion-app .ai-step-label { font-size: 9px; color: var(--ai-text3); white-space: nowrap; transition: color 0.2s; }
#ai-inscripcion-app .ai-step-line { flex: 1; height: 2px; background: var(--ai-border); border-radius: 1px; overflow: hidden; margin-bottom: 12px; }
#ai-inscripcion-app .ai-step-line-fill { height: 100%; width: 0%; background: var(--ai-ok); transition: width 0.4s ease; }
#ai-inscripcion-app .ai-step-num { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: bold; transition: all 0.2s; flex-shrink: 0; }
#ai-inscripcion-app .ai-sn-idle   { background: var(--ai-border); color: var(--ai-text3); }
#ai-inscripcion-app .ai-sn-active { background: var(--ai-accent); color: #fff; box-shadow: 0 0 7px rgba(37,99,235,0.3); }
#ai-inscripcion-app .ai-sn-done   { background: var(--ai-ok); color: #fff; }

/* ══ CONTENT BODY ═════════════════════════════════════ */
#ai-inscripcion-app .ai-content-body {
  flex: 1; overflow-y: auto; padding: 20px !important;
  background: var(--ai-bg); display: flex; flex-direction: column;
  min-height: 0; scrollbar-width: thin; scrollbar-color: var(--ai-border) transparent;
}
#ai-inscripcion-app .ai-content-body::-webkit-scrollbar       { width: 4px; }
#ai-inscripcion-app .ai-content-body::-webkit-scrollbar-thumb { background: var(--ai-border); border-radius: 2px; }

/* Panel */
#ai-inscripcion-app .ai-panel {
  width: 100%; flex: 1; background: var(--ai-panel);
  border-radius: var(--ai-radius); border: 1px solid var(--ai-border);
  padding: 28px !important; animation: aiFadeIn 0.2s ease; box-sizing: border-box !important;
}
@keyframes aiFadeIn { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:none} }

#ai-inscripcion-app .ai-panel-head     { margin-bottom: 20px; }
/* Eyebrow — azul normalmente, verde en paso final */
#ai-inscripcion-app .ai-panel-eyebrow  { font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--ai-accent); margin-bottom: 8px; transition: color 0.3s; }
#ai-inscripcion-app .ai-panel-eyebrow.done { color: var(--ai-ok); }
#ai-inscripcion-app .ai-panel-title    { font-size: 21px; font-weight: 700; color: var(--ai-text); line-height: 1.2; }

/* ══ WIZARD PANTALLAS ════════════════════════════════ */
#ai-inscripcion-app .ai-wstep-hidden  { display: none !important; }
#ai-inscripcion-app .ai-screen        { display: none; }
#ai-inscripcion-app .ai-screen.active { display: block; animation: aiFadeIn 0.2s ease; }
#ai-inscripcion-app .ai-body          { display: flex; flex-direction: column; gap: 12px; }

/* Boot */
#ai-inscripcion-app .ai-boot-ver    { font-size: 12px; color: var(--ai-text3); margin-bottom: 6px; }
#ai-inscripcion-app .ai-boot-ver em { color: var(--ai-accent); font-style: normal; font-weight: bold; }
#ai-inscripcion-app .ai-boot-list   { display: flex; flex-direction: column; gap: 4px; }
#ai-inscripcion-app .ai-bl { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--ai-text3); padding: 6px 0 !important; border-bottom: 1px solid var(--ai-border); transition: color var(--ai-t); }
#ai-inscripcion-app .ai-bl.loading { color: var(--ai-text); }
#ai-inscripcion-app .ai-bl.done    { color: var(--ai-ok); }
#ai-inscripcion-app .ai-boot-icon  { width: 16px; text-align: center; }
#ai-inscripcion-app .ai-boot-status{ margin-left: auto; }
#ai-inscripcion-app .ai-boot-bar   { height: 3px; background: var(--ai-border); border-radius: 2px; overflow: hidden; margin-top: 6px; }
#ai-inscripcion-app .ai-boot-fill  { height: 100%; background: var(--ai-accent); width: 0%; transition: width 0.4s ease; }
#ai-inscripcion-app #ai-boot-ready { display: none; color: var(--ai-ok); font-size: 12px; font-weight: bold; margin-top: 6px; }

/* Bienvenida */
#ai-inscripcion-app .ai-features { display: flex; gap: 12px; }
#ai-inscripcion-app .ai-feat { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; background: var(--ai-surface); border: 1px solid var(--ai-border); border-radius: var(--ai-radius); padding: 18px 12px !important; font-size: 13px; font-weight: 500; color: var(--ai-text); }
#ai-inscripcion-app .ai-feat-ico { font-size: 24px; }

/* Legal */
#ai-inscripcion-app .ai-legal { background: var(--ai-surface); border: 1px solid var(--ai-border); border-radius: var(--ai-radius); padding: 4px 0 !important; width: 100%; }
#ai-inscripcion-app .ai-legal-row { display: flex; gap: 16px; padding: 12px 18px !important; border-bottom: 1px solid var(--ai-border); font-size: 13px; line-height: 1.5; align-items: baseline; }
#ai-inscripcion-app .ai-legal-row:last-child { border-bottom: none; }
#ai-inscripcion-app .ai-legal-key { color: var(--ai-text); font-weight: 600; min-width: 140px; flex-shrink: 0; }
#ai-inscripcion-app .ai-legal-val { color: var(--ai-text2); flex: 1; }
#ai-inscripcion-app .ai-check-row { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; background: var(--ai-warn-lt); border: 1px solid var(--ai-warn-mid); border-radius: var(--ai-radius); padding: 10px 14px !important; font-size: 12px; color: var(--ai-text); transition: background var(--ai-t); }
#ai-inscripcion-app .ai-chk { width: 18px; height: 18px; min-width: 18px; border: 2px solid var(--ai-border); border-radius: 4px; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: bold; color: #fff; transition: all var(--ai-t); }
#ai-inscripcion-app .ai-chk.on { background: var(--ai-accent); border-color: var(--ai-accent); }
#ai-inscripcion-app .ai-chk.on::after { content: '✓'; }

/* Instrucciones */
#ai-inscripcion-app .ai-inst-list { display: flex; flex-direction: column; gap: 8px; }
#ai-inscripcion-app .ai-inst { display: flex; align-items: center; gap: 14px; background: var(--ai-surface); border: 1px solid var(--ai-border); border-radius: var(--ai-radius); padding: 12px 16px !important; }
#ai-inscripcion-app .ai-inst-n      { font-family: var(--ai-mono); font-size: 13px; font-weight: bold; color: var(--ai-border2); min-width: 28px; }
#ai-inscripcion-app .ai-inst-ico    { font-size: 18px; min-width: 24px; display: flex; align-items: center; justify-content: center; color: var(--ai-accent); }
#ai-inscripcion-app .ai-inst strong { display: block; font-size: 13px; color: var(--ai-text); margin-bottom: 2px; }
#ai-inscripcion-app .ai-inst small  { font-size: 12px; color: var(--ai-text2); }
#ai-inscripcion-app .ai-warn { background: var(--ai-warn-lt); border: 1px solid var(--ai-warn-mid); border-radius: var(--ai-radius); padding: 9px 14px !important; font-size: 12px; color: #78350f; line-height: 1.45; }

/* Formulario */
#ai-inscripcion-app .ai-field      { display: flex; flex-direction: column; gap: 5px; }
#ai-inscripcion-app .ai-label      { font-size: 10px; font-weight: bold; color: var(--ai-text2); text-transform: uppercase; letter-spacing: 0.3px; }
#ai-inscripcion-app .req           { color: var(--ai-err); }
#ai-inscripcion-app .ai-input-wrap { position: relative; display: flex; align-items: center; }
#ai-inscripcion-app .ai-input-ico  { position: absolute; left: 10px; font-size: 13px; pointer-events: none; }
#ai-inscripcion-app .ai-input-st   { position: absolute; right: 10px; font-size: 13px; }
#ai-inscripcion-app .ai-input { width: 100%; padding: 9px 36px 9px 14px !important; border: 1px solid var(--ai-border); border-radius: var(--ai-radius); font-size: 14px; font-family: var(--ai-mono); color: var(--ai-text); background: #fff; outline: none; transition: border-color var(--ai-t), box-shadow var(--ai-t); }
#ai-inscripcion-app .ai-input-clean  { padding-left: 14px !important; }
#ai-inscripcion-app .ai-input:focus  { border-color: var(--ai-accent); box-shadow: 0 0 0 3px rgba(37,99,235,0.08); }
#ai-inscripcion-app .ai-input.valid  { border-color: var(--ai-ok); }
#ai-inscripcion-app .ai-input.invalid{ border-color: var(--ai-err); }
#ai-inscripcion-app .ai-field-msg    { font-size: 11px; min-height: 13px; }
#ai-inscripcion-app .ai-field-msg.ok { color: var(--ai-ok); }
#ai-inscripcion-app .ai-field-msg.err{ color: var(--ai-err); }
#ai-inscripcion-app .ai-checking { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--ai-accent); font-family: var(--ai-mono); }
#ai-inscripcion-app .ai-spin     { animation: aiSpin 1s linear infinite; display: inline-block; }
@keyframes aiSpin { to { transform: rotate(360deg); } }

/* Drop zone */
#ai-inscripcion-app .ai-drop { border: 1.5px dashed var(--ai-border); border-radius: var(--ai-radius); padding: 24px 20px !important; text-align: center; cursor: pointer; background: var(--ai-surface); transition: all var(--ai-t); display: flex; flex-direction: column; align-items: center; gap: 5px; }
#ai-inscripcion-app .ai-drop:hover,
#ai-inscripcion-app .ai-drop.dragover { border-color: var(--ai-accent); background: var(--ai-accent-lt); }
#ai-inscripcion-app .ai-drop-ico   { font-size: 26px; opacity: 0.4; }
#ai-inscripcion-app .ai-drop-title { font-size: 13px; font-weight: bold; color: var(--ai-text); }
#ai-inscripcion-app .ai-drop-sub   { font-size: 11px; color: var(--ai-text2); }

/* ── Process steps — icono izquierdo oculto, check derecho ── */
#ai-inscripcion-app .ai-pstep {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px !important; border-bottom: 1px solid var(--ai-border);
  font-size: 12px; color: var(--ai-text3);
  overflow: hidden; max-height: 42px;
  transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.4s ease;
}
#ai-inscripcion-app .ai-pstep:last-child { border: none; }
#ai-inscripcion-app .ai-pstep.active { color: var(--ai-text); font-weight: bold; }
#ai-inscripcion-app .ai-pstep.done   { color: var(--ai-ok); }
#ai-inscripcion-app .ai-pstep.error  { color: var(--ai-err); }
#ai-inscripcion-app .ai-pstep .ps-icon   { display: none !important; }
#ai-inscripcion-app .ai-pstep .ps-result { margin-left: auto; font-size: 12px; line-height: 1; display: flex; align-items: center; }

/* ── Datacard ─────────────────────────────────────── */
#ai-inscripcion-app .ai-datacard { background: var(--ai-surface); border: 1.5px solid var(--ai-ok); border-radius: var(--ai-radius); overflow: hidden; width: 100%; }
#ai-inscripcion-app .ai-dc-row   { display: flex; justify-content: space-between; align-items: center; padding: 13px 18px !important; border-bottom: 1px solid var(--ai-border); font-size: 13px; }
#ai-inscripcion-app .ai-dc-row:last-child { border: none; }
#ai-inscripcion-app .ai-dc-lbl  { color: var(--ai-text2); }
#ai-inscripcion-app .ai-dc-val  { color: var(--ai-text); font-family: var(--ai-mono); font-weight: bold; padding-right: 6px !important; }
#ai-inscripcion-app .ai-dc-name { font-family: var(--ai-font); text-transform: capitalize; }

/* Verificación */
#ai-inscripcion-app .ai-profile { display: flex; align-items: center; gap: 13px; background: var(--ai-surface); border: 1px solid var(--ai-border); border-radius: var(--ai-radius); padding: 13px 16px !important; }
#ai-inscripcion-app .ai-profile-ava { position: relative; width: 44px; height: 44px; flex-shrink: 0; }
#ai-inscripcion-app .ai-ava-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--ai-accent); animation: aiSpin 1.2s linear infinite; }
#ai-inscripcion-app .ai-ava-ring.done { border-color: var(--ai-ok); animation-play-state: paused; }
#ai-inscripcion-app .ai-ava-ico { position: absolute; inset: 5px; border-radius: 50%; background: var(--ai-border); display: flex; align-items: center; justify-content: center; font-size: 18px; }
#ai-inscripcion-app .ai-profile-info { flex: 1; min-width: 0; }
#ai-inscripcion-app .ai-profile-name { font-size: 14px; font-weight: bold; color: var(--ai-text); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ai-inscripcion-app .ai-profile-rows { display: flex; flex-direction: column; gap: 2px; }
#ai-inscripcion-app .ai-profile-row  { display: flex; gap: 7px; font-size: 10px; }
#ai-inscripcion-app .ai-profile-row span  { color: var(--ai-text3); min-width: 65px; }
#ai-inscripcion-app .ai-profile-row em    { color: var(--ai-text); font-style: normal; font-family: var(--ai-mono); }
#ai-inscripcion-app .ai-profile-row em.ok { color: var(--ai-ok); }

#ai-inscripcion-app .ai-vbar-wrap { background: var(--ai-surface); border: 1px solid var(--ai-border); border-radius: var(--ai-radius); padding: 9px 13px !important; }
#ai-inscripcion-app .ai-vbar-top  { display: flex; justify-content: space-between; font-size: 10px; margin-bottom: 5px; }
#ai-inscripcion-app .ai-vbar-top span { color: var(--ai-text2); }
#ai-inscripcion-app #gp-percent   { color: var(--ai-accent); font-weight: bold; font-family: var(--ai-mono); }
#ai-inscripcion-app .ai-vbar      { height: 4px; background: var(--ai-border); border-radius: 4px; overflow: hidden; }
#ai-inscripcion-app .ai-vbar-fill { height: 100%; background: var(--ai-accent); width: 0%; transition: width 0.7s cubic-bezier(0.4,0,0.2,1); }

/* Verify steps */
#ai-inscripcion-app .ai-vs { display: flex; align-items: center; gap: 9px; padding: 6px 0 !important; border-bottom: 1px solid var(--ai-border); font-size: 12px; color: var(--ai-text3); overflow: hidden; max-height: 36px; transition: max-height 0.5s ease 0.3s, opacity 0.4s ease, padding 0.4s ease 0.3s; }
#ai-inscripcion-app .ai-vs:last-child { border: none; }
#ai-inscripcion-app .ai-vs.active { color: var(--ai-text); font-weight: bold; }
#ai-inscripcion-app .ai-vs.done   { color: var(--ai-ok); }
#ai-inscripcion-app .ai-vs.error  { color: var(--ai-err); }
#ai-inscripcion-app .ai-vs-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--ai-border); transition: background var(--ai-t); }
#ai-inscripcion-app .ai-vs.active .ai-vs-dot { background: var(--ai-accent); animation: aiPulse 0.9s ease-in-out infinite; }
#ai-inscripcion-app .ai-vs.done   .ai-vs-dot { background: var(--ai-ok); }
#ai-inscripcion-app .ai-vs.error  .ai-vs-dot { background: var(--ai-err); }
#ai-inscripcion-app .vs-status { margin-left: auto; font-size: 12px; }

/* ── Éxito ────────────────────────────────────────── */
#ai-inscripcion-app .ai-success-head { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 4px 0 10px !important; }
#ai-inscripcion-app .ai-success-ava  { position: relative; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; font-size: 30px; }
#ai-inscripcion-app .ai-s-ring  { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--ai-ok); animation: aiBreathe 2s ease-in-out infinite; }
@keyframes aiBreathe { 0%,100%{transform:scale(1);opacity:0.6} 50%{transform:scale(1.08);opacity:0.15} }
#ai-inscripcion-app .ai-s-badge { position: absolute; bottom: 0; right: -2px; background: var(--ai-ok); color: #fff; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; border: 2px solid #fff; }
#ai-inscripcion-app .ai-success-name { font-size: 20px; font-weight: 700; color: var(--ai-text); text-align: center; text-transform: capitalize; }
#ai-inscripcion-app .ai-success-tag  { font-size: 11px; color: var(--ai-ok); font-weight: 600; letter-spacing: 0.5px; }

/* ── Credenciales ─────────────────────────────────── */
#ai-inscripcion-app .ai-creds { background: var(--ai-surface); border: 1px solid var(--ai-border); border-radius: var(--ai-radius); overflow: hidden; width: 100%; }
#ai-inscripcion-app .ai-cred-row { display: flex; justify-content: space-between; align-items: center; padding: 13px 18px !important; border-bottom: 1px solid var(--ai-border); font-size: 13px; }
#ai-inscripcion-app .ai-cred-row:last-child { border: none; }
#ai-inscripcion-app .ai-cred-lbl  { color: var(--ai-text2); }
#ai-inscripcion-app .ai-cred-val  { color: var(--ai-text); padding-right: 6px !important; }
#ai-inscripcion-app .ai-cred-code { font-family: var(--ai-mono); font-size: 12px; color: var(--ai-text); background: #fff; border: 1px solid var(--ai-border); padding: 2px 8px !important; border-radius: 4px; }
#ai-inscripcion-app .ai-notice { background: var(--ai-ok-lt); border: 1px solid var(--ai-ok-mid); border-radius: var(--ai-radius); padding: 12px 16px !important; font-size: 13px; color: #166534; text-align: center; }

/* Alertas */
#ai-inscripcion-app .ai-alert-err { background: var(--ai-err-lt); border: 1px solid #fca5a5; border-radius: var(--ai-radius); padding: 11px 14px !important; font-size: 12px; color: #7f1d1d; display: flex; flex-direction: column; gap: 7px; }
#ai-inscripcion-app .ai-alert-err strong { color: var(--ai-err); }

/* ── Botones ──────────────────────────────────────── */
#ai-inscripcion-app .ai-actions    { display: flex; gap: 10px; justify-content: flex-end; padding-top: 4px !important; }
#ai-inscripcion-app .ai-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 20px !important; border-radius: var(--ai-radius); font-size: 14px; font-weight: 600; border: none; font-family: var(--ai-font); transition: all var(--ai-t); white-space: nowrap; cursor: pointer; }
#ai-inscripcion-app .ai-btn-primary                     { background: var(--ai-accent); color: #fff; }
#ai-inscripcion-app .ai-btn-primary:hover:not(:disabled){ background: #1d4ed8; }
#ai-inscripcion-app .ai-btn-primary:disabled            { background: var(--ai-border); color: var(--ai-text3); cursor: not-allowed; }
#ai-inscripcion-app .ai-btn-ghost                       { background: #fff; color: var(--ai-text2); border: 1px solid var(--ai-border); }
#ai-inscripcion-app .ai-btn-ghost:hover                 { background: var(--ai-surface); }
#ai-inscripcion-app .ai-btn-full { width: 100%; }
#ai-inscripcion-app .ai-btn-sm   { padding: 6px 12px !important; font-size: 11px; }

/* Animaciones */
@keyframes aiPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* ══ RESPONSIVE ══════════════════════════════════════ */
@media (max-width: 900px) {
  #ai-inscripcion-app                  { height: auto; min-height: 0; }
  #ai-inscripcion-app .ai-sidebar      { display: none; }
  #ai-inscripcion-app .ai-content-body { padding: 16px !important; }
  #ai-inscripcion-app .ai-panel        { padding: 20px !important; }
}
@media (max-width: 560px) {
  #ai-inscripcion-app .ai-features       { flex-direction: column; }
  #ai-inscripcion-app .ai-actions        { flex-direction: column-reverse; }
  #ai-inscripcion-app .ai-btn            { width: 100%; justify-content: center; }
  #ai-inscripcion-app .ai-profile        { flex-direction: column; text-align: center; }
  #ai-inscripcion-app .ai-topbar-session { display: none; }
  #ai-inscripcion-app .ai-content-body   { padding: 14px !important; }
  #ai-inscripcion-app .ai-panel          { padding: 16px !important; }
  #ai-inscripcion-app .ai-panel-title    { font-size: 18px; }
}

/* ══ MOBILE BAR — visible solo en móvil < 900px ══════
   Reemplaza al sidebar oculto: nombre + RUN + dots + % */
#ai-inscripcion-app .ai-mobile-bar {
  display:        none;
  align-items:    center;
  gap:            12px;
  padding:        8px 16px !important;
  background:     var(--ai-sb-bg);
  border-bottom:  1px solid var(--ai-border);
  flex-shrink:    0;
}
#ai-inscripcion-app .ai-mb-info  { display: flex; flex-direction: column; flex: 1; min-width: 0; }
#ai-inscripcion-app .ai-mb-name  { font-size: 12px; font-weight: 700; color: var(--ai-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ai-inscripcion-app .ai-mb-run   { font-family: var(--ai-mono); font-size: 10px; color: var(--ai-text3); }
#ai-inscripcion-app .ai-mb-dots  { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
#ai-inscripcion-app .ai-mb-dot   { width: 8px; height: 8px; border-radius: 50%; background: var(--ai-border); transition: background 0.3s; }
#ai-inscripcion-app .ai-mb-dot.active { background: var(--ai-accent); box-shadow: 0 0 4px rgba(37,99,235,0.4); }
#ai-inscripcion-app .ai-mb-dot.done   { background: var(--ai-ok); }
#ai-inscripcion-app .ai-mb-pct   { font-family: var(--ai-mono); font-size: 11px; font-weight: 700; color: var(--ai-accent); flex-shrink: 0; }

@media (max-width: 900px) {
  #ai-inscripcion-app .ai-mobile-bar { display: flex; }
}