/* ── PANEL ── */
.panel{background:var(--bg2);border:0.5px solid var(--line);border-radius:var(--r-lg);margin-bottom:14px;overflow:hidden}
.panel-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:0.5px solid var(--line);gap:12px}
.panel-head h2{font-size:14px;font-weight:600;letter-spacing:-.01em}
.panel-head p{font-size:11.5px;color:var(--grey);margin-top:2px}
.panel-head-left{flex:1;min-width:0}

/* ── KPI CARDS ── */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-bottom:18px}
.kpi-card{
  background:var(--bg2);border:0.5px solid var(--line);
  border-radius:var(--r);padding:16px 18px;
  position:relative;overflow:hidden;transition:.2s;
}
.kpi-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,currentColor,transparent);
  opacity:.4;
}
.kpi-card:hover{border-color:var(--line2);transform:translateY(-1px)}
.kpi-card .kpi-label{font-size:11px;color:var(--grey);font-weight:500;margin-bottom:10px;letter-spacing:.01em}
.kpi-card .kpi-value{font-size:34px;font-weight:700;letter-spacing:-.04em;line-height:1}
.kpi-card .kpi-sub{font-size:11px;color:var(--grey2);margin-top:5px}
.kpi-card.green{color:var(--green)}.kpi-card.green .kpi-value{color:var(--green)}
.kpi-card.alert{color:var(--alert)}.kpi-card.alert .kpi-value{color:var(--alert)}
.kpi-card.red  {color:var(--red)  }.kpi-card.red   .kpi-value{color:var(--red)}
.kpi-card.gold {color:var(--gold) }.kpi-card.gold  .kpi-value{color:var(--gold)}
.kpi-card.blue {color:var(--blue) }.kpi-card.blue  .kpi-value{color:var(--blue)}

/* ── TABLA ── */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
thead tr{border-bottom:0.5px solid var(--line2)}
th{text-align:left;padding:9px 18px;font-size:10px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--grey2);white-space:nowrap}
td{padding:12px 18px;border-bottom:0.5px solid rgba(255,255,255,.03);vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr{transition:.15s;cursor:pointer}
tbody tr:hover td{background:rgba(255,255,255,.02)}
.td-agent{display:flex;align-items:center;gap:9px}
.agent-avatar{width:28px;height:28px;border-radius:50%;background:var(--gold3);border:0.5px solid rgba(201,162,39,.25);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--gold);flex-shrink:0}

/* ── PROGRESS BAR ── */
.progress-bar{height:3px;background:rgba(255,255,255,.06);border-radius:99px;overflow:hidden;min-width:80px}
.progress-bar .fill{height:100%;border-radius:99px;background:var(--gold);transition:width .6s cubic-bezier(.2,.8,.2,1)}
.progress-bar .fill.green{background:var(--green)}
.progress-bar .fill.alert{background:var(--alert)}
.progress-bar .fill.red{background:var(--red)}

