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

/* ── 1. TOKENS ──────────────────────────────────────── */
:root {
  --q-morado:         #90288C;
  --q-morado-hover:   #6E1F6B;
  --q-morado-soft:    rgba(144,40,140,.08);
  --q-teal:           #0096AE;
  --q-teal-hover:     #00758A;
  --q-teal-soft:      rgba(0,150,174,.08);
  --q-bg-body:        #F4F5F8;
  --q-bg-card:        #FFFFFF;
  --q-border:         #E8E6EF;
  --q-text-primary:   #1C1C2E;
  --q-text-secondary: #6B7280;
  --q-text-disabled:  #6B7280;
  --q-estado-verde:   #1E6F3C;
  --q-estado-rojo:    #C0392B;
  --q-estado-ambar:   #B45309;
  --q-estado-gris:    #9CA3AF;
  --q-shadow-card:    0 2px 12px rgba(144,40,140,.07);
  --q-shadow-hover:   0 8px 24px rgba(144,40,140,.14);
  --q-shadow-modal:   0 16px 48px rgba(144,40,140,.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(144,40,140,.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:8px;
  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:12px; 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:11px; 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:8px; cursor:pointer; padding:6px 10px; border-radius:12px; 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:11px; 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), #90288C);
  color:white; font-size:12px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 8px rgba(144,40,140,.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(144,40,140,.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:8px;
  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), #90288C);
  color:white; font-size:13px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 8px rgba(144,40,140,.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:8px;
  padding:10px 12px; border-radius:12px;
  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(144,40,140,.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:8px;
  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:8px;
  padding:12px 20px; margin:0 8px 12px;
  border-radius:12px;
  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(144,40,140,.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:14px; 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(144,40,140,.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:4px;
  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:24px; 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:4px;
  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(144,40,140,.3); }
.btn-morado:hover { background:linear-gradient(135deg,var(--q-morado-hover),#7A2F9E); box-shadow:0 4px 16px rgba(144,40,140,.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),#0096AE); color:white; box-shadow:0 2px 10px rgba(0,150,174,.3); }
.btn-teal:hover { background:linear-gradient(135deg,var(--q-teal-hover),#00ABA0); box-shadow:0 4px 16px rgba(0,150,174,.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:12px; }

/* ── 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:8px;
  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(144,40,140,.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:24px; font-weight:700; color:var(--q-morado);
  border:1.5px solid var(--q-border); border-radius:8px; outline:none;
  transition:border-color .15s;
}
.otp-input:focus { border-color:var(--q-morado); box-shadow:0 0 0 3px rgba(144,40,140,.1); }

/* Password strength */
.strength-bar-track { height:5px; background:var(--q-border); border-radius:8px; margin:8px 0 4px; overflow:hidden; }
.strength-bar-fill { height:100%; border-radius:8px; 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:4px; margin-bottom:4px; }
.strength-rule.met { color:var(--q-estado-verde); }
.strength-rule::before { content:'○'; font-size:11px; }
.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:8px;
  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:8px; 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:4px;
  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:visible; }
.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(144,40,140,.02);
}
.q-table tbody tr { border-bottom:1px solid var(--q-border); transition:background .12s; }
.q-table tbody tr:hover { background:rgba(144,40,140,.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:8px; background:var(--q-border); overflow:hidden; flex-shrink:0; }
.sla-fill { height:100%; border-radius:8px; }
.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(144,40,140,.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,150,174,.1); color:var(--q-teal); }
.chip-azul   { background:rgba(144,40,140,.1);  color:#90288C; }

/* ── 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),#90288C); }
.kpi-card-ambar::before  { background:linear-gradient(90deg,var(--q-estado-ambar),#B45309); }
.kpi-card-rojo::before   { background:linear-gradient(90deg,var(--q-estado-rojo),#C0392B); }
.kpi-card-verde::before  { background:linear-gradient(90deg,var(--q-estado-verde),#1E6F3C); }
.kpi-card-teal::before   { background:linear-gradient(90deg,var(--q-teal),#0096AE); }
.kpi-num { font-size:40px; 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:4px; }
.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:12px; padding:20px; margin-bottom:20px; border:1px solid rgba(144,40,140,.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:12px; 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:4px; }
.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(144,40,140,.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(144,40,140,.15); }
.type-card.selected { border-color:var(--q-morado); background:var(--q-morado-soft); box-shadow:0 0 0 4px rgba(144,40,140,.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(144,40,140,.3); border-radius:12px;
  padding:28px; text-align:center;
  background:rgba(144,40,140,.015);
  transition:all .2s; cursor:pointer;
}
.dropzone:hover, .dropzone.dragover { background:rgba(144,40,140,.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:8px;
  padding:10px 12px; background:var(--q-bg-body);
  border-radius:8px; 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:8px; }
.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(144,40,140,.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:18px; font-weight:700; color:var(--q-text-primary); margin-bottom:16px; }
.modal-summary { background:var(--q-bg-body); border-radius:8px; 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:8px; justify-content:flex-end; margin-top:20px; }
.checkbox-row { display:flex; align-items:flex-start; gap:8px; padding:14px; background:var(--q-morado-soft); border-radius:8px; 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. MODALES CENTRADOS (antes paneles laterales) ─── */
.rdrawer-overlay { position:fixed; inset:0; z-index:250; background:rgba(28,28,46,.42); }
.rdrawer {
  position:fixed; top:50%; left:50%; right:auto; bottom:auto; z-index:251;
  transform:translate(-50%,-50%);
  width:560px; max-width:calc(100vw - 48px);
  max-height:calc(100vh - 72px);
  background:white; border-radius:14px; overflow:hidden;
  box-shadow:0 24px 60px rgba(28,28,46,.28);
  display:flex; flex-direction:column;
  animation:modalIn .18s cubic-bezier(.4,0,.2,1);
}
@keyframes modalIn {
  from { opacity:0; transform:scale(.97) translateY(8px); }
  to   { opacity:1; transform:scale(1); }
}
.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:14px; 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:8px; }

/* ── 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:8px;
  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:8px;
  padding:12px 16px; border-radius:8px; margin-bottom:14px;
  font-size:13px; line-height:1.5;
}
.banner-rojo  { background:#FADBD8; color:#C0392B; border:1px solid #FADBD8; }
.banner-ambar { background:#FFFBEB; color:#92400E; border:1px solid #FCD34D; }
.banner-verde { background:#D4EDDA; color:#1E6F3C; border:1px solid #D4EDDA; }
.banner-info  { background:var(--q-morado-soft); color:var(--q-morado); border:1px solid rgba(144,40,140,.25); }

/* ── BLOQUE 4 · Flujo de aprobación del Administrador ── */
.flow-steps { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.flow-step {
  display:flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px;
  background:#F3F4F6; border:1px solid var(--q-border); color:var(--q-estado-gris);
  font-size:12px; font-weight:600;
}
.flow-step-num {
  width:18px; height:18px; border-radius:50%; display:grid; place-items:center;
  background:#E5E7EB; color:var(--q-estado-gris); font-size:11px; font-weight:700;
}
.flow-step.done   { background:#D4EDDA; border-color:#D4EDDA; color:#1E6F3C; }
.flow-step.done .flow-step-num   { background:#D4EDDA; color:#14532D; }
.flow-step.active { background:var(--q-morado-soft); border-color:rgba(144,40,140,.35); color:var(--q-morado); }
.flow-step.active .flow-step-num { background:var(--q-morado); color:#fff; }

.carousel-counter { font-size:12px; font-weight:600; color:var(--q-text-secondary); }
.carousel-dots { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:16px; }
.carousel-dot {
  width:28px; height:28px; border-radius:8px; border:1px solid var(--q-border);
  background:white; color:var(--q-text-secondary); font-size:11px; font-weight:700; cursor:pointer;
}
.carousel-dot:hover { border-color:var(--q-morado); color:var(--q-morado); }
.carousel-dot.cur { background:var(--q-morado); border-color:var(--q-morado); color:#fff; }
.carousel-dot.ok  { background:#D4EDDA; border-color:#D4EDDA; color:#1E6F3C; }
.carousel-dot.no  { background:#FADBD8; border-color:#FADBD8; color:#C0392B; }

.carousel-card {
  display:grid; grid-template-columns:1.15fr .85fr; gap:20px;
  border:1px solid var(--q-border); border-radius:14px; padding:20px; background:var(--q-bg-body);
}
@media (max-width:900px){ .carousel-card { grid-template-columns:1fr; } }
.carousel-doc {
  background:white; border:1px solid var(--q-border); border-radius:12px;
  padding:28px 20px; text-align:center; display:flex; flex-direction:column; align-items:center;
}
.carousel-doc-icon { color:var(--q-morado); transform:scale(1.8); margin-bottom:16px; }
.carousel-doc-name { font-size:14px; font-weight:700; word-break:break-all; }
.carousel-doc-meta { font-size:12px; color:var(--q-text-secondary); margin-top:2px; }
.carousel-badge {
  margin-top:14px; padding:5px 12px; border-radius:999px; font-size:12px; font-weight:700;
}
.carousel-badge.ok { background:#D4EDDA; color:#1E6F3C; border:1px solid #D4EDDA; }
.carousel-badge.no { background:#FADBD8; color:#C0392B; border:1px solid #FADBD8; }
.carousel-actions { display:flex; flex-direction:column; justify-content:center; }
.carousel-hint { font-size:12px; color:var(--q-text-secondary); margin-bottom:12px; line-height:1.6; }

.firma-orden-row {
  display:flex; align-items:center; gap:8px; padding:10px 12px;
  border:1px solid var(--q-border); border-radius:12px; background:var(--q-bg-body);
}
.firma-orden-num {
  width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
  background:var(--q-morado); color:#fff; font-size:11px; font-weight:700;
}

/* ── 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:14px; 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:8px; }
@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:12px;
  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,150,174,.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:8px; align-items:center;
  border-radius:0 0 var(--q-radius-card) var(--q-radius-card);
  box-shadow:0 -2px 12px rgba(144,40,140,.06);
}

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

/* ── 31b. AUTH SPLIT LOGIN ────────────────────────────── */
.auth-split { position:fixed; inset:0; z-index:50; display:flex; flex-direction:column; background:white; }
.auth-split-body { flex:1; display:grid; grid-template-columns:1fr 1fr; overflow:hidden; }
.auth-split-left {
  position:relative; overflow:hidden; padding:30px 36px;
  display:flex; flex-direction:column; justify-content:space-between;
  background:#F2F4FC;
}
.auth-blob { position:absolute; border-radius:50%; pointer-events:none; }
.auth-split-right { overflow-y:auto; display:flex; align-items:center; justify-content:center; padding:40px 24px; background:white; border-left:1px solid #EEF0F5; }
.auth-split-footer {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 40px; border-top:1px solid var(--q-border);
  font-size:12px; color:var(--q-text-secondary); background:white; flex-shrink:0;
}
.auth-split-footer a { color:var(--q-text-secondary); margin-left:20px; }
.auth-split-footer a:hover { color:var(--q-morado); }
.auth-stat-grid { display:flex; gap:24px; position:relative; z-index:1; }
.auth-stat-num { font-size:24px; font-weight:800; color:var(--q-text-primary); line-height:1; }
.auth-stat-label { font-size:11px; font-weight:500; color:#3F3F51; letter-spacing:.03em; margin-top:6px; }
.auth-logo-badge {
  width:150px; height:auto; background:none; border:none; box-shadow:none;
  display:flex; align-items:center; padding:0; position:relative; z-index:1;
}
.auth-secure-badge {
  display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:600;
  color:var(--q-text-secondary); background:var(--q-bg-body); border-radius:999px; padding:7px 16px;
}
.auth-demo-toggle {
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:11px 16px; border:1px solid var(--q-border); border-radius:12px;
  font-size:13px; font-weight:600; color:var(--q-text-primary); background:white; transition:border-color .15s;
}
.auth-demo-toggle:hover { border-color:var(--q-morado); }
@media (max-width:900px) { .auth-split-left { display:none; } .auth-split-body { grid-template-columns:1fr; } }

/* ── 31. AUTH SCREENS ─────────────────────────────────── */
.auth-shell { min-height:100vh; background:linear-gradient(135deg,#F0ECF5 0%,#F4F5F8 40%,#EAF7F6 100%); display:flex; align-items:flex-start; justify-content:center; padding:32px 20px; overflow-y:auto; }
.auth-card { background:white; border-radius:14px; box-shadow:0 8px 40px rgba(144,40,140,.12),0 0 0 1px rgba(144,40,140,.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:18px; 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:24px; 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:calc(100vw - 24px); max-width:calc(100vw - 24px); } }

/* ── 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%,#90288C 50%,#90288C 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:18px; font-weight:700; margin-bottom:4px; }
.hero-sub { font-size:13px; opacity:.8; }
.hero-badge {
  display:inline-flex; align-items:center; gap:4px;
  background:rgba(255,255,255,.15); padding:5px 12px; border-radius:999px;
  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:24px; 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%,#0096AE 60%,#0096AE 100%); }
.dashboard-hero-verde  { background:linear-gradient(135deg,#155A33 0%,#1E6F3C 60%,#1E6F3C 100%); }
.btn-hero {
  display:inline-flex; align-items:center; gap:4px;
  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),#90288C); }
.kpi-card-verde::before  { background:linear-gradient(90deg,var(--q-estado-verde),#1E6F3C); }
.kpi-card-ambar::before  { background:linear-gradient(90deg,var(--q-estado-ambar),#B45309); }
.kpi-card-rojo::before   { background:linear-gradient(90deg,var(--q-estado-rojo),#C0392B); }
.kpi-card-teal::before   { background:linear-gradient(90deg,var(--q-teal),#0096AE); }
.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:8px; margin-bottom:16px; }
.quick-btn {
  display:flex; align-items:center; gap:8px;
  background:var(--q-bg-body); border:1.5px solid var(--q-border);
  border-radius:12px; 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(144,40,140,.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 #B4530940; 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(144,40,140,.12);
}

/* ── 42. SIDEBAR MENU ITEMS ─────────────────────────── */
.sb-menu .sb-item {
  display:flex; align-items:center; gap:8px;
  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(144,40,140,.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,150,174,.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:11px; 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:8px; 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:8px;
  font-size:14px; 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:4px; }
.poliza-info-item-wide { grid-column:span 2; }
.poliza-info-label {
  font-size:11px; 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:4px;
  padding:4px 10px; border-radius:999px;
  font-size:12px; font-weight:700; border:2px solid;
}
.poliza-estatus-vigente {
  background:#e8f8f5; color:#0a7a6e;
  border-color:#0096AE;
}
.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:8px; 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:8px;
  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:8px;
  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(144,40,140,.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:4px; }
.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:8px;
}
.wiz-sub-items {
  display:flex; flex-direction:column; gap:4px;
  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:8px;
  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:14px;
  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(144,40,140,.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:8px;
  border-radius:0 0 12px 0;
  flex-shrink:0;
}

/* Dropzone */
.dropzone {
  border:2px dashed var(--q-border); border-radius:12px;
  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:24px; margin-bottom:8px; }
.file-list { display:flex; flex-direction:column; gap:4px; 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(144,40,140,.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:8px; 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:8px;
  padding:9px 18px; border-radius:999px;
  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(144,40,140,.25);
}

/* Campo de búsqueda */
.wiz-search-field {
  display:flex; gap:8px; 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:4px;
  margin-top:12px; padding:6px 12px; border-radius:999px;
  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:14px;
  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:14px; 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:8px;
  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:8px; 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:12px; padding:4px;
  width:fit-content;
}
.firma-tab {
  display:flex; align-items:center; gap:4px;
  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:13px;
  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:4px; }
.firma-topbar-folio { font-size:14px; 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(144,40,140,.07);
  font-size:13px;
  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:24px; 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:13px;
  color:#1a1a2e;
}

.firma-doc-sigs {
  display:flex; gap:24px; 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:12px;
  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:12px; 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:8px;
  padding:12px 14px;
  background:var(--q-bg-body);
  border-radius:12px;
  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:4px; }
.firma-panel-signer .ps-name { font-size:13px; 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:11px; 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: visible;
  border: 1px solid var(--q-border);
  border-radius:12px;
}
.permisos-table {
  width: 100%;
  border-collapse: collapse;
  font-size:13px;
}
.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:4px;
  flex-wrap: wrap;
}
.permisos-rol-desc {
  font-size:11px;
  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:13px;
  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:8px;
  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:12px;
  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:4px;
  flex-wrap: wrap;
}
.campo-card-meta {
  font-size:12px;
  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:12px;
  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-teal  { border-top-color: var(--q-teal); }

.reporte-kpi-val {
  font-size:24px;
  font-weight: 800;
  color: var(--q-text-primary);
  line-height: 1;
  margin-bottom: 6px;
}
.reporte-kpi-label {
  font-size:13px;
  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:8px;
  overflow: hidden;
}
.reporte-bar-label {
  font-size:11px;
  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:4px;
  font-size:11px;
  color: var(--q-text-secondary);
}
.reporte-bar-legend i {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius:8px;
  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:18px;
  font-weight: 800;
  color: var(--q-text-primary);
  letter-spacing: -.2px;
}
.db-subtitle {
  font-size:13px;
  color: var(--q-text-secondary);
  margin-top: 3px;
}

/* Action buttons (vertical list style) */
.db-action-btn {
  display: flex;
  align-items: center;
  gap:8px;
  width: 100%;
  padding: 9px 10px;
  border-radius:8px;
  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:11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius:12px;
  min-width: 20px;
  text-align: center;
}


/* ── 55. RECOVERY CHANNEL SELECTOR ──────────────── */
.recov-channel-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap:4px;
  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(144,40,140,.12);
}
.recov-channel-btn span:nth-child(2) {
  font-size:13px;
  font-weight: 700;
  color: inherit;
}
.recov-channel-hint {
  font-size:11px;
  color: var(--q-text-disabled);
  font-weight: 400 !important;
}
.recov-channel-btn.selected .recov-channel-hint {
  color: var(--q-morado);
  opacity: .7;
}

/* ═══════════════════════════════════════════════════
   NUEVA SOLICITUD — rediseño (campos y checklist)
   ═══════════════════════════════════════════════════ */
.conv-cols { display:flex; gap:24px; flex-wrap:wrap; align-items:flex-start; }
.conv-col-left  { flex:0 0 240px; }
.conv-col-right { flex:1; min-width:280px; }

.input-clear {
  position:absolute; right:38px; top:50%; transform:translateY(-50%);
  width:20px; height:20px; border-radius:50%; border:0; cursor:pointer;
  background:var(--q-border); color:var(--q-text-secondary);
  display:flex; align-items:center; justify-content:center; padding:0;
}
.input-clear:hover { background:#d6d9df; color:var(--q-text-primary); }

.wiz-found-row { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:12px; }
.nueva-busqueda {
  display:inline-flex; align-items:center; gap:4px; cursor:pointer;
  font-size:12px; font-weight:600; color:var(--q-morado); background:none; border:0; padding:0;
  font-family:'Montserrat',sans-serif;
}
.nueva-busqueda:hover { text-decoration:underline; }

.chip-tiny { font-size:11px; font-weight:700; padding:2px 7px; border-radius:8px; letter-spacing:.3px; }
.chip-pm   { background:rgba(144,40,140,.1);  color:var(--q-morado); }
.chip-pf   { background:rgba(0,150,174,.12);   color:var(--q-teal); }
.chip-gob  { background:rgba(217,119,6,.12);   color:var(--q-estado-ambar); }

.doc-list { display:flex; flex-direction:column; gap:8px; max-width:640px; }
.doc-item {
  display:flex; align-items:flex-start; gap:12px;
  padding:14px 16px; border:1.5px solid var(--q-border); border-radius:12px;
  background:#fff; transition:border-color .15s;
}
.doc-item.done { border-color:rgba(30,138,76,.4); background:rgba(30,138,76,.03); }
.doc-item-icon {
  width:34px; height:34px; border-radius:8px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--q-morado-soft); color:var(--q-morado);
}
.doc-item.done .doc-item-icon { background:rgba(30,138,76,.12); color:var(--q-estado-verde); }
.doc-item-body { flex:1; min-width:0; }
.doc-item-name { font-size:13px; font-weight:600; color:var(--q-text-primary); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.doc-item-help { font-size:11px; color:var(--q-text-secondary); margin-top:3px; line-height:1.5; }
.doc-item-file { font-size:11px; color:var(--q-estado-verde); font-weight:600; margin-top:5px; display:flex; align-items:center; gap:4px; }
.doc-item-action { flex-shrink:0; align-self:center; }

.mini-dropzone {
  display:flex; align-items:center; gap:12px; max-width:640px; margin-top:12px;
  padding:12px 16px; border:1.5px dashed var(--q-border); border-radius:12px;
  color:var(--q-text-secondary); font-size:12px;
}
.mini-dropzone svg { color:var(--q-text-disabled); }

.ext-panel {
  border-left:4px solid var(--q-morado); background:#F8F7FB;
  border-radius:0 10px 10px 0; padding:16px 20px; margin-bottom:20px; max-width:720px;
}
.ext-panel-title { font-size:13px; font-weight:700; color:var(--q-morado); display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.ext-scenarios { display:flex; flex-direction:column; gap:8px; }
.ext-scenario { font-size:12px; color:var(--q-text-primary); line-height:1.5; display:flex; gap:8px; }
.ext-scenario .dot { color:var(--q-morado); font-weight:700; flex-shrink:0; }

.field-disabled { opacity:.55; }
.field-disabled .form-control { pointer-events:none; }

.chk-row { display:flex; align-items:center; gap:8px; margin-top:10px; font-size:12px; color:var(--q-text-secondary); cursor:pointer; }
.chk-row input { accent-color:var(--q-morado); width:16px; height:16px; }

.agente-tbl-head { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:12px; flex-wrap:wrap; gap:12px; }

/* ═══════════════════════════════════════════════════
   MODIFICAR SOLICITUDES — tabs, progreso, docs observados
   ═══════════════════════════════════════════════════ */
.mod-tabs { display:flex; gap:24px; border-bottom:1px solid var(--q-border); margin-bottom:20px; }
.mod-tab {
  display:flex; align-items:center; gap:8px; cursor:pointer; background:none; border:0;
  font-family:'Montserrat',sans-serif; font-size:14px; font-weight:600; color:var(--q-text-secondary);
  padding:0 2px 12px; margin-bottom:-1px; border-bottom:2px solid transparent; transition:color .15s;
}
.mod-tab:hover { color:var(--q-text-primary); }
.mod-tab.active { color:var(--q-morado); border-bottom-color:var(--q-morado); }
.mod-tab-badge {
  min-width:20px; height:20px; padding:0 6px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; color:#fff;
}
.mod-tab-badge.morado { background:var(--q-morado); }
.mod-tab-badge.rojo   { background:var(--q-estado-rojo); }
.mod-tab-badge.gris   { background:var(--q-text-disabled); }
.mod-tab-badge.teal   { background:var(--q-teal); }

.mini-progress-cell { display:flex; align-items:center; gap:8px; min-width:120px; }
.mini-progress { flex:1; height:6px; border-radius:8px; background:var(--q-border); overflow:hidden; }
.mini-progress-fill { height:100%; border-radius:8px; background:var(--q-morado); }
.mini-progress-pct { font-size:11px; font-weight:700; color:var(--q-text-secondary); white-space:nowrap; }

.motivo-cell { display:inline-flex; align-items:center; gap:4px; max-width:220px; }
.motivo-cell .motivo-text { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.motivo-cell .motivo-info { color:var(--q-teal); flex-shrink:0; cursor:help; }

.rechazo-panel {
  border-left:4px solid var(--q-estado-rojo); background:#FEF6F5;
  border-radius:0 10px 10px 0; padding:18px 22px; margin-bottom:22px;
}
.rechazo-panel-title { font-size:14px; font-weight:700; color:var(--q-estado-rojo); display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.rechazo-panel-meta { font-size:12px; color:var(--q-text-secondary); margin-bottom:12px; }
.rechazo-panel-obs { font-size:13px; color:var(--q-text-primary); line-height:1.6; background:#fff; border:1px solid rgba(192,57,43,.18); border-radius:8px; padding:12px 14px; }

.doc-item.observed { border-color:rgba(192,57,43,.45); background:rgba(192,57,43,.03); }
.doc-item.observed .doc-item-icon { background:rgba(192,57,43,.1); color:var(--q-estado-rojo); }
.doc-observado-badge { font-size:11px; font-weight:700; padding:2px 7px; border-radius:8px; background:rgba(192,57,43,.12); color:var(--q-estado-rojo); letter-spacing:.3px; }
.doc-observado-comment { font-size:11px; color:var(--q-estado-rojo); margin-top:6px; line-height:1.5; display:flex; gap:4px; }


/* ── Bloque 3: buscador global, resaltado de fila y sub-tabla de carga masiva ── */
.mod-search { position: relative; margin-bottom: 14px; }
.mod-search-panel {
  position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; width: 520px; max-width: 100%;
  background: #fff; border: 1px solid var(--q-border); border-radius:12px;
  box-shadow: 0 12px 28px rgba(20,20,43,.14); overflow: hidden;
}
.mod-search-hit {
  display: grid; grid-template-columns: 190px 1fr auto; gap:8px; align-items: center;
  width: 100%; padding: 10px 14px; background: none; border: none; border-bottom: 1px solid var(--q-border);
  text-align: left; cursor: pointer; font-size:13px;
}
.mod-search-hit:last-child { border-bottom: none; }
.mod-search-hit:hover { background: rgba(107,44,141,.06); }
.mod-search-folio { font-weight: 700; color: var(--q-text-primary); }
.mod-search-meta  { color: var(--q-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mod-search-dest  {
  font-size:11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  color: var(--q-morado); background: rgba(107,44,141,.09); padding: 3px 8px; border-radius:999px; white-space: nowrap;
}
.mod-search-empty { padding: 14px; font-size:13px; color: var(--q-text-secondary); }
.q-table tr.row-highlight > td { background: rgba(255,193,7,.14); }
.cm-toggle {
  width: 22px; height: 22px; border-radius:8px; border: 1px solid var(--q-border);
  background: #fff; color: var(--q-morado); font-size:14px; line-height: 1; cursor: pointer;
}
.cm-toggle.open { background: var(--q-morado); color: #fff; border-color: var(--q-morado); }
.cm-subrow > td { background: var(--q-bg-body); }
.cm-sub-title { font-size:11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--q-text-secondary); margin: 4px 0 8px; }
.cm-sub-table { width: 100%; border-collapse: collapse; font-size:13px; margin-bottom: 6px; }
.cm-sub-table th { text-align: left; font-size:11px; text-transform: uppercase; letter-spacing: .4px; color: var(--q-text-secondary); padding: 4px 10px; }
.cm-sub-table td { padding: 6px 10px; border-top: 1px solid var(--q-border); }


/* ═══════════════════════════════════════════════
   AJUSTES CLM JURÍDICO — filtros, métricas
   clicables y widgets de dashboard
   ═══════════════════════════════════════════════ */

/* Filtros con separación visual entre grupos */
.filtros-bar {
  display:flex; flex-wrap:wrap; align-items:flex-end;
  gap:18px 20px; padding:16px 18px; margin-bottom:18px;
  background:var(--q-bg-body); border:1px solid var(--q-border); border-radius:12px;
}
.filtros-grupo { display:flex; flex-direction:column; gap:4px; min-width:170px; }
.filtros-grupo-buscar { flex:1 1 300px; min-width:260px; }
.filtros-grupo-fechas { min-width:290px; }
.filtros-grupo-accion { justify-content:flex-end; min-width:auto; }
.filtro-label {
  font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
  color:var(--q-text-secondary);
}
.filtros-fechas { display:flex; align-items:center; gap:8px; }
.filtros-fechas .form-control { min-width:120px; }
.filtro-sep { font-size:12px; color:var(--q-text-secondary); }

/* Métricas clicables */
.kpi-clickable { cursor:pointer; transition:border-color .15s, box-shadow .15s, transform .15s; }
.kpi-clickable:hover { border-color:var(--q-morado); box-shadow:0 4px 16px rgba(144,40,140,.14); transform:translateY(-1px); }
.kpi-link { display:block; margin-top:8px; font-size:11px; font-weight:700; color:var(--q-teal); }
.kpi-card-azul { border-left:3px solid #90288C; }
.kpi-num-azul  { color:#90288C; }
.status-card-azul { border-left:3px solid #90288C; }
.status-card-morado { background:rgba(144,40,140,.04); border-color:var(--q-morado); }
.status-card-morado .status-card-title { color:var(--q-morado); }

/* Distribución por estatus */
.status-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; }

/* Mis convenios por tipo */
.tipo-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; }
.tipo-card { border:1px solid var(--q-border); border-radius:12px; padding:16px 18px; cursor:pointer; transition:box-shadow .15s, transform .15s; }
.tipo-card:hover { box-shadow:var(--q-shadow-hover); transform:translateY(-1px); }
.tipo-card-head { display:flex; align-items:center; gap:8px; margin-bottom:14px; }
.tipo-card-icon { display:flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:8px; background:var(--q-morado-soft); color:var(--q-morado); flex-shrink:0; }
.tipo-card-title { font-size:13px; font-weight:600; color:var(--q-text-primary); }
.tipo-card-num { font-size:24px; font-weight:800; color:var(--q-text-primary); display:flex; align-items:baseline; gap:8px; margin-bottom:10px; }
.tipo-card-pct { font-size:12px; font-weight:500; color:var(--q-text-secondary); }
.tipo-card-bar { height:5px; background:var(--q-border); border-radius:8px; overflow:hidden; }
.tipo-card-bar-fill { height:100%; background:var(--q-morado); border-radius:8px; }

/* Contadores en pestañas */
.tab-count {
  display:inline-block; margin-left:6px; padding:1px 7px; border-radius:8px;
  background:var(--q-border); color:var(--q-text-secondary);
  font-size:11px; font-weight:700;
}
.tab-btn.active .tab-count { background:var(--q-morado-soft); color:var(--q-morado); }

/* Filas de barras en dashboards */
.bar-row { display:grid; grid-template-columns:230px 1fr 86px; align-items:center; gap:12px; }
@media(max-width:900px) { .bar-row { grid-template-columns:150px 1fr 70px; } }

/* Actividad reciente e histórico */
.hist-row { display:grid; grid-template-columns:96px 110px 1fr; gap:12px; padding:10px 0; border-bottom:1px solid var(--q-border); }
.hist-detalle-row { display:grid; grid-template-columns:104px 1fr; gap:12px; padding:12px 0; border-bottom:1px solid var(--q-border); }

/* Bloque de pendiente / bloqueador */
.banner-pendiente { border-left:4px solid var(--q-estado-ambar); background:#FFFDF5; }

.metric-inline { display:flex; align-items:center; gap:8px; min-height:38px; }
.text-disabled { color:var(--q-text-disabled); }
.row-disabled { opacity:.55; }

/* Botón secundario del asistente: menos peso que el principal */
.btn-link-secundario {
  background:none; border:none; color:var(--q-text-secondary);
  font-weight:600; font-size:13px; text-decoration:underline; cursor:pointer; padding:8px 4px;
}
.btn-link-secundario:hover { color:var(--q-morado); }


/* ── Sin scroll horizontal: el contenido se ajusta al ancho ── */
html, body { max-width:100%; overflow-x:hidden; }
.app-shell, .app-body { max-width:100%; overflow-x:hidden; }
.app-main { min-width:0; max-width:100%; }
.q-card, .data-panel { max-width:100%; }

/* Tablas: ajustan al contenedor en lugar de desbordarse */
.table-wrapper { max-width:100%; overflow:visible; container-type:inline-size; container-name:tabla; }
.q-table { table-layout:auto; width:100%; }
.q-table thead th { white-space:normal; }
.q-table th, .q-table td {
  overflow-wrap:break-word; white-space:normal;
}
.q-table thead th { font-size:11px; letter-spacing:.2px; padding-left:10px; padding-right:10px; }
.q-table tbody td { font-size:13px; padding-left:10px; padding-right:10px; }
.q-table .chip { white-space:normal; }
.tbl-action { display:inline-block; margin:1px 6px 1px 0; }

/* Celdas compactas en tablas anchas */
.sla-cell { min-width:0; }
.sla-bar { min-width:52px; }
.filtros-fechas .form-control { min-width:0; }
.filtros-grupo { flex:1 1 170px; }
.filtros-grupo-fechas { flex:1 1 250px; min-width:0; }
.search-bar-wrapper { max-width:100%; }
.bar-row { grid-template-columns:minmax(120px,220px) 1fr 80px; }
.status-grid { grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); }
.grid-2, .grid-3 { max-width:100%; }
@media(max-width:1200px) {
  .grid-3 { grid-template-columns:1fr 1fr; }
}
@media(max-width:900px) {
  .grid-2, .grid-3 { grid-template-columns:1fr; }
  .q-table thead th, .q-table tbody td { padding-left:8px; padding-right:8px; }
}

.q-table .chip { display:inline-block; max-width:100%; }
.sla-cell { flex-wrap:wrap; }
.sla-text { font-size:11px; }

/* Carga por tipo de contrato — filas compactas, sin tabla ancha */
.carga-tipo-list { display:flex; flex-direction:column; gap:8px; }
.carga-tipo-row {
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px;
  padding:12px 14px; border:1px solid var(--q-border); border-radius:12px; background:var(--q-bg-body);
}
.carga-tipo-abogado { display:flex; flex-direction:column; min-width:150px; }
.carga-tipo-chips { display:flex; flex-wrap:wrap; gap:4px; flex:1; }
.carga-tipo-chip {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 9px; border-radius:14px; background:white;
  border:1px solid var(--q-border); font-size:12px; color:var(--q-text-secondary);
}
.carga-tipo-chip strong { color:var(--q-morado); font-size:13px; }

/* ── Tablas que caben sin scroll: columnas cortas acotadas ── */
/* Las columnas cortas se encogen a su contenido; el texto largo toma el resto */
.q-table th.col-xs, .q-table td.col-xs,
.q-table th.col-sm, .q-table td.col-sm,
.q-table th.col-acciones, .q-table td.col-acciones { width:1%; }
.q-table th.col-md, .q-table td.col-md { width:1%; min-width:112px; }
.q-table td.col-xs, .q-table td.col-sm { white-space:nowrap; }
.q-table th.col-texto, .q-table td.col-texto { min-width:180px; }

/* Si la tabla no cabe en su contenedor, se apila en tarjetas: nada queda oculto */
@container tabla (max-width:1060px) {
  .q-table.q-table-stack, .q-table.q-table-stack tbody, .q-table.q-table-stack tr, .q-table.q-table-stack td { display:block; width:auto; }
  .q-table.q-table-stack thead { display:none; }
  .q-table.q-table-stack tbody tr {
    border:1px solid var(--q-border); border-radius:12px; padding:12px 14px;
    margin-bottom:10px; background:white;
  }
  .q-table.q-table-stack tbody tr.row-sla-rojo  { border-left:3px solid var(--q-estado-rojo); }
  .q-table.q-table-stack tbody tr.row-sla-ambar { border-left:3px solid var(--q-estado-ambar); }
  .q-table.q-table-stack tbody td {
    display:flex; flex-wrap:wrap; gap:4px 12px; align-items:flex-start; justify-content:space-between;
    border:none; padding:5px 0; width:auto !important; text-align:right;
  }
  .q-table.q-table-stack tbody td::before {
    content:attr(data-label); flex:0 0 44%; text-align:left;
    font-size:11px; font-weight:700; letter-spacing:.4px; text-transform:uppercase;
    color:var(--q-text-secondary);
  }
  .q-table.q-table-stack tbody td:empty { display:none; }
  .q-table.q-table-stack tbody td > * { min-width:0; }
  .q-table.q-table-stack tbody td { overflow-wrap:anywhere; min-width:0; }
  .q-table.q-table-stack tbody td::before { min-width:0; overflow-wrap:break-word; }
  .q-table.q-table-stack .sla-cell { align-items:flex-end; }
}

/* Filas sin correspondencia de columnas (estado vacío, colspan) no se apilan */
@container tabla (max-width:1060px) {
  .q-table.q-table-stack tbody tr.row-plain { display:block; border:none; padding:0; background:none; }
  .q-table.q-table-stack tbody tr.row-plain td { display:block; text-align:left; }
  .q-table.q-table-stack tbody tr.row-plain td::before { content:none; }
}

/* Las pestañas bajan de línea cuando no caben, en lugar de salirse de la tarjeta */
.tabs-bar { flex-wrap:wrap; row-gap:0; }
.tabs-bar .tab-btn { flex:0 0 auto; }

/* Selector de tipo de contrato: rejilla real, no flex de una línea */
.type-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px; }
.type-cards .type-card { min-width:0; width:auto; }
.type-card-title { overflow-wrap:break-word; }

/* Barra de pasos del asistente: baja de línea en vez de salirse */
.wiz-progress-bar { flex-wrap:wrap; row-gap:12px; }
.wiz-progress-step { flex:0 0 auto; }
.wiz-progress-line { min-width:24px; }

/* Token ausente heredado de la hoja original */
:root { --q-text-muted:#6B7280; }

/* Centro de notificaciones */
.notif-punto { display:inline-block; width:8px; height:8px; border-radius:50%; }
.notif-body { min-width:0; }
.sb-badge { margin-left:auto; }
.tabs-bar-suelta { margin-bottom:16px; border-bottom:1px solid var(--q-border); }

/* ── Menú lateral: nunca recortar elementos ──
   El espaciador solo absorbe el sobrante; el menú toma el alto que
   necesita y, si aun así falta espacio, muestra su barra de scroll. */
/* El espaciador empuja "Cerrar sesión" al fondo cuando sobra espacio,
   pero cede su alto al menú cuando este necesita todo el disponible. */
.sb-spacer { flex:1 1 0; min-height:12px; }
.sb-menu { flex:0 1 auto; scrollbar-width:thin; scrollbar-color:var(--q-border) transparent; }
.sb-menu::-webkit-scrollbar { display:block; width:6px; }
.sb-menu::-webkit-scrollbar-thumb { background:var(--q-border); border-radius:8px; }
.sb-menu::-webkit-scrollbar-track { background:transparent; }

/* Aviso de filtro aplicado desde una métrica */
.aviso-filtro { margin-bottom:16px; align-items:center; }
.aviso-filtro .btn { margin-left:auto; flex:0 0 auto; }

/* ── Rejilla de métricas ──
   Se adapta al ancho disponible, pero con un tope de columnas
   (--kpi-cols) elegido para que ningún renglón quede con una sola
   tarjeta suelta. El tope lo fija renderHome según el conteo. */
/* Flex en lugar de rejilla: la base de 200px evita que el número, la
   etiqueta y el enlace se recorten, y el crecimiento reparte el sobrante
   del último renglón, así que nunca queda una tarjeta angosta y sola. */
.kpi-row,
.kpi-row-3,
.kpi-row-4 {
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  grid-template-columns:none;
}
.kpi-row > .kpi-card,
.kpi-row-3 > .kpi-card,
.kpi-row-4 > .kpi-card { flex:1 1 200px; min-width:0; }


/* ══ FILTRO DE PERIODO ══ */
.periodo-bar {
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  background:var(--q-bg-card); border:1px solid var(--q-border); border-radius:var(--q-radius-card);
  box-shadow:var(--q-shadow-card); padding:14px 18px; margin-bottom:22px;
}
.periodo-txt { display:flex; flex-direction:column; gap:4px; margin-right:auto; }
.periodo-label { font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--q-morado); }
.periodo-hint { font-size:12px; color:var(--q-text-secondary); }
.periodo-control { position:relative; }
.periodo-btn {
  display:flex; align-items:center; gap:8px;
  padding:9px 14px; border-radius:12px; border:1.5px solid var(--q-border);
  background:white; font-size:13px; font-weight:600; color:var(--q-text-primary);
  transition:border-color .15s, box-shadow .15s, color .15s;
}
.periodo-btn svg:first-child { color:var(--q-morado); }
.periodo-btn:hover { border-color:var(--q-morado); }
.periodo-btn.is-open { border-color:var(--q-morado); box-shadow:0 0 0 3px var(--q-morado-soft); }
.periodo-btn.is-activo { color:var(--q-morado); border-color:var(--q-morado); }
.periodo-rapidos { display:flex; gap:4px; flex-wrap:wrap; }
.periodo-chip {
  padding:7px 12px; border-radius:999px; border:1px solid var(--q-border);
  background:white; font-size:12px; font-weight:600; color:var(--q-text-secondary);
  transition:all .15s;
}
.periodo-chip:hover { border-color:var(--q-morado); color:var(--q-morado); }
.periodo-chip.is-on { background:var(--q-morado); border-color:var(--q-morado); color:white; }

/* Calendario de rango */
.cal-pop {
  position:absolute; top:calc(100% + 8px); right:0; z-index:200; width:328px;
  background:white; border:1px solid var(--q-border); border-radius:14px;
  box-shadow:var(--q-shadow-modal); padding:16px; cursor:default;
}
.cal-inputs { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:14px; }
.cal-field { display:flex; flex-direction:column; gap:4px; }
.cal-field span { font-size:11px; font-weight:700; letter-spacing:.6px; color:var(--q-text-secondary); }
.cal-field .form-control { min-width:0; font-size:13px; }
.cal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.cal-mes { font-size:13px; font-weight:700; color:var(--q-text-primary); }
.cal-nav {
  width:28px; height:28px; border-radius:8px; font-size:18px; line-height:1;
  color:var(--q-text-secondary); transition:background .15s, color .15s;
}
.cal-nav:hover { background:var(--q-morado-soft); color:var(--q-morado); }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.cal-dow span { text-align:center; font-size:11px; font-weight:700; color:var(--q-text-secondary); padding:4px 0; }
.cal-day {
  height:34px; border-radius:8px; font-size:13px; font-weight:500;
  color:var(--q-text-primary); background:transparent; transition:background .12s, color .12s;
}
.cal-day:hover { background:var(--q-morado-soft); color:var(--q-morado); }
.cal-empty { pointer-events:none; }
.cal-day.cal-hoy { box-shadow:inset 0 0 0 1.5px var(--q-teal); }
.cal-day.cal-rango { background:var(--q-morado-soft); border-radius:0; }
.cal-day.cal-ini, .cal-day.cal-fin { background:var(--q-morado); color:white; font-weight:700; }
.cal-day.cal-ini { border-radius:8px 0 0 8px; }
.cal-day.cal-fin { border-radius:0 8px 8px 0; }
.cal-day.cal-ini.cal-fin { border-radius:8px; }
.cal-foot {
  display:flex; align-items:center; gap:8px; margin-top:14px; padding-top:12px;
  border-top:1px solid var(--q-border);
}
.cal-hint { flex:1; font-size:12px; color:var(--q-text-secondary); }

/* ══ TABLA — estilo listado ══ */
.q-table thead th {
  background:#F7F7FA; color:var(--q-text-secondary);
  font-size:11px; letter-spacing:.7px; font-weight:700;
  padding:12px 14px; border-bottom:1px solid var(--q-border);
}
.q-table tbody td { padding:15px 14px; }
.q-table tbody tr { border-bottom:1px solid #EFEFF3; }
.row-sla-verde, .row-sla-ambar, .row-sla-rojo { border-left:none; }
.cell-main { font-size:13px; font-weight:700; color:var(--q-text-primary); line-height:1.35; cursor:pointer; }
.cell-main:hover { color:var(--q-morado); }
.cell-main-sm { font-size:13px; font-weight:600; color:var(--q-text-primary); }
.cell-meta { font-size:12px; color:var(--q-text-secondary); margin-top:3px; line-height:1.4; }

/* SLA: punto + texto arriba, barra abajo */
.sla-cell { display:flex; flex-direction:column; gap:4px; min-width:150px; }
.sla-head { display:flex; align-items:center; gap:8px; }
.sla-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.sla-cell .sla-text { font-size:12px; font-weight:600; }
.sla-cell .sla-bar { width:100%; height:5px; border-radius:8px; overflow:hidden; }
.sla-cell.sla-verde .sla-dot, .sla-cell.sla-verde .sla-fill { background:var(--q-estado-verde); }
.sla-cell.sla-ambar .sla-dot, .sla-cell.sla-ambar .sla-fill { background:var(--q-estado-ambar); }
.sla-cell.sla-rojo  .sla-dot, .sla-cell.sla-rojo  .sla-fill { background:var(--q-estado-rojo); }
.sla-cell.sla-verde .sla-text { color:var(--q-estado-verde); }
.sla-cell.sla-ambar .sla-text { color:var(--q-estado-ambar); }
.sla-cell.sla-rojo  .sla-text { color:var(--q-estado-rojo); }
.sla-cell.sla-verde .sla-bar { background:rgba(30,138,76,.16); }
.sla-cell.sla-ambar .sla-bar { background:rgba(217,119,6,.16); }
.sla-cell.sla-rojo  .sla-bar { background:rgba(192,57,43,.16); }

/* Acciones en icono + menú de 3 puntos */
.acciones-cel { display:flex; align-items:center; gap:4px; justify-content:flex-end; }
.tbl-icon-btn {
  width:32px; height:32px; border-radius:8px; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--q-text-secondary); transition:background .15s, color .15s;
}
.tbl-icon-morado { color:var(--q-morado); }
.tbl-icon-morado:hover { background:var(--q-morado-soft); }
.tbl-icon-teal { color:var(--q-teal); }
.tbl-icon-teal:hover { background:var(--q-teal-soft); }
.tbl-icon-kebab:hover, .tbl-icon-gris:hover { background:var(--q-bg-body); color:var(--q-text-primary); }
.tbl-icon-rojo { color:var(--q-estado-rojo); }
.tbl-icon-rojo:hover { background:rgba(192,57,43,.10); }

/* Tooltip de la acción al pasar el mouse */
.tbl-icon-btn { position:relative; }
.tbl-icon-btn[data-tip]::after {
  content:attr(data-tip); position:absolute; bottom:calc(100% + 6px); left:50%;
  transform:translateX(-50%) translateY(2px); z-index:500;
  background:var(--q-text-primary); color:#fff; font-size:12px; font-weight:500;
  line-height:1.3; letter-spacing:.01em; padding:5px 8px; border-radius:8px;
  white-space:nowrap; pointer-events:none; opacity:0; transition:opacity .12s, transform .12s;
  box-shadow:0 4px 12px rgba(0,0,0,.16);
}
.tbl-icon-btn[data-tip]:hover::after, .tbl-icon-btn[data-tip]:focus-visible::after { opacity:1; transform:translateX(-50%) translateY(0); }
.q-table tr:first-child .tbl-icon-btn[data-tip]::after { bottom:auto; top:calc(100% + 6px); }

/* Números grandes en barras de carga: una sola línea */
.bar-row { display:flex; align-items:center; gap:12px; }
.bar-row .progress-bar { flex:1 1 auto; min-width:0; }
.bar-row > span:last-child { flex:0 0 auto; white-space:nowrap; font-variant-numeric:tabular-nums; text-align:right; }
.row-menu {
  position:fixed; z-index:400; min-width:206px; padding:6px;
  background:white; border:1px solid var(--q-border); border-radius:12px;
  box-shadow:var(--q-shadow-modal);
}
.row-menu-item {
  display:flex; align-items:center; gap:8px; width:100%; text-align:left;
  padding:9px 10px; border-radius:8px; font-size:13px; font-weight:500;
  color:var(--q-text-primary); transition:background .12s, color .12s;
}
.row-menu-item svg { color:var(--q-text-secondary); flex-shrink:0; }
.row-menu-item:hover { background:var(--q-morado-soft); color:var(--q-morado); }
.row-menu-item:hover svg { color:var(--q-morado); }

@media (max-width:760px) {
  .periodo-bar { align-items:stretch; }
  .cal-pop { right:auto; left:0; width:min(328px, calc(100vw - 48px)); }
}

/* Chips de etapa en una sola línea */
.q-table td.col-md .chip { white-space:nowrap; }
.q-table th.col-md, .q-table td.col-md { min-width:150px; }
@container tabla (max-width: 720px) { .q-table td.col-md .chip { white-space:normal; } }

/* == FILTROS DE SOLICITUDES (fila unica) == */
.page-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:20px; flex-wrap:wrap; }
.page-head .btn { display:inline-flex; align-items:center; gap:8px; }
.sol-scope { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--q-text-secondary); margin-bottom:10px; }
.sol-scope svg { color:var(--q-morado); }
.sol-scope strong { color:var(--q-text-primary); font-weight:600; }
.sol-filtros { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.sol-buscar { position:relative; flex:1 1 240px; min-width:200px; display:flex; }
.sol-buscar svg { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--q-text-secondary); pointer-events:none; }
.sol-buscar .form-control { padding-left:36px; width:100%; }
.sol-fecha { position:relative; flex:0 0 auto; }
.sol-fecha .cal-pop { left:0; right:auto; max-width:calc(100vw - 48px); }
@media (max-width:1200px) { .sol-fecha .cal-pop { left:auto; right:0; } }
.sol-select-btn { display:flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px; border:1.5px solid var(--q-border); background:white; cursor:pointer; font-size:14px; color:var(--q-text-primary); transition:border-color .15s, box-shadow .15s; }
.sol-select-btn svg:first-child { color:var(--q-morado); }
.sol-select-btn:hover { border-color:var(--q-morado); }
.sol-select-btn.is-open { border-color:var(--q-morado); box-shadow:0 0 0 3px var(--q-morado-soft); }
.sol-select-btn.is-activo { color:var(--q-morado); border-color:var(--q-morado); }
.sol-sel { flex:1 1 185px; min-width:170px; }
@media (max-width:900px) { .sol-buscar, .sol-sel, .sol-fecha { flex:1 1 100%; } .sol-select-btn { width:100%; } }


/* ══ HOMOLOGACIÓN DE CAMPOS Y FILTROS ══════════════════
   Un solo tamaño de control en todo el prototipo: alto 40px,
   texto 13.5px, radio 9px, para inputs, selects y botones-selector. */
.form-control,
.sol-select-btn,
.periodo-btn {
  min-height:40px;
  font-size:13px;
  border-radius:8px;
  border-width:1.5px;
  padding:9px 13px;
}
.sol-select-btn, .periodo-btn { gap:8px; }
select.form-control { padding-right:34px; }
.sol-buscar .form-control { padding-left:36px; }
.cal-field .form-control { min-height:38px; font-size:13px; }
textarea.form-control { min-height:90px; }

/* Barra de periodo homologada en todos los dashboards */
.filtros-periodo { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:24px; }
.filtros-periodo .filtro-campo { flex:0 0 auto; width:190px; }
.filtros-periodo .sol-select-btn { width:100%; }
@media (max-width:640px) { .filtros-periodo .filtro-campo { flex:1 1 100%; width:auto; } }

/* Ritmo vertical y jerarquía tipográfica homologados */
.page-title { font-size:24px; font-weight:700; line-height:1.25; letter-spacing:-.01em; color:var(--q-text-primary); }
.page-subtitle { font-size:13px; line-height:1.5; color:var(--q-text-secondary); margin-top:4px; }
.data-panel-title { font-size:14px; font-weight:700; color:var(--q-text-primary); }
.q-card { margin-bottom:20px; }
.q-card:last-child { margin-bottom:0; }
.filtro-label, .form-label { font-size:12px; font-weight:600; color:var(--q-text-secondary); margin-bottom:6px; }
.form-control::placeholder { color:#9CA3AF; font-size:13px; }


/* Filtros de Solicitudes: ancho fijo homologado (evita que el campo
   que envuelve se estire a todo el renglón) */
.sol-filtros .sol-sel,
.sol-filtros .sol-fecha { flex:0 0 190px; width:190px; min-width:0; }
.sol-filtros .sol-fecha .sol-select-btn { width:100%; }
.sol-filtros .sol-buscar { flex:1 1 260px; min-width:220px; }
.panel-sel { max-width:190px; }
@media (max-width:900px) {
  .sol-filtros .sol-sel,
  .sol-filtros .sol-fecha,
  .sol-filtros .sol-buscar { flex:1 1 100%; width:auto; }
}


/* Bandeja: grupos de filtro al mismo ancho homologado */
.filtros-bar .filtros-grupo { flex:0 0 190px; min-width:0; }
.filtros-bar .filtros-grupo-buscar { flex:1 1 260px; min-width:220px; }
.filtros-bar .filtros-grupo-buscar .search-bar-wrapper { max-width:none; }
.filtros-bar .filtros-grupo-accion { flex:0 0 auto; }
@media (max-width:900px) {
  .filtros-bar .filtros-grupo,
  .filtros-bar .filtros-grupo-buscar { flex:1 1 100%; }
}

.card-destacada { box-shadow:0 0 0 2px var(--q-morado); transition:box-shadow .3s; }

.kpi-sufijo { font-size:24px; font-weight:800; }
.ta-right { text-align:right; }


/* ── Sin scroll dentro de las tablas: todo el contenido se ajusta al ancho ── */
.table-wrapper, .permisos-matrix-wrap { overflow:visible !important; }
.q-table { table-layout:auto; width:100%; }
.q-table th, .q-table td { overflow-wrap:break-word; }
.q-table td.col-xs, .q-table td.col-sm { white-space:nowrap; overflow-wrap:normal; }
.q-table .chip, .q-table .tbl-link, .q-table .cell-main-sm, .q-table .cell-meta { overflow-wrap:normal; }
.q-table .chip { white-space:nowrap; }
.q-table th.col-acciones, .q-table td.col-acciones { width:84px; white-space:nowrap; overflow-wrap:normal; }


/* ── Diseño homologado de TODAS las tablas (patrón de Solicitudes) ── */
.q-table thead th {
  font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.7px;
  color:var(--q-text-secondary); background:var(--q-bg-body);
  padding:12px 16px; border-bottom:1px solid var(--q-border);
}
.q-table tbody td { padding:16px; font-size:13px; line-height:1.45; vertical-align:middle; }
.q-table tbody tr { border-bottom:1px solid var(--q-border); }
.q-table tbody tr:last-child { border-bottom:none; }
/* Primera columna: título + línea de contexto */
.q-table tbody td:first-child { font-size:13px; }
.q-table tbody td:first-child > .fw-600,
.q-table tbody td:first-child > .tbl-link,
.q-table .cell-main, .q-table .cell-main-sm { font-size:13px; font-weight:600; color:var(--q-text-primary); }
.q-table .cell-meta,
.q-table tbody td:first-child .fs-12.text-secondary { font-size:12px; color:var(--q-text-secondary); font-weight:400; margin-top:3px; display:block; }
/* Columna de acciones siempre a la derecha */
.q-table th.col-acciones, .q-table td.col-acciones, .q-table th.ta-right, .q-table td.ta-right { text-align:right; }
.q-table td.col-acciones .acciones-cel { justify-content:flex-end; }
/* Chips y barras con el mismo peso visual en cualquier tabla */
.q-table .chip { font-size:12px; }
.q-table .sla-bar { width:100%; min-width:120px; }

.q-table .tbl-link, .q-table .chip, .q-table .cell-main-sm { white-space:nowrap; word-break:keep-all; hyphens:none; }
.q-table .cell-meta { word-break:keep-all; hyphens:none; }


/* ── Paso 1 del alta: selector de convenio escalable ── */
.wiz-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:20px; }
.wiz-buscar { position:relative; flex:0 1 320px; min-width:240px; display:flex; }
.wiz-buscar svg { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--q-text-secondary); pointer-events:none; }
.wiz-buscar .form-control { padding-left:36px; }
.tipo-grupo { margin-bottom:20px; }
.tipo-grupo-head { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.tipo-grupo-title { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.7px; color:var(--q-text-secondary); }
.tipo-grupo-count { font-size:11px; font-weight:600; color:var(--q-text-secondary); background:var(--q-bg-body); border-radius:999px; padding:1px 8px; }
.tipo-lista { display:flex; flex-direction:column; gap:8px; }
.tipo-row { display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:14px 16px; border:1px solid var(--q-border); border-radius:12px; background:white; transition:border-color .12s, background .12s, box-shadow .12s; }
.tipo-row:hover { border-color:var(--q-morado); background:var(--q-morado-soft); }
.tipo-row.is-sel { border-color:var(--q-morado); background:var(--q-morado-soft); box-shadow:inset 0 0 0 1px var(--q-morado); }
.tipo-radio { width:16px; height:16px; border-radius:50%; border:1.5px solid var(--q-border); flex-shrink:0; transition:border-color .12s, box-shadow .12s; }
.tipo-row.is-sel .tipo-radio { border-color:var(--q-morado); box-shadow:inset 0 0 0 3.5px var(--q-morado); }
.tipo-row-main { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:4px; }
.tipo-row-title { font-size:13px; font-weight:600; color:var(--q-text-primary); }
.tipo-row-meta { font-size:12px; color:var(--q-text-secondary); }
.tipo-row-check { color:var(--q-morado); display:inline-flex; flex-shrink:0; }
.tipo-resumen { display:flex; align-items:flex-start; gap:12px; margin-top:4px; padding:14px 16px; border-radius:12px; background:var(--q-teal-soft); border:1px solid rgba(0,150,174,.25); }
.tipo-resumen svg { color:var(--q-teal); flex-shrink:0; margin-top:2px; }
.tipo-resumen-title { font-size:13px; font-weight:600; color:var(--q-text-primary); }
.tipo-resumen-meta { font-size:12px; color:var(--q-text-secondary); margin-top:2px; }
@media (max-width:640px) { .wiz-buscar { flex:1 1 100%; } }

/* ── Nombres largos: nunca encimados sobre bordes de cards ── */
.tipo-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr)); }
.tipo-card { min-width:0; overflow:hidden; display:flex; flex-direction:column; }
.tipo-card-head { align-items:flex-start; min-width:0; }
.tipo-card-title { min-width:0; overflow-wrap:break-word; line-height:1.35; }
.tipo-card-num { flex-wrap:wrap; row-gap:4px; min-width:0; }
.tipo-card-bar { margin-top:auto; }
.q-card, .data-panel, .status-card, .kpi-card, .tipo-card, .tipo-row, .bar-row { min-width:0; }
.kpi-label, .status-card-title, .tipo-row-title, .tipo-row-meta, .carga-tipo-chip { overflow-wrap:break-word; }

/* ── Filtro segmentado (reemplaza las pestañas de grupo) ── */
.seg-filtro { display:inline-flex; gap:4px; padding:4px; margin-bottom:16px; background:var(--q-bg-body); border:1px solid var(--q-border); border-radius:12px; flex-wrap:wrap; }
.seg-btn { display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:8px; font-size:13px; font-weight:600; color:var(--q-text-secondary); transition:background .12s, color .12s; }
.seg-btn:hover { color:var(--q-text-primary); }
.seg-btn.is-activo { background:white; color:var(--q-morado); box-shadow:0 1px 3px rgba(16,24,40,.08); }
.seg-count { font-size:12px; font-weight:600; color:var(--q-text-secondary); background:var(--q-border); border-radius:999px; padding:1px 7px; }
.seg-btn.is-activo .seg-count { background:var(--q-morado-soft); color:var(--q-morado); }

/* ── Cabecera homologada de tablas ── */
.tabla-head { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:0 0 16px; }
.tabla-head-left { display:flex; align-items:center; gap:8px; min-width:0; }
.tabla-head-title { font-size:14px; font-weight:700; color:var(--q-text-primary); letter-spacing:-.01em; }
.tabla-head-badge { font-size:12px; font-weight:600; color:var(--q-teal); background:var(--q-teal-soft); border-radius:999px; padding:3px 9px; white-space:nowrap; }
.tabla-head-right { display:flex; align-items:center; gap:8px; }
.tabla-head-rango { font-size:13px; color:var(--q-text-secondary); white-space:nowrap; font-variant-numeric:tabular-nums; }
.tabla-head-nav { width:30px; height:30px; border-radius:8px; border:1px solid var(--q-border); background:white; color:var(--q-text-secondary); display:inline-flex; align-items:center; justify-content:center; position:relative; transition:border-color .12s, color .12s, background .12s; }
.tabla-head-nav:hover:not(:disabled) { border-color:var(--q-morado); color:var(--q-morado); background:var(--q-morado-soft); }
.tabla-head-nav:disabled { opacity:.4; cursor:not-allowed; }

/* Métricas: rejilla real por --kpi-cols; sin tarjetas huérfanas estiradas */
.kpi-row, .kpi-row-3, .kpi-row-4 { display:grid; grid-template-columns:repeat(var(--kpi-cols,4),minmax(0,1fr)); gap:16px; }
.kpi-row-3 { --kpi-cols:3; }
.kpi-row-4 { --kpi-cols:4; }
.kpi-row > .kpi-card, .kpi-row-3 > .kpi-card, .kpi-row-4 > .kpi-card { flex:none; min-width:0; }
@media(max-width:1100px) { .kpi-row, .kpi-row-3, .kpi-row-4 { grid-template-columns:repeat(min(var(--kpi-cols,4),3),minmax(0,1fr)); } }
@media(max-width:820px) { .kpi-row, .kpi-row-3, .kpi-row-4 { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:520px) { .kpi-row, .kpi-row-3, .kpi-row-4 { grid-template-columns:minmax(0,1fr); } }

/* Cabecera de panel homologada al head de tabla */
.tabla-head + .table-wrapper { margin-top:0; }

/* ── Pestañas homologadas (pill sobre barra clara) ── */
.tabs-bar, .tabs-bar-suelta, .seg-filtro {
  display:flex; flex-wrap:wrap; gap:4px; padding:5px; margin:0 0 20px;
  background:var(--q-bg-body); border:1px solid var(--q-border); border-radius:12px;
}
.tab-btn, .seg-btn {
  display:inline-flex; align-items:center; gap:8px; flex:0 0 auto;
  padding:9px 14px; border:none; border-radius:8px; background:transparent;
  font-size:13px; font-weight:500; color:var(--q-text-secondary);
  transition:background .12s, color .12s, box-shadow .12s;
}
.tab-btn svg, .seg-btn svg { color:var(--q-text-secondary); flex-shrink:0; }
.tab-btn:hover, .seg-btn:hover { color:var(--q-text-primary); }
.tab-btn.active, .seg-btn.is-activo {
  background:white; color:var(--q-morado); font-weight:600; border:none;
  box-shadow:0 1px 3px rgba(16,24,40,.08);
}
.tab-btn.active svg, .seg-btn.is-activo svg { color:var(--q-morado); }
.tab-count, .seg-count { margin:0; padding:1px 7px; border-radius:999px; background:var(--q-border); color:var(--q-text-secondary); font-size:11px; font-weight:700; }
.tab-btn.active .tab-count, .seg-btn.is-activo .seg-count { background:var(--q-morado-soft); color:var(--q-morado); }


/* ═══════════════════════════════════════════════════
   SISTEMA DE DISEÑO QUÁLITAS — capa canónica (última en cascada)
   ═══════════════════════════════════════════════════ */
:root {
  --q-morado:#90288C; --q-morado-hover:#6E1F6B; --q-morado-cta:#90288C; --q-morado-cta-hover:#6E1F6B; --q-morado-dark:#6E1F6B;
  --q-morado-soft:#F7F4FB; --q-morado-soft-2:#F1EAF7; --q-morado-soft-3:#EFE3F6;
  --q-teal:#0096AE; --q-teal-hover:#00758A; --q-teal-dark:#00758A; --q-teal-soft:#E0F4F8;
  --q-estado-verde:#1E6F3C; --q-verde-dark:#1E6F3C; --q-estado-rojo:#C0392B; --q-estado-ambar:#B45309;
  --q-estado-gris:#5B5B6B; --q-verde-soft:#D4EDDA; --q-ambar-soft:#FEF3CD; --q-rojo-soft:#FADBD8;
  --q-text-primary:#1C1C2E; --q-text-body:#3F3F51; --q-text-secondary:#3F3F51;
  --q-text-muted:#6B7280; --q-text-meta:#6B7280; --q-text-disabled:#6B7280;
  --q-bg-body:#F4F5F8; --q-bg-card:#FFFFFF; --q-bg-surface:#FAFAFC; --q-row-hover:#F7F4FB;
  --q-border:#E8E6EF; --q-border-2:#E8E6EF; --q-divider:#F0EEF5; --q-border-focus:#C4A8D8;
  --q-row-hover:#F7F4FB;
  --q-shadow-card:0 2px 12px rgba(144,40,140,.06);
  --q-shadow-hover:0 6px 20px rgba(144,40,140,.10);
  --q-shadow-modal:0 24px 64px rgba(28,28,46,.28);
  --q-radius-card:16px; --q-radius-btn:999px; --q-radius-chip:999px; --q-radius-input:10px;
}
body { background:var(--q-bg-body); color:var(--q-text-primary); }

/* Escala tipográfica */
.page-title { font-size:24px; font-weight:800; letter-spacing:-.6px; color:var(--q-text-primary); line-height:1.2; }
.page-subtitle { font-size:13px; font-weight:500; color:var(--q-text-muted); line-height:1.5; margin-top:4px; }
.data-panel-title, .tabla-head-title { font-size:14px; font-weight:800; color:var(--q-text-primary); letter-spacing:-.2px; text-transform:none; }
.form-label { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:#9A98A8; margin-bottom:6px; }
.hint-text, .cell-meta, .tipo-row-meta, .seg-count { font-size:12px; font-weight:600; color:var(--q-text-meta); }
.q-table thead th { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.7px; color:var(--q-text-meta); background:var(--q-bg-surface); border-bottom:1px solid var(--q-border-2); }
.q-table tbody td { font-size:12px; font-weight:500; color:var(--q-text-body); }
.q-table tbody td:first-child > .fw-600, .q-table tbody td:first-child > .tbl-link, .q-table .cell-main, .q-table .cell-main-sm { font-size:13px; font-weight:700; color:var(--q-text-primary); }
.q-table tbody tr { border-bottom:1px solid var(--q-divider); }
.q-table tbody tr:hover { background:var(--q-row-hover); }
.mono, .cell-folio { font-family:"IBM Plex Mono",monospace; font-weight:500; }

/* Superficies */
.q-card { background:var(--q-bg-card); border:1px solid var(--q-border); border-radius:var(--q-radius-card); box-shadow:var(--q-shadow-card); }
.data-panel { background:var(--q-bg-surface); border:1px solid var(--q-border-2); border-radius:14px; }
.kpi-card, .status-card, .tipo-card, .tipo-row { border-radius:14px; border:1px solid var(--q-border); box-shadow:var(--q-shadow-card); }
.tipo-card:hover, .tipo-row:hover { box-shadow:var(--q-shadow-hover); border-color:var(--q-border-focus); background:var(--q-morado-soft); transform:none; }
.tipo-row.is-sel { border-color:var(--q-morado); background:var(--q-morado-soft-3); box-shadow:inset 0 0 0 1px var(--q-morado); }
.tipo-row.is-sel .tipo-radio { border-color:var(--q-morado); box-shadow:inset 0 0 0 3.5px var(--q-morado); }

/* Controles: 36px en filtros, 40px en acciones */
.form-control, .sol-select-btn, .periodo-btn { height:36px; min-height:36px; padding:0 12px; font-size:13px; font-weight:600; border:1px solid var(--q-border); border-radius:var(--q-radius-input); background:#fff; color:var(--q-text-primary); }
textarea.form-control { height:auto; min-height:84px; padding:10px 12px; }
.form-control:focus, .sol-select-btn:focus { border-color:var(--q-border-focus); box-shadow:0 0 0 3px rgba(196,168,216,.28); outline:none; }
.form-control::placeholder { color:var(--q-text-disabled); font-weight:500; }
select.form-control { appearance:none; -webkit-appearance:none; padding-right:32px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none'><path d='M3 4.5L6 7.5l3-3' stroke='%236B7280' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat; background-position:right 11px center; }

/* Botones */
.btn { min-height:40px; padding:0 20px; border-radius:var(--q-radius-btn); font-size:13px; font-weight:700; letter-spacing:.01em; }
.btn-sm { min-height:32px; padding:0 14px; font-size:12px; }
.btn-lg { min-height:44px; padding:0 26px; font-size:13px; }
.btn-morado { background:var(--q-morado-cta); box-shadow:0 4px 14px rgba(150,1,127,.22); }
.btn-morado:hover { background:var(--q-morado-cta-hover); box-shadow:0 6px 18px rgba(150,1,127,.28); transform:none; }
.btn-morado:disabled { background:#E3E1EA; color:#9A98A8; box-shadow:none; }
.btn-outline-morado { border:1.5px solid var(--q-morado-cta); color:var(--q-morado-cta); background:#fff; }
.btn-outline-morado:hover { background:var(--q-morado-soft-3); }
.btn-teal { background:var(--q-teal-dark); box-shadow:0 4px 14px rgba(0,117,138,.20); }
.btn-ghost, .btn-link-secundario { color:var(--q-text-muted); text-decoration:underline; background:none; }
.btn-ghost:hover { color:var(--q-morado); background:none; }

/* Chips de estado (pares canónicos) */
.chip { border-radius:var(--q-radius-chip); font-size:11px; font-weight:700; padding:3px 10px; }
.chip-gris   { background:#F1F1F4; color:#5B5B6B; }
.chip-ambar  { background:#FEF3CD; color:#B45309; }
.chip-rojo   { background:#FADBD8; color:#C0392B; }
.chip-morado { background:#EFE3F6; color:#90288C; }
.chip-teal   { background:#E0F4F8; color:#00758A; }
.chip-verde  { background:#D4EDDA; color:#1E6F3C; }
.chip-azul   { background:#EFE3F6; color:#90288C; }

/* Avisos suaves */
.banner-verde, .banner-inline.banner-verde { background:#EAF7EE; border:1px solid #D4EDDA; color:#1E6F3C; }
.banner-ambar, .banner-inline.banner-ambar { background:#FEF7E3; border:1px solid #FEF3CD; color:#8A5A08; }
.banner-info,  .banner-inline.banner-info  { background:#F7F4FB; border:1px solid #E4DAEE; color:#6E1F6B; }
.banner-rojo,  .banner-inline.banner-rojo  { background:#FDF1F0; border:1px solid #FADBD8; color:#C0392B; }

/* Pestañas tipo carpeta sobre barra #FAFAFC */
.tabs-bar, .tabs-bar-suelta, .seg-filtro { background:var(--q-bg-surface); border:1px solid var(--q-border-2); border-radius:14px; padding:5px; gap:4px; }
.tab-btn, .seg-btn { border-radius:12px; font-size:13px; font-weight:600; color:var(--q-text-muted); }
.tab-btn.active, .seg-btn.is-activo { background:#fff; border:1px solid var(--q-border-2); color:var(--q-morado); font-weight:700; box-shadow:0 1px 3px rgba(28,28,46,.06); }
.tab-count, .seg-count { background:#F1F1F4; color:#5B5B6B; font-size:11px; font-weight:800; }
.tab-btn.active .tab-count, .seg-btn.is-activo .seg-count { background:#EFE3F6; color:#90288C; }

/* Filtros: mismo eje, sin crecer */
.sol-filtros, .filtros-bar, .filtros-periodo { justify-content:flex-start; gap:8px; }
.sol-filtros > *, .filtros-bar > .filtros-grupo, .filtros-periodo > .filtro-campo { flex:0 1 190px; }
.sol-buscar { flex:0 1 280px; }

/* Cabecera de tabla y estado vacío */
.tabla-head-rango { font-size:12px; font-weight:600; color:var(--q-text-meta); }
.tabla-head-nav { border-radius:999px; border:1px solid var(--q-border); }
.empty-icon { color:#C9C5D4; }
.empty-title { font-size:13px; font-weight:700; }
.empty-sub { font-size:12px; color:var(--q-text-muted); }

/* Modales y toasts */
.modal, .modal-card { border-radius:14px; box-shadow:var(--q-shadow-modal); }
.modal-overlay { background:rgba(28,28,46,.42); }

/* Buscadores con icono a la derecha: sin texto encimado */
.form-control.search-bar, .form-control.has-icon-right { padding-right:38px; }

/* Encabezado de tabla sticky */
.q-table thead th { position:sticky; top:var(--header-h); z-index:3; background:var(--q-bg-surface); }


/* ── Módulo Usuarios ── */
.q-table-usuarios { table-layout:fixed; }
.q-table-usuarios th:nth-child(1), .q-table-usuarios td:nth-child(1) { width:28%; }
.q-table-usuarios th:nth-child(2), .q-table-usuarios td:nth-child(2) { width:14%; }
.q-table-usuarios th:nth-child(3), .q-table-usuarios td:nth-child(3) { width:20%; }
.q-table-usuarios th:nth-child(4), .q-table-usuarios td:nth-child(4) { width:16%; }
.q-table-usuarios th:nth-child(5), .q-table-usuarios td:nth-child(5) { width:auto; }
.q-table-usuarios th:nth-child(6), .q-table-usuarios td:nth-child(6) { width:88px; }
.q-table-usuarios tbody tr { cursor:pointer; }
.usr-cel { display:flex; align-items:center; gap:8px; min-width:0; }
.usr-avatar { width:32px; height:32px; border-radius:8px; background:#F1EAF7; color:#90288C; font-size:12px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.usr-avatar.is-baja { opacity:.45; }
.usr-nombre { font-size:13px; font-weight:700; color:var(--q-text-primary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.usr-correo { font-size:11px; color:var(--q-text-meta); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.usr-ambito { font-size:12px; color:var(--q-text-muted); font-weight:600; }
.chip-rol { max-width:100%; box-sizing:border-box; font-size:11px; overflow:hidden; text-overflow:ellipsis; display:inline-block; }
.q-table-usuarios tbody tr.row-baja { background:#FAFAFC; }
.q-table-usuarios tbody tr.row-baja .usr-nombre { color:var(--q-text-meta); }
.tabla-nota { font-size:12px; color:var(--q-text-meta); line-height:1.5; padding-top:14px; }
.usr-hoja-head { display:flex; align-items:center; gap:12px; margin-bottom:16px; }

/* Carga masiva */
.cm-pasos { display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.cm-paso { display:flex; align-items:flex-start; gap:8px; padding:10px 12px; border:1px solid var(--q-border); border-radius:12px; background:#fff; }
.cm-paso.is-actual { border-color:var(--q-morado); background:var(--q-morado-soft); }
.cm-paso.is-done { background:#FAFAFC; }
.cm-check { width:18px; height:18px; border-radius:50%; border:1.5px solid var(--q-border); display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px; color:#fff; }
.cm-check.is-ok { background:#1E6F3C; border-color:#1E6F3C; }
.cm-check svg { width:12px; height:12px; }
.cm-paso-t { font-size:13px; font-weight:700; color:var(--q-text-primary); }
.cm-paso-s { font-size:12px; color:var(--q-text-meta); margin-top:2px; }
.cm-drop { border:1.5px dashed #D8D5E2; border-radius:14px; padding:26px; text-align:center; cursor:pointer; color:var(--q-text-muted); transition:border-color .12s, background .12s; }
.cm-drop:hover { border-color:var(--q-morado); background:var(--q-morado-soft); }
.cm-drop-t { font-size:13px; font-weight:700; color:var(--q-text-primary); margin-top:8px; }
.cm-drop-s { font-size:12px; color:var(--q-text-meta); margin-top:2px; }
.cm-res { border-radius:14px; padding:14px 16px; }
.cm-res-ok { background:#EAF7EE; border:1px solid #D4EDDA; }
.cm-res-err { background:#FDF1F0; border:1px solid #FADBD8; }
.cm-res-n { font-size:24px; font-weight:800; }
.cm-res-ok .cm-res-n { color:#1E6F3C; }
.cm-res-err .cm-res-n { color:#C0392B; }
.cm-res-l { font-size:12px; font-weight:600; color:var(--q-text-muted); }
.cm-errores { display:flex; flex-direction:column; gap:4px; }
.cm-err { font-size:12px; color:#C0392B; background:#FDF1F0; border-radius:8px; padding:7px 10px; }

.usr-convenios { display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }

.usr-ingreso { font-size:12px; font-weight:600; color:var(--q-text-muted); white-space:nowrap; }
.usr-avatar { border-radius:8px; }

/* Ritmo del módulo Usuarios (igual a la referencia) */
.usr-head { align-items:center; margin-bottom:18px; }
.usr-head .page-subtitle { margin-top:2px; }
.usr-filtros { margin-bottom:24px; gap:12px; }
.usr-filtros .sol-buscar { flex:0 1 260px; }
.usr-filtros > select.form-control { flex:0 1 190px; }

/* Tarjeta de tabla homologada (referencia Solicitudes y convenios) */
.q-card > .tabla-head { padding:20px 20px 16px; }
.q-card > .tabla-head + .table-wrapper .q-table thead th { padding-left:20px; padding-right:20px; }
.q-card > .tabla-head + .table-wrapper .q-table tbody td:first-child { padding-left:20px; }
.q-card > .tabla-head + .table-wrapper .q-table tbody td:last-child { padding-right:20px; }
.q-card > .tabla-head + .table-wrapper .q-table thead th:first-child { padding-left:20px; }
.q-card > .tabla-head + .table-wrapper .q-table thead th:last-child { padding-right:20px; }
.tabla-nota { padding:14px 20px 18px; }
.acciones-cel .tbl-icon-btn { background:#F5F4F8; }
.acciones-cel .tbl-icon-kebab { background:transparent; }
.sla-cell { flex-direction:column; align-items:stretch; gap:4px; }
.sla-head { display:flex; align-items:center; gap:8px; }
.sla-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; background:currentColor; }
.sla-verde .sla-head { color:#1E6F3C; } .sla-ambar .sla-head { color:#B45309; } .sla-rojo .sla-head { color:#C0392B; }
.sla-bar { width:100%; height:4px; border-radius:8px; }

/* ══ TABLAS: un único diseño en todo el prototipo (referencia Solicitudes) ══ */
.data-panel { background:#fff; border:1px solid var(--q-border); box-shadow:var(--q-shadow-card); padding:20px; border-radius:14px; }
.data-panel > .table-wrapper:last-child, .data-panel > .tabla-head + .table-wrapper:last-child { margin:0 -20px -20px; }
.data-panel > .tabla-head { padding:0 0 14px; }
.q-card > .tabla-head + .table-wrapper { margin:0; }

.q-table { width:100%; border-collapse:collapse; background:#fff; }
.q-table thead th { padding:11px 16px; background:#FAFAFC; border-bottom:1px solid var(--q-border-2); border-top:1px solid var(--q-border-2); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.7px; color:var(--q-text-meta); text-align:left; }
.q-table tbody td { padding:13px 16px; font-size:12px; font-weight:500; color:var(--q-text-body); vertical-align:middle; border-bottom:1px solid var(--q-divider); }
.q-table tbody tr { border:none; }
.q-table tbody tr:last-child td { border-bottom:none; }
.q-table tbody tr:hover { background:var(--q-row-hover); }
.q-table tbody td:first-child, .q-table thead th:first-child { padding-left:20px; }
.q-table tbody td:last-child, .q-table thead th:last-child { padding-right:20px; }
.q-table .cell-main, .q-table .cell-main-sm, .q-table tbody td:first-child > .fw-600, .q-table tbody td:first-child > .tbl-link { font-size:13px; font-weight:700; color:var(--q-text-primary); cursor:pointer; }
.q-table .cell-meta { font-size:11px; font-weight:500; color:var(--q-text-meta); margin-top:2px; }
.q-table .chip { font-size:11px; font-weight:600; padding:4px 10px; }
.q-table td.ta-right, .q-table th.ta-right, .q-table td.col-acciones, .q-table th.col-acciones { text-align:right; }

/* Color de estatus homologado en barras, chips y semáforos */
.bar-gris   { background:#5B5B6B !important; }
.bar-ambar  { background:#B45309 !important; }
.bar-rojo   { background:#C0392B !important; }
.bar-morado { background:#90288C !important; }
.bar-teal   { background:#00758A !important; }
.bar-verde  { background:#1E6F3C !important; }
.status-card-gris   { border-color:#E8E6EF; } .status-card-gris .kpi-num   { color:#5B5B6B; }
.status-card-ambar  { border-color:#FEF3CD; } .status-card-ambar .kpi-num  { color:#B45309; }
.status-card-rojo   { border-color:#FADBD8; } .status-card-rojo .kpi-num   { color:#C0392B; }
.status-card-teal   { border-color:#E0F4F8; } .status-card-teal .kpi-num   { color:#00758A; }
.status-card-verde  { border-color:#D4EDDA; } .status-card-verde .kpi-num  { color:#1E6F3C; }
.status-card-morado { border-color:#E4DAEE; } .status-card-morado .kpi-num { color:#90288C; }
.kpi-num-teal { color:#00758A; } .kpi-num-ambar { color:#B45309; } .kpi-num-rojo { color:#C0392B; }
.kpi-num-verde { color:#1E6F3C; } .kpi-num-morado { color:#90288C; } .kpi-num-gris { color:#5B5B6B; }

/* ── SLA con más presencia: punto + texto en color y pista teñida ── */
.sla-cell { display:flex; flex-direction:column; align-items:stretch; gap:4px; min-width:150px; }
.sla-head { display:flex; align-items:center; gap:8px; }
.sla-text { font-size:12px; font-weight:700; white-space:nowrap; }
.sla-bar { width:100%; height:4px; border-radius:8px; overflow:hidden; }
.sla-fill { height:100%; border-radius:8px; }
.sla-verde .sla-bar { background:#D4EDDA; } .sla-verde .sla-fill { background:#1E6F3C; } .sla-verde .sla-text, .sla-verde .sla-dot { color:#1E6F3C; }
.sla-ambar .sla-bar { background:#FEF3CD; } .sla-ambar .sla-fill { background:#B45309; } .sla-ambar .sla-text, .sla-ambar .sla-dot { color:#B45309; }
.sla-rojo  .sla-bar { background:#FADBD8; } .sla-rojo  .sla-fill { background:#C0392B; } .sla-rojo  .sla-text, .sla-rojo  .sla-dot { color:#C0392B; }
.sla-dot { width:7px; height:7px; border-radius:50%; background:currentColor; flex-shrink:0; }

/* Chips de estatus con más color y cuerpo */
.q-table .chip, .chip { font-size:11px; font-weight:700; padding:5px 11px; letter-spacing:.005em; }
.chip-gris   { background:#F1F1F4; color:#5B5B6B; }
.chip-ambar  { background:#FEF3CD; color:#B45309; }
.chip-rojo   { background:#FADBD8; color:#C0392B; }
.chip-morado { background:#EFE3F6; color:#90288C; }
.chip-teal   { background:#E0F4F8; color:#00758A; }
.chip-verde  { background:#D4EDDA; color:#1E6F3C; }
.row-sla-verde { border-left:3px solid #1E6F3C; } .row-sla-ambar { border-left:3px solid #B45309; } .row-sla-rojo { border-left:3px solid #C0392B; }

/* SLA: especificidad alineada al bloque original */
.sla-cell .sla-bar { height:4px; border-radius:8px; overflow:hidden; width:100%; }
.sla-cell .sla-text { font-size:12px; font-weight:600; }
.sla-cell.sla-verde .sla-bar { background:#D4EDDA; } .sla-cell.sla-verde .sla-fill { background:#1E6F3C; }
.sla-cell.sla-ambar .sla-bar { background:#FEF3CD; } .sla-cell.sla-ambar .sla-fill { background:#B45309; }
.sla-cell.sla-rojo  .sla-bar { background:#FADBD8; } .sla-cell.sla-rojo  .sla-fill { background:#C0392B; }
.sla-cell.sla-verde .sla-text, .sla-cell.sla-verde .sla-dot { color:#1E6F3C; }
.sla-cell.sla-ambar .sla-text, .sla-cell.sla-ambar .sla-dot { color:#B45309; }
.sla-cell.sla-rojo  .sla-text, .sla-cell.sla-rojo  .sla-dot { color:#C0392B; }

/* Tabla de notificaciones */
.q-table-notifs { table-layout:fixed; }
.q-table-notifs th:nth-child(2), .q-table-notifs td:nth-child(2) { width:auto; }
.q-table-notifs th:nth-child(3), .q-table-notifs td:nth-child(3) { width:140px; }
.q-table-notifs th:nth-child(4), .q-table-notifs td:nth-child(4) { width:110px; }
.q-table-notifs tbody td { vertical-align:top; }
.notif-evento { font-size:13px; font-weight:700; color:var(--q-text-primary); line-height:1.35; }
.notif-linea { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:4px; }
.notif-linea .tbl-link { font-size:12px; font-weight:700; }
.notif-linea .cell-meta { margin:0; }
.q-table-notifs .cell-meta { font-size:11px; color:var(--q-text-meta); }
.notif-punto { display:inline-block; width:8px; height:8px; border-radius:50%; margin-top:5px; }

/* Filtros de notificaciones: en línea con el rango, dentro de la tarjeta */
.notif-head { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:16px 20px; }
.notif-filtros { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.notif-filtros > select.form-control { flex:0 1 190px; min-width:170px; }

/* Filtros de notificaciones siempre en un solo renglón */
.notif-head { flex-wrap:nowrap; align-items:center; }
.notif-filtros { flex-wrap:nowrap; flex:1 1 auto; min-width:0; }
.notif-filtros > select.form-control { flex:0 1 190px; min-width:150px; }
.notif-head .tabla-head-right { flex:0 0 auto; }
@media (max-width:720px) { .notif-head { flex-wrap:wrap; } .notif-filtros { flex-wrap:wrap; } }

/* Densidad de tablas: menos aire entre borde y contenido */
.q-card > .tabla-head { padding:16px 16px 12px; }
.notif-head { padding:12px 16px; }
.q-table thead th { padding:9px 12px; }
.q-table tbody td { padding:11px 12px; }
.q-table thead th:first-child, .q-table tbody td:first-child { padding-left:16px; }
.q-table thead th:last-child, .q-table tbody td:last-child { padding-right:16px; }
.q-card > .tabla-head + .table-wrapper .q-table thead th { padding-left:12px; padding-right:12px; }
.q-card > .tabla-head + .table-wrapper .q-table thead th:first-child, .q-card > .tabla-head + .table-wrapper .q-table tbody td:first-child { padding-left:16px; }
.q-card > .tabla-head + .table-wrapper .q-table thead th:last-child, .q-card > .tabla-head + .table-wrapper .q-table tbody td:last-child { padding-right:16px; }
.data-panel { padding:16px; }
.data-panel > .table-wrapper:last-child, .data-panel > .tabla-head + .table-wrapper:last-child { margin:0 -16px -16px; }
.tabla-nota { padding:12px 16px 14px; }
.q-table-usuarios th:nth-child(6), .q-table-usuarios td:nth-child(6) { width:76px; }
.acciones-cel { gap:4px; }
.tbl-icon-btn { width:28px; height:28px; }

/* Notificaciones de prioridad alta: fila teñida, sin barra lateral */
.q-table-notifs tbody tr.row-alta { background:#FADBD8; border-left:none; }
.q-table-notifs tbody tr.row-alta:hover { background:#FADBD8; }
.q-table-notifs td:first-child { width:34px; padding-left:16px; padding-right:0; }
.q-table-notifs .notif-punto { background:#90288C !important; width:7px; height:7px; }
.q-table-notifs th:last-child { text-align:right; }
.q-table-notifs tbody td { padding-top:12px; padding-bottom:12px; }

/* Tablas a sangre con la tarjeta: sin margen extra a los lados */
.q-card > .table-wrapper, .q-card > .tabla-head + .table-wrapper, .q-card .table-wrapper { margin:0; }
.q-table thead th:first-child, .q-table tbody td:first-child { padding-left:12px; }
.q-table thead th:last-child, .q-table tbody td:last-child { padding-right:12px; }
.q-card > .tabla-head + .table-wrapper .q-table thead th:first-child, .q-card > .tabla-head + .table-wrapper .q-table tbody td:first-child { padding-left:12px; }
.q-card > .tabla-head + .table-wrapper .q-table thead th:last-child, .q-card > .tabla-head + .table-wrapper .q-table tbody td:last-child { padding-right:12px; }
.q-table-notifs td:first-child, .q-table-notifs th:first-child { width:26px; padding-left:12px; padding-right:0; }
.q-table-notifs th:first-child { background:#FAFAFC; }

/* Solo la bandeja de notificaciones va a sangre dentro de su tarjeta */
.q-card > .notif-head { padding:14px 0; margin-left:0; margin-right:0; }
.notif-head { padding:14px 32px; }
.q-card > .table-wrapper .q-table-notifs { width:calc(100% + 64px); margin:0 -32px; }
.q-table-notifs th:first-child, .q-table-notifs td:first-child { padding-left:32px; width:52px; }
.q-table-notifs th:last-child, .q-table-notifs td:last-child { padding-right:32px; }

/* ── Métricas homologadas: número y etiqueta en un renglón, etiqueta máx. 2 líneas ── */
.kpi-card { padding:16px 18px 14px; }
.kpi-top { display:flex; align-items:center; gap:12px; min-width:0; }
.kpi-num { font-size:40px; line-height:1; margin:0; flex:0 0 auto; letter-spacing:-.02em; font-variant-numeric:tabular-nums; white-space:nowrap; }
.kpi-label { font-size:13px; font-weight:600; color:var(--q-text-primary); line-height:1.28; min-width:0;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; overflow-wrap:break-word; }
.kpi-link { margin-top:10px; font-size:12px; }
.status-card .kpi-top { align-items:center; }
.status-card .status-card-title { margin:0; font-size:13px; font-weight:600; color:var(--q-text-primary); line-height:1.28; min-width:0;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.status-card { padding:14px 16px; }
.status-card .kpi-link { margin-top:8px; }
@media(max-width:1280px) { .kpi-num { font-size:24px; } }

/* Métricas: la etiqueta nunca se recorta — baja de renglón si falta ancho */
.kpi-top { flex-wrap:wrap; row-gap:4px; }
.kpi-num { font-size:24px; }
.kpi-label { flex:1 1 130px; font-size:13px; overflow-wrap:normal; word-break:normal; hyphens:none; }
.status-card .status-card-title { flex:1 1 120px; overflow-wrap:normal; word-break:normal; }
.status-card .kpi-num { font-size:24px !important; }
@media(max-width:1280px) { .kpi-num { font-size:24px; } }

/* ── Nueva solicitud · paso 1: origen + tipo de convenio ── */
.paso-bloque { margin-bottom:28px; }
.paso-bloque:last-child { margin-bottom:0; }
.paso-head { display:flex; align-items:flex-start; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
.paso-head > div:first-of-type { min-width:0; flex:1 1 auto; }
.paso-num { flex:0 0 auto; width:22px; height:22px; border-radius:50%; background:var(--q-morado); color:#fff; font-size:12px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; margin-top:1px; }
.paso-title { font-size:14px; font-weight:700; color:var(--q-text-primary); letter-spacing:-.01em; }
.paso-sub { font-size:12px; color:var(--q-text-secondary); margin-top:2px; }
.paso-head .wiz-buscar { flex:0 1 280px; }

.origen-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px; }
.origen-card { display:flex; flex-direction:column; align-items:flex-start; gap:8px; text-align:left;
  background:#fff; border:1px solid var(--q-border); border-radius:14px; padding:14px 16px; width:100%;
  transition:border-color .12s, box-shadow .12s, background .12s; }
.origen-card:hover { border-color:var(--q-morado); box-shadow:0 4px 14px rgba(144,40,140,.10); }
.origen-card.is-sel { border-color:var(--q-morado); background:rgba(144,40,140,.035); box-shadow:0 0 0 1px var(--q-morado) inset; }
.origen-card-head { display:flex; align-items:center; gap:8px; width:100%; }
.origen-card-title { font-size:13px; font-weight:700; color:var(--q-text-primary); flex:1 1 auto; min-width:0; }
.origen-card-ic { color:var(--q-text-meta); flex:0 0 auto; display:inline-flex; }
.origen-card.is-sel .origen-card-ic { color:var(--q-morado); }
.origen-radio { flex:0 0 auto; width:17px; height:17px; border-radius:50%; border:1.5px solid var(--q-border-2);
  display:inline-flex; align-items:center; justify-content:center; color:#fff; background:#fff; }
.origen-radio svg { width:11px; height:11px; }
.origen-card.is-sel .origen-radio { background:var(--q-morado); border-color:var(--q-morado); }
.origen-card-desc { font-size:12px; color:var(--q-text-secondary); line-height:1.45; }
.origen-card-chip { align-self:flex-start; }

.conv-grupo { margin-top:18px; }
.conv-grupo:first-child { margin-top:0; }
.conv-grupo-head { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.conv-grupo-title { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.7px; color:var(--q-text-meta); }
.conv-grupo-count { font-size:11px; font-weight:700; color:var(--q-text-secondary); background:var(--q-bg-body); border:1px solid var(--q-border); border-radius:999px; padding:1px 8px; }
.conv-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:12px; }
.conv-card { display:flex; align-items:flex-start; gap:12px; text-align:left; width:100%;
  background:#fff; border:1px solid var(--q-border); border-radius:14px; padding:14px 16px;
  transition:border-color .12s, box-shadow .12s, background .12s; }
.conv-card:hover { border-color:var(--q-morado); box-shadow:0 4px 14px rgba(144,40,140,.10); }
.conv-card.is-sel { border-color:var(--q-morado); background:rgba(144,40,140,.035); box-shadow:0 0 0 1px var(--q-morado) inset; }
.conv-card-icon { flex:0 0 auto; width:34px; height:34px; border-radius:12px; background:var(--q-morado-soft); color:var(--q-morado);
  display:inline-flex; align-items:center; justify-content:center; }
.conv-card-main { display:flex; flex-direction:column; gap:4px; min-width:0; flex:1 1 auto; }
.conv-card-title { font-size:13px; font-weight:700; color:var(--q-text-primary); }
.conv-card-desc { font-size:12px; color:var(--q-text-secondary); line-height:1.45; }
.conv-card-chev { flex:0 0 auto; color:var(--q-text-meta); display:inline-flex; align-items:center; margin-top:8px; }
.conv-card.is-sel .conv-card-chev { color:var(--q-morado); }

/* Métricas más compactas y del mismo tamaño en todos los dashboards */
.kpi-row, .kpi-row-3, .kpi-row-4 { grid-template-columns:repeat(auto-fill,minmax(238px,264px)); justify-content:start; }
@media(max-width:1100px) { .kpi-row, .kpi-row-3, .kpi-row-4 { grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); } }
@media(max-width:560px) { .kpi-row, .kpi-row-3, .kpi-row-4 { grid-template-columns:minmax(0,1fr); } }
.kpi-card { padding:14px 16px 12px; }
.kpi-num { font-size:40px; }
.kpi-link { margin-top:8px; }
.status-grid { grid-template-columns:repeat(auto-fill,minmax(210px,240px)); justify-content:start; }

/* Notificaciones: sin fondo rojo ni columna de puntos */
.q-table-notifs tbody tr.row-alta, .q-table-notifs tbody tr.row-alta:hover { background:transparent; }
.q-table-notifs tbody tr.row-alta:hover { background:var(--q-row-hover); }
.q-table-notifs th:nth-child(1), .q-table-notifs td:nth-child(1) { width:auto; padding-left:12px; padding-right:12px; }
.q-table-notifs th:nth-child(2), .q-table-notifs td:nth-child(2) { width:140px; }
.q-table-notifs th:nth-child(3), .q-table-notifs td:nth-child(3) { width:110px; }
.q-table-notifs th:first-child, .q-table-notifs td:first-child { padding-left:32px; width:auto; }

/* ── Línea de tiempo del asistente: paso actual y completados en morado ── */
.wiz-progress-bar { padding:16px 20px; align-items:center; }
.wiz-progress-step { gap:8px; }
.wiz-progress-dot { width:26px; height:26px; border:1.5px solid var(--q-border-2); background:#fff;
  color:var(--q-text-meta); font-size:12px; font-weight:700; box-shadow:none; }
.wiz-progress-dot.active { background:var(--q-morado); border-color:var(--q-morado); color:#fff; box-shadow:none; }
.wiz-progress-dot.done { background:var(--q-morado); border-color:var(--q-morado); color:#fff; }
.wiz-progress-step span { font-size:13px; font-weight:500; color:var(--q-text-secondary); }
.wiz-progress-step span.fw-700 { color:var(--q-morado); font-weight:700; }
.wiz-progress-line { height:1.5px; background:var(--q-border); margin:0 14px; }
.wiz-progress-line.done { background:var(--q-morado); }

/* ── Métricas de notificaciones: pills filtrables ── */
.notif-metricas { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.notif-pill { display:inline-flex; align-items:center; gap:8px; padding:8px 14px; background:#fff;
  border:1px solid var(--q-border); border-radius:12px; transition:border-color .12s, box-shadow .12s, background .12s; }
.notif-pill:hover { border-color:var(--q-morado); }
.notif-pill.is-activo { border-color:var(--q-morado); box-shadow:0 0 0 1px var(--q-morado) inset; }
.notif-pill-num { font-size:14px; font-weight:800; line-height:1; font-variant-numeric:tabular-nums; }
.notif-pill-label { font-size:13px; font-weight:600; color:var(--q-text-secondary); white-space:nowrap; }
.notif-pill.is-activo .notif-pill-label { color:var(--q-text-primary); }

/* Cabecera de la bandeja: sin traslapes, baja de renglón si falta ancho */
.notif-head { flex-wrap:wrap; row-gap:8px; }
.notif-filtros { flex-wrap:wrap; min-width:0; }
.notif-filtros > select.form-control { flex:1 1 170px; min-width:0; max-width:220px; }
.notif-head .tabla-head-right { flex:0 0 auto; margin-left:auto; }

/* ══ KPI cards · especificación Quálitas CLM ══ */
.kpi-row, .kpi-row-3, .kpi-row-4 { display:grid; grid-template-columns:repeat(auto-fill,minmax(216px,1fr)); gap:16px; justify-content:stretch; }
.status-grid { grid-template-columns:repeat(auto-fill,minmax(216px,1fr)); justify-content:stretch; }
.kpi-card {
  display:flex; flex-direction:column; align-items:flex-start; text-align:left;
  background:#FFFFFF; border:1px solid #E8E6EF; border-top:4px solid #90288C; border-radius:14px;
  box-shadow:0 2px 12px rgba(144,40,140,.06); padding:14px 18px 12px; cursor:pointer;
  transition:border-color .15s, box-shadow .15s, transform .15s; width:100%;
}
.kpi-card::before { content:none; }
.kpi-card:hover { box-shadow:0 8px 22px rgba(144,40,140,.13); transform:translateY(-2px); }
.kpi-card-morado { border-top-color:#90288C; } .kpi-card-teal { border-top-color:#00758A; }
.kpi-card-verde  { border-top-color:#1E6F3C; } .kpi-card-rojo  { border-top-color:#C0392B; }
.kpi-card-ambar  { border-top-color:#B45309; } .kpi-card-gris  { border-top-color:#5B5B6B; }
.kpi-top { display:flex; align-items:baseline; gap:8px; width:100%; flex-wrap:nowrap; }
.kpi-num { min-width:52px; font-size:40px; font-weight:800; letter-spacing:-1.6px; line-height:1; margin:0;
  font-variant-numeric:tabular-nums; flex:0 0 auto; white-space:nowrap; }
.kpi-label { flex:1 1 auto; min-width:0; font-size:13px; font-weight:500; color:#3F3F51; line-height:1.3; text-wrap:pretty;
  display:block; -webkit-line-clamp:none; overflow:visible; }
.kpi-link { margin-top:auto; padding-top:10px; display:flex; align-items:center; gap:4px;
  font-size:12px; font-weight:600; color:#00758A; }
.kpi-link-ic { flex:0 0 auto; }
@media(max-width:520px) { .kpi-row, .kpi-row-3, .kpi-row-4, .status-grid { grid-template-columns:minmax(0,1fr); } }

/* Status cards con el mismo lenguaje */
.status-card { display:flex; flex-direction:column; align-items:flex-start; text-align:left; background:#fff;
  border:1px solid #E8E6EF; border-top:4px solid #90288C; border-left:1px solid #E8E6EF; border-radius:14px; padding:14px 18px 12px; }
.status-card-gris { border-top-color:#5B5B6B; } .status-card-ambar { border-top-color:#B45309; }
.status-card-rojo { border-top-color:#C0392B; } .status-card-teal  { border-top-color:#00758A; }
.status-card-verde { border-top-color:#1E6F3C; } .status-card-morado { border-top-color:#90288C; }
.status-card .kpi-top { align-items:baseline; }
.status-card .kpi-num { font-size:40px !important; min-width:44px; letter-spacing:-1.2px; }
.status-card .status-card-title { font-size:13px; font-weight:500; color:#3F3F51; line-height:1.3; text-wrap:pretty;
  display:block; overflow:visible; margin:0; flex:1 1 auto; min-width:0; }

/* Variante "por tipo" */
.tipo-card { display:flex; flex-direction:column; align-items:flex-start; text-align:left; gap:8px;
  border:1px solid #E8E6EF; border-radius:12px; padding:14px 15px; background:#fff; box-shadow:none;
  transition:border-color .15s, box-shadow .15s; cursor:pointer; }
.tipo-card:hover { border-color:#C4A8D8; box-shadow:0 4px 14px rgba(144,40,140,.08); }
.tipo-card-head { display:flex; align-items:center; gap:8px; width:100%; min-width:0; }
.tipo-card-icon { flex:0 0 auto; width:26px; height:26px; border-radius:8px; background:#F1EAF7; color:#90288C;
  display:inline-flex; align-items:center; justify-content:center; }
.tipo-card-title { font-size:12px; font-weight:500; color:#3F3F51; line-height:1.3; min-width:0; }
.tipo-card-num { display:flex; align-items:baseline; gap:8px; font-size:40px; font-weight:800; letter-spacing:-1.6px;
  line-height:1; color:#1C1C2E; font-variant-numeric:tabular-nums; }
.tipo-card-pct { font-size:11px; font-weight:500; color:#6B7280; letter-spacing:0; }

/* Métricas sin listado asociado: contenido equilibrado en la altura de la fila */
.kpi-card:not(.kpi-clickable) { justify-content:flex-start; padding:14px 18px 12px; cursor:default; }
.kpi-card:not(.kpi-clickable)::after { content:''; display:block; margin-top:auto; padding-top:10px; height:15px; }
.kpi-card:not(.kpi-clickable):hover { box-shadow:0 2px 12px rgba(144,40,140,.06); transform:none; border-color:#E8E6EF; }
.kpi-top { align-items:baseline; }
.kpi-num { display:inline-flex; align-items:baseline; gap:4px; }
.kpi-label { padding-top:2px; }
.status-card { justify-content:flex-start; }

/* La cifra siempre a escala 1: la animación no debe dejar transform residual */
.kpi-num { animation:none; transform:none; }
.kpi-card, .status-card { align-items:flex-start; justify-content:flex-start; }

/* Texto de campos y filtros más suave en todo el prototipo */
.form-control, .sol-select-btn, .periodo-btn { font-weight:400; color:#3F3F51; }
.form-control::placeholder { color:#9CA3AF; font-weight:400; }
select.form-control { font-weight:400; color:#3F3F51; }
.sol-select-btn { color:#3F3F51; }
.form-label, .filtro-label { font-weight:500; color:#6B7280; }

/* ── Tablas a todo el ancho de su tarjeta: se aprovecha el espacio lateral ── */
.q-card:has(> .table-wrapper) { padding-left:0; padding-right:0; }
.q-card:has(> .table-wrapper) > *:not(.table-wrapper):not(.tabla-head):not(.notif-head) { padding-left:16px; padding-right:16px; }
.q-card > .tabla-head { padding:16px 16px 12px; margin:0; }
.q-card > .table-wrapper { margin:0; }
.q-table thead th:first-child, .q-table tbody td:first-child { padding-left:16px; }
.q-table thead th:last-child, .q-table tbody td:last-child { padding-right:16px; }
.q-card > .tabla-head + .table-wrapper .q-table thead th:first-child,
.q-card > .tabla-head + .table-wrapper .q-table tbody td:first-child { padding-left:16px; }
.q-card > .tabla-head + .table-wrapper .q-table thead th:last-child,
.q-card > .tabla-head + .table-wrapper .q-table tbody td:last-child { padding-right:16px; }
.tabla-nota { padding:12px 16px 14px; }

/* Bandeja de notificaciones: se alinea al mismo criterio */
.q-card > .notif-head, .notif-head { padding:14px 16px; }
.q-card > .table-wrapper .q-table-notifs { width:100%; margin:0; }
.q-table-notifs th:first-child, .q-table-notifs td:first-child { padding-left:16px; width:auto; }
.q-table-notifs th:last-child, .q-table-notifs td:last-child { padding-right:16px; }

/* ── Detalle de convenio: jerarquía clara entre bloque, etiqueta y dato ── */
.q-card > .data-panel-title, .q-card > .form-section-title { padding-bottom:12px; margin-bottom:16px; border-bottom:1px solid var(--q-divider); }
.data-panel-title, .form-section-title { font-size:13px; font-weight:800; letter-spacing:.02em; color:var(--q-text-primary); }
.data-field-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.7px; color:#6B7280; margin-bottom:5px; }
.data-field-value { font-size:14px; font-weight:600; color:#1C1C2E; line-height:1.4; text-wrap:pretty; }
.data-grid { row-gap:20px; column-gap:24px; }
.data-grid > div { min-width:0; }
.dato-vacio { font-size:13px; font-weight:500; color:#6B7280; }

/* Módulo de usuarios: mismo lenguaje de tabla que el resto */
.usr-filtros { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:20px; }
.usr-filtros .sol-buscar { flex:0 1 260px; }
.usr-filtros > select.form-control { flex:0 1 190px; }
.usr-nombre { font-size:13px; font-weight:700; color:var(--q-text-primary); }
.usr-correo { font-size:12px; font-weight:400; color:var(--q-text-meta); margin-top:2px; }
.usr-ambito { font-size:13px; font-weight:400; color:var(--q-text-body); }
.usr-ingreso { font-size:13px; font-weight:400; color:var(--q-text-body); font-variant-numeric:tabular-nums; }
.q-table-usuarios tbody td { padding-top:12px; padding-bottom:12px; }
.q-table-usuarios tbody tr.row-baja { opacity:.72; }

/* ── Modal de detalle de usuario ── */
.modal-usr { max-width:600px; padding:0; overflow:hidden; }
.modal-usr .usr-hoja-head { display:flex; align-items:center; gap:12px; padding:18px 24px; border-bottom:1px solid var(--q-divider); }
.usr-hoja-nombre { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:16px; font-weight:700; color:var(--q-text-primary); letter-spacing:-.01em; }
.usr-hoja-meta { font-size:12px; font-weight:400; color:var(--q-text-secondary); margin-top:3px; }
.modal-x { margin-left:auto; flex:0 0 auto; width:30px; height:30px; border-radius:8px; color:var(--q-text-meta);
  display:inline-flex; align-items:center; justify-content:center; transition:background .12s, color .12s; }
.modal-x:hover { background:var(--q-bg-body); color:var(--q-text-primary); }
.usr-hoja-body { padding:20px 24px 4px; max-height:min(62vh,560px); overflow:auto; }
.usr-bloque { margin-bottom:22px; }
.usr-bloque-title { font-size:13px; font-weight:800; color:var(--q-text-primary); padding-bottom:10px; margin-bottom:14px; border-bottom:1px solid var(--q-divider); }
.usr-hoja-body .data-grid { row-gap:16px; column-gap:24px; }
.usr-convenios { display:flex; flex-wrap:wrap; gap:4px; margin-top:14px; }
.usr-hoja-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 24px; border-top:1px solid var(--q-divider); margin:0; }

.mas-acciones { position:relative; }
.mas-acciones > summary { list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:4px;
  font-size:13px; font-weight:600; color:var(--q-text-secondary); padding:8px 4px; }
.mas-acciones > summary::-webkit-details-marker { display:none; }
.mas-acciones > summary:hover { color:var(--q-morado); }
.mas-acciones-menu { position:absolute; bottom:calc(100% + 6px); left:0; z-index:5; min-width:230px;
  background:#fff; border:1px solid var(--q-border); border-radius:12px; box-shadow:0 12px 30px rgba(16,24,40,.14); padding:6px; display:flex; flex-direction:column; }
.mas-acciones-item { text-align:left; padding:9px 12px; border-radius:8px; font-size:13px; font-weight:500; color:var(--q-text-body); }
.mas-acciones-item:hover { background:var(--q-bg-body); color:var(--q-text-primary); }
.mas-acciones-item.is-rojo { color:#C0392B; }
.mas-acciones-item.is-rojo:hover { background:#FADBD8; }

/* ── Detalle de solicitud en revisión: contenido + panel de resolución ── */
.det-layout { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:20px; align-items:start; }
.det-layout.sin-side { grid-template-columns:minmax(0,1fr); }
.det-main { min-width:0; }
.det-side { display:flex; flex-direction:column; gap:16px; position:sticky; top:84px; }
.det-side-card { padding:16px 18px; margin:0; }
.det-side-title { font-size:13px; font-weight:800; color:var(--q-text-primary); margin-bottom:14px; }
.det-acciones { display:flex; flex-direction:column; gap:8px; }
.det-accion { width:100%; justify-content:center; }
.det-timeline { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; position:relative; }
.det-timeline-item { display:flex; gap:12px; position:relative; }
.det-timeline-item:not(:last-child)::before { content:''; position:absolute; left:4.5px; top:14px; bottom:-16px; width:1px; background:var(--q-divider); }
.det-timeline-dot { flex:0 0 auto; width:10px; height:10px; border-radius:50%; margin-top:4px; background:#5B5B6B; }
.det-timeline-dot.dot-verde { background:#1E6F3C; } .det-timeline-dot.dot-rojo { background:#C0392B; }
.det-timeline-dot.dot-morado { background:#90288C; } .det-timeline-dot.dot-teal { background:#00758A; }
.det-timeline-dot.dot-ambar { background:#B45309; } .det-timeline-dot.dot-gris { background:#6B7280; }
.det-timeline-body { min-width:0; }
.det-timeline-title { font-size:13px; font-weight:700; color:var(--q-text-primary); line-height:1.35; }
.det-timeline-meta { font-size:12px; font-weight:400; color:var(--q-text-secondary); margin-top:2px; }
.det-timeline-fecha { font-size:11px; font-weight:400; color:var(--q-text-meta); margin-top:2px; font-variant-numeric:tabular-nums; }
@media(max-width:1080px) { .det-layout { grid-template-columns:minmax(0,1fr); } .det-side { position:static; } }

/* Encabezado del detalle: folio y contexto fuera de la tarjeta */
.det-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:18px; }
.det-head-main { min-width:0; flex:1 1 380px; }
.det-head .page-title { margin:0; }
.det-head .page-subtitle { margin-top:4px; }
.det-head-meta { font-size:12px; font-weight:400; color:var(--q-text-meta); margin-top:8px; }
.det-head-side { display:flex; flex-direction:column; align-items:flex-end; gap:8px; flex:0 0 auto; min-width:190px; }
.det-head-chips { display:flex; flex-wrap:wrap; gap:4px; justify-content:flex-end; }
.det-head-sla { width:190px; }
@media(max-width:720px) { .det-head-side { align-items:flex-start; } .det-head-chips { justify-content:flex-start; } }

/* Limpiar filtros: pill propia debajo de la fila de filtros */
.sol-limpiar { margin-top:10px; }
.btn-limpiar { height:36px; padding:0 16px; background:#fff; border:1px solid var(--q-border); border-radius:999px;
  font-size:13px; font-weight:600; color:var(--q-text-body); box-shadow:0 1px 2px rgba(16,24,40,.04);
  transition:border-color .12s, color .12s, background .12s; }
.btn-limpiar:hover { border-color:var(--q-morado); color:var(--q-morado); background:var(--q-morado-soft); }

.btn.btn-limpiar { height:36px; min-height:36px; }

/* Placeholders: único uso permitido de #9CA3AF */
.form-control::placeholder { color:#9CA3AF; font-weight:400; }
/* El morado deja de usarse como color de estatus */
.chip-morado.chip-estado, .status-card-morado .status-card-title { color:var(--q-teal-dark); }

/* Contraste ≥ 4.5:1 verificado sobre fondo real */
.link-teal, .kpi-link, .tbl-link.link-teal { color:var(--q-teal-dark); }
.kpi-link-ic { color:currentColor; }
.chip-rojo { background:#FDECEA; color:#A82F22; }
.chip-verde { background:#D4EDDA; color:#1A6135; }
.chip-ambar { background:#FEF3CD; color:#8F4208; }
.chip-teal { background:#E0F4F8; color:#00647A; }
.chip-gris { background:#F1F1F4; color:#4F4F5E; }
.page-subtitle, .det-head .page-subtitle { color:var(--q-text-body); }
.cell-meta, .hint-text, .tabla-head-rango, .det-timeline-fecha, .usr-correo, .dato-vacio { color:#6B7280; }

/* Teal de texto e íconos pequeños: siempre --q-teal-dark */
.tabla-head-badge, .seg-count, .chip-teal, .sla-text, .tbl-icon-teal, .btn-outline-teal { color:var(--q-teal-dark); }
.tabla-head-badge { background:var(--q-teal-soft); }
.breadcrumb-sep { color:#6B7280; }

/* Textos sobre fondos grises: mínimo #3F3F51 para cumplir 4.5:1 */
.breadcrumb-sep { color:var(--q-text-body); }
.auth-panel-izq .hint-text, .auth-panel-izq p, .auth-copy, .auth-legal { color:#3F3F51; }

/* ═══ ESCALA TIPOGRÁFICA Y JERARQUÍA POR PESO (portal Comercial) ═══
   11 microtexto/headers · 12 apoyo/labels/badges · 13 cuerpo · 14 cuerpo
   destacado · 16 subtítulos · 18 títulos de sección y modal · 24 título de
   página · 40 solo cifras KPI. Pesos: 400–500 cuerpo, 600 énfasis/labels,
   700 títulos, 800 solo cifras KPI. */
.page-title { font-size:24px; font-weight:700; letter-spacing:-.02em; }
.page-subtitle { font-size:14px; font-weight:400; }
.modal-title, .form-section-title { font-size:18px; font-weight:700; }
.data-panel-title, .tabla-head-title, .det-side-title, .usr-bloque-title, .paso-title, .conv-card-title, .usr-hoja-nombre { font-size:16px; font-weight:700; }
.paso-sub, .conv-card-desc, .usr-hoja-meta, .det-head-meta { font-size:12px; font-weight:400; }

.q-table thead th { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.7px; }
.q-table tbody td { font-size:13px; font-weight:400; }
.q-table .cell-main, .q-table .cell-main-sm, .q-table tbody td:first-child > .fw-600, .q-table tbody td:first-child > .tbl-link,
.usr-nombre, .notif-evento, .det-timeline-title { font-size:14px; font-weight:600; }
.cell-meta, .hint-text, .usr-correo, .det-timeline-fecha, .tabla-head-rango, .dato-vacio, .notif-linea .cell-meta { font-size:11px; font-weight:400; }
.usr-ambito, .usr-ingreso, .det-timeline-meta { font-size:13px; font-weight:400; }
.chip, .q-table .chip, .tabla-head-badge, .seg-count, .conv-grupo-count { font-size:12px; font-weight:600; }
.q-table .chip { padding:4px 10px; }

.form-label, .filtro-label, .data-field-label { font-size:12px; font-weight:600; }
.data-field-label { font-size:11px; letter-spacing:.7px; }
.data-field-value { font-size:14px; font-weight:500; }
.form-control, .sol-select-btn, .periodo-btn, select.form-control { font-size:13px; font-weight:400; }
.btn { font-size:13px; font-weight:600; }
.btn-lg { font-size:14px; }
.tab-btn, .seg-btn { font-size:13px; font-weight:500; }
.tab-btn.is-activo, .seg-btn.is-activo { font-weight:600; }
.kpi-label, .status-card .status-card-title, .tipo-card-title, .notif-pill-label { font-size:13px; font-weight:500; }
.kpi-link { font-size:12px; font-weight:600; }
.kpi-num, .tipo-card-num { font-size:40px; font-weight:800; }
.status-card .kpi-num { font-size:24px !important; font-weight:800; }
.notif-pill-num { font-size:16px; font-weight:800; }
.tipo-card-pct { font-size:11px; font-weight:400; }
.sla-text { font-size:12px; font-weight:600; }
.wiz-progress-step span { font-size:13px; font-weight:500; }
.wiz-progress-step span.fw-700 { font-weight:600; }
.wiz-progress-dot { font-size:12px; font-weight:600; }
.breadcrumb, .breadcrumb a, .breadcrumb-sep { font-size:12px; font-weight:500; }
.fs-12 { font-size:12px; } .fs-13 { font-size:13px; }
.fw-600 { font-weight:600; } .fw-700 { font-weight:700; }

/* 700 solo en títulos: celdas, datos y utilidades bajan a 600 */
.fw-700, .sb-name, .q-table strong, .q-table b, .cell-meta strong, .hint-text strong, .sla-cell .sla-text { font-weight:600; }
.page-title, .modal-title, .form-section-title, .data-panel-title, .tabla-head-title,
.det-side-title, .usr-bloque-title, .paso-title, .conv-card-title, .usr-hoja-nombre { font-weight:700; }

/* ═══ COMPONENTES: 4 radios, 2 tamaños de botón, targets ≥32px ═══ */
:root {
  --q-radius-input:8px; --q-radius-btn:8px; --q-radius-chip:999px;
  --q-radius-card:14px; --q-radius-inner:12px;
  --q-shadow-card:0 2px 12px rgba(144,40,140,.06);
  --q-shadow-hover:0 8px 22px rgba(144,40,140,.13);
  --q-shadow-modal:0 16px 48px rgba(144,40,140,.18);
}
.chip, .tabla-head-badge, .seg-count, .conv-grupo-count, .btn-limpiar, .notif-pill-num { border-radius:999px; }
.sb-avatar, .user-avatar, .usr-avatar, .avatar { border-radius:999px; }
.q-card, .modal, .kpi-card, .status-card { border-radius:14px; }
.data-panel, .tipo-card, .conv-card, .notif-pill, .doc-item, .mas-acciones-menu, .cal-popover, .menu-fila, .banner-inline { border-radius:12px; }
.form-control, .sol-select-btn, .periodo-btn, .btn, .tbl-icon-btn, .tab-btn, .seg-btn, .tabla-head-nav, .modal-x, .toggle { border-radius:8px; }

/* Botones: un primario, un secundario y dos tamaños */
.btn { height:40px; min-height:40px; padding:0 20px; font-size:13px; font-weight:600; display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.btn-lg, .btn-hero { height:40px; min-height:40px; padding:0 20px; font-size:13px; }
.btn-sm, .btn-compact { height:32px; min-height:32px; padding:0 16px; font-size:12px; font-weight:600; }
.btn-morado, .btn-teal, .btn-primario { background:var(--q-morado); color:#fff; border:none; box-shadow:0 4px 14px rgba(144,40,140,.18); }
.btn-morado:hover, .btn-teal:hover, .btn-primario:hover { background:var(--q-morado-hover); }
.btn-outline-morado, .btn-outline-teal, .btn-outline-rojo, .btn-secundario {
  background:#fff; border:1.5px solid var(--q-morado); color:var(--q-morado); box-shadow:none; }
.btn-outline-morado:hover, .btn-outline-teal:hover, .btn-outline-rojo:hover, .btn-secundario:hover { background:var(--q-morado-soft-3); }
.btn-ghost, .btn-link-secundario { height:40px; min-height:40px; padding:0 12px; color:var(--q-text-body); text-decoration:underline; }
.btn-ghost:hover, .btn-link-secundario:hover { color:var(--q-morado); }
.btn.btn-limpiar { height:32px; min-height:32px; padding:0 16px; font-size:12px; }

/* Click targets */
.tbl-icon-btn, .tabla-head-nav, .modal-x { width:32px; height:32px; min-height:32px; }
.tab-btn, .seg-btn { min-height:32px; }
.mas-acciones > summary, .mas-acciones-item { min-height:32px; display:flex; align-items:center; }
.kpi-link { min-height:32px; }

/* Accesos demo del login */
.auth-demo-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); gap:8px; }
.auth-demo-btn { display:flex; flex-direction:column; align-items:flex-start; gap:4px; text-align:left;
  min-height:32px; padding:8px 12px; border:1px solid var(--q-border); border-radius:8px; background:#fff;
  transition:border-color .15s, box-shadow .15s; }
.auth-demo-btn:hover { border-color:var(--q-morado); box-shadow:0 1px 4px rgba(144,40,140,.12); }
.auth-demo-rol { font-size:12px; font-weight:600; color:var(--q-text-primary); }
.auth-demo-nombre { font-size:11px; font-weight:400; color:var(--q-text-body); }
.auth-split-derecha .form-control, #login-email, #login-pass { background:#FAFAFC; border:1px solid var(--q-border); border-radius:8px; height:40px; }


/* ═══════════════════════════════════════════════
   HOMOLOGACIÓN FINAL — focus, truncado y anchos
   ═══════════════════════════════════════════════ */

/* Focus visible en TODO elemento interactivo (paridad con :hover) */
:where(a, button, input, select, textarea, [tabindex], [role="button"], .kpi-card, .tab-btn, .seg-btn, .sb-item, .q-table tbody tr, .conv-card, .notif-item):focus-visible {
  outline:2px solid var(--q-morado);
  outline-offset:2px;
  border-radius:var(--q-radius-input, 8px);
}
.form-control:focus-visible, .sol-select-btn:focus-visible, .periodo-btn:focus-visible {
  outline:none;
  border-color:var(--q-morado);
  box-shadow:0 0 0 3px rgba(144,40,140,.16);
}
.q-table tbody tr:focus-visible { outline-offset:-2px; }
.kpi-card:focus-visible { outline-offset:3px; }
.sb-item:focus-visible { outline-color:#fff; outline-offset:-2px; }

/* Truncado consistente: una línea + ellipsis, el title lleva el texto completo */
.cell-main, .cell-meta, .tbl-link, .usr-nombre, .usr-correo, .kpi-label,
.tabla-head-title, .data-panel-title, .bar-row-label, .chip-rol {
  overflow:hidden; text-overflow:ellipsis;
}
.cell-main, .cell-meta, .tbl-link, .bar-row-label { white-space:nowrap; display:block; max-width:100%; }
.kpi-label { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }

/* Anchos mínimos en columnas críticas para que nada quede ilegible */
.q-table th, .q-table td { min-width:0; }
.q-table th:first-child, .q-table td:first-child { min-width:220px; }
.q-table th.col-estado, .q-table td.col-estado { min-width:150px; }
.q-table th.col-sla, .q-table td.col-sla { min-width:130px; }
.q-table th.col-acciones, .q-table td.col-acciones { min-width:96px; }


/* Cabecera de tabla: menos aire entre el título y el borde superior de la tarjeta */
.q-card:has(> .tabla-head:first-child) { padding-top:0; }
.q-card > .tabla-head:first-child, .q-card:has(> .table-wrapper) > .tabla-head:first-child { padding-top:12px; }
.q-card > .tabla-head, .q-card:has(> .table-wrapper) > .tabla-head { padding-top:12px; }
.data-panel > .tabla-head { padding-top:0; }

/* Login full-bleed: el shell no aporta padding cuando la vista es el login */
#auth-shell:has(> .login-fullbleed) { padding:0; min-height:100vh; align-items:stretch; background:#FFFFFF; }
.login-fullbleed { width:100%; }


/* ═══════════════════════════════════════════════
   BOTONES PÍLDORA — paridad con el portal Comercial
   ═══════════════════════════════════════════════ */
:root { --q-radius-btn:999px; --q-radius-input:8px; }

/* Primario / secundario: 40px, radio 999px */
.btn, .btn-primario, .btn-morado, .btn-secundario, .btn-outline-morado,
.btn-teal, .btn-outline-teal, .btn-outline-rojo, .btn-ghost, .btn-lg, .btn-hero {
  border-radius:999px;
  min-height:40px; height:40px; padding:0 20px;
  font-size:13px; font-weight:600; line-height:1;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
}
.btn-primario, .btn-morado, .btn.btn-primario, .btn.btn-morado, .btn-hero {
  background:#90288C; color:#FFFFFF; border:none;
  box-shadow:0 4px 14px rgba(144,40,140,.22);
}
.btn-primario:hover, .btn-morado:hover, .btn-hero:hover { background:#6E1F6B; color:#FFFFFF; }
.btn-secundario, .btn-outline-morado, .btn-teal, .btn-outline-teal, .btn-outline-rojo {
  background:#FFFFFF; color:#90288C; border:1.5px solid #90288C; box-shadow:none;
}
.btn-secundario:hover, .btn-outline-morado:hover, .btn-teal:hover,
.btn-outline-teal:hover, .btn-outline-rojo:hover { background:#F7F4FB; color:#6E1F6B; border-color:#6E1F6B; }

/* Variante compacta */
.btn-sm, .btn-compact, .btn.btn-sm, .btn.btn-compact {
  min-height:32px; height:32px; padding:0 16px;
  font-size:12px; font-weight:600; border-radius:999px;
}
.btn-full { width:100%; }
.btn-icon-only { border-radius:999px; padding:0; width:32px; height:32px; min-height:32px; }

/* Filtros y pestañas conservan su forma original (rectangular, radio 8px) */
.periodo-btn, .sol-select-btn, .btn-limpiar, .sol-limpiar, .seg-btn, .tab-btn,
.periodo-chip, .seg-filtro > button, .filtros-grupo-accion > button {
  border-radius:8px;
}

/* Inputs conservan el radio de 8px */
.form-control, input[type="text"], input[type="email"], input[type="password"],
input[type="date"], input[type="number"], select, textarea,
.auth-split-derecha .form-control, #login-email, #login-pass {
  border-radius:8px;
}

/* Botones dentro de modales y drawers heredan la píldora */
.modal-footer .btn, .rdrawer .btn, .modal .btn { border-radius:999px; }