/* ═══════════════════════════════════════════════════
   QUÁLITAS CLM — DESIGN SYSTEM v2
   Persistent Sidebar · Wow Moments · Full System
   ═══════════════════════════════════════════════════ */

/* ── 1. TOKENS ──────────────────────────────────────── */
:root {
  --q-morado:         #6B2D8B;
  --q-morado-hover:   #5A2475;
  --q-morado-soft:    rgba(107,45,139,.08);
  --q-teal:           #00A89D;
  --q-teal-hover:     #008F85;
  --q-teal-soft:      rgba(0,168,157,.08);
  --q-bg-body:        #F0F2F5;
  --q-bg-card:        #FFFFFF;
  --q-border:         #E2E4E9;
  --q-text-primary:   #1C1C2E;
  --q-text-secondary: #6B7280;
  --q-text-disabled:  #AAAAAA;
  --q-estado-verde:   #1E8A4C;
  --q-estado-rojo:    #C0392B;
  --q-estado-ambar:   #D97706;
  --q-estado-gris:    #9CA3AF;
  --q-shadow-card:    0 2px 12px rgba(107,45,139,.07);
  --q-shadow-hover:   0 8px 24px rgba(107,45,139,.14);
  --q-shadow-modal:   0 16px 48px rgba(107,45,139,.18);
  --q-radius-card:    12px;
  --q-radius-btn:     8px;
  --q-radius-chip:    20px;
  --header-h:         60px;
  --sidebar-w:        248px;
  --sidebar-w-mini:   64px;
}

/* ── 2. RESET + BASE ────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:14px; scroll-behavior:smooth; }
body {
  font-family:'Montserrat',sans-serif;
  font-size:14px;
  color:var(--q-text-primary);
  background:var(--q-bg-body);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
a { color:var(--q-morado); text-decoration:none; }
a:hover { text-decoration:underline; }
button { font-family:'Montserrat',sans-serif; cursor:pointer; border:none; background:none; }
input,select,textarea { font-family:'Montserrat',sans-serif; }
ul { list-style:none; }
.hidden { display:none !important; }

/* ── 3. LAYOUT ──────────────────────────────────────── */
.app-shell { display:flex; flex-direction:column; min-height:100vh; }

.app-body {
  display:flex;
  margin-top:var(--header-h);
  min-height:calc(100vh - var(--header-h));
}

.app-main {
  flex:1;
  margin-left:var(--sidebar-w);
  padding:28px 40px 48px;
  background:var(--q-bg-body);
  min-height:calc(100vh - var(--header-h));
  transition:margin-left .28s cubic-bezier(.4,0,.2,1);
  animation:pageIn .3s ease;
}
@keyframes pageIn {
  from { opacity:0; transform:translateY(6px); }
  to   { opacity:1; transform:translateY(0); }
}
body.sidebar-collapsed .app-main { margin-left:var(--sidebar-w-mini); }
@media(max-width:768px) { .app-main { margin-left:0 !important; padding:16px; } }