/* ── BADGES ── */
.badge{display:inline-flex;align-items:center;gap:3px;font-size:10px;padding:2px 7px;border-radius:99px;font-weight:600;white-space:nowrap;border:0.5px solid}
.badge-green {color:var(--green) ;background:var(--green-bg) ;border-color:var(--green-line)}
.badge-alert {color:var(--alert) ;background:var(--alert-bg) ;border-color:var(--alert-line)}
.badge-red   {color:var(--red)   ;background:var(--red-bg)   ;border-color:var(--red-line)}
.badge-gold  {color:var(--gold)  ;background:var(--gold3)    ;border-color:rgba(201,162,39,.2)}
.badge-grey  {color:var(--grey)  ;background:rgba(255,255,255,.04);border-color:var(--line2)}
.badge-blue  {color:var(--blue)  ;background:var(--blue-bg)  ;border-color:var(--blue-line)}
.badge-purple{color:var(--purple);background:var(--purple-bg);border-color:var(--purple-line)}
.badge-video {color:var(--blue)  ;background:var(--blue-bg)  ;border-color:var(--blue-line)}
.badge-quiz  {color:var(--purple);background:var(--purple-bg);border-color:var(--purple-line)}
.badge-evid  {color:#E8956B;background:rgba(232,149,107,.1);border-color:rgba(232,149,107,.2)}
.badge-sim   {color:var(--green) ;background:var(--green-bg) ;border-color:var(--green-line)}
.badge-real  {color:#5BD4B4;background:rgba(91,212,180,.1);border-color:rgba(91,212,180,.2)}

/* ── BOTONES ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:8px 15px;border-radius:var(--r-sm);font-weight:600;
  cursor:pointer;font-family:inherit;font-size:13px;border:none;
  transition:.18s;text-decoration:none;white-space:nowrap;letter-spacing:-.01em;
}
.btn:disabled{opacity:.35;cursor:not-allowed;transform:none!important}
.btn:active:not(:disabled){transform:scale(.98)}
.btn-gold{
  background:var(--gold);color:#000;
  box-shadow:0 1px 0 rgba(255,255,255,.15) inset, 0 2px 12px rgba(201,162,39,.15);
}
.btn-gold:hover:not(:disabled){background:var(--gold2);transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 4px 18px rgba(201,162,39,.25)}
.btn-outline{background:rgba(255,255,255,.05);border:0.5px solid var(--line2);color:var(--grey)}
.btn-outline:hover:not(:disabled){background:rgba(255,255,255,.08);color:var(--white);border-color:var(--line3)}
.btn-green{background:var(--green-bg);border:0.5px solid var(--green-line);color:var(--green)}
.btn-green:hover:not(:disabled){background:rgba(45,184,102,.15)}
.btn-red  {background:var(--red-bg)  ;border:0.5px solid var(--red-line)  ;color:var(--red)}
.btn-red:hover:not(:disabled)  {background:rgba(217,79,61,.15)}
.btn-ghost{background:none;border:0.5px solid var(--line);color:var(--grey);padding:6px 10px}
.btn-ghost:hover{color:var(--white);border-color:var(--line2)}
.btn-sm{padding:5px 10px;font-size:11.5px}
.btn-lg{padding:12px 22px;font-size:14px}
.btn-full{width:100%}

/* ── FORMS ── */
.field-group{margin-bottom:14px}
.field-label{display:block;font-size:10.5px;font-weight:600;color:var(--grey);letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px}
.field-label .req{color:var(--alert);margin-left:2px}
.field-hint{font-size:11.5px;color:var(--grey2);margin-top:5px;line-height:1.5}
.field{
  width:100%;background:var(--bg);
  border:0.5px solid var(--line2);color:var(--white);
  padding:10px 12px;border-radius:var(--r-sm);
  font-family:inherit;font-size:13.5px;transition:.18s;appearance:none;
}
.field:focus{outline:none;border-color:rgba(201,162,39,.5);box-shadow:0 0 0 3px rgba(201,162,39,.06)}
.field::placeholder{color:var(--grey2)}
.field:disabled{opacity:.4;cursor:not-allowed}
textarea.field{resize:vertical;min-height:68px;line-height:1.55}
select.field{cursor:pointer}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:540px){.field-row{grid-template-columns:1fr}}

/* ── TABS ── */
.tab-bar{display:flex;gap:1px;background:var(--bg3);padding:3px;border-radius:10px;margin-bottom:18px;border:0.5px solid var(--line)}
.tab-btn{flex:1;padding:7px 10px;background:none;border:none;color:var(--grey);font-size:12px;font-weight:600;border-radius:7px;cursor:pointer;font-family:inherit;transition:.15s;text-align:center;letter-spacing:-.01em}
.tab-btn.active{background:rgba(255,255,255,.07);color:var(--white)}
.tab-pane{display:none}
.tab-pane.active{display:block;animation:fade-in .2s ease}

/* ── TYPE PICK ── */
.type-pick{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:14px}
.type-pick-btn{background:var(--bg);border:0.5px solid var(--line2);border-radius:var(--r-sm);padding:10px 4px;cursor:pointer;font-family:inherit;transition:.18s;text-align:center;color:var(--white)}
.type-pick-btn .e{font-size:18px;display:block;margin-bottom:4px}
.type-pick-btn .t{font-size:9.5px;color:var(--grey);font-weight:500}
.type-pick-btn.sel{border-color:rgba(201,162,39,.4);background:var(--gold3)}
.type-pick-btn.sel .t{color:var(--gold)}
@media(max-width:480px){.type-pick{grid-template-columns:repeat(3,1fr)}}

/* ── PROVIDER PICK ── */
.provider-pick{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.provider-btn{background:var(--bg);border:0.5px solid var(--line2);border-radius:var(--r-sm);padding:12px;cursor:pointer;font-family:inherit;transition:.18s;display:flex;align-items:center;gap:9px;text-align:left;color:var(--white)}
.provider-btn .p-icon{font-size:20px;flex-shrink:0}
.provider-btn .p-name{font-size:13px;font-weight:600;margin-bottom:2px;letter-spacing:-.01em}
.provider-btn .p-desc{font-size:11px;color:var(--grey)}
.provider-btn.sel{border-color:rgba(201,162,39,.4);background:var(--gold3)}

/* ── QUIZ BUILDER ── */
.question-block{background:var(--bg);border:0.5px solid var(--line2);border-radius:var(--r-sm);padding:14px;margin-bottom:9px}
.question-block:hover{border-color:var(--line3)}
.q-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.q-num{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--grey2)}
.option-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.option-row input[type="checkbox"]{width:15px;height:15px;cursor:pointer;accent-color:var(--gold);flex-shrink:0}
.option-row .option-input{flex:1;background:var(--bg2);border:0.5px solid var(--line2);color:var(--white);padding:7px 10px;border-radius:7px;font-family:inherit;font-size:12.5px}
.option-row .option-input:focus{outline:none;border-color:rgba(201,162,39,.4)}
.option-row.correct .option-input{border-color:var(--green-line);background:var(--green-bg)}

/* ── HASHTAG CHIPS ── */
#hashtag-chips-container{
  display:flex;flex-wrap:wrap;gap:5px;padding:7px 10px;
  background:var(--bg);border:0.5px solid var(--line2);
  border-radius:var(--r-sm);min-height:38px;align-items:center;cursor:text;
  transition:.18s;
}
#hashtag-chips-container:focus-within{border-color:rgba(201,162,39,.5);box-shadow:0 0 0 3px rgba(201,162,39,.06)}

/* ── MODAL ── */
.modal-overlay{position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.85);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);display:none;align-items:center;justify-content:center;padding:20px}
.modal-overlay.open{display:flex;animation:fade-in .2s ease}
.modal-card{background:var(--bg2);border:0.5px solid var(--line2);border-radius:var(--r-xl);width:100%;max-width:600px;max-height:92vh;overflow-y:auto;padding:26px;position:relative}
.modal-card h3{font-size:19px;font-weight:700;letter-spacing:-.03em;margin-bottom:4px}
.modal-sub{color:var(--grey);font-size:12.5px;margin-bottom:20px;line-height:1.5}
.modal-footer{display:flex;gap:8px;margin-top:18px;padding-top:14px;border-top:0.5px solid var(--line);position:sticky;bottom:0;background:var(--bg2);padding-bottom:2px}
.modal-footer .btn{flex:1}

/* ── CONSTRUCTOR ── */
.course-block{background:var(--bg2);border:0.5px solid var(--line);border-radius:var(--r-lg);margin-bottom:8px;overflow:hidden;transition:.18s}
.course-block:hover{border-color:var(--line2)}
.course-block.drag-over{border-color:rgba(201,162,39,.4);background:rgba(201,162,39,.03)}
.course-header{display:flex;align-items:center;gap:11px;padding:13px 16px;cursor:pointer;user-select:none;transition:.15s}
.course-header:hover{background:rgba(255,255,255,.02)}
.course-block.open .course-header{border-bottom:0.5px solid var(--line)}
.grip{color:var(--grey2);cursor:grab;font-size:13px;flex-shrink:0;opacity:.4;transition:.15s;letter-spacing:-.1em}
.grip:hover{opacity:.9;color:var(--grey)}
.grip:active{cursor:grabbing}
.course-num{width:26px;height:26px;border-radius:7px;background:var(--gold3);border:0.5px solid rgba(201,162,39,.2);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--gold);flex-shrink:0}
.course-title{font-size:14px;font-weight:600;letter-spacing:-.02em}
.course-sub{font-size:11.5px;color:var(--grey);margin-top:1px}
.course-chevron{color:var(--grey2);font-size:10px;transition:.25s;flex-shrink:0;margin-left:2px}
.course-block.open .course-chevron{transform:rotate(90deg)}
.course-actions{display:flex;gap:5px;flex-shrink:0}
.module-row{display:flex;align-items:center;gap:9px;padding:10px 16px;border-bottom:0.5px solid rgba(255,255,255,.03);cursor:pointer;transition:.15s}
.module-row:last-of-type{border-bottom:none}
.module-row:hover{background:rgba(255,255,255,.02)}
.module-row.drag-over{border-top:1.5px solid var(--gold)}
.mod-num{width:22px;height:22px;border-radius:6px;background:var(--bg3);display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:600;color:var(--grey2);flex-shrink:0}
.mod-title{font-size:13px;font-weight:500;letter-spacing:-.01em}
.mod-meta{display:flex;gap:5px;margin-top:3px;flex-wrap:wrap;align-items:center}
.mod-info{flex:1;min-width:0}
.mod-hashtag{font-size:10px;color:var(--grey2)}
.mod-draft{display:inline-flex;align-items:center;font-size:9.5px;padding:1px 6px;border-radius:99px;background:var(--alert-bg);color:var(--alert);border:0.5px solid var(--alert-line);font-weight:600;margin-left:5px}
.add-module-btn{display:flex;align-items:center;justify-content:center;gap:6px;padding:11px;background:none;border:none;border-top:0.5px solid rgba(255,255,255,.03);color:var(--grey2);font-size:12.5px;font-weight:500;cursor:pointer;font-family:inherit;width:100%;transition:.18s}
.add-module-btn:hover{color:var(--gold);background:var(--gold3)}
.add-course-btn{display:flex;align-items:center;justify-content:center;gap:7px;padding:14px;border:0.5px dashed var(--line2);background:none;color:var(--grey);font-size:13px;font-weight:500;cursor:pointer;font-family:inherit;width:100%;border-radius:var(--r-lg);transition:.2s;margin-top:8px;letter-spacing:-.01em}
.add-course-btn:hover{border-color:rgba(201,162,39,.4);color:var(--gold);background:var(--gold3)}