/* ── 4. HEADER ──────────────────────────────────────── */
.app-header {
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:var(--header-h);
  background:white;
  border-bottom:1px solid var(--q-border);
  display:flex; align-items:center;
  padding:0 24px;
  box-shadow:0 1px 0 var(--q-border), 0 2px 8px rgba(107,45,139,.04);
}
.header-logo { display:flex; align-items:center; }
.header-logo-img { height:38px; width:auto; display:block; }
.header-right { display:flex; align-items:center; gap:8px; margin-left:auto; }
/* Hamburger sidebar toggle in header */
.sb-hamburger {
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:9px;
  color:var(--q-text-secondary);
  transition:background .15s, color .15s;
  margin-right:12px; flex-shrink:0;
}
.sb-hamburger:hover { background:var(--q-morado-soft); color:var(--q-morado); }
.notif-btn {
  position:relative; width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  border-radius:10px; color:var(--q-text-secondary);
  transition:background .15s, color .15s;
}
.notif-btn:hover { background:var(--q-bg-body); color:var(--q-morado); }
.notif-badge {
  position:absolute; top:4px; right:4px;
  background:var(--q-morado); color:white;
  font-size:9px; font-weight:700;
  min-width:16px; height:16px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  padding:0 3px; pointer-events:none;
}
.header-user { display:flex; align-items:center; gap:10px; cursor:pointer; padding:6px 10px; border-radius:10px; transition:background .15s; }
.header-user:hover { background:var(--q-bg-body); }
.header-user-info { text-align:right; }
.header-username { display:block; font-size:13px; font-weight:600; color:var(--q-text-primary); }
.header-userrole { display:block; font-size:10px; font-weight:500; color:var(--q-text-secondary); margin-top:1px; }
.user-avatar {
  width:34px; height:34px; border-radius:50%;
  background:linear-gradient(135deg, var(--q-morado), #9B3DBF);
  color:white; font-size:12px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 8px rgba(107,45,139,.3);
}

/* ── 5. PERSISTENT SIDEBAR ──────────────────────────── */
.app-sidebar {
  position:fixed;
  top:var(--header-h); left:0; bottom:0;
  width:var(--sidebar-w);
  background:white;
  border-right:1px solid var(--q-border);
  display:flex; flex-direction:column;
  z-index:80;
  overflow:hidden;
  transition:width .28s cubic-bezier(.4,0,.2,1);
  box-shadow:2px 0 16px rgba(107,45,139,.04);
}
body.sidebar-collapsed .app-sidebar { width:var(--sidebar-w-mini); }

/* Toggle button */
.sb-toggle {
  position:absolute; top:16px; right:-13px; z-index:10;
  width:26px; height:26px; border-radius:50%;
  background:white; border:1.5px solid var(--q-border);
  display:flex; align-items:center; justify-content:center;
  color:var(--q-text-secondary);
  box-shadow:0 2px 6px rgba(0,0,0,.1);
  transition:all .2s; cursor:pointer;
}
.sb-toggle:hover { border-color:var(--q-morado); color:var(--q-morado); background:var(--q-morado-soft); }
body.sidebar-collapsed .sb-toggle #sb-toggle-icon { transform:rotate(180deg); }
#sb-toggle-icon { transition:transform .28s cubic-bezier(.4,0,.2,1); }

/* User section */
.sb-user {
  display:flex; align-items:center; gap:10px;
  padding:18px 16px 14px;
  min-width:0; overflow:hidden;
}
.sb-avatar {
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg, var(--q-morado), #9B3DBF);
  color:white; font-size:13px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 8px rgba(107,45,139,.25);
}
.sb-user-text { min-width:0; overflow:hidden; transition:opacity .2s, width .28s; }
.sb-name { font-size:13px; font-weight:700; color:var(--q-text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sb-role { font-size:11px; color:var(--q-text-secondary); margin-top:2px; white-space:nowrap; }
body.sidebar-collapsed .sb-user-text { opacity:0; width:0; }

.sb-divider { height:1px; background:var(--q-border); margin:0 12px 8px; }

/* Navigation items */
.sb-menu { flex:1; overflow-y:auto; overflow-x:hidden; padding:4px 8px; scrollbar-width:none; }
.sb-menu::-webkit-scrollbar { display:none; }
.sb-menu li a {
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:10px;
  font-size:13px; font-weight:500; color:var(--q-text-secondary);
  text-decoration:none; white-space:nowrap; overflow:hidden;
  transition:background .15s, color .15s;
  position:relative;
}
.sb-menu li a:hover { background:var(--q-bg-body); color:var(--q-text-primary); }
.sb-menu li a.active {
  background:linear-gradient(135deg, var(--q-morado-soft), rgba(107,45,139,.12));
  color:var(--q-morado); font-weight:600;
}
.sb-menu li a.active::before {
  content:''; position:absolute; left:0; top:20%; bottom:20%;
  width:3px; border-radius:0 3px 3px 0;
  background:var(--q-morado);
}
.sb-item-icon { flex-shrink:0; color:inherit; }
.sb-item-label { overflow:hidden; text-overflow:ellipsis; transition:opacity .2s, width .28s; }
body.sidebar-collapsed .sb-menu li a .sb-item-label { opacity:0; width:0; }
body.sidebar-collapsed .sb-menu li a { justify-content:center; padding:10px; }
body.sidebar-collapsed .sb-menu li a::before { display:none; }

/* Tooltip on collapsed sidebar */
body.sidebar-collapsed .sb-menu li { position:relative; }
body.sidebar-collapsed .sb-menu li a::after {
  content:attr(data-label);
  position:absolute; left:calc(var(--sidebar-w-mini) + 8px); top:50%;
  transform:translateY(-50%);
  background:var(--q-text-primary); color:white;
  font-size:12px; font-weight:600; white-space:nowrap;
  padding:5px 10px; border-radius:6px;
  pointer-events:none; opacity:0;
  transition:opacity .15s;
  z-index:200;
}
body.sidebar-collapsed .sb-menu li a:hover::after { opacity:1; }

.sb-spacer { flex:1; min-height:12px; }
.sb-logout {
  display:flex; align-items:center; gap:10px;
  padding:12px 20px; margin:0 8px 12px;
  border-radius:10px;
  font-size:13px; font-weight:600; color:var(--q-estado-rojo);
  width:calc(100% - 16px); text-align:left;
  transition:background .15s; white-space:nowrap; overflow:hidden;
  cursor:pointer;
}
.sb-logout:hover { background:rgba(192,57,43,.06); }
body.sidebar-collapsed .sb-logout { justify-content:center; padding:12px 0; }
body.sidebar-collapsed .sb-logout .sb-item-label { opacity:0; width:0; }

@media(max-width:768px) {
  .app-sidebar { transform:translateX(-100%); transition:transform .28s cubic-bezier(.4,0,.2,1); box-shadow:none; }
  body.sidebar-mobile-open .app-sidebar { transform:translateX(0); box-shadow:4px 0 24px rgba(0,0,0,.15); }
  .sb-toggle { display:none; }
}

/* ── 6. NOTIFICATIONS PANEL ──────────────────────────── */
.notif-backdrop {
  position:fixed; inset:0; z-index:150;
  background:rgba(28,28,46,.2);
}
.notif-panel {
  position:fixed; top:var(--header-h); right:0; bottom:0; z-index:151;
  width:360px; background:white;
  box-shadow:-4px 0 32px rgba(107,45,139,.12);
  display:flex; flex-direction:column;
  animation:slideInRight .25s cubic-bezier(.4,0,.2,1);
}
.notif-panel.hidden { display:none; }
@keyframes slideInRight {
  from { transform:translateX(100%); }
  to   { transform:translateX(0); }
}
.notif-header {
  display:flex; justify-content:space-between; align-items:center;
  padding:18px 20px; border-bottom:1px solid var(--q-border);
  font-size:15px; font-weight:700; color:var(--q-text-primary);
}
.notif-item {
  display:flex; gap:12px; align-items:flex-start;
  padding:14px 20px; border-bottom:1px solid var(--q-border);
  cursor:pointer; transition:background .15s;
}
.notif-item:hover { background:var(--q-bg-body); }
.notif-item.unread { background:rgba(107,45,139,.025); }
.notif-dot { width:8px; height:8px; border-radius:50%; background:var(--q-morado); flex-shrink:0; margin-top:6px; }
.notif-icon { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.notif-msg { font-size:12px; color:var(--q-text-primary); line-height:1.5; }
.notif-folio { color:var(--q-morado); font-weight:600; }
.notif-time { font-size:11px; color:var(--q-text-secondary); margin-top:3px; }

/* ── 7. CARD ──────────────────────────────────────────── */
.q-card {
  background:var(--q-bg-card);
  border-radius:var(--q-radius-card);
  box-shadow:var(--q-shadow-card);
  padding:28px 32px;
  transition:box-shadow .2s;
}
.q-card + .q-card { margin-top:20px; }
.q-card:hover { box-shadow:var(--q-shadow-hover); }

/* ── 8. BREADCRUMB ───────────────────────────────────── */
.breadcrumb {
  display:flex; align-items:center; gap:6px;
  font-size:12px; color:var(--q-text-secondary);
  margin-bottom:20px;
}
.breadcrumb a { color:var(--q-morado); text-decoration:none; font-weight:500; }
.breadcrumb a:hover { text-decoration:underline; }
.breadcrumb-sep { color:var(--q-border); }

/* ── 9. PAGE TITLE ────────────────────────────────────── */
.page-title { font-size:22px; font-weight:700; color:var(--q-text-primary); margin-bottom:4px; letter-spacing:-.3px; }
.page-subtitle { font-size:13px; color:var(--q-text-secondary); margin-bottom:24px; }

/* ── 10. BUTTONS ──────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 20px; border-radius:var(--q-radius-btn);
  font-size:13px; font-weight:600; cursor:pointer;
  border:none; transition:all .15s; white-space:nowrap;
  text-decoration:none; position:relative; overflow:hidden;
}
.btn::after {
  content:''; position:absolute; inset:0;
  background:rgba(255,255,255,0); transition:background .15s;
}
.btn:hover::after { background:rgba(255,255,255,.08); }
.btn svg { flex-shrink:0; }

.btn-morado { background:linear-gradient(135deg,var(--q-morado),#8B3AAF); color:white; box-shadow:0 2px 10px rgba(107,45,139,.3); }
.btn-morado:hover { background:linear-gradient(135deg,var(--q-morado-hover),#7A2F9E); box-shadow:0 4px 16px rgba(107,45,139,.4); transform:translateY(-1px); }
.btn-morado:active { transform:translateY(0); }
.btn-morado:disabled { background:#ccc; box-shadow:none; cursor:not-allowed; transform:none; }

.btn-teal { background:linear-gradient(135deg,var(--q-teal),#00C5B9); color:white; box-shadow:0 2px 10px rgba(0,168,157,.3); }
.btn-teal:hover { background:linear-gradient(135deg,var(--q-teal-hover),#00ABA0); box-shadow:0 4px 16px rgba(0,168,157,.4); transform:translateY(-1px); }

.btn-outline-teal { background:transparent; color:var(--q-teal); border:1.5px solid var(--q-teal); }
.btn-outline-teal:hover { background:var(--q-teal-soft); border-color:var(--q-teal-hover); }

.btn-outline-morado { background:transparent; color:var(--q-morado); border:1.5px solid var(--q-morado); }
.btn-outline-morado:hover { background:var(--q-morado-soft); }

.btn-outline-rojo { background:transparent; color:var(--q-estado-rojo); border:1.5px solid var(--q-estado-rojo); }
.btn-outline-rojo:hover { background:rgba(192,57,43,.06); }

.btn-ghost { background:transparent; color:var(--q-text-secondary); padding:10px 16px; }
.btn-ghost:hover { background:var(--q-bg-body); color:var(--q-text-primary); }

.btn-sm { padding:7px 14px; font-size:12px; }
.btn-lg { padding:13px 28px; font-size:14px; }
.btn-full { width:100%; justify-content:center; }
.btn-icon-only { padding:9px; border-radius:10px; }

/* ── 11. INPUTS ───────────────────────────────────────── */
.form-group { margin-bottom:18px; }
.form-label { display:block; font-size:12px; font-weight:600; color:var(--q-text-secondary); margin-bottom:6px; }
.form-label .req { color:var(--q-estado-rojo); margin-left:2px; }
.form-control {
  width:100%; padding:10px 14px;
  border:1.5px solid var(--q-border); border-radius:9px;
  font-size:13px; color:var(--q-text-primary);
  background:white; outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.form-control:focus { border-color:var(--q-morado); box-shadow:0 0 0 3px rgba(107,45,139,.1); }
.form-control::placeholder { color:var(--q-text-disabled); }
.form-control.has-icon-right { padding-right:42px; }
.form-control.error { border-color:var(--q-estado-rojo); box-shadow:0 0 0 3px rgba(192,57,43,.1); }
.form-error { font-size:11px; color:var(--q-estado-rojo); margin-top:5px; display:flex; align-items:center; gap:4px; }
.input-wrapper { position:relative; }
.input-icon-right { position:absolute; right:12px; top:50%; transform:translateY(-50%); color:var(--q-text-secondary); pointer-events:none; }
.input-icon-right.clickable { pointer-events:auto; cursor:pointer; }
textarea.form-control { resize:vertical; min-height:90px; }
select.form-control { cursor:pointer; }
.hint-text { font-size:11px; color:var(--q-text-secondary); margin-top:5px; }

.search-bar-wrapper { position:relative; display:inline-flex; width:100%; max-width:320px; }
.daterange-wrapper { position:relative; display:inline-flex; min-width:220px; }
.daterange-wrapper .form-control { padding-right:38px; color:var(--q-text-secondary); }
.daterange-icon { position:absolute; right:12px; top:50%; transform:translateY(-50%); color:var(--q-morado); pointer-events:none; }

/* OTP */
.otp-group { display:flex; gap:8px; }
.otp-input {
  width:48px; height:52px; text-align:center;
  font-size:22px; font-weight:700; color:var(--q-morado);
  border:1.5px solid var(--q-border); border-radius:9px; outline:none;
  transition:border-color .15s;
}
.otp-input:focus { border-color:var(--q-morado); box-shadow:0 0 0 3px rgba(107,45,139,.1); }

/* Password strength */
.strength-bar-track { height:5px; background:var(--q-border); border-radius:3px; margin:8px 0 4px; overflow:hidden; }
.strength-bar-fill { height:100%; border-radius:3px; transition:width .3s, background .3s; }
.strength-rules { list-style:none; }
.strength-rule { font-size:11px; color:var(--q-text-secondary); display:flex; align-items:center; gap:6px; margin-bottom:4px; }
.strength-rule.met { color:var(--q-estado-verde); }
.strength-rule::before { content:'○'; font-size:10px; }
.strength-rule.met::before { content:'✓'; }

/* ── 12. TABS ─────────────────────────────────────────── */
.tabs-bar { display:flex; gap:0; border-bottom:1px solid var(--q-border); margin-bottom:20px; }
.tab-btn {
  display:inline-flex; align-items:center; gap:7px;
  padding:10px 20px; font-size:13px; font-weight:500;
  color:var(--q-text-secondary); background:none; border:none;
  border-bottom:2.5px solid transparent; margin-bottom:-1px;
  cursor:pointer; transition:color .15s, border-color .15s;
}
.tab-btn:hover { color:var(--q-text-primary); }
.tab-btn.active { color:var(--q-morado); font-weight:600; border-bottom-color:var(--q-morado); }

/* ── 13. TABLE ────────────────────────────────────────── */
.table-toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.table-toolbar-right { margin-left:auto; display:flex; align-items:center; gap:8px; }
.show-select {
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; color:var(--q-text-secondary);
  border:1.5px solid var(--q-border); border-radius:8px;
  padding:7px 12px; background:white; cursor:pointer;
}
.show-select select { border:none; outline:none; font-size:13px; font-weight:600; color:var(--q-text-primary); background:transparent; cursor:pointer; }
.table-wrapper { overflow-x:auto; }
.q-table { width:100%; border-collapse:collapse; }
.q-table thead th {
  font-size:11px; font-weight:600; text-transform:uppercase;
  color:var(--q-morado); letter-spacing:.6px;
  padding:10px 14px; text-align:left;
  border-bottom:2px solid var(--q-border); white-space:nowrap;
  background:rgba(107,45,139,.02);
}
.q-table tbody tr { border-bottom:1px solid var(--q-border); transition:background .12s; }
.q-table tbody tr:hover { background:rgba(107,45,139,.025); }
.q-table tbody td { padding:14px 14px; font-size:13px; color:var(--q-text-primary); vertical-align:middle; }
.q-table tbody tr.row-disabled { opacity:.4; cursor:not-allowed; }
.q-table tbody tr.row-error td { background:rgba(192,57,43,.025); }
.row-sla-verde { border-left:3px solid var(--q-estado-verde); }
.row-sla-ambar { border-left:3px solid var(--q-estado-ambar); }
.row-sla-rojo  { border-left:3px solid var(--q-estado-rojo); }
.tbl-link { color:var(--q-morado); font-weight:500; cursor:pointer; }
.tbl-link:hover { text-decoration:underline; }
.tbl-action { font-size:12px; font-weight:700; text-transform:uppercase; cursor:pointer; white-space:nowrap; letter-spacing:.3px; }
.tbl-action-morado { color:var(--q-morado); }
.tbl-action-morado:hover { text-decoration:underline; }
.tbl-action-teal   { color:var(--q-teal); }
.tbl-action-rojo   { color:var(--q-estado-rojo); }
.tbl-action-disabled { color:var(--q-text-disabled); font-weight:400; cursor:default; font-size:12px; }

/* SLA */
.sla-cell { display:flex; align-items:center; gap:8px; }
.sla-bar { width:56px; height:5px; border-radius:3px; background:var(--q-border); overflow:hidden; flex-shrink:0; }
.sla-fill { height:100%; border-radius:3px; }
.sla-verde .sla-fill { background:var(--q-estado-verde); }
.sla-ambar .sla-fill { background:var(--q-estado-ambar); }
.sla-rojo  .sla-fill { background:var(--q-estado-rojo); }
.sla-text { font-size:12px; font-weight:600; white-space:nowrap; }
.sla-verde .sla-text { color:var(--q-estado-verde); }
.sla-ambar .sla-text { color:var(--q-estado-ambar); }
.sla-rojo  .sla-text { color:var(--q-estado-rojo); }

/* ── 14. PAGINATION ───────────────────────────────────── */
.pagination { display:flex; align-items:center; justify-content:space-between; margin-top:20px; flex-wrap:wrap; gap:12px; }
.pagination-total { font-size:13px; color:var(--q-text-secondary); }
.pagination-total strong { color:var(--q-text-primary); font-weight:700; }
.pagination-pages { display:flex; align-items:center; gap:4px; }
.page-btn {
  width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:600; cursor:pointer;
  color:var(--q-text-secondary); background:transparent; transition:all .12s;
}
.page-btn:hover { background:var(--q-bg-body); }
.page-btn.active { background:var(--q-morado); color:white; box-shadow:0 2px 8px rgba(107,45,139,.35); }
.page-btn.arrow { border-radius:8px; width:28px; height:28px; }

/* ── 15. CHIPS ────────────────────────────────────────── */
.chip {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 10px; border-radius:var(--q-radius-chip);
  font-size:11px; font-weight:600; white-space:nowrap;
}
.chip-verde  { background:#D4EDDA; color:var(--q-estado-verde); }
.chip-rojo   { background:#FADBD8; color:var(--q-estado-rojo); }
.chip-ambar  { background:#FEF3CD; color:var(--q-estado-ambar); }
.chip-gris   { background:#F3F4F6; color:var(--q-estado-gris); }
.chip-morado { background:var(--q-morado-soft); color:var(--q-morado); }
.chip-teal   { background:rgba(0,168,157,.1); color:var(--q-teal); }

/* ── 16. KPI CARDS ────────────────────────────────────── */
.kpi-row { display:grid; gap:16px; margin-bottom:24px; }
.kpi-row-3 { grid-template-columns:repeat(3,1fr); }
.kpi-row-4 { grid-template-columns:repeat(4,1fr); }
@media(max-width:960px) { .kpi-row-3,.kpi-row-4 { grid-template-columns:repeat(2,1fr); } }
.kpi-card {
  background:white; border:1px solid var(--q-border);
  border-radius:var(--q-radius-card); padding:20px 24px;
  position:relative; overflow:hidden;
  transition:box-shadow .2s, transform .2s;
}
.kpi-card:hover { box-shadow:var(--q-shadow-hover); transform:translateY(-2px); }
.kpi-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  border-radius:var(--q-radius-card) var(--q-radius-card) 0 0;
}
.kpi-card-morado::before { background:linear-gradient(90deg,var(--q-morado),#9B3DBF); }
.kpi-card-ambar::before  { background:linear-gradient(90deg,var(--q-estado-ambar),#F59E0B); }
.kpi-card-rojo::before   { background:linear-gradient(90deg,var(--q-estado-rojo),#E74C3C); }
.kpi-card-verde::before  { background:linear-gradient(90deg,var(--q-estado-verde),#27AE60); }
.kpi-card-teal::before   { background:linear-gradient(90deg,var(--q-teal),#00C5B9); }
.kpi-num { font-size:36px; font-weight:800; line-height:1.1; margin-bottom:6px; }
.kpi-num-morado { color:var(--q-morado); }
.kpi-num-ambar  { color:var(--q-estado-ambar); }
.kpi-num-rojo   { color:var(--q-estado-rojo); }
.kpi-num-verde  { color:var(--q-estado-verde); }
.kpi-num-teal   { color:var(--q-teal); }
.kpi-label { font-size:12px; color:var(--q-text-secondary); line-height:1.4; }
.kpi-trend { font-size:11px; font-weight:600; margin-top:6px; display:flex; align-items:center; gap:3px; }
.kpi-trend-up   { color:var(--q-estado-verde); }
.kpi-trend-down { color:var(--q-estado-rojo); }

/* ── 17. DATA PANELS ──────────────────────────────────── */
.data-panel { background:#F8F7FB; border-radius:10px; padding:20px; margin-bottom:20px; border:1px solid rgba(107,45,139,.06); }
.data-panel-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.7px; color:var(--q-morado); margin-bottom:14px; }
.data-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px 20px; }
.data-grid-2 { grid-template-columns:repeat(2,1fr); }
@media(max-width:768px) { .data-grid { grid-template-columns:repeat(2,1fr); } }
.data-field-label { font-size:11px; font-weight:600; color:var(--q-text-secondary); margin-bottom:4px; }
.data-field-value { font-size:13px; color:var(--q-text-primary); font-weight:500; }

.status-card { border-radius:10px; padding:18px 20px; margin-bottom:20px; border-left:3px solid; }
.status-card-verde { background:rgba(30,138,76,.04); border-color:var(--q-estado-verde); }
.status-card-rojo  { background:rgba(192,57,43,.04); border-color:var(--q-estado-rojo); }
.status-card-ambar { background:rgba(217,119,6,.04); border-color:var(--q-estado-ambar); }
.status-card-title { font-size:14px; font-weight:700; margin-bottom:12px; display:flex; align-items:center; gap:6px; }
.status-card-verde .status-card-title { color:var(--q-estado-verde); }
.status-card-rojo  .status-card-title { color:var(--q-estado-rojo); }
.status-card-ambar .status-card-title { color:var(--q-estado-ambar); }
.status-card-row { display:flex; gap:4px; font-size:13px; margin-bottom:6px; }
.status-card-row span:first-child { font-weight:600; color:var(--q-text-secondary); min-width:130px; }

/* ── 18. WIZARD (nueva solicitud) ─────────────────────── */
.wizard-container { max-width:760px; margin:0 auto; }
.wizard-stepper {
  display:flex; align-items:center; justify-content:center;
  margin-bottom:32px; gap:0;
}
.wz-step { display:flex; align-items:center; gap:0; }
.wz-circle {
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700;
  border:2px solid var(--q-border);
  background:white; color:var(--q-text-disabled);
  transition:all .3s;
}
.wz-step.active .wz-circle { border-color:var(--q-morado); background:var(--q-morado); color:white; box-shadow:0 0 0 4px rgba(107,45,139,.15); }
.wz-step.done   .wz-circle { border-color:var(--q-teal); background:var(--q-teal); color:white; }
.wz-label { font-size:11px; font-weight:600; color:var(--q-text-disabled); margin-left:8px; white-space:nowrap; transition:color .3s; }
.wz-step.active .wz-label { color:var(--q-morado); }
.wz-step.done   .wz-label { color:var(--q-teal); }
.wz-line { width:40px; height:2px; background:var(--q-border); transition:background .3s; }
.wz-line.done { background:var(--q-teal); }
.wz-content { animation:fadeInUp .25s ease; }
@keyframes fadeInUp {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}
.wz-nav { display:flex; justify-content:space-between; align-items:center; margin-top:28px; padding-top:20px; border-top:1px solid var(--q-border); }

/* Type cards for wizard */
.type-cards { display:flex; gap:20px; justify-content:center; margin:8px 0 24px; }
.type-card {
  width:220px; padding:28px 24px; text-align:center;
  border:2px solid var(--q-border); border-radius:var(--q-radius-card);
  cursor:pointer; transition:all .2s; background:white; position:relative; overflow:hidden;
}
.type-card::after { content:''; position:absolute; inset:0; background:transparent; transition:background .2s; }
.type-card:hover { border-color:var(--q-morado); transform:translateY(-3px); box-shadow:0 8px 24px rgba(107,45,139,.15); }
.type-card.selected { border-color:var(--q-morado); background:var(--q-morado-soft); box-shadow:0 0 0 4px rgba(107,45,139,.1); }
.type-card-check { position:absolute; top:10px; right:10px; width:22px; height:22px; border-radius:50%; background:var(--q-morado); display:flex; align-items:center; justify-content:center; opacity:0; transform:scale(0); transition:all .2s; }
.type-card.selected .type-card-check { opacity:1; transform:scale(1); }
.type-card-icon { color:var(--q-morado); margin-bottom:14px; opacity:.85; }
.type-card-title { font-size:16px; font-weight:700; color:var(--q-text-primary); margin-bottom:8px; }
.type-card-desc { font-size:12px; color:var(--q-text-secondary); line-height:1.5; }

/* ── 19. FILE UPLOAD ──────────────────────────────────── */
.file-checklist { margin-bottom:14px; background:var(--q-bg-body); border-radius:8px; padding:12px 14px; }
.file-check-item { display:flex; align-items:center; gap:8px; font-size:12px; padding:4px 0; color:var(--q-text-secondary); }
.file-check-item .icon-ok  { color:var(--q-estado-verde); font-size:14px; }
.file-check-item .icon-err { color:var(--q-estado-rojo); font-size:14px; }
.dropzone {
  border:2px dashed rgba(107,45,139,.3); border-radius:12px;
  padding:28px; text-align:center;
  background:rgba(107,45,139,.015);
  transition:all .2s; cursor:pointer;
}
.dropzone:hover, .dropzone.dragover { background:rgba(107,45,139,.06); border-color:var(--q-morado); }
.dropzone-icon { color:var(--q-morado); opacity:.5; margin-bottom:12px; }
.dropzone-title { font-size:14px; font-weight:600; color:var(--q-text-primary); margin-bottom:6px; }
.dropzone-sub { font-size:12px; color:var(--q-text-secondary); margin-bottom:16px; }
.file-list { margin-top:12px; }
.file-item {
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; background:var(--q-bg-body);
  border-radius:9px; margin-bottom:6px; font-size:12px;
  border:1px solid var(--q-border); transition:box-shadow .15s;
}
.file-item:hover { box-shadow:0 2px 8px rgba(0,0,0,.06); }
.file-name { flex:1; font-weight:500; color:var(--q-text-primary); }
.file-size { color:var(--q-text-secondary); }
.file-remove { color:var(--q-estado-rojo); cursor:pointer; width:20px; height:20px; display:flex; align-items:center; justify-content:center; border-radius:4px; }
.file-remove:hover { background:rgba(192,57,43,.1); }

/* ── 20. STEPPER (firma) ──────────────────────────────── */
.stepper { display:flex; align-items:center; justify-content:center; gap:0; margin-bottom:28px; }
.step { display:flex; align-items:center; }
.step-circle {
  width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; flex-shrink:0;
  border:2px solid var(--q-border); background:white; color:var(--q-text-secondary);
}
.step.active .step-circle { border-color:var(--q-morado); background:var(--q-morado); color:white; box-shadow:0 0 0 4px rgba(107,45,139,.15); }
.step.done  .step-circle  { border-color:var(--q-teal); background:var(--q-teal); color:white; }
.step-label { font-size:11px; font-weight:600; color:var(--q-text-secondary); margin-left:6px; white-space:nowrap; }
.step.active .step-label { color:var(--q-morado); }
.step.done   .step-label { color:var(--q-teal); }
.step-line { width:48px; height:2px; background:var(--q-border); flex-shrink:0; }
.step-line.done { background:var(--q-teal); }

/* ── 21. MODALS ───────────────────────────────────────── */
.modal-overlay {
  position:fixed; inset:0; z-index:300;
  background:rgba(28,28,46,.5); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.modal {
  background:white; border-radius:var(--q-radius-card);
  box-shadow:var(--q-shadow-modal); width:100%; max-width:480px;
  padding:28px 32px; animation:modalIn .22s ease;
}
@keyframes modalIn {
  from { opacity:0; transform:scale(.95) translateY(8px); }
  to   { opacity:1; transform:scale(1); }
}
.modal-title { font-size:17px; font-weight:700; color:var(--q-text-primary); margin-bottom:16px; }
.modal-summary { background:var(--q-bg-body); border-radius:9px; padding:14px 16px; margin-bottom:18px; }
.modal-summary-row { display:flex; gap:8px; font-size:12px; margin-bottom:6px; }
.modal-summary-row:last-child { margin-bottom:0; }
.modal-summary-row .key { font-weight:600; color:var(--q-text-secondary); min-width:100px; }
.modal-footer { display:flex; gap:10px; justify-content:flex-end; margin-top:20px; }
.checkbox-row { display:flex; align-items:flex-start; gap:10px; padding:14px; background:var(--q-morado-soft); border-radius:9px; cursor:pointer; }
.checkbox-row input { margin-top:2px; accent-color:var(--q-morado); width:15px; height:15px; cursor:pointer; }
.checkbox-row label { font-size:12px; color:var(--q-text-primary); line-height:1.5; cursor:pointer; }

/* ── 22. RIGHT DRAWERS ────────────────────────────────── */
.rdrawer-overlay { position:fixed; inset:0; z-index:250; background:rgba(28,28,46,.35); }
.rdrawer {
  position:fixed; top:0; right:0; bottom:0; z-index:251;
  width:420px; background:white;
  box-shadow:-4px 0 32px rgba(107,45,139,.14);
  display:flex; flex-direction:column;
  animation:slideIn .25s cubic-bezier(.4,0,.2,1);
}
@keyframes slideIn { from { transform:translateX(100%); } to { transform:translateX(0); } }
.rdrawer-header { display:flex; align-items:center; justify-content:space-between; padding:20px 24px; border-bottom:1px solid var(--q-border); }
.rdrawer-title { font-size:15px; font-weight:700; color:var(--q-text-primary); }
.rdrawer-close { width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; color:var(--q-text-secondary); transition:background .12s; }
.rdrawer-close:hover { background:var(--q-bg-body); }
.rdrawer-body { flex:1; overflow-y:auto; padding:24px; }
.rdrawer-footer { padding:16px 24px; border-top:1px solid var(--q-border); display:flex; gap:10px; }

/* ── 23. TOAST ────────────────────────────────────────── */
.toast-container { position:fixed; top:72px; right:20px; z-index:400; display:flex; flex-direction:column; gap:8px; }
.toast {
  display:flex; align-items:flex-start; gap:10px;
  padding:14px 18px; border-radius:12px; max-width:360px;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  animation:toastIn .22s ease;
}
@keyframes toastIn { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:translateX(0); } }
.toast-verde { background:white; border-left:4px solid var(--q-estado-verde); }
.toast-rojo  { background:white; border-left:4px solid var(--q-estado-rojo); }
.toast-ambar { background:white; border-left:4px solid var(--q-estado-ambar); }
.toast-msg { font-size:13px; font-weight:500; color:var(--q-text-primary); line-height:1.4; }

/* ── 24. BANNERS ──────────────────────────────────────── */
.banner-inline {
  display:flex; align-items:flex-start; gap:10px;
  padding:12px 16px; border-radius:9px; margin-bottom:14px;
  font-size:13px; line-height:1.5;
}
.banner-rojo  { background:#FEF2F2; color:#991B1B; border:1px solid #FCA5A5; }
.banner-ambar { background:#FFFBEB; color:#92400E; border:1px solid #FCD34D; }
.banner-verde { background:#F0FDF4; color:#166534; border:1px solid #86EFAC; }

/* ── 25. EMPTY STATE ──────────────────────────────────── */
.empty-state { text-align:center; padding:48px 20px; display:flex; flex-direction:column; align-items:center; gap:12px; }
.empty-icon { color:var(--q-border); margin-bottom:8px; }
.empty-title { font-size:15px; font-weight:700; color:var(--q-text-primary); }
.empty-sub { font-size:13px; color:var(--q-text-secondary); max-width:300px; line-height:1.6; }

/* ── 26. SKELETON ─────────────────────────────────────── */
.skeleton { background:linear-gradient(90deg,#f0f0f0 25%,#e8e8e8 50%,#f0f0f0 75%); background-size:200% 100%; animation:shimmer 1.4s infinite; border-radius:6px; }
@keyframes shimmer { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }
.sk-line { height:14px; width:100%; margin-bottom:10px; }

/* ── 27. TOGGLE ───────────────────────────────────────── */
.toggle-wrap { display:flex; align-items:center; gap:8px; }
.toggle {
  width:40px; height:22px; border-radius:11px;
  background:var(--q-border); position:relative;
  cursor:pointer; transition:background .2s; border:none; flex-shrink:0;
}
.toggle.on { background:var(--q-teal); }
.toggle::after {
  content:''; position:absolute; top:3px; left:3px;
  width:16px; height:16px; border-radius:50%;
  background:white; box-shadow:0 1px 4px rgba(0,0,0,.2);
  transition:left .2s;
}
.toggle.on::after { left:21px; }
.toggle-label { font-size:13px; color:var(--q-text-secondary); }

/* ── 28. ICON BUTTONS ─────────────────────────────────── */
.icon-btn { width:30px; height:30px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:background .12s; }
.icon-btn-morado { color:var(--q-morado); }
.icon-btn-morado:hover { background:var(--q-morado-soft); }
.icon-btn-teal { color:var(--q-teal); }
.icon-btn-teal:hover { background:rgba(0,168,157,.1); }
.icon-btn-rojo { color:var(--q-estado-rojo); }
.icon-btn-rojo:hover { background:rgba(192,57,43,.08); }

/* ── 29. STICKY FOOTER ────────────────────────────────── */
.sticky-footer {
  position:sticky; bottom:0;
  background:white; border-top:1px solid var(--q-border);
  padding:16px 32px; margin:20px -32px -28px;
  display:flex; gap:10px; align-items:center;
  border-radius:0 0 var(--q-radius-card) var(--q-radius-card);
  box-shadow:0 -2px 12px rgba(107,45,139,.06);
}

/* ── 30. PROGRESS BAR ─────────────────────────────────── */
.progress-bar { height:6px; background:var(--q-border); border-radius:3px; overflow:hidden; margin:8px 0; }
.progress-fill { height:100%; background:linear-gradient(90deg,var(--q-morado),var(--q-teal)); border-radius:3px; transition:width .4s; animation:pulse 1.5s infinite alternate; }
@keyframes pulse { from { opacity:.7; } to { opacity:1; } }

/* ── 31. AUTH SCREENS ─────────────────────────────────── */
.auth-shell { min-height:100vh; background:linear-gradient(135deg,#F0ECF5 0%,#F0F2F5 40%,#EAF7F6 100%); display:flex; align-items:flex-start; justify-content:center; padding:32px 20px; overflow-y:auto; }
.auth-card { background:white; border-radius:16px; box-shadow:0 8px 40px rgba(107,45,139,.12),0 0 0 1px rgba(107,45,139,.05); width:100%; max-width:440px; padding:40px 36px; }
.auth-logo { text-align:center; margin-bottom:24px; }
.auth-logo-sub { font-size:13px; color:var(--q-text-secondary); margin-top:8px; line-height:1.5; font-weight:500; }
.auth-title { font-size:17px; font-weight:700; color:var(--q-text-primary); margin-bottom:20px; text-align:center; }

/* ── 32. CONFIRM SCREEN ───────────────────────────────── */
.confirm-screen { text-align:center; padding:40px 20px; }
.confirm-icon { margin:0 auto 20px; }
.confirm-folio { font-size:26px; font-weight:800; color:var(--q-morado); margin-bottom:10px; letter-spacing:-.5px; }
.confirm-msg { font-size:14px; color:var(--q-text-secondary); margin-bottom:28px; line-height:1.6; }
.confirm-btns { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* ── 33. MISC UTILS ───────────────────────────────────── */
.flex-between { display:flex; align-items:center; justify-content:space-between; }
.flex-center   { display:flex; align-items:center; }
.flex-gap-8  { gap:8px; }
.flex-gap-12 { gap:12px; }
.mt-4  { margin-top:4px; }
.mt-8  { margin-top:8px; }
.mt-16 { margin-top:16px; }
.mt-24 { margin-top:24px; }
.mb-4  { margin-bottom:4px; }
.mb-8  { margin-bottom:8px; }
.mb-16 { margin-bottom:16px; }
.mb-24 { margin-bottom:24px; }
.text-secondary { color:var(--q-text-secondary); }
.text-morado    { color:var(--q-morado); }
.text-teal      { color:var(--q-teal); }
.fw-600 { font-weight:600; }
.fw-700 { font-weight:700; }
.fs-12  { font-size:12px; }
.fs-13  { font-size:13px; }
.link-teal    { color:var(--q-teal); font-weight:600; cursor:pointer; background:none; border:none; padding:0; font-family:inherit; font-size:inherit; }
.link-teal:hover { text-decoration:underline; }
.link-morado  { color:var(--q-morado); font-weight:600; cursor:pointer; }
.divider      { height:1px; background:var(--q-border); margin:20px 0; }
.section-title { font-size:12px; font-weight:700; color:var(--q-morado); text-transform:uppercase; letter-spacing:.6px; margin-bottom:14px; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media(max-width:600px) { .grid-2,.grid-3 { grid-template-columns:1fr; } .type-cards { flex-direction:column; align-items:center; } .rdrawer { width:100%; } }

/* ── 34. DEMO USER CARD HOVER ─────────────────────────── */
.demo-user-card { transition:all .2s cubic-bezier(.4,0,.2,1) !important; }
.demo-user-card:hover { transform:translateY(-2px) !important; }

/* ── 35. DASHBOARD HERO BANNER ────────────────────────── */
.dashboard-hero {
  background:linear-gradient(135deg,var(--q-morado) 0%,#9B3DBF 50%,#6B2D8B 100%);
  border-radius:var(--q-radius-card); padding:28px 32px; margin-bottom:24px;
  color:white; position:relative; overflow:hidden;
}
.dashboard-hero::before {
  content:''; position:absolute; right:-60px; top:-60px;
  width:220px; height:220px; border-radius:50%;
  background:rgba(255,255,255,.06);
}
.dashboard-hero::after {
  content:''; position:absolute; right:40px; bottom:-40px;
  width:140px; height:140px; border-radius:50%;
  background:rgba(255,255,255,.04);
}
.hero-greeting { font-size:20px; font-weight:700; margin-bottom:4px; }
.hero-sub { font-size:13px; opacity:.8; }
.hero-badge {
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.15); padding:5px 12px; border-radius:20px;
  font-size:11px; font-weight:600; margin-top:14px;
  backdrop-filter:blur(4px);
}

/* Animated counter */
.kpi-num { animation:countIn .5s ease; }
@keyframes countIn { from { opacity:0; transform:scale(.8); } to { opacity:1; transform:scale(1); } }

/* ── 36. DASHBOARD HERO VARIANTS ────────────────────── */
.dashboard-hero-content { position:relative; z-index:1; }
.dashboard-hero-circle  { position:absolute; border-radius:50%; background:rgba(255,255,255,.07); }
.dashboard-hero-circle.c1 { width:220px; height:220px; top:-70px; right:-50px; }
.dashboard-hero-circle.c2 { width:140px; height:140px; bottom:-50px; right:80px; }
.dashboard-hero-greeting  { font-size:22px; font-weight:800; margin-bottom:4px; }
.dashboard-hero-sub       { font-size:13px; opacity:.85; margin-bottom:20px; }
.dashboard-hero-teal   { background:linear-gradient(135deg,#007A72 0%,#00A89D 60%,#00C4B8 100%); }
.dashboard-hero-verde  { background:linear-gradient(135deg,#155A33 0%,#1E8A4C 60%,#27AE60 100%); }
.btn-hero {
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.18); color:white;
  border:1.5px solid rgba(255,255,255,.35); border-radius:var(--q-radius-btn);
  padding:9px 18px; font-size:13px; font-weight:700;
  backdrop-filter:blur(4px); transition:all .15s;
}
.btn-hero:hover { background:rgba(255,255,255,.28); transform:translateY(-1px); }

/* ── 37. KPI CARD COLOUR VARIANTS ──────────────────── */
.kpi-card-morado::before { background:linear-gradient(90deg,var(--q-morado),#9B3DBF); }
.kpi-card-verde::before  { background:linear-gradient(90deg,var(--q-estado-verde),#27AE60); }
.kpi-card-ambar::before  { background:linear-gradient(90deg,var(--q-estado-ambar),#F59E0B); }
.kpi-card-rojo::before   { background:linear-gradient(90deg,var(--q-estado-rojo),#E74C3C); }
.kpi-card-teal::before   { background:linear-gradient(90deg,var(--q-teal),#00C4B8); }
.kpi-num-verde  { color:var(--q-estado-verde); }
.kpi-num-ambar  { color:var(--q-estado-ambar); }
.kpi-num-rojo   { color:var(--q-estado-rojo); }
.kpi-num-teal   { color:var(--q-teal); }
.kpi-trend      { font-size:11px; font-weight:600; margin-top:4px; }
.kpi-trend-up   { color:var(--q-estado-verde); }
.kpi-trend-down { color:var(--q-estado-rojo); }
.kpi-trend-neutral { color:var(--q-text-secondary); }

/* ── 38. DASHBOARD GRID ─────────────────────────────── */
.dashboard-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
@media(max-width:900px) { .dashboard-grid { grid-template-columns:1fr; } }

/* ── 39. QUICK ACTIONS ──────────────────────────────── */
.quick-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; }
.quick-btn {
  display:flex; align-items:center; gap:10px;
  background:var(--q-bg-body); border:1.5px solid var(--q-border);
  border-radius:10px; padding:12px 14px; font-size:13px; font-weight:600;
  color:var(--q-text-primary); text-align:left; cursor:pointer;
  transition:all .15s;
}
.quick-btn:hover { border-color:var(--q-morado); background:var(--q-morado-soft); color:var(--q-morado); transform:translateY(-1px); box-shadow:0 4px 12px rgba(107,45,139,.10); }
.quick-btn-icon { width:34px; height:34px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }

/* ── 40. DASHBOARD TIP ──────────────────────────────── */
.dashboard-tip {
  display:flex; align-items:flex-start; gap:8px;
  background:linear-gradient(135deg,#FFF8EC,#FFFDF5);
  border:1px solid #F59E0B40; border-radius:8px;
  padding:10px 12px; font-size:12px; color:var(--q-text-secondary);
  margin-top:8px;
}

/* ── 41. WIZARD ─────────────────────────────────────── */
.wizard-footer {
  display:flex; justify-content:space-between; align-items:center;
  margin-top:28px; padding-top:20px; border-top:1px solid var(--q-border);
}
.stepper-4 { gap:4px; }
.stepper-4 .step-label { font-size:11px; }
.type-card.selected {
  border-color:var(--q-morado);
  background:var(--q-morado-soft);
  box-shadow:0 0 0 3px rgba(107,45,139,.12);
}

/* ── 42. SIDEBAR MENU ITEMS ─────────────────────────── */
.sb-menu .sb-item {
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:8px; margin:1px 8px;
  font-size:13px; font-weight:600; color:var(--q-text-secondary);
  text-decoration:none; transition:all .15s; white-space:nowrap;
}
.sb-menu .sb-item:hover { background:var(--q-morado-soft); color:var(--q-morado); text-decoration:none; }
.sb-menu .sb-item.active { background:var(--q-morado-soft); color:var(--q-morado); }
.sb-menu .sb-item svg { flex-shrink:0; }
body.sidebar-collapsed .sb-menu .sb-item .sb-item-label { display:none; }
body.sidebar-collapsed .sb-menu .sb-item { justify-content:center; margin:1px 6px; padding:10px 0; }

/* ── 43. NOTIFICATION PANEL ─────────────────────────── */
.notif-backdrop {
  position:fixed; inset:0; z-index:299; background:transparent;
}
.notif-panel {
  position:fixed; top:var(--header-h); right:0; width:340px;
  height:calc(100vh - var(--header-h)); background:white;
  box-shadow:-4px 0 24px rgba(107,45,139,.12); z-index:300;
  display:flex; flex-direction:column; overflow:hidden;
}
.notif-panel.hidden { display:none; }

/* ── 44. BANNER TEAL ─────────────────────────────────── */
.banner-teal {
  background:var(--q-teal-soft); border:1px solid rgba(0,168,157,.2);
  color:var(--q-teal);
}
.banner-inline.banner-teal { border-radius:8px; padding:10px 14px; display:flex; align-items:center; gap:8px; font-size:13px; }

/* ── 45. PROGRESSIVE FORM LAYOUT ─────────────────────── */
.form-hint {
  font-size:11px; color:var(--q-text-muted); margin-top:4px;
  display:flex; align-items:center; gap:4px;
}

.form-progressive-layout {
  display:flex; gap:0; height:calc(100vh - var(--header-h) - 48px);
  min-height:0;
}

/* Left nav */
.form-leftnav {
  width:200px; flex-shrink:0;
  background:white; border-right:1px solid var(--q-border);
  border-radius:12px 0 0 12px;
  display:flex; flex-direction:column;
  overflow-y:auto; overflow-x:hidden;
  padding:20px 0 20px;
}
.form-leftnav-title {
  font-size:10px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--q-text-muted);
  padding:0 16px 8px;
}
.form-leftnav-item {
  display:flex; align-items:center; gap:8px;
  padding:9px 16px; font-size:13px; font-weight:600;
  color:var(--q-text-secondary); text-decoration:none;
  border-left:3px solid transparent;
  cursor:pointer; transition:all .14s; white-space:nowrap;
  background:none; border-top:none; border-right:none; border-bottom:none;
  width:100%; text-align:left;
}
.form-leftnav-item:hover { background:var(--q-morado-soft); color:var(--q-morado); }
.form-leftnav-item.active {
  background:var(--q-morado-soft); color:var(--q-morado);
  border-left-color:var(--q-morado);
}
.form-leftnav-divider {
  border:none; border-top:1px solid var(--q-border);
  margin:12px 16px;
}
.form-leftnav-section {
  display:flex; align-items:center; gap:8px;
  padding:7px 16px; font-size:12px; font-weight:600;
  color:var(--q-text-muted); text-decoration:none;
  border-left:3px solid transparent;
  cursor:pointer; transition:all .14s;
  background:none; border-top:none; border-right:none; border-bottom:none;
  width:100%; text-align:left;
}
.form-leftnav-section:hover { color:var(--q-morado); background:var(--q-morado-soft); }
.form-leftnav-section.active { color:var(--q-morado); border-left-color:var(--q-morado); }

/* Form body */
.form-progressive-body {
  flex:1; min-width:0;
  background:white; border-radius:0 12px 12px 0;
  overflow-y:auto;
  display:flex; flex-direction:column;
}
.form-progressive-header {
  padding:24px 28px 20px;
  border-bottom:1px solid var(--q-border);
  flex-shrink:0;
}
.form-progressive-header h2 {
  font-size:18px; font-weight:700; color:var(--q-text-primary); margin:0 0 4px;
}
.form-progressive-header p {
  font-size:13px; color:var(--q-text-muted); margin:0;
}

/* Search row */
.form-search-row {
  display:flex; gap:10px; align-items:flex-end;
  padding:20px 28px 0;
}
.form-search-row .form-group { flex:1; margin:0; }
.form-search-row .btn { flex-shrink:0; }

/* Form sections */
.form-section {
  padding:24px 28px;
  border-bottom:1px solid var(--q-border);
}
.form-section:last-child { border-bottom:none; }
.form-section-title {
  display:flex; align-items:center; gap:10px;
  font-size:15px; font-weight:700; color:var(--q-text-primary);
  margin:0 0 18px;
}
.form-section-num {
  width:24px; height:24px; border-radius:50%;
  background:var(--q-morado); color:white;
  font-size:11px; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center;
  flex-shrink:0;
}

/* Póliza info grid */
.poliza-info-grid {
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:12px 16px; margin-bottom:20px;
}
.poliza-info-item { display:flex; flex-direction:column; gap:3px; }
.poliza-info-item-wide { grid-column:span 2; }
.poliza-info-label {
  font-size:10px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--q-text-muted);
}
.poliza-info-value {
  font-size:13px; font-weight:600; color:var(--q-text-primary);
}
.poliza-info-big {
  font-size:16px; font-weight:700; color:var(--q-morado);
}

/* Estatus badge */
.poliza-estatus-badge {
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:20px;
  font-size:12px; font-weight:700; border:2px solid;
}
.poliza-estatus-vigente {
  background:#e8f8f5; color:#0a7a6e;
  border-color:#00A89D;
}
.poliza-estatus-vencida {
  background:#fdf2f2; color:#c0392b;
  border-color:#e74c3c;
}
.poliza-estatus-cancelada {
  background:#f5f5f5; color:#666;
  border-color:#bbb;
}

/* Vigencia tag */
.poliza-vigencia-tag {
  display:inline-flex; align-items:center; gap:4px;
  background:var(--q-morado-soft); color:var(--q-morado);
  border-radius:6px; padding:3px 8px;
  font-size:12px; font-weight:600;
}

/* Radio stack (beneficios) */
.radio-stack {
  display:flex; flex-direction:column; gap:8px;
}
.radio-item {
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:8px; border:1.5px solid var(--q-border);
  cursor:pointer; transition:all .14s; font-size:13px; font-weight:500;
  color:var(--q-text-secondary);
}
.radio-item:hover { border-color:var(--q-morado); background:var(--q-morado-soft); }
.radio-item input[type=radio] { accent-color:var(--q-morado); width:16px; height:16px; }
.radio-item.checked {
  border-color:var(--q-morado); background:var(--q-morado-soft);
  color:var(--q-morado);
}

/* Select list (tipo de negocio) */
.select-list {
  display:flex; flex-direction:column; gap:4px;
}
.select-list-item {
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:8px; border:1.5px solid var(--q-border);
  cursor:pointer; transition:all .14s; font-size:13px; font-weight:500;
  color:var(--q-text-secondary); user-select:none;
}
.select-list-item:hover { border-color:var(--q-morado); background:var(--q-morado-soft); }
.select-list-item.selected {
  border-color:var(--q-morado); background:var(--q-morado-soft);
  color:var(--q-morado); font-weight:600;
}
.select-list-item .check-icon {
  width:18px; height:18px; border-radius:50%;
  border:2px solid var(--q-border); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  transition:all .14s;
}
.select-list-item.selected .check-icon {
  background:var(--q-morado); border-color:var(--q-morado);
  color:white; font-size:11px;
}

/* Misc */
.link-morado {
  color:var(--q-morado); font-weight:600; text-decoration:none;
  cursor:pointer;
}
.link-morado:hover { text-decoration:underline; }

/* ── Wizard vertical stepper ── */
.wiz-stepper { padding-top:24px; }
.wiz-step-row {
  display:flex; align-items:flex-start; gap:12px;
  padding:10px 16px; cursor:default;
  transition:background .14s; border-radius:8px;
}
.wiz-step-row.done { cursor:pointer; }
.wiz-step-row.done:hover { background:var(--q-morado-soft); }
.wiz-step-circle {
  width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; flex-shrink:0;
  border:2px solid var(--q-border);
  background:white; color:var(--q-text-muted);
  transition:all .2s;
}
.wiz-step-row.active .wiz-step-circle {
  background:var(--q-morado); border-color:var(--q-morado);
  color:white; box-shadow:0 0 0 4px rgba(107,45,139,.15);
}
.wiz-step-row.done .wiz-step-circle {
  background:var(--q-teal); border-color:var(--q-teal); color:white;
}
.wiz-step-row.pending .wiz-step-circle {
  background:var(--q-bg-body); border-color:var(--q-border);
  color:var(--q-text-disabled);
}
.wiz-step-info { display:flex; flex-direction:column; gap:2px; }
.wiz-step-label {
  font-size:13px; font-weight:700;
  color:var(--q-text-secondary);
}
.wiz-step-row.active .wiz-step-label { color:var(--q-morado); }
.wiz-step-row.done   .wiz-step-label { color:var(--q-text-primary); }
.wiz-step-row.pending .wiz-step-label { color:var(--q-text-disabled); }
.wiz-step-sub {
  font-size:11px; color:var(--q-text-muted); font-weight:500;
}
.wiz-step-connector {
  width:2px; height:20px; background:var(--q-border);
  margin:0 0 0 28px; border-radius:2px;
}
.wiz-sub-items {
  display:flex; flex-direction:column; gap:2px;
  padding:4px 0 4px 56px;
}
.wiz-sub-item {
  font-size:12px; font-weight:600; color:var(--q-text-muted);
  background:none; border:none; cursor:pointer;
  text-align:left; padding:5px 8px; border-radius:6px;
  transition:all .14s;
}
.wiz-sub-item:hover { color:var(--q-morado); background:var(--q-morado-soft); }

/* Type card large variant */
.tipo-card-lg { padding:24px 20px; text-align:center; }
.tipo-card-lg .type-card-icon {
  width:72px; height:72px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 14px;
}
.tipo-card-lg .type-card-title { font-size:16px; font-weight:700; margin-bottom:6px; }
.tipo-card-lg .type-card-desc  { font-size:13px; color:var(--q-text-secondary); margin-bottom:14px; line-height:1.5; }
.tipo-card-lg .type-card-cta   {
  font-size:13px; font-weight:700; color:var(--q-morado);
  opacity:0; transition:opacity .2s;
}
.tipo-card-lg:hover .type-card-cta { opacity:1; }
.tipo-card-lg:hover {
  border-color:var(--q-morado);
  background:var(--q-morado-soft);
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(107,45,139,.12);
}

/* Agent picker table */
.agent-poliza-table { width:100%; border-collapse:collapse; font-size:13px; }
.agent-poliza-table th {
  background:var(--q-bg-body); font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; color:var(--q-text-muted);
  padding:8px 12px; text-align:left; border-bottom:1px solid var(--q-border);
}
.agent-poliza-table td {
  padding:10px 12px; border-bottom:1px solid var(--q-border);
  color:var(--q-text-primary); vertical-align:middle;
}
.agent-poliza-table tr:last-child td { border-bottom:none; }
.agent-poliza-table tr:hover td { background:var(--q-bg-body); }

/* Form footer */
.form-footer-bar {
  padding:16px 28px;
  border-top:1px solid var(--q-border);
  background:white;
  display:flex; justify-content:flex-end; gap:10px;
  border-radius:0 0 12px 0;
  flex-shrink:0;
}

/* Dropzone */
.dropzone {
  border:2px dashed var(--q-border); border-radius:10px;
  padding:28px 20px; text-align:center;
  color:var(--q-text-muted); font-size:13px; cursor:pointer;
  transition:all .2s;
}
.dropzone:hover, .dropzone.drag-over {
  border-color:var(--q-morado); background:var(--q-morado-soft);
  color:var(--q-morado);
}
.dropzone-icon { font-size:28px; margin-bottom:8px; }
.file-list { display:flex; flex-direction:column; gap:6px; margin-top:12px; }
.file-item {
  display:flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:8px; background:var(--q-bg-body);
  border:1px solid var(--q-border); font-size:12px;
}
.file-item-name { flex:1; font-weight:500; color:var(--q-text-primary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.file-item-size { color:var(--q-text-muted); flex-shrink:0; }
.file-item-remove { cursor:pointer; color:var(--q-text-muted); flex-shrink:0; transition:color .14s; }
.file-item-remove:hover { color:#e74c3c; }

/* ════════════════════════════════════════════════
   46. WIZARD UNIFICADO — nueva solicitud
   ════════════════════════════════════════════════ */

/* Header fijo del wizard */
.wiz-header {
  display:flex; justify-content:space-between; align-items:center;
  padding:24px 32px 20px;
  border-bottom:1px solid var(--q-border);
  flex-shrink:0;
}

/* Progress bar horizontal */
.wiz-progress-bar {
  display:flex; align-items:center;
  padding:16px 32px;
  background:var(--q-bg-body);
  border-bottom:1px solid var(--q-border);
  flex-shrink:0; gap:0;
}
.wiz-progress-step {
  display:flex; align-items:center; gap:8px;
  white-space:nowrap;
}
.wiz-progress-step span {
  font-size:12px; font-weight:600; color:var(--q-text-muted);
}
.wiz-progress-step.active span { color:var(--q-morado); font-weight:700; }
.wiz-progress-step.done   span { color:var(--q-text-secondary); }
.wiz-progress-dot {
  width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700;
  background:white; border:2px solid var(--q-border);
  color:var(--q-text-disabled); flex-shrink:0;
  transition:all .2s;
}
.wiz-progress-step.active .wiz-progress-dot {
  background:var(--q-morado); border-color:var(--q-morado);
  color:white; box-shadow:0 0 0 4px rgba(107,45,139,.14);
}
.wiz-progress-step.done .wiz-progress-dot {
  background:var(--q-teal); border-color:var(--q-teal); color:white;
}
.wiz-progress-line {
  flex:1; height:2px; background:var(--q-border);
  margin:0 12px; border-radius:2px; min-width:32px;
  transition:background .3s;
}
.wiz-progress-line.done { background:var(--q-teal); }

/* Cuerpo scrollable del wizard */
.wiz-body {
  flex:1; overflow-y:auto; overflow-x:hidden;
  padding:28px 32px 40px;
  display:flex; flex-direction:column; gap:0;
}

/* Bloque de búsqueda */
.wiz-search-block {
  background:var(--q-bg-body);
  border:1.5px solid var(--q-border);
  border-radius:14px;
  padding:24px 28px;
  margin-bottom:28px;
  transition:border-color .2s, background .2s;
}
.wiz-search-block.wiz-search-found {
  background:#f0faf9;
  border-color:var(--q-teal);
}

/* Toggle tipo de búsqueda */
.wiz-tipo-toggle {
  display:flex; gap:8px; margin-bottom:20px;
}
.wiz-tipo-btn {
  display:flex; align-items:center; gap:7px;
  padding:9px 18px; border-radius:30px;
  font-size:13px; font-weight:600;
  border:1.5px solid var(--q-border);
  background:white; color:var(--q-text-secondary);
  cursor:pointer; transition:all .15s;
}
.wiz-tipo-btn:hover {
  border-color:var(--q-morado); color:var(--q-morado);
  background:var(--q-morado-soft);
}
.wiz-tipo-btn.active {
  border-color:var(--q-morado); background:var(--q-morado);
  color:white; box-shadow:0 2px 8px rgba(107,45,139,.25);
}

/* Campo de búsqueda */
.wiz-search-field {
  display:flex; gap:10px; align-items:center; max-width:560px;
}
.wiz-search-field .input-wrapper { flex:1; }
.wiz-search-hint {
  font-size:11px; color:var(--q-text-muted); margin-top:8px;
}

/* Tag de resultado encontrado */
.wiz-found-tag {
  display:inline-flex; align-items:center; gap:6px;
  margin-top:12px; padding:6px 12px; border-radius:20px;
  background:#e6f7f6; color:var(--q-teal);
  font-size:12px; font-weight:700;
}

/* Sección del formulario (reutilizada) */
.wiz-body .form-section {
  border:1.5px solid var(--q-border);
  border-radius:14px;
  margin-bottom:16px;
  padding:24px 28px;
}
.wiz-body .form-section:last-child { margin-bottom:0; }

/* Footer envío */
.wiz-body .wiz-submit-row {
  display:flex; align-items:center; gap:12px;
  padding-top:8px; margin-top:8px;
}

/* ── 47. DOCUMENT PREVIEW MODAL ──────────────────────── */
.doc-preview-overlay {
  position:fixed; inset:0; z-index:500;
  background:rgba(18,18,32,.72); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  animation:fadeIn .18s ease;
}
.doc-preview-panel {
  display:flex; flex-direction:column;
  width:min(860px,100vw); background:white;
  box-shadow:0 24px 64px rgba(0,0,0,.28);
  animation:slideUp .22s cubic-bezier(.4,0,.2,1);
  margin:auto;
  border-radius:16px;
  overflow:hidden;
  max-height:92vh;
}
@keyframes slideUp {
  from { opacity:0; transform:translateY(28px); }
  to   { opacity:1; transform:translateY(0); }
}
.doc-preview-header {
  display:flex; align-items:center; gap:12px;
  padding:16px 20px;
  border-bottom:1px solid var(--q-border);
  background:white; flex-shrink:0;
}
.doc-preview-filename {
  flex:1; font-size:14px; font-weight:700; color:var(--q-text-primary);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.doc-preview-meta { font-size:11px; color:var(--q-text-secondary); margin-top:2px; }
.doc-preview-body {
  flex:1; overflow:auto; background:#f5f5f5;
  display:flex; align-items:center; justify-content:center;
  min-height:400px;
}
.doc-preview-placeholder {
  display:flex; flex-direction:column; align-items:center; gap:16px;
  color:var(--q-text-secondary); padding:48px;
}
.doc-preview-placeholder svg { opacity:.35; }
.doc-preview-placeholder-title { font-size:15px; font-weight:600; color:var(--q-text-primary); }
.doc-preview-placeholder-sub { font-size:12px; color:var(--q-text-secondary); text-align:center; }
.doc-preview-footer {
  display:flex; align-items:center; justify-content:flex-end; gap:10px;
  padding:12px 20px; border-top:1px solid var(--q-border);
  background:white; flex-shrink:0;
}
/* File item action button */
.file-item-preview-btn {
  margin-left:auto; padding:4px 12px;
  border-radius:7px; font-size:11px; font-weight:700;
  color:var(--q-morado); border:1.5px solid var(--q-morado);
  transition:background .15s, color .15s; cursor:pointer; white-space:nowrap;
}
.file-item-preview-btn:hover { background:var(--q-morado); color:white; }


/* ── 48. FIRMA ELECTRÓNICA ───────────────────────── */
.firma-tabs {
  display:flex; gap:4px; margin-bottom:16px;
  background:var(--q-bg-body); border-radius:10px; padding:4px;
  width:fit-content;
}
.firma-tab {
  display:flex; align-items:center; gap:6px;
  padding:7px 16px; border-radius:8px;
  font-size:12px; font-weight:600; color:var(--q-text-secondary);
  transition:all .18s; cursor:pointer;
}
.firma-tab.active { background:white; color:var(--q-morado); box-shadow:0 1px 4px rgba(0,0,0,.1); }
.firma-tab:not(.active):hover { color:var(--q-morado); background:rgba(255,255,255,.6); }

.firma-canvas-wrapper {
  position:relative;
  border:2px solid var(--q-morado);
  border-radius:12px;
  overflow:hidden;
  background:white;
  cursor:crosshair;
}
.firma-canvas { display:block; width:100%; height:160px; touch-action:none; }
.firma-canvas-hint {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  color:var(--q-text-disabled); font-size:13px; pointer-events:none;
}

.firma-upload-zone {
  border:2px dashed var(--q-border);
  border-radius:12px; padding:32px 24px;
  text-align:center; cursor:pointer; color:var(--q-text-secondary);
  transition:border-color .2s, background .2s;
}
.firma-upload-zone:hover { border-color:var(--q-morado); background:var(--q-morado-soft); color:var(--q-morado); }

/* ── 49. CONVENIO PREVIEW ───────────────────────── */
.convenio-preview {
  background:white;
  border:1.5px solid var(--q-border);
  border-radius:12px;
  padding:32px 36px;
  font-size:12.5px;
  line-height:1.8;
  color:#2a2a3a;
  max-width:640px;
}
.convenio-preview-title {
  font-size:14px; font-weight:800;
  text-align:center; letter-spacing:.5px;
  text-transform:uppercase;
  margin-bottom:20px; color:var(--q-text-primary);
}
.convenio-preview p { margin:0 0 14px; text-align:justify; }
.convenio-preview-footer {
  margin-top:20px; text-align:center;
  font-size:11px; color:var(--q-text-secondary);
  font-style:italic;
}
.convenio-preview-sigs {
  display:flex; gap:24px; margin-top:32px; flex-wrap:wrap;
}
.convenio-sig-box {
  flex:1; min-width:180px; text-align:center;
}
.convenio-sig-line {
  height:56px; border-bottom:1.5px solid #333;
  display:flex; align-items:flex-end; justify-content:center;
  padding-bottom:6px; margin-bottom:6px;
  font-size:11px; color:var(--q-text-secondary);
}
.convenio-sig-name { font-weight:700; font-size:12px; }
.convenio-sig-role { font-size:11px; color:var(--q-text-secondary); }


/* ── 50. DOCUSIGN FIRMA LAYOUT ───────────────────────── */
.firma-topbar {
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
  padding:12px 24px;
  background:white;
  border-bottom:1px solid var(--q-border);
  position:sticky; top:0; z-index:10;
}
.firma-topbar-info { display:flex; flex-direction:column; gap:2px; }
.firma-topbar-folio { font-size:15px; font-weight:700; color:var(--q-text-primary); }
.firma-topbar-meta { font-size:12px; color:var(--q-text-secondary); }
.firma-topbar-sub { font-size:12px; color:var(--q-text-secondary); }

.firma-layout {
  display:flex; align-items:stretch; gap:0;
  height:calc(100vh - var(--header-h) - 61px);
  overflow:hidden;
}

/* LEFT: scrollable document column */
.firma-doc-col {
  flex:1 1 0; min-width:0;
  padding:32px 40px;
  overflow-y:auto;
  background:var(--q-bg-body);
  height:100%;
}

/* The paper page */
.firma-doc-page {
  background:white;
  border:1px solid var(--q-border);
  border-radius:12px;
  padding:48px 52px;
  max-width:720px;
  margin:0 auto;
  box-shadow:0 4px 24px rgba(107,45,139,.07);
  font-size:12.5px;
  line-height:1.85;
  color:#1a1a2e;
}

.firma-doc-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:20px; padding-bottom:16px;
  border-bottom:2px solid var(--q-morado);
  flex-wrap:wrap; gap:12px;
}
.firma-doc-header-logo { font-size:22px; font-weight:800; color:var(--q-morado); letter-spacing:.5px; }
.firma-doc-header-date { font-size:11px; color:var(--q-text-secondary); text-align:right; }

.firma-doc-title {
  text-align:center;
  font-size:13px; font-weight:800;
  text-transform:uppercase;
  letter-spacing:.4px;
  color:var(--q-text-primary);
  margin:0 0 28px;
  line-height:1.5;
}

.firma-doc-heading {
  font-size:12px; font-weight:700;
  text-transform:uppercase;
  letter-spacing:.4px;
  margin:24px 0 10px;
  color:var(--q-morado);
}

.firma-doc-p {
  margin:0 0 14px;
  text-align:justify;
  font-size:12.5px;
  color:#1a1a2e;
}

.firma-doc-sigs {
  display:flex; gap:32px; margin-top:48px; flex-wrap:wrap;
}
.firma-doc-sig-col {
  flex:1; min-width:180px; display:flex; flex-direction:column; align-items:center; gap:8px;
}
.firma-doc-sig-area {
  width:100%; min-height:72px;
  border-bottom:1.5px solid #333;
  display:flex; align-items:flex-end; justify-content:center;
  padding-bottom:6px;
}
.firma-doc-sig-area img { max-height:64px; max-width:100%; object-fit:contain; }
.firma-doc-sig-name {
  font-weight:700; font-size:12px; text-align:center;
  text-transform:uppercase; color:var(--q-text-primary);
}
.firma-doc-sig-role {
  font-size:11px; color:var(--q-text-secondary); text-align:center;
}

.firma-doc-articulo {
  margin-top:32px;
  padding:16px;
  background:var(--q-bg-body);
  border-radius:8px;
  border-left:3px solid var(--q-morado);
  font-size:11.5px;
  color:var(--q-text-secondary);
  line-height:1.7;
}

/* RIGHT: sticky signature panel */
.firma-panel-col {
  width:300px; flex-shrink:0;
  height:100%;
  overflow-y:auto;
  background:white;
  border-left:1px solid var(--q-border);
  padding:24px 20px;
  display:flex; flex-direction:column; gap:16px;
}

.firma-panel-label {
  font-size:14px; font-weight:700; color:var(--q-text-primary);
}
.firma-panel-hint {
  font-size:11.5px; color:var(--q-text-secondary); margin-top:2px;
}
.firma-panel-divider {
  border:none; border-top:1px solid var(--q-border); margin:4px 0;
}
.firma-panel-signer {
  display:flex; align-items:center; gap:10px;
  padding:12px 14px;
  background:var(--q-bg-body);
  border-radius:10px;
  border:1px solid var(--q-border);
}
.firma-panel-signer .ps-avatar {
  width:36px; height:36px; border-radius:50%;
  background:var(--q-morado); color:white;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; flex-shrink:0;
}
.firma-panel-signer .ps-info { display:flex; flex-direction:column; gap:2px; }
.firma-panel-signer .ps-name { font-size:12.5px; font-weight:700; color:var(--q-text-primary); }
.firma-panel-signer .ps-role { font-size:11px; color:var(--q-text-secondary); }
.firma-panel-signer .ps-date { font-size:10.5px; color:var(--q-text-disabled); margin-top:2px; }

.firma-aplicada-banner {
  display:flex; align-items:center; gap:8px;
  background:#d1fae5; border:1px solid #6ee7b7;
  border-radius:8px; padding:10px 14px;
  font-size:12px; font-weight:700; color:#065f46;
}
.firma-aplicada-banner svg { flex-shrink:0; }


/* ── 51. PERMISOS MATRIX ─────────────────────────── */
.permisos-matrix-wrap {
  overflow-x: auto;
  border: 1px solid var(--q-border);
  border-radius: 12px;
}
.permisos-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.permisos-table thead tr {
  background: var(--q-bg-body);
}
.permisos-th-label {
  text-align: left;
  padding: 14px 16px;
  font-weight: 700;
  color: var(--q-text-secondary);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .4px;
  min-width: 200px;
  border-bottom: 1px solid var(--q-border);
}
.permisos-th-rol {
  text-align: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--q-border);
  border-left: 1px solid var(--q-border);
  min-width: 130px;
}
.permisos-rol-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}
.permisos-rol-desc {
  font-size: 10.5px;
  color: var(--q-text-secondary);
  margin-top: 4px;
  line-height: 1.3;
}
.permisos-section-row td {
  background: var(--q-morado-soft);
  color: var(--q-morado);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 7px 16px;
  border-top: 1px solid var(--q-border);
}
.permisos-td-label {
  padding: 10px 16px;
  color: var(--q-text-primary);
  font-size: 12.5px;
  border-bottom: 1px solid var(--q-border);
}
.permisos-table tbody tr:last-child .permisos-td-label,
.permisos-table tbody tr:last-child .permisos-td-check { border-bottom: none; }
.permisos-td-check {
  text-align: center;
  border-bottom: 1px solid var(--q-border);
  border-left: 1px solid var(--q-border);
  padding: 6px;
}
.permisos-table tbody tr:hover .permisos-td-label,
.permisos-table tbody tr:hover .permisos-td-check {
  background: var(--q-bg-body);
}
.perm-check {
  width: 26px; height: 26px;
  border-radius: 6px;
  border: 1.5px solid var(--q-border);
  background: white;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  color: white;
}
.perm-check.active {
  background: var(--q-teal);
  border-color: var(--q-teal);
}
.perm-check.readonly {
  cursor: default;
  opacity: .85;
}
.perm-check:not(.readonly):not(.active):hover {
  border-color: var(--q-teal);
  background: var(--q-teal-soft);
}

/* ── 52. CAMPOS PERSONALIZADOS ───────────────────── */
.campos-section-header {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--q-morado);
  padding: 14px 0 6px;
  border-bottom: 1px solid var(--q-border);
  margin-bottom: 8px;
}
.campo-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--q-border);
  transition: background .15s;
  border-radius: 8px;
}
.campo-card:last-child { border-bottom: none; }
.campo-card:hover { background: var(--q-bg-body); padding: 12px 8px; }
.campo-card-tipo {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: var(--q-morado-soft);
  color: var(--q-morado);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800;
  flex-shrink: 0;
}
.campo-card-info { flex: 1; min-width: 0; }
.campo-card-nombre {
  font-size: 13px;
  font-weight: 600;
  color: var(--q-text-primary);
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap;
}
.campo-card-meta {
  font-size: 11.5px;
  color: var(--q-text-secondary);
  margin-top: 2px;
}
.opcion-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.opcion-item .opcion-input { flex: 1; }


/* ── 53. REPORTES Y ANALÍTICOS ───────────────────── */
.reporte-kpis {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}
@media (max-width: 1100px) { .reporte-kpis { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 700px)  { .reporte-kpis { grid-template-columns: repeat(2,1fr); } }

.reporte-kpi {
  background: white;
  border: 1px solid var(--q-border);
  border-radius: 12px;
  padding: 18px 16px;
  border-top: 3px solid var(--q-border);
  transition: box-shadow .2s;
}
.reporte-kpi:hover { box-shadow: var(--q-shadow-hover); }
.reporte-kpi-verde { border-top-color: var(--q-estado-verde); }
.reporte-kpi-rojo  { border-top-color: var(--q-estado-rojo); }
.reporte-kpi-ambar { border-top-color: var(--q-estado-ambar); }
.reporte-kpi-morado{ border-top-color: var(--q-morado); }

.reporte-kpi-val {
  font-size: 30px;
  font-weight: 800;
  color: var(--q-text-primary);
  line-height: 1;
  margin-bottom: 6px;
}
.reporte-kpi-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--q-text-primary);
}
.reporte-kpi-sub {
  font-size: 11px;
  color: var(--q-text-secondary);
  margin-top: 3px;
}

.reporte-charts-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.reporte-chart-card {
  background: white;
  border: 1px solid var(--q-border);
  border-radius: 12px;
  padding: 20px 20px 16px;
  flex: 1;
  min-width: 260px;
}
.reporte-chart-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--q-text-primary);
  margin-bottom: 4px;
}

/* Donut chart */
.reporte-donut-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.reporte-donut-legend { display: flex; flex-direction: column; gap: 8px; }
.reporte-legend-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--q-text-secondary);
}
.reporte-legend-item span {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.reporte-legend-item strong { color: var(--q-text-primary); margin-left: 4px; }

/* Bar chart */
.reporte-bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-top: 12px;
  height: 90px;
}
.reporte-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.reporte-bar-stack {
  display: flex;
  flex-direction: column-reverse;
  width: 100%;
  max-width: 32px;
  border-radius: 4px;
  overflow: hidden;
}
.reporte-bar-label {
  font-size: 10px;
  color: var(--q-text-secondary);
  font-weight: 600;
}
.reporte-bar-legend {
  display: flex;
  gap: 16px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.reporte-bar-legend span {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--q-text-secondary);
}
.reporte-bar-legend i {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 2px;
  font-style: normal;
}


/* ── 54. DASHBOARD LIMPIO ────────────────────────── */
.db-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--q-border);
}
.db-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--q-text-primary);
  letter-spacing: -.2px;
}
.db-subtitle {
  font-size: 12.5px;
  color: var(--q-text-secondary);
  margin-top: 3px;
}

/* Action buttons (vertical list style) */
.db-action-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 500;
  color: var(--q-text-primary);
  text-align: left;
  transition: background .15s;
  cursor: pointer;
}
.db-action-btn:hover { background: var(--q-bg-body); }
.db-action-icon {
  width: 30px; height: 30px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.db-action-badge {
  margin-left: auto;
  background: var(--q-morado);
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 10px;
  min-width: 20px;
  text-align: center;
}


/* ── 55. RECOVERY CHANNEL SELECTOR ──────────────── */
.recov-channel-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 12px;
  border-radius: 12px;
  border: 2px solid var(--q-border);
  background: white;
  cursor: pointer;
  transition: border-color .18s, background .18s, box-shadow .18s;
  font-family: 'Montserrat', sans-serif;
  color: var(--q-text-secondary);
}
.recov-channel-btn:hover {
  border-color: var(--q-morado);
  background: var(--q-morado-soft);
  color: var(--q-morado);
}
.recov-channel-btn.selected {
  border-color: var(--q-morado);
  background: var(--q-morado-soft);
  color: var(--q-morado);
  box-shadow: 0 0 0 3px rgba(107,45,139,.12);
}
.recov-channel-btn span:nth-child(2) {
  font-size: 12.5px;
  font-weight: 700;
  color: inherit;
}
.recov-channel-hint {
  font-size: 10.5px;
  color: var(--q-text-disabled);
  font-weight: 400 !important;
}
.recov-channel-btn.selected .recov-channel-hint {
  color: var(--q-morado);
  opacity: .7;
}