/* ── SEARCH BAR ── */
.search-bar{position:relative;margin-bottom:18px}
.search-bar input{width:100%;background:var(--bg2);border:0.5px solid var(--line);color:var(--white);padding:11px 14px 11px 40px;border-radius:var(--r-sm);font-family:inherit;font-size:13.5px;transition:.18s}
.search-bar input:focus{outline:none;border-color:rgba(201,162,39,.4)}
.search-bar input::placeholder{color:var(--grey2)}
.search-icon{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--grey2);font-size:15px;pointer-events:none}

/* ── EVIDENCIAS ── */
.evidence-card{background:var(--bg2);border:0.5px solid var(--line);border-radius:var(--r);padding:16px 18px;margin-bottom:8px;display:flex;gap:14px;align-items:flex-start;transition:.15s}
.evidence-card:hover{border-color:var(--line2)}
.evidence-thumb{width:72px;height:72px;border-radius:var(--r-sm);object-fit:cover;background:var(--bg3);flex-shrink:0;border:0.5px solid var(--line2);cursor:pointer;transition:.15s}
.evidence-thumb:hover{border-color:rgba(201,162,39,.3)}
.evidence-thumb-placeholder{width:72px;height:72px;border-radius:var(--r-sm);background:var(--bg3);border:0.5px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0;color:var(--grey2)}
.evidence-info{flex:1;min-width:0}
.evidence-info .agent-name{font-size:13.5px;font-weight:600;margin-bottom:3px;letter-spacing:-.01em}
.evidence-info .module-name{font-size:12px;color:var(--grey);margin-bottom:5px}
.evidence-info .agent-notes{font-size:12.5px;color:var(--grey);font-style:italic;margin-bottom:7px;line-height:1.5}
.evidence-info .waiting{font-size:11px;color:var(--grey2)}
.evidence-actions{display:flex;flex-direction:column;gap:5px;flex-shrink:0}

/* ── RANKING ── */
.rank-row{display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:0.5px solid rgba(255,255,255,.03);transition:.15s}
.rank-row:last-child{border-bottom:none}
.rank-row:hover{background:rgba(255,255,255,.015)}
.rank-pos{font-size:16px;font-weight:700;width:28px;text-align:center;flex-shrink:0}
.rank-pos.gold-pos{color:var(--gold)}
.rank-pos.silver-pos{color:var(--grey)}
.rank-pos.bronze-pos{color:var(--alert)}
.rank-delta{font-size:9.5px;font-weight:700;flex-shrink:0;width:20px;text-align:center}
.rank-delta.up{color:var(--green)}
.rank-delta.down{color:var(--red)}
.rank-delta.same{color:var(--grey2)}
.rank-info{flex:1;min-width:0}
.rank-name{font-size:13.5px;font-weight:600;letter-spacing:-.01em}
.rank-detail{font-size:11.5px;color:var(--grey);margin-top:2px}
.rank-pct{font-size:20px;font-weight:700;letter-spacing:-.03em;flex-shrink:0}

/* ── TOAST ── */
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(80px);background:rgba(15,15,18,.96);border:0.5px solid var(--line2);border-radius:var(--r);padding:11px 20px;font-size:13px;font-weight:500;letter-spacing:-.01em;box-shadow:0 8px 40px rgba(0,0,0,.6);z-index:9999;transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .3s;opacity:0;white-space:nowrap;pointer-events:none}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}
.toast.ok  {border-color:var(--green-line);color:var(--green)}
.toast.err {border-color:var(--red-line)  ;color:var(--red)}
.toast.warn{border-color:var(--alert-line);color:var(--alert)}

/* ── SPINNER ── */
.spinner{width:18px;height:18px;border:1.5px solid rgba(201,162,39,.15);border-top-color:var(--gold);border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0}
.spinner-lg{width:34px;height:34px;border-width:2px}

/* ── EMPTY STATE ── */
.empty-state{text-align:center;padding:52px 24px;color:var(--grey)}
.empty-icon{font-size:40px;margin-bottom:12px;opacity:.35;display:block}
.empty-state h3{font-size:15px;font-weight:600;color:var(--white);margin-bottom:7px;letter-spacing:-.01em}
.empty-state p{font-size:13px;line-height:1.6;max-width:300px;margin:0 auto 14px}

/* ── MISC ── */
.divider{height:0.5px;background:var(--line);margin:18px 0}
.section-divider{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey2);font-weight:600;margin:18px 0 10px;display:flex;align-items:center;gap:10px}
.section-divider::after{content:'';flex:1;height:0.5px;background:var(--line)}
.video-preview{aspect-ratio:16/9;background:var(--bg);border:0.5px solid var(--line);border-radius:var(--r-sm);overflow:hidden;margin-bottom:12px}
.video-preview iframe,.video-preview video{width:100%;height:100%;border:none;display:block}