/* =====================
   THEME TOKENS (dark default) + LIGHT MODE
====================== */
:root{
  color-scheme: dark;

  --bg-grad-1:#0b1220;
  --bg-grad-2:#070a12;
  --bg-solid:#0f172a;

  --panel: rgba(17,24,39,.72);
  --panel-solid:#111827;
  --surface:#0b1220;
  --surface-2:#0f172a;

  --text:#e5e7eb;
  --text-soft:#d1d5db;
  --muted:#9ca3af;
  --muted-2:#6b7280;

  --border:#1f2937;
  --border-soft:#374151;

  --accent:#22c55e;
  --accent-2:#16a34a;
  --accent-ink:#052e14;

  --warn:#f59e0b;
  --warn-2:#b45309;

  --danger:#ef4444;
  --danger-2:#dc2626;

  --shadow: 0 20px 60px rgba(0,0,0,.55);
  --shadow-soft: 0 10px 30px rgba(0,0,0,.35);

  --radius:16px;
  --radius-sm:12px;
  --radius-xs:10px;

  --transition:160ms ease;
  --ring: 0 0 0 3px rgba(34,197,94,.18);
  --ring-danger: 0 0 0 3px rgba(239,68,68,.18);

  --table-head: rgba(255,255,255,.04);
  --table-row-alt: rgba(255,255,255,.02);
  --table-row-hover: rgba(34,197,94,.10);

  --sidebar-hover: rgba(255,255,255,.04);
  --sidebar-active: rgba(34,197,94,.14);

  --scroll-track: rgba(15,23,42,0.75);
  --scroll-thumb: rgba(148,163,184,0.85);
  --scroll-thumb-hover: rgba(209,213,219,1);

  --paper-bg:#ffffff;
  --paper-text:#111827;
}

:root[data-theme="light"]{
  color-scheme: light;

  --bg-grad-1:#f8fafc;
  --bg-grad-2:#eef2ff;
  --bg-solid:#ffffff;

  --panel: rgba(255,255,255,.78);
  --panel-solid:#ffffff;
  --surface:#f8fafc;
  --surface-2:#ffffff;

  --text:#0f172a;
  --text-soft:#0f172a;
  --muted:#475569;
  --muted-2:#64748b;

  --border:#e2e8f0;
  --border-soft:#cbd5e1;

  --shadow: 0 22px 60px rgba(15,23,42,.16);
  --shadow-soft: 0 10px 26px rgba(15,23,42,.10);

  --table-head: rgba(15,23,42,.04);
  --table-row-alt: rgba(15,23,42,.02);
  --table-row-hover: rgba(34,197,94,.12);

  --sidebar-hover: rgba(2,6,23,.04);

  --scroll-track: rgba(226,232,240,0.9);
  --scroll-thumb: rgba(100,116,139,0.55);
  --scroll-thumb-hover: rgba(100,116,139,0.75);
}

/* =====================
   BASE
====================== */
*{ box-sizing:border-box; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial }
html,body{ height:100% }
body{
  margin:0;
  background:linear-gradient(180deg,var(--bg-grad-1),var(--bg-grad-2));
  color:var(--text);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background var(--transition), color var(--transition);
}

a{ color:inherit; text-decoration:none }
code{
  padding:2px 6px;
  border-radius:8px;
  border:1px solid var(--border);
  background: rgba(0,0,0,0.08);
}

/* En modo claro, el code inline necesita un fondo más suave */
:root[data-theme="light"] code{ background: rgba(15,23,42,0.04) }

kbd{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.10);
}

/* Transición suave al alternar tema (sin afectar performance en exceso) */
header, .sidebar, .content, .card, .modal-card, input, select, textarea, .btn{
  transition:
    background var(--transition),
    border-color var(--transition),
    color var(--transition),
    box-shadow var(--transition),
    transform var(--transition);
}

::selection{ background: rgba(34,197,94,.35); color: var(--text) }

/* Scrollbars */
*::-webkit-scrollbar{ width:10px; height:10px }
*::-webkit-scrollbar-track{ background: var(--scroll-track); border-radius:999px }
*::-webkit-scrollbar-thumb{ background: var(--scroll-thumb); border-radius:999px }
*::-webkit-scrollbar-thumb:hover{ background: var(--scroll-thumb-hover) }

/* =====================
   LAYOUT
====================== */
header{
  position:sticky; top:0; z-index:5;
  background: var(--panel);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
}
header .wrap{
  max-width:1400px; margin:auto; padding:14px 20px;
  display:flex; align-items:center; gap:14px; justify-content:flex-start;
}
.brand{ font-weight:900; letter-spacing:.2px }

.header-left{ display:flex; align-items:center; gap:14px }
.header-right{ margin-left:auto; display:flex; align-items:center; gap:10px }

/* Chip del usuario (arriba a la derecha) */
.user-chip{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:6px 10px 6px 6px;
  border-radius:999px;
  border:1px solid var(--border);
  background: rgba(0,0,0,0.08);
  box-shadow: var(--shadow-soft);
}
.user-chip__avatar{
  width:32px; height:32px;
  border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:900;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  color: var(--accent-ink);
}
.user-chip__text{ display:flex; flex-direction:column; line-height:1.05 }
.user-chip__text strong{ font-size:12px; letter-spacing:.2px }
.user-chip__role{ font-size:11px; color: var(--muted) }

@media (max-width:520px){
  .user-chip__text{ display:none }
}

/* Logout (botón redondo) */
.logout-btn{
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid rgba(239,68,68,.35);
  background: linear-gradient(90deg, var(--danger-2), var(--danger));
  color:#111827;
  font-weight:900;
  cursor:pointer;
  box-shadow: var(--shadow-soft);
  display:inline-flex; align-items:center; justify-content:center;
  transition: transform var(--transition), filter var(--transition);
}
.logout-btn:hover{ transform: translateY(-1px); filter:brightness(1.02) }
.logout-btn:active{ transform: translateY(0) }

.shell{
  max-width:1400px; margin:20px auto; padding:0 20px 60px;
  display:grid; grid-template-columns:260px 1fr; gap:18px;
}

#sidebar{
  position:sticky; top:84px; align-self:start;
  height:calc(100vh - 110px);
  background: var(--panel);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding:12px;
  display:flex; flex-direction:column; gap:8px;
}

#sidebar .nav-btn{
  display:flex; align-items:center; gap:10px;
  border:1px solid var(--border);
  background: rgba(0,0,0,0.08);
  padding:10px 12px;
  border-radius: 12px;
  cursor:pointer;
  color: var(--text);
  text-align:left;
  transition: transform var(--transition), background var(--transition), border-color var(--transition);
}

#sidebar .nav-btn:hover{
  transform: translateY(-1px);
  background: var(--sidebar-hover);
}

#sidebar .nav-btn.active{
  background: var(--sidebar-active);
  border-color: rgba(34,197,94,.45);
  box-shadow: 0 0 0 3px rgba(34,197,94,.12);
}

.submenu{ margin-top: 2px }

.content{ min-height:60vh }
.card{
  background: var(--panel);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding:20px;
  margin-bottom:16px;
  box-shadow: var(--shadow-soft);
}

@media (hover:hover){
  .card:hover{ transform: translateY(-1px); box-shadow: var(--shadow) }
}

@media (max-width:1100px){
  .shell{ grid-template-columns:1fr }
  #sidebar{ position:relative; height:auto; top:auto }
}

@media (max-width:720px){
  header .wrap{ padding:12px 14px }
  .shell{ padding:0 14px 50px }
}

/* =====================
   TYPOGRAPHY
====================== */
h1,h2,h3{ margin:0 0 8px 0; line-height:1.15 }
h1{ font-size:28px; font-weight: 950; letter-spacing:.2px }
h2{ font-size:22px; font-weight: 900; letter-spacing:.2px }
h3{ font-size:18px; font-weight: 850; letter-spacing:.15px }
p{ margin:0 0 10px 0 }
.sub{ margin:0 0 14px 0; color:var(--muted); font-size:15px }
.mini{ font-size:13.5px; color:var(--muted) }
.muted{ color:var(--muted-2) }

/* =====================
   FORMS
====================== */
label{ font-size:14px; font-weight:750; color:var(--text-soft); display:block; margin:10px 0 6px }
input,select,textarea{
  width:100%;
  padding:10px 12px;
  border-radius: 12px;
  border:1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 15px;
  outline:none;
  transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition), background var(--transition);
}
button{
  width:auto;
  padding:10px 12px;
  border-radius: 12px;
  border:1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  outline:none;
  transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition), background var(--transition);
}
textarea{ min-height:70px; resize:vertical }
input::placeholder,textarea::placeholder{ color: var(--muted-2) }

input:hover,select:hover,textarea:hover{ border-color: var(--border-soft) }

input:focus,select:focus,textarea:focus{
  border-color: var(--accent);
  box-shadow: var(--ring);
}

.smart-date-shell{
  position:relative;
  width:100%;
}
.smart-date-shell .smart-date-native{
  width:100%;
  padding-right:48px;
  cursor:pointer;
}
.smart-date-shell .smart-date-native[readonly]{
  background:var(--surface);
}
.smart-date-shell .smart-date-native::-webkit-calendar-picker-indicator{
  opacity:0;
  pointer-events:none;
}
.smart-date-trigger{
  position:absolute;
  right:6px;
  top:50%;
  transform:translateY(-50%);
  width:34px;
  height:34px;
  min-width:34px;
  padding:0;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--accent);
  background:rgba(34,197,94,.10);
  border:1px solid rgba(34,197,94,.26);
  cursor:pointer;
}
.smart-date-trigger:hover{
  background:rgba(34,197,94,.16);
  border-color:rgba(34,197,94,.44);
}
.smart-date-trigger svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.smart-date-popover{
  position:fixed;
  z-index:5200;
  padding:12px;
  border:1px solid var(--border);
  border-radius:18px;
  background:var(--card);
  color:var(--text);
  box-shadow:0 24px 58px rgba(0,0,0,.28);
}
.smart-date-popover[hidden]{
  display:none !important;
}
.smart-date-head{
  display:grid;
  grid-template-columns:34px 34px minmax(110px, 1fr) 86px 34px 34px;
  gap:6px;
  align-items:center;
}
.smart-date-nav,
.smart-date-month,
.smart-date-year{
  min-height:34px;
  border-radius:10px;
  font-weight:800;
}
.smart-date-nav{
  padding:0;
  width:34px;
  min-width:34px;
  color:var(--text);
  background:var(--surface);
}
.smart-date-month,
.smart-date-year{
  width:100%;
  padding:7px 8px;
}
.smart-date-weekdays,
.smart-date-grid{
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  gap:5px;
}
.smart-date-weekdays{
  margin-top:10px;
}
.smart-date-weekdays span{
  text-align:center;
  color:var(--muted);
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
}
.smart-date-grid{
  margin-top:6px;
}
.smart-date-day{
  width:100%;
  min-width:0;
  height:36px;
  padding:0;
  border-radius:10px;
  background:transparent;
  border:1px solid transparent;
  color:var(--text);
  font-weight:800;
  cursor:pointer;
}
.smart-date-day:hover{
  background:var(--sidebar-hover);
  border-color:var(--border-soft);
}
.smart-date-day.is-outside{
  color:var(--muted-2);
}
.smart-date-day.is-today{
  border-color:rgba(59,130,246,.48);
  color:var(--primary);
}
.smart-date-day.is-selected{
  background:linear-gradient(90deg,var(--accent-2),var(--accent));
  color:var(--accent-ink);
  border-color:transparent;
}
.smart-date-foot{
  display:flex;
  justify-content:space-between;
  gap:8px;
  margin-top:12px;
}
.smart-date-foot .btn{
  flex:1 1 0;
  min-height:34px;
  padding:7px 10px;
}
:root[data-theme="light"] .smart-date-popover{
  background:#ffffff;
  border-color:#dbe4ee;
  box-shadow:0 24px 58px rgba(15,23,42,.18);
}
:root[data-theme="light"] .smart-date-shell .smart-date-native[readonly]{
  background:#ffffff;
  color:#0f172a;
}
@media (max-width:420px){
  .smart-date-popover{
    left:12px !important;
    right:12px !important;
    width:auto !important;
  }
  .smart-date-head{
    grid-template-columns:32px 32px minmax(92px, 1fr) 76px 32px 32px;
  }
}

/* Grid helpers */
.row{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; align-items:end }
.row2{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; align-items:end }
.row3{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; align-items:end }
.row4{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; align-items:end }
.span-all{ grid-column: 1 / -1 }
@media (max-width:720px){
  .row,.row2,.row3,.row4{ grid-template-columns:1fr }
}

.divider{ height:1px; background: var(--border); opacity:.8; margin:16px 0 }

/* Actions */
.actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; justify-content:center }

/* =====================
   BUTTONS
====================== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  cursor:pointer;
  user-select:none;
  border:1px solid var(--border);
  font-weight: 700;
  letter-spacing: .15px;
  font-size: 14px;
  transition: transform var(--transition), filter var(--transition), background var(--transition), border-color var(--transition);
}

.btn:hover{ transform: translateY(-1px) }
.btn:active{ transform: translateY(0) }

.btn.primary{ background:linear-gradient(90deg,var(--accent-2),var(--accent)); border:none; color:var(--accent-ink) }
.btn.warn{ background:linear-gradient(90deg,var(--warn-2),var(--warn)); border:none; color:#111827 }
.btn.danger{ background:linear-gradient(90deg,var(--danger-2),var(--danger)); border:none; color:#111827 }
.btn.ghost{ background:transparent }
.btn.ghost:hover{ background: var(--sidebar-hover) }

/* Utilities */
.btn-block{ width:100% }
.icon-square{ width:44px; min-width:44px; height:44px; padding:0; border-radius:14px }

button:disabled,
.btn:disabled,
.is-denied{
  opacity:.55;
  cursor:not-allowed !important;
  transform:none !important;
}

/* Icon-only button (e.g., ojo ver) */
.btn-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:auto;
  padding:6px 10px;
  border-radius: 10px;
  border:1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor:pointer;
  transition: transform var(--transition), background var(--transition), border-color var(--transition);
}
.btn-icon:hover{ background: var(--sidebar-hover); transform: translateY(-1px) }
.btn-icon:active{ transform: translateY(0) }

.btn.sm{ padding:7px 10px; border-radius: 10px; font-size:12px; }
.btn-icon.sm{ padding:6px 8px; border-radius: 10px; }
.btn-icon.danger{ border-color: rgba(239,68,68,.40); background: rgba(239,68,68,.10); color: var(--danger) }
.btn-icon.danger:hover{ background: rgba(239,68,68,.16) }

/* Icon button used in tablas (svg) */
.icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:38px;
  padding:0;
  border-radius: 12px;
  border:1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor:pointer;
  transition: transform var(--transition), background var(--transition), border-color var(--transition);
}
.icon-btn:hover{ background: var(--sidebar-hover); transform: translateY(-1px) }
.icon-btn:active{ transform: translateY(0) }
.icon-eye{ width:18px; height:18px; fill: currentColor; opacity:.9 }

.payment-action-btn{
  min-width:max-content;
  border-radius:999px;
  font-weight:900;
  letter-spacing:.02em;
  box-shadow:0 8px 18px rgba(0,0,0,.10);
}

.payment-action-btn svg{
  width:19px;
  height:19px;
  fill:currentColor;
  flex:0 0 auto;
}

.payment-action-btn span{
  line-height:1;
}

.payment-action-btn--void{
  color:var(--danger);
  border-color:rgba(239,68,68,.36);
  background:rgba(239,68,68,.08);
}

.payment-action-btn--void:hover{
  background:rgba(239,68,68,.16);
  border-color:rgba(239,68,68,.55);
}

.payment-action-btn--void-detail{
  color:var(--warn);
  border-color:rgba(245,158,11,.36);
  background:rgba(245,158,11,.10);
}

.payment-action-btn--void-detail:hover{
  background:rgba(245,158,11,.18);
  border-color:rgba(245,158,11,.55);
}

/* Focus ring */
button:focus-visible,
.btn:focus-visible,
.btn-icon:focus-visible,
.icon-btn:focus-visible,
.nav-btn:focus-visible{
  outline:none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}

/* Module header / toolbars */
.module-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom: 6px;
}
.module-header h2{ margin:0 }
.module-actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:flex-end }
.toolbar{ display:flex; justify-content:flex-end; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px }
.inline-actions{ display:flex; gap:10px; align-items:end; justify-content:flex-end; flex-wrap:wrap }

/* Segmented control (Pagos: modo de pago) */
.segmented{
  display:inline-flex;
  gap:4px;
  padding:4px;
  border-radius: 16px;
  border:1px solid var(--border);
  background: rgba(0,0,0,0.10);
  box-shadow: var(--shadow-soft);
}
.seg-btn{
  border:none;
  background: transparent;
  padding:9px 12px;
  border-radius: 12px;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .2px;
  color: var(--muted);
  cursor:pointer;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.seg-btn:hover{ background: var(--sidebar-hover); color: var(--text) }
.seg-btn.active{
  background: linear-gradient(90deg,var(--accent-2),var(--accent));
  color: var(--accent-ink);
  box-shadow: var(--shadow-soft);
}
.seg-btn:disabled,
.seg-btn.is-disabled{
  opacity:.56;
  cursor:not-allowed;
}
.seg-btn:disabled:hover,
.seg-btn.is-disabled:hover{
  background: transparent;
  color: var(--muted);
}

/* Chips */
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px }
.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.10);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .2px;
}
.chip--info{
  background:rgba(34,197,94,.12);
  border-color:rgba(34,197,94,.30);
  color:var(--success);
}
.chip--warning{
  background:rgba(245,158,11,.14);
  border-color:rgba(245,158,11,.34);
  color:var(--warn);
}
.chip--error{
  background:rgba(239,68,68,.13);
  border-color:rgba(239,68,68,.36);
  color:var(--danger);
}
.chip--muted{
  background:rgba(148,163,184,.14);
  border-color:rgba(148,163,184,.26);
  color:var(--muted);
}

.error-text{ color: var(--danger); font-weight: 800; }


/* Theme toggle */
.theme-toggle{
  width:44px;
  height:44px;
  padding:0;
  border-radius: 999px;
  border:1px solid var(--border);
  background: rgba(0,0,0,0.10);
  box-shadow: var(--shadow-soft);
}
.theme-toggle:hover{ background: var(--sidebar-hover) }

/* =====================
   API STATUS PILL
====================== */
.api-pill{
  width:auto;
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background: rgba(0,0,0,0.10);
  color: var(--text);
  cursor:pointer;
  transition: background var(--transition), transform var(--transition);
}
.api-pill:hover{ background: var(--sidebar-hover); transform: translateY(-1px) }
.api-pill:active{ transform: translateY(0) }
.api-pill .dot{ width:10px; height:10px; border-radius:50%; background: var(--muted-2); box-shadow:0 0 0 3px rgba(107,114,128,.15) }
.api-pill .label{ font-size:13px; color: var(--text-soft) }
.api-pill.online .dot{ background:var(--accent); box-shadow:0 0 0 3px rgba(34,197,94,.18) }
.api-pill.offline .dot{ background:var(--danger); box-shadow:0 0 0 3px rgba(239,68,68,.18) }
.api-pill.unknown .dot{ background:var(--warn); box-shadow:0 0 0 3px rgba(245,158,11,.18) }

/* =====================
   TABLES
====================== */
.table-wrap{
  overflow:auto;
  max-height:58vh;
  margin-top:10px;
  border:1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(0,0,0,0.06);
}

.table-wrap:focus-within{ border-color: rgba(34,197,94,.45); box-shadow: var(--ring) }

.table-wrap table{ margin-top:0 }

table{ width:100%; border-collapse:collapse; font-size:14px }
th,td{ border-bottom:1px solid var(--border); padding:11px 12px; text-align:left; vertical-align:top }
th:first-child,td:first-child{ text-align:left }

/* Column alignment helpers */
th.num,td.num{ text-align:right; font-variant-numeric: tabular-nums; }
th.center,td.center{ text-align:center; }
th.actions-col,td.actions-col{ text-align:center; white-space:nowrap; }
.table-actions{ display:flex; gap:8px; align-items:center; justify-content:flex-end; }
.table-actions.center{ justify-content:center; }


thead th{
  position: sticky;
  top: 0;
  background: var(--table-head);
  backdrop-filter: blur(8px);
  z-index: 1;
}

tbody tr:nth-child(even){ background: var(--table-row-alt) }
tbody tr:hover{ background: var(--table-row-hover) }

tfoot td{ font-weight:800 }
tfoot tr{ background: rgba(0,0,0,0.04) }

/* =====================
   EMPTY / LOADING STATES (tables)
====================== */
.empty-td{ padding: 28px 14px; text-align:center; }
.empty-state{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  color: var(--muted);
}
.empty-icon{ font-size: 28px; line-height:1; }
.empty-title{ font-weight: 900; letter-spacing: .2px; color: rgba(255,255,255,0.88); }
.empty-hint{ max-width: 560px; font-size: 13px; color: rgba(255,255,255,0.72); line-height: 1.45; }

.spinner{
  width: 22px; height: 22px;
  display:inline-block;
  border-radius: 999px;
  border: 3px solid rgba(255,255,255,0.18);
  border-top-color: rgba(34,197,94,0.95);
  animation: spin 900ms linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }

/* Ajustes para modo claro */
:root[data-theme="light"] .empty-title{ color: rgba(15,23,42,0.88); }
:root[data-theme="light"] .empty-hint{ color: rgba(15,23,42,0.65); }
:root[data-theme="light"] .spinner{ border-color: rgba(15,23,42,0.14); border-top-color: rgba(34,197,94,0.95); }

/* =====================
   TABLE ROW STATES
====================== */
.row-paid { opacity: 0.85; }

.row-pending { background: rgba(80, 140, 255, 0.14); }
.row-pending:hover { background: rgba(80, 140, 255, 0.22); }

.row-current {
  background: rgba(0, 170, 170, 0.20);
  box-shadow: inset 3px 0 0 rgba(0, 160, 160, 0.9);
}
.row-current:hover { background: rgba(0, 170, 170, 0.28); }

/* =====================
   BADGES & TAGS
====================== */
.status-badge{
  display:inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.status-active{
  background: rgba(34,197,94,.10);
  color: var(--accent);
  border-color: rgba(34,197,94,.30);
}

.status-paid{
  background: rgba(59,130,246,.14);
  color: #60a5fa;
  border-color: rgba(96,165,250,.34);
}

:root[data-theme="light"] .status-paid{
  background: rgba(59,130,246,.10);
  color: #1d4ed8;
  border-color: rgba(59,130,246,.24);
}

@keyframes blinkRed {
  0%, 100% { background-color: rgba(239,68,68,.25); color: var(--danger); box-shadow: 0 0 6px 2px rgba(255, 0, 0, 0.30); }
  50% { background-color: rgba(239,68,68,.55); color: #fff; box-shadow: 0 0 12px 4px rgba(255, 0, 0, 0.55); }
}

.status-late{
  background: rgba(239,68,68,.25);
  color: var(--danger);
  border-color: rgba(239,68,68,.35);
  animation: blinkRed 1s infinite;
  font-weight: 900;
}

.badge,.tag{
  display:inline-block;
  padding:2px 8px;
  border:1px solid var(--border-soft);
  border-radius:999px;
  font-size:11px;
  color: rgba(147,197,253,1);
}
.badge{ margin-left:6px }

/* =====================
   FILE LIST
====================== */
.file-list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:10px; margin-top:10px }
.file-card{ border:1px solid var(--border); border-radius: var(--radius-sm); background: rgba(0,0,0,0.10); padding:10px }
.file-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px }
.file-title{ font-weight:800 }
.file-meta{ font-size:12px; color:var(--muted) }
.file-actions{ display:flex; gap:8px; margin-top:8px }

/* Subcards dentro de formularios (adjuntos, grupos, etc.) */
.subcard{
  background: rgba(0,0,0,0.06);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
}
.subcard-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px }
.subcard-title{ font-weight: 900; letter-spacing: .2px }

.section-title{ font-weight: 800; letter-spacing: .2px; margin-top: 4px }

/* =====================
   TOAST
====================== */
.toast{
  position:fixed; bottom:16px; right:16px;
  background: var(--panel-solid);
  border:1px solid var(--border);
  padding:12px 14px;
  border-radius: var(--radius-sm);
  color: var(--text);
  box-shadow: var(--shadow-soft);
  opacity:0; transform:translateY(10px);
  transition:.25s;
  z-index:10;
}
.toast.show{ opacity:1; transform:translateY(0) }

.toast.success{ border-color: rgba(16,185,129,.35) }
.toast.warn{ border-color: rgba(245,158,11,.35) }
.toast.error{ border-color: rgba(239,68,68,.35) }

/* =====================
   MODAL
====================== */
.modal-overlay{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.55); z-index:9999; padding:16px }
.modal-card{
  background: var(--panel-solid);
  color: var(--text);
  border:1px solid var(--border);
  border-radius: var(--radius-sm);
  max-width:720px;
  width:100%;
  box-shadow: var(--shadow);
  overflow:hidden;
}

/* Animación suave al abrir modales */
.modal-overlay{ opacity:0; animation: modalFadeIn 180ms ease forwards }
.modal-card{ transform: translateY(10px) scale(.985); animation: modalPop 180ms ease forwards }
@keyframes modalFadeIn{ to{ opacity:1 } }
@keyframes modalPop{ to{ transform: translateY(0) scale(1) } }
.modal-head,.modal-foot{
  background: rgba(0,0,0,0.06);
  border-color: var(--border);
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:12px 16px;
}
.modal-body{ padding:16px; max-height:70vh; overflow:auto }
.close-modal{ background:transparent; border:0; font-size:20px; cursor:pointer; line-height:1; color: inherit }

/* API modal (config/diagnóstico) */
.api-card{ margin:0 }
.row.api-row{ grid-template-columns: 1fr 160px; gap:10px }
.actions.api-actions{ justify-content:flex-start; margin-top:10px; flex-wrap:wrap }
.actions.api-actions .btn{ max-width:220px }
.api-error{ margin-top:10px; color: var(--danger) }
.api-steps{ display:flex; flex-direction:column; gap:8px; line-height:1.55 }
.api-steps .step{
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; margin-right:8px;
  border-radius:999px;
  background: rgba(59,130,246,.18);
  border:1px solid rgba(59,130,246,.25);
  color: var(--text);
  font-weight:800;
  font-size:12px;
}
@media (max-width:720px){ .row.api-row{ grid-template-columns: 1fr } }

/* Modal helpers */
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:16px }
.mt-1{ margin-top:8px }
.mt-2{ margin-top:12px }
.mt-3{ margin-top:16px }
.mb-1{ margin-bottom:8px }
.mb-2{ margin-bottom:12px }
@media (max-width:720px){ .grid2{ grid-template-columns:1fr } }

/* =====================
   VISIBILITY
====================== */
.hidden{ display:none !important }

/* =====================
   VALIDATION
====================== */
.is-invalid{ border-color:var(--danger) !important; box-shadow:var(--ring-danger) !important }
.is-valid{ border-color:var(--accent) !important; box-shadow:var(--ring) !important }
.error-msg{ color:var(--danger); font-size:.8em; margin-top:4px }

/* Legacy compatibility */
input.invalid, select.invalid, textarea.invalid{ border:2px solid #dc3545 !important; outline:none }
input.valid,   select.valid,   textarea.valid{   border:2px solid #28a745 !important; outline:none }

/* Scroll horizontal sólo dentro de la tabla de previsualización de importar */
.import-map-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:8px 0;
}
.import-map-header .btn{
  min-width:170px;
}
.btn.ghost.import-map-toggle-button{
  border-color:rgba(245,158,11,.52);
  background:rgba(245,158,11,.14);
  color:#fde68a;
  box-shadow:0 10px 24px rgba(245,158,11,.10);
}
.btn.ghost.import-map-toggle-button:hover{
  border-color:rgba(250,204,21,.74);
  background:rgba(245,158,11,.20);
  transform:translateY(-1px);
}
.btn.ghost.import-map-toggle-button[aria-expanded="true"]{
  border-color:#f59e0b;
  background:#f59e0b;
  color:#111827;
  box-shadow:0 14px 30px rgba(245,158,11,.22);
}
:root[data-theme="light"] .btn.ghost.import-map-toggle-button{
  border-color:#f59e0b;
  background:#fff7ed;
  color:#92400e;
  box-shadow:0 12px 28px rgba(146,64,14,.10);
}
:root[data-theme="light"] .btn.ghost.import-map-toggle-button:hover{
  border-color:#d97706;
  background:#ffedd5;
}
:root[data-theme="light"] .btn.ghost.import-map-toggle-button[aria-expanded="true"]{
  background:#f59e0b;
  color:#111827;
  box-shadow:0 14px 30px rgba(245,158,11,.20);
}
#preview.table-wrap{ overflow: hidden; }
#preview.table-wrap .preview-container{ width: 100%; height: 100%; }
#preview.table-wrap .preview-scroll{ width: 100%; max-height: 58vh; overflow-x: auto; overflow-y: auto; }
#preview.table-wrap .preview-scroll table{ width: auto; min-width: 100%; }
#preview.table-wrap .preview-scroll th,
#preview.table-wrap .preview-scroll td{ white-space: nowrap; }
#preview.table-wrap .import-row--error{
  background:rgba(239,68,68,.06);
}
#preview.table-wrap .import-row--warning{
  background:rgba(245,158,11,.06);
}

/* Estilo scrollbar horizontal (solo dentro de la previsualización) */
#preview.table-wrap .preview-scroll::-webkit-scrollbar{ height: 8px; }
#preview.table-wrap .preview-scroll::-webkit-scrollbar-track{ background: var(--scroll-track); border-radius: 999px; }
#preview.table-wrap .preview-scroll::-webkit-scrollbar-thumb{ background: var(--scroll-thumb); border-radius: 999px; }
#preview.table-wrap .preview-scroll::-webkit-scrollbar-thumb:hover{ background: var(--scroll-thumb-hover); }

/* Firefox */
#preview.table-wrap .preview-scroll{ scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) var(--scroll-track); }

.btn-highlight{ background:var(--warn) !important; color:#111827; font-weight:900; }

/* Permisos (RBAC) - estados visuales */
.is-denied:hover{ filter:none !important; box-shadow:none !important; }

/* =====================
   PAGOS: MODAL REPORTE/COMPROBANTE (print-friendly)
====================== */
#reporteModal{ position:fixed; inset:0; display:none; z-index:9999; }
#reporteModal.abierto{ display:block; }
.reporte-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.5); }
.reporte-dialog{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(800px,92vw); max-height:86vh; overflow:auto;
  background: var(--paper-bg);
  color: var(--paper-text);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding:16px 16px 12px;
}
.reporte-header{ display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #e5e7eb; padding-bottom:8px; }
.reporte-body{ padding:12px 0; }
.reporte-footer{ display:flex; gap:8px; justify-content:flex-end; border-top:1px solid #e5e7eb; padding-top:8px; }
.rep-icon-btn{ width:32px; height:32px; border-radius:10px; border:1px solid #e5e7eb; background:#f9fafb; cursor:pointer; }
.rep-icon-btn:hover{ background:#f3f4f6; }
.rep-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.rep-box{ border:1px solid #e5e7eb; border-radius:10px; padding:12px; }
.rep-title{ margin:0 0 8px; font-size:15px; }
.rep-muted{ color:#6b7280; font-size:12px; }
.rep-table{ width:100%; border-collapse:collapse; margin-top:8px; font-size:13px; }
.rep-table th,.rep-table td{ border:1px solid #e5e7eb; padding:6px 8px; }
.rep-table th{ background:#f9fafb; text-align:left; }
.rep-tot{ width:100%; border-collapse:collapse; margin-top:4px; }
.rep-tot td{ padding:4px 0; }
.rep-right{ text-align:right; }
@media print{
  /* CP-TICKET-58MM-PRINT-PDF: formato térmico solo para impresión.
     La visualización del modal en pantalla no se modifica. */
  @page{ size: 58mm auto; margin: 2mm; }
  html, body{
    background:#fff !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  body *:not(#reporteModal):not(#reporteModal *){ visibility:hidden !important; }
  #reporteModal, #reporteModal *{ visibility:visible !important; }
  #reporteModal{ position:static; inset:auto; background:#fff !important; }
  .reporte-backdrop{ display:none !important; }
  .reporte-dialog{
    width:58mm !important;
    max-width:58mm !important;
    max-height:none;
    box-shadow:none !important;
    border-radius:0 !important;
    background:#fff !important;
    color:#000 !important;
    padding:0 !important;
    margin:0 !important;
    transform:none !important;
    position:static !important;
    overflow:visible !important;
  }
  .no-print{ display:none !important; }
}

/* =====================
   API OFFLINE BANNER
====================== */
.api-banner{
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(220, 38, 38, 0.95);
  border-bottom: 1px solid rgba(255,255,255,0.15);
  color: #fff;
}
.api-banner.hidden{ display:none; }
.api-banner__text{ display:flex; flex-direction:column; gap:2px; }
.api-banner__actions{ display:flex; gap:10px; align-items:center; }
.api-banner__actions .btn{ max-width:180px }
.api-banner .mini{ color: rgba(255,255,255,0.85); }


.actions-col{ white-space:nowrap; }

.pay-inline-alert{
  margin-top:8px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(245,158,11,.35);
  background: rgba(245,158,11,.12);
  color: var(--text-soft);
  font-size:13px;
  line-height:1.45;
}

.cashout-panel{
  margin-top:14px;
  padding:16px;
  border-radius:16px;
  border:1px solid rgba(34,197,94,.28);
  background: linear-gradient(180deg, rgba(34,197,94,.08), rgba(34,197,94,.03));
}

.cashout-panel__header{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-bottom:12px;
}

.cashout-grid{
  align-items:stretch;
}

.cashout-metric{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:12px;
  border-radius:14px;
  border:1px solid var(--border);
  background: rgba(0,0,0,0.08);
}

.cashout-metric strong{
  font-size:20px;
  line-height:1.1;
}

.cashout-final-editor label{
  margin:0;
  color:var(--text-soft);
  font-size:13.5px;
}

.cashout-final-editor input{
  min-height:38px;
  padding:8px 10px;
  border-radius:12px;
  font-size:20px;
  font-weight:900;
  color:var(--accent-ink);
  background:linear-gradient(90deg,var(--accent-2),var(--accent));
  border:1px solid rgba(34,197,94,.62);
  box-shadow:0 0 0 2px rgba(34,197,94,.10) inset;
}

.cashout-final-editor input:focus{
  border-color:rgba(134,239,172,.96);
  box-shadow:0 0 0 3px rgba(34,197,94,.22);
}

.cashout-final-editor input.is-invalid{
  background:rgba(239,68,68,.10);
  border-color:var(--danger);
  color:var(--text);
}

.cashout-metric--accent{
  border-color: rgba(34,197,94,.45);
  box-shadow: 0 0 0 2px rgba(34,197,94,.10) inset;
}

.is-readonly{
  background: rgba(148,163,184,0.08);
}

:root[data-theme="light"] .pay-inline-alert{
  background: rgba(245,158,11,.14);
}

:root[data-theme="light"] .cashout-panel{
  background: linear-gradient(180deg, rgba(34,197,94,.08), rgba(255,255,255,.88));
}

:root[data-theme="light"] .cashout-metric{
  background: rgba(255,255,255,0.78);
}

:root[data-theme="light"] .cashout-final-editor input.is-invalid{
  background:#fff1f2;
  color:#7f1d1d;
}


.api-source{ margin-top:8px; }
.api-actions--right{ justify-content:flex-end; align-items:flex-end; margin-top:0; }
.api-card select,
.api-card input{
  width:100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  outline:none;
}
.api-card select:focus,
.api-card input:focus{
  border-color: var(--accent);
  box-shadow: var(--ring);
}


/* =====================
   USERS / ROLES
====================== */
.role-chip-list{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid var(--border);
  background: rgba(34,197,94,.10);
  font-size:12px;
  line-height:1.2;
}
.tag.muted{
  background: rgba(148,163,184,.12);
}

.role-inline-tag{ font-size:11.5px; }
.roles-row td{ vertical-align:top; }
.role-name-cell{ display:flex; flex-direction:column; gap:8px; }
.role-name-cell__title{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.role-name-cell__title strong{ font-size:1.08rem; line-height:1.2; }
.role-name-cell__meta{ font-size:12.5px; color:var(--muted); }
.role-system-tag{ background:rgba(59,130,246,.10); border-color:rgba(96,165,250,.26); color:#bfdbfe; }
.role-custom-tag{ background:rgba(34,197,94,.10); border-color:rgba(74,222,128,.24); color:#bbf7d0; }
.role-desc-cell{ color:var(--text-soft); line-height:1.55; max-width:320px; }
.role-summary{ display:flex; flex-direction:column; gap:12px; min-width:0; }
.role-summary--admin{ border:1px solid rgba(34,197,94,.18); border-radius:18px; padding:14px; background:linear-gradient(180deg, rgba(34,197,94,.12), rgba(34,197,94,.05)); }
.role-summary--empty{ border:1px dashed var(--border); border-radius:18px; padding:14px; background:rgba(148,163,184,.06); }
.role-summary__top{ display:flex; justify-content:space-between; gap:12px; align-items:flex-start; flex-wrap:wrap; }
.role-summary__help{ color:var(--text-soft); line-height:1.5; font-size:.94rem; }
.role-summary-badge{ display:inline-flex; align-items:center; padding:7px 11px; border-radius:999px; font-size:12px; font-weight:800; border:1px solid var(--border); background:rgba(34,197,94,.10); }
.role-summary-badge--admin{ color:#bbf7d0; border-color:rgba(74,222,128,.28); background:rgba(34,197,94,.14); }
.role-summary-badge--muted{ color:var(--muted); background:rgba(148,163,184,.10); }
.role-group-chip-list{ display:flex; flex-wrap:wrap; gap:8px; }
.role-group-chip{ display:inline-flex; align-items:center; gap:8px; padding:7px 11px; border-radius:999px; background:rgba(59,130,246,.10); border:1px solid rgba(96,165,250,.18); color:var(--text); min-width:0; }
.role-group-chip strong{ font-size:12.5px; font-weight:800; }
.role-group-chip small{ font-size:11.5px; color:var(--muted); }
.role-group-chip.is-full{ background:rgba(34,197,94,.12); border-color:rgba(74,222,128,.22); }
.role-summary-stats{ display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.role-summary-stat{ display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px; background:rgba(148,163,184,.10); color:var(--muted); font-size:12px; font-weight:700; }
.role-summary-actions{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
.role-summary-actions__group{ border:1px solid var(--border); border-radius:16px; padding:10px 12px; background:rgba(148,163,184,.06); min-width:0; }
.role-summary-actions__label{ font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin-bottom:8px; }
.status-pill{ display:inline-flex; align-items:center; justify-content:center; min-width:88px; padding:8px 12px; border-radius:999px; font-size:12px; font-weight:800; border:1px solid var(--border); }
.status-pill.is-active{ background:rgba(34,197,94,.12); border-color:rgba(74,222,128,.26); color:#bbf7d0; }
.status-pill.is-inactive{ background:rgba(239,68,68,.10); border-color:rgba(248,113,113,.24); color:#fecaca; }
.role-assigned-note{ margin-top:8px; font-size:12.5px; color:var(--muted); }

:root[data-theme="light"] .role-system-tag{ background:#eff6ff; border-color:#bfdbfe; color:#1d4ed8; }
:root[data-theme="light"] .role-custom-tag{ background:#ecfdf3; border-color:#bbf7d0; color:#15803d; }
:root[data-theme="light"] .role-name-cell__meta,
:root[data-theme="light"] .role-assigned-note,
:root[data-theme="light"] .role-summary__help,
:root[data-theme="light"] .role-desc-cell{ color:#475569; }
:root[data-theme="light"] .role-summary--admin{ background:linear-gradient(180deg, #ecfdf3, #f0fdf4); border-color:#bbf7d0; }
:root[data-theme="light"] .role-summary--empty{ background:#f8fafc; border-color:#dbe4ee; }
:root[data-theme="light"] .role-summary-badge{ color:#334155; background:#f8fafc; border-color:#dbe4ee; }
:root[data-theme="light"] .role-summary-badge--admin{ color:#166534; background:#ecfdf3; border-color:#bbf7d0; }
:root[data-theme="light"] .role-group-chip{ background:#eff6ff; border-color:#bfdbfe; color:#0f172a; }
:root[data-theme="light"] .role-group-chip small,
:root[data-theme="light"] .role-summary-stat,
:root[data-theme="light"] .role-summary-actions__label{ color:#475569; }
:root[data-theme="light"] .role-group-chip.is-full{ background:#ecfdf3; border-color:#bbf7d0; }
:root[data-theme="light"] .role-summary-stat{ background:#f1f5f9; }
:root[data-theme="light"] .role-summary-actions__group{ background:#ffffff; border-color:#dbe4ee; }
:root[data-theme="light"] .status-pill.is-active{ background:#ecfdf3; border-color:#bbf7d0; color:#166534; }
:root[data-theme="light"] .status-pill.is-inactive{ background:#fff1f2; border-color:#fecdd3; color:#b91c1c; }

@media (max-width: 980px){
  .role-summary-actions{ grid-template-columns:1fr; }
}
@media (max-width: 760px){
  .role-summary__top{ flex-direction:column; }
  .role-summary-stats{ justify-content:flex-start; }
}
.perm-groups-wrap{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:12px;
}
.perm-group{
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px;
  background: rgba(255,255,255,.02);
}
.perm-group__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.perm-group__toggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:var(--muted);
}
.perm-grid{
  display:grid;
  gap:8px;
}
.perm-check{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:14px;
  line-height:1.35;
}
.perm-check input,
.perm-group__toggle input{
  margin-top:2px;
}


/* Users / Roles contrast + responsive polish */

.users-card .tag{ color:var(--text); border-color:rgba(34,197,94,.18); }
.users-card .tag.muted{ color:var(--text-soft); }
.roles-modal-overlay{ padding:18px; align-items:center; justify-content:center; }
.roles-modal-card{ width:min(1180px, 94vw); max-width:1180px !important; max-height:min(92vh, 900px); display:flex; flex-direction:column; overflow:hidden; }
.roles-modal-head{ padding:20px 22px 18px; border-bottom:1px solid var(--line); background:linear-gradient(180deg, rgba(15,23,42,.96), rgba(15,23,42,.90)); }
.roles-modal-subtitle{ margin-top:6px; max-width:720px; }
.roles-modal-body{ background: var(--surface); padding:20px 22px; overflow:auto; }
.roles-modal-layout{ display:flex; flex-direction:column; gap:18px; }
.roles-panel{ border:1px solid var(--border); border-radius:18px; background: var(--surface-2); padding:18px; box-shadow: var(--shadow-soft); }
.roles-panel--summary{ position:relative; }
.roles-panel__title{ font-size:1.02rem; font-weight:800; color:var(--text); margin-bottom:8px; }
.roles-top-grid--balanced{ align-items:start; }
.roles-top-grid--balanced > div{ min-width:0; }
.roles-status-row{ display:grid; grid-template-columns: minmax(240px, 1fr) minmax(180px, auto); gap:14px; align-items:stretch; }
.roles-active-toggle{ display:inline-flex; align-items:center; gap:12px; padding:13px 15px; border:1px solid var(--border); border-radius:14px; background: rgba(34,197,94,.08); color:var(--text); font-weight:700; min-height:54px; }
.roles-active-toggle input{ margin:0; }
.roles-meta-box{ display:flex; flex-direction:column; justify-content:center; gap:4px; padding:12px 14px; border:1px solid var(--border); border-radius:14px; background: rgba(148,163,184,.10); color:var(--text); text-align:left; min-height:54px; }
.roles-meta-box__label{ font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:700; }
.roles-panel__bar{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.roles-panel__actions{ display:flex; gap:10px; flex-wrap:wrap; }
.roles-perm-grid{ grid-template-columns: repeat(2, minmax(320px, 1fr)); gap:14px; align-items:start; }
.perm-group{ min-height:100%; padding:16px; background: var(--surface); border-color: var(--border-soft); }
.perm-group__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:12px; }
.perm-group__meta{ display:inline-flex; align-items:center; min-height:28px; padding:4px 10px; border-radius:999px; background:rgba(148,163,184,.12); color:var(--muted); font-size:12px; font-weight:700; }
.perm-group strong, .perm-check span{ color: var(--text); }
.perm-group__toggle{ color: var(--text-soft); font-weight:700; white-space:nowrap; }
.perm-grid{ display:grid; gap:10px; }
.perm-check{ display:flex; align-items:flex-start; gap:12px; padding:10px 12px; border-radius:14px; background: rgba(148,163,184,.08); border:1px solid transparent; min-width:0; }
.perm-check input{ margin-top:3px; flex:0 0 auto; }
.perm-check__label{ display:block; color:var(--text); font-weight:600; line-height:1.4; word-break:break-word; }
.perm-check:hover{ border-color: var(--border-soft); background: rgba(34,197,94,.08); }
.roles-error-box{ margin-top:2px; padding:12px 14px; border-radius:14px; background: rgba(239,68,68,.10); border:1px solid rgba(239,68,68,.28); min-height:0; }
.roles-modal-foot{ align-items:center; gap:12px; padding:16px 22px 18px; border-top:1px solid var(--line); background: rgba(2,6,23,.72); backdrop-filter: blur(10px); }
.roles-modal-foot__hint{ color:var(--muted); }
.roles-modal-foot__actions{ display:flex; gap:10px; flex-wrap:wrap; margin-left:auto; }
:root[data-theme="light"] .users-card,
:root[data-theme="light"] .users-table-wrap,
:root[data-theme="light"] .roles-panel,
:root[data-theme="light"] .perm-group{ background: #ffffff; }
:root[data-theme="light"] .users-card .mini,
:root[data-theme="light"] .users-card label{ color:#334155; }
:root[data-theme="light"] .users-table thead th{ color:#0f172a; background:#e9edf3; }
:root[data-theme="light"] .users-table tbody td{ color:#1e293b; }
:root[data-theme="light"] .users-table tbody tr:hover td{ color:#0f172a; }
:root[data-theme="light"] .tag{ background:#eef6ff; border-color:#bfdbfe; color:#1d4ed8; }
:root[data-theme="light"] .tag.muted{ background:#f1f5f9; border-color:#dbe3ee; color:#334155; }
:root[data-theme="light"] .roles-modal-head{ background:linear-gradient(180deg, #ffffff, #f8fafc); }
:root[data-theme="light"] .roles-modal-subtitle,
:root[data-theme="light"] .roles-modal-foot__hint,
:root[data-theme="light"] .perm-group__meta,
:root[data-theme="light"] .roles-meta-box__label{ color:#64748b; }
:root[data-theme="light"] .perm-check{ background: #f8fafc; border-color:#e2e8f0; }
:root[data-theme="light"] .perm-check:hover{ background:#eefbf3; border-color:#86efac; }
:root[data-theme="light"] .roles-meta-box{ background:#f8fafc; }
:root[data-theme="light"] .roles-active-toggle{ background:#eff6ff; border-color:#bfdbfe; }
:root[data-theme="light"] .roles-modal-foot{ background:#ffffff; }
@media (max-width: 1080px){ .roles-perm-grid{ grid-template-columns:1fr; } }
@media (max-width: 920px){ .roles-status-row{ grid-template-columns:1fr; } }
@media (max-width: 640px){ .roles-modal-overlay{ padding:10px; } .roles-modal-card{ width:min(98vw, 98vw); max-height:94vh; } .roles-modal-head, .roles-modal-body, .roles-modal-foot{ padding-left:16px; padding-right:16px; } .roles-modal-foot{ flex-direction:column; align-items:stretch; } .roles-modal-foot__actions{ margin-left:0; width:100%; } .roles-modal-foot__actions .btn{ flex:1 1 auto; max-width:none; } }

/* Diagnóstico de permisos */
.permissions-diagnostic{ display:flex; flex-direction:column; gap:16px; }
.diag-summary-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; }
.diag-stat-card{ border:1px solid var(--line); background:var(--card); border-radius:14px; padding:14px 16px; box-shadow:var(--shadow-sm); }
.diag-stat-card__value{ font-size:15px; font-weight:800; color:var(--text); margin-top:6px; line-height:1.35; word-break:break-word; }
.diag-layout{ display:grid; grid-template-columns:1.3fr .95fr; gap:16px; align-items:start; }
.diag-panel{ border:1px solid var(--line); background:var(--card); border-radius:16px; padding:16px; box-shadow:var(--shadow-sm); }
.diag-panel__title{ font-weight:800; color:var(--text); margin-bottom:12px; }
.diag-groups-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; }
.diag-group-card{ border:1px solid var(--line); background:var(--panel); border-radius:14px; padding:12px; }
.diag-group-card__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.diag-chip-list{ display:flex; flex-wrap:wrap; gap:8px; }
.diag-chip-list.muted-zone{ margin-top:10px; padding-top:10px; border-top:1px dashed var(--line); }
.diag-tag-ok{ background:rgba(24,160,88,.12); color:#166534; border-color:rgba(24,160,88,.25); }
.diag-tag-off{ background:rgba(148,163,184,.14); color:var(--muted); border-color:rgba(148,163,184,.25); }
.diag-table code{ font-size:12px; color:var(--text); background:var(--panel); padding:3px 6px; border-radius:8px; border:1px solid var(--line); }
@media (max-width: 1080px){ .diag-layout{ grid-template-columns:1fr; } }
@media (max-width: 640px){ .diag-summary-grid{ grid-template-columns:1fr 1fr; } .diag-groups-grid{ grid-template-columns:1fr; } }


/* CHECKPOINT 21 - Roles modal redesign */
.roles-modal-card--enhanced{
  width:min(1240px, 96vw);
  max-width:1240px !important;
  max-height:min(94vh, 980px);
  border-radius:24px;
}
.roles-modal-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
}
.roles-modal-head__content strong{
  display:block;
  font-size:1.75rem;
  line-height:1.12;
  letter-spacing:-.02em;
}
.roles-modal-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--accent-strong, #86efac);
  background:rgba(34,197,94,.12);
  border:1px solid rgba(34,197,94,.22);
}
.roles-modal-subtitle{
  max-width:820px;
  font-size:1rem;
  line-height:1.55;
}
.roles-modal-body{
  padding:22px 24px 18px;
}
.roles-modal-layout{
  gap:20px;
}
.roles-hero-card{
  display:grid;
  grid-template-columns:minmax(0, 1.7fr) minmax(280px, .8fr);
  gap:18px;
  padding:20px;
  border:1px solid var(--border);
  border-radius:22px;
  background:linear-gradient(180deg, rgba(148,163,184,.10), rgba(148,163,184,.04));
  box-shadow:var(--shadow-soft);
}
.roles-hero-card__main,
.roles-hero-card__aside{
  min-width:0;
}
.roles-hero-card__grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px;
  margin-top:10px;
}
.roles-field{
  min-width:0;
}
.roles-field label{
  display:block;
  margin-bottom:8px;
  font-weight:800;
  color:var(--text);
}
.roles-field input{
  width:100%;
}
.roles-hero-card__aside{
  display:grid;
  gap:14px;
  align-content:start;
}
.roles-stat-card{
  border:1px solid var(--border);
  border-radius:18px;
  background:var(--surface-2);
  padding:16px;
  min-height:112px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:8px;
}
.roles-stat-card--accent{
  background:linear-gradient(180deg, rgba(34,197,94,.12), rgba(34,197,94,.06));
}
.roles-stat-card__label{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:800;
  color:var(--muted);
}
.roles-stat-card__value{
  font-size:2rem;
  line-height:1;
  font-weight:900;
  color:var(--text);
}
.roles-stat-card__help{
  color:var(--text-soft);
  line-height:1.45;
}
.roles-switch-card{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:0;
  border:0;
  background:transparent;
  min-height:unset;
}
.roles-switch-card input{
  margin-top:3px;
}
.roles-switch-card__text{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.roles-switch-card__text strong{
  font-size:1rem;
  color:var(--text);
}
.roles-switch-card__text small{
  color:var(--text-soft);
  line-height:1.45;
}

.roles-panel--permissions{
  padding:18px;
  border-radius:22px;
}
.roles-panel__bar--sticky{
  position:sticky;
  top:0;
  z-index:2;
  padding-bottom:10px;
  margin-bottom:4px;
  background:inherit;
}
.roles-panel__actions .btn{
  min-width:150px;
}

.roles-perm-toolbar{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:12px 14px;
  align-items:center;
  margin:10px 0 4px;
}
.roles-perm-searchbox{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:16px;
  background:rgba(148,163,184,.08);
}
.roles-perm-searchbox__icon{ flex:0 0 auto; opacity:.8; }
.roles-perm-searchbox input{
  flex:1 1 auto;
  min-width:0;
  border:0;
  background:transparent;
  color:var(--text);
  outline:none;
  box-shadow:none;
  padding:0;
}
.roles-perm-searchbox input::placeholder{ color:var(--muted); }
.roles-perm-searchbox__clear{
  flex:0 0 auto;
  border:0;
  background:transparent;
  color:var(--text-soft);
  font-weight:700;
  cursor:pointer;
}
.roles-perm-toolbar__filters{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-end;
}
.roles-perm-toolbar__filters .btn{
  min-width:unset;
}
.roles-perm-toolbar__filters .btn.is-active{
  border-color:rgba(34,197,94,.45);
  background:rgba(34,197,94,.14);
  color:var(--text);
}
.roles-perm-toolbar__stats{
  grid-column:1 / -1;
  font-size:.93rem;
  color:var(--text-soft);
}
.roles-perm-empty{
  margin-top:8px;
  padding:14px 16px;
  border:1px dashed var(--border);
  border-radius:16px;
  background:rgba(148,163,184,.08);
  color:var(--text-soft);
}
.roles-perm-grid--enhanced .perm-group[hidden],
.roles-perm-grid--enhanced .perm-check[hidden]{
  display:none !important;
}

.roles-perm-grid--enhanced{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px;
  align-items:start;
}
.roles-perm-grid--enhanced .perm-group{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:18px;
  border-radius:20px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  min-width:0;
}
.roles-perm-grid--enhanced .perm-group__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin:0;
}
.roles-perm-grid--enhanced .perm-group__titlewrap{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  min-width:0;
}
.roles-perm-grid--enhanced .perm-group__head strong{
  display:block;
  min-width:0;
  font-size:1.05rem;
  line-height:1.2;
  color:var(--text);
}
.roles-perm-grid--enhanced .perm-group__meta,
.roles-perm-grid--enhanced .perm-group__selection{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:6px 10px;
  border-radius:999px;
  font-size:.82rem;
  font-weight:700;
  white-space:nowrap;
}
.roles-perm-grid--enhanced .perm-group__meta{
  background:rgba(148,163,184,.12);
  color:var(--muted);
}
.roles-perm-grid--enhanced .perm-group__selection{
  background:rgba(34,197,94,.12);
  color:#22c55e;
}
.roles-perm-grid--enhanced .perm-group__toggle{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:40px;
  padding:8px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:rgba(148,163,184,.08);
  color:var(--text-soft);
  font-weight:700;
  white-space:nowrap;
}
.roles-perm-grid--enhanced .perm-group__toggle input{
  margin:0;
  flex:0 0 auto;
}
.roles-perm-grid--enhanced .perm-group__toggletext{
  display:inline-block;
}
.roles-perm-grid--enhanced .perm-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
  align-items:start;
}
.roles-perm-grid--enhanced .perm-check{
  display:flex;
  align-items:flex-start;
  gap:12px;
  min-width:0;
  width:100%;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(148,163,184,.08);
  transition:border-color .18s ease, background .18s ease, transform .18s ease;
}
.roles-perm-grid--enhanced .perm-check:hover{
  border-color:rgba(34,197,94,.32);
  background:rgba(34,197,94,.08);
}
.roles-perm-grid--enhanced .perm-check input{
  flex:0 0 auto;
  margin:2px 0 0;
}
.roles-perm-grid--enhanced .perm-check__main{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.roles-perm-grid--enhanced .perm-check__title{
  display:block;
  font-size:.95rem;
  line-height:1.35;
  color:var(--text);
  font-weight:700;
  overflow-wrap:anywhere;
}
.roles-perm-grid--enhanced .perm-check__code{
  display:block;
  font-size:.75rem;
  line-height:1.3;
  color:var(--muted);
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, monospace;
  overflow-wrap:anywhere;
}
.roles-error-box{ margin-top:2px; padding:12px 14px; border-radius:14px; background: rgba(239,68,68,.10); border:1px solid rgba(239,68,68,.28); min-height:0; }
.roles-modal-foot{ align-items:center; gap:12px; padding:16px 22px 18px; border-top:1px solid var(--line); background: rgba(2,6,23,.72); backdrop-filter: blur(10px); }
.roles-modal-foot__hint{ color:var(--muted); }
.roles-modal-foot__actions{ display:flex; gap:10px; flex-wrap:wrap; margin-left:auto; }
:root[data-theme="light"] .users-card,
:root[data-theme="light"] .users-table-wrap,
:root[data-theme="light"] .roles-panel,
:root[data-theme="light"] .perm-group{ background: #ffffff; }
:root[data-theme="light"] .users-card .mini,
:root[data-theme="light"] .users-card label{ color:#334155; }
:root[data-theme="light"] .users-table thead th{ color:#0f172a; background:#e9edf3; }
:root[data-theme="light"] .users-table tbody td{ color:#1e293b; }
:root[data-theme="light"] .users-table tbody tr:hover td{ color:#0f172a; }
:root[data-theme="light"] .tag{ background:#eef6ff; border-color:#bfdbfe; color:#1d4ed8; }
:root[data-theme="light"] .tag.muted{ background:#f1f5f9; border-color:#dbe3ee; color:#334155; }
:root[data-theme="light"] .roles-modal-head{ background:linear-gradient(180deg, #ffffff, #f8fafc); }
:root[data-theme="light"] .roles-modal-subtitle,
:root[data-theme="light"] .roles-modal-foot__hint,
:root[data-theme="light"] .perm-group__meta,
:root[data-theme="light"] .roles-meta-box__label{ color:#64748b; }
:root[data-theme="light"] .perm-check{ background: #f8fafc; border-color:#e2e8f0; }
:root[data-theme="light"] .perm-check:hover{ background:#eefbf3; border-color:#86efac; }
:root[data-theme="light"] .roles-meta-box{ background:#f8fafc; }
:root[data-theme="light"] .roles-active-toggle{ background:#eff6ff; border-color:#bfdbfe; }
:root[data-theme="light"] .roles-modal-foot{ background:#ffffff; }
@media (max-width: 1080px){ .roles-perm-grid{ grid-template-columns:1fr; } }
@media (max-width: 920px){ .roles-status-row{ grid-template-columns:1fr; } }
@media (max-width: 640px){ .roles-modal-overlay{ padding:10px; } .roles-modal-card{ width:min(98vw, 98vw); max-height:94vh; } .roles-modal-head, .roles-modal-body, .roles-modal-foot{ padding-left:16px; padding-right:16px; } .roles-modal-foot{ flex-direction:column; align-items:stretch; } .roles-modal-foot__actions{ margin-left:0; width:100%; } .roles-modal-foot__actions .btn{ flex:1 1 auto; max-width:none; } }

/* Diagnóstico de permisos */
.permissions-diagnostic{ display:flex; flex-direction:column; gap:16px; }
.diag-summary-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; }
.diag-stat-card{ border:1px solid var(--line); background:var(--card); border-radius:14px; padding:14px 16px; box-shadow:var(--shadow-sm); }
.diag-stat-card__value{ font-size:15px; font-weight:800; color:var(--text); margin-top:6px; line-height:1.35; word-break:break-word; }
.diag-layout{ display:grid; grid-template-columns:1.3fr .95fr; gap:16px; align-items:start; }
.diag-panel{ border:1px solid var(--line); background:var(--card); border-radius:16px; padding:16px; box-shadow:var(--shadow-sm); }
.diag-panel__title{ font-weight:800; color:var(--text); margin-bottom:12px; }
.diag-groups-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; }
.diag-group-card{ border:1px solid var(--line); background:var(--panel); border-radius:14px; padding:12px; }
.diag-group-card__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.diag-chip-list{ display:flex; flex-wrap:wrap; gap:8px; }
.diag-chip-list.muted-zone{ margin-top:10px; padding-top:10px; border-top:1px dashed var(--line); }
.diag-tag-ok{ background:rgba(24,160,88,.12); color:#166534; border-color:rgba(24,160,88,.25); }
.diag-tag-off{ background:rgba(148,163,184,.14); color:var(--muted); border-color:rgba(148,163,184,.25); }
.diag-table code{ font-size:12px; color:var(--text); background:var(--panel); padding:3px 6px; border-radius:8px; border:1px solid var(--line); }
@media (max-width: 1080px){ .diag-layout{ grid-template-columns:1fr; } }
@media (max-width: 640px){ .diag-summary-grid{ grid-template-columns:1fr 1fr; } .diag-groups-grid{ grid-template-columns:1fr; } }


/* CHECKPOINT 21 - Roles modal redesign */
.roles-modal-card--enhanced{
  width:min(1240px, 96vw);
  max-width:1240px !important;
  max-height:min(94vh, 980px);
  border-radius:24px;
}
.roles-modal-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
}
.roles-modal-head__content strong{
  display:block;
  font-size:1.75rem;
  line-height:1.12;
  letter-spacing:-.02em;
}
.roles-modal-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--accent-strong, #86efac);
  background:rgba(34,197,94,.12);
  border:1px solid rgba(34,197,94,.22);
}
.roles-modal-subtitle{
  max-width:820px;
  font-size:1rem;
  line-height:1.55;
}
.roles-modal-body{
  padding:22px 24px 18px;
}
.roles-modal-layout{
  gap:20px;
}
.roles-hero-card{
  display:grid;
  grid-template-columns:minmax(0, 1.7fr) minmax(280px, .8fr);
  gap:18px;
  padding:20px;
  border:1px solid var(--border);
  border-radius:22px;
  background:linear-gradient(180deg, rgba(148,163,184,.10), rgba(148,163,184,.04));
  box-shadow:var(--shadow-soft);
}
.roles-hero-card__main,
.roles-hero-card__aside{
  min-width:0;
}
.roles-hero-card__grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px;
  margin-top:10px;
}
.roles-field{
  min-width:0;
}
.roles-field label{
  display:block;
  margin-bottom:8px;
  font-weight:800;
  color:var(--text);
}
.roles-field input{
  width:100%;
}
.roles-hero-card__aside{
  display:grid;
  gap:14px;
  align-content:start;
}
.roles-stat-card{
  border:1px solid var(--border);
  border-radius:18px;
  background:var(--surface-2);
  padding:16px;
  min-height:112px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:8px;
}
.roles-stat-card--accent{
  background:linear-gradient(180deg, rgba(34,197,94,.12), rgba(34,197,94,.06));
}
.roles-stat-card__label{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:800;
  color:var(--muted);
}
.roles-stat-card__value{
  font-size:2rem;
  line-height:1;
  font-weight:900;
  color:var(--text);
}
.roles-stat-card__help{
  color:var(--text-soft);
  line-height:1.45;
}
.roles-switch-card{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:0;
  border:0;
  background:transparent;
  min-height:unset;
}
.roles-switch-card input{
  margin-top:3px;
}
.roles-switch-card__text{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.roles-switch-card__text strong{
  font-size:1rem;
  color:var(--text);
}
.roles-switch-card__text small{
  color:var(--text-soft);
  line-height:1.45;
}

.roles-panel--permissions{
  padding:18px;
  border-radius:22px;
}
.roles-panel__bar--sticky{
  position:sticky;
  top:0;
  z-index:2;
  padding-bottom:10px;
  margin-bottom:4px;
  background:inherit;
}
.roles-panel__actions .btn{
  min-width:150px;
}

.roles-perm-toolbar{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:12px 14px;
  align-items:center;
  margin:10px 0 4px;
}
.roles-perm-searchbox{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:16px;
  background:rgba(148,163,184,.08);
}
.roles-perm-searchbox__icon{ flex:0 0 auto; opacity:.8; }
.roles-perm-searchbox input{
  flex:1 1 auto;
  min-width:0;
  border:0;
  background:transparent;
  color:var(--text);
  outline:none;
  box-shadow:none;
  padding:0;
}
.roles-perm-searchbox input::placeholder{ color:var(--muted); }
.roles-perm-searchbox__clear{
  flex:0 0 auto;
  border:0;
  background:transparent;
  color:var(--text-soft);
  font-weight:700;
  cursor:pointer;
}
.roles-perm-toolbar__filters{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-end;
}
.roles-perm-toolbar__filters .btn{
  min-width:unset;
}
.roles-perm-toolbar__filters .btn.is-active{
  border-color:rgba(34,197,94,.45);
  background:rgba(34,197,94,.14);
  color:var(--text);
}
.roles-perm-toolbar__stats{
  grid-column:1 / -1;
  font-size:.93rem;
  color:var(--text-soft);
}
.roles-perm-empty{
  margin-top:8px;
  padding:14px 16px;
  border:1px dashed var(--border);
  border-radius:16px;
  background:rgba(148,163,184,.08);
  color:var(--text-soft);
}
.roles-perm-grid--enhanced .perm-group[hidden],
.roles-perm-grid--enhanced .perm-check[hidden]{
  display:none !important;
}
.roles-perm-grid--enhanced{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px;
}
.roles-perm-grid--enhanced .perm-group{
  padding:18px;
  border-radius:20px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  min-width:0;
}
.roles-perm-grid--enhanced .perm-group__head{
  align-items:center;
  margin-bottom:14px;
}
.roles-perm-grid--enhanced .perm-group__head > div{
  min-width:0;
}
.roles-perm-grid--enhanced .perm-group__head strong{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:1.15rem;
  line-height:1.25;
  color:var(--text);
}
.roles-perm-grid--enhanced .perm-group__meta{
  display:inline-flex;
  margin-top:8px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(148,163,184,.12);
  color:var(--muted);
  font-weight:700;
}
.roles-perm-grid--enhanced .perm-group__toggle{
  flex:0 0 auto;
  padding:8px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:rgba(148,163,184,.08);
  font-weight:700;
  white-space:nowrap;
}
.roles-perm-grid--enhanced .perm-grid{
  grid-template-columns:1fr;
  gap:10px;
}
.roles-perm-grid--enhanced .perm-check{
  width:100%;
  min-width:0;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(148,163,184,.08);
  align-items:flex-start;
}
.roles-perm-grid--enhanced .perm-check input{
  flex:0 0 auto;
  margin-top:4px;
}
.roles-perm-grid--enhanced .perm-check__label{
  flex:1 1 auto;
  min-width:0;
  font-size:.98rem;
  color:var(--text);
  line-height:1.45;
  overflow-wrap:anywhere;
}
.roles-error-box{
  margin-top:0;
}
.roles-modal-foot{
  padding:16px 24px 20px;
}
.roles-modal-foot__hint{
  color:var(--text-soft);
  line-height:1.45;
  font-size:.95rem;
}

:root[data-theme="light"] .roles-modal-card--enhanced{
  box-shadow:0 28px 80px rgba(15,23,42,.18);
}
:root[data-theme="light"] .roles-modal-head{
  background:linear-gradient(180deg, #ffffff, #f5f7fb);
}
:root[data-theme="light"] .roles-modal-kicker{
  color:#15803d;
  background:#ecfdf3;
  border-color:#bbf7d0;
}
:root[data-theme="light"] .roles-hero-card{
  background:linear-gradient(180deg, #f8fafc, #f1f5f9);
  border-color:#dbe4ee;
}
:root[data-theme="light"] .roles-stat-card{
  background:#ffffff;
  border-color:#dbe4ee;
}
:root[data-theme="light"] .roles-stat-card--accent{
  background:linear-gradient(180deg, #f0fdf4, #ecfdf5);
  border-color:#bbf7d0;
}
:root[data-theme="light"] .roles-switch-card__text strong,
:root[data-theme="light"] .roles-field label,
:root[data-theme="light"] .roles-perm-grid--enhanced .perm-group__head strong{
  color:#0f172a;
}
:root[data-theme="light"] .roles-switch-card__text small,
:root[data-theme="light"] .roles-stat-card__help,
:root[data-theme="light"] .roles-modal-foot__hint{
  color:#475569;
}
:root[data-theme="light"] .roles-panel--permissions,
:root[data-theme="light"] .roles-perm-grid--enhanced .perm-group{
  background:#ffffff;
  border-color:#dbe4ee;
}
:root[data-theme="light"] .roles-perm-grid--enhanced .perm-group__meta{
  background:#eef2ff;
  color:#475569;
}
:root[data-theme="light"] .roles-perm-grid--enhanced .perm-group__selection{
  background:#ecfdf3;
  color:#166534;
}
:root[data-theme="light"] .roles-perm-grid--enhanced .perm-group__toggle{
  background:#f8fafc;
  border-color:#dbe4ee;
  color:#334155;
}
:root[data-theme="light"] .roles-perm-grid--enhanced .perm-check{
  background:#f8fafc;
  border-color:#e2e8f0;
}
:root[data-theme="light"] .roles-perm-grid--enhanced .perm-check__title{
  color:#0f172a;
}
:root[data-theme="light"] .roles-perm-grid--enhanced .perm-check__code{
  color:#64748b;
}
:root[data-theme="light"] .roles-perm-grid--enhanced .perm-check:hover{
  background:#eefbf3;
  border-color:#86efac;
}
:root[data-theme="light"] .roles-error-box{
  background:#fff1f2;
  border-color:#fecdd3;
}

:root[data-theme="light"] .roles-perm-searchbox{
  background:#f8fafc;
  border-color:#dbe4ee;
}
:root[data-theme="light"] .roles-perm-searchbox input{
  color:#0f172a;
}
:root[data-theme="light"] .roles-perm-searchbox__clear,
:root[data-theme="light"] .roles-perm-toolbar__stats,
:root[data-theme="light"] .roles-perm-empty{
  color:#475569;
}
:root[data-theme="light"] .roles-perm-empty{
  background:#f8fafc;
  border-color:#dbe4ee;
}
:root[data-theme="light"] .roles-perm-toolbar__filters .btn.is-active{
  background:#ecfdf3;
  border-color:#86efac;
  color:#166534;
}

@media (max-width: 1100px){
  .roles-hero-card{
    grid-template-columns:1fr;
  }
  .roles-hero-card__aside{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 920px){
  .roles-modal-card--enhanced{
    width:min(98vw, 98vw);
  }
  .roles-hero-card__grid,
  .roles-perm-grid--enhanced,
  .roles-perm-grid--enhanced .perm-grid{
    grid-template-columns:1fr;
  }
  .roles-hero-card__aside{
    grid-template-columns:1fr;
  }
  .roles-perm-toolbar{
    grid-template-columns:1fr;
  }
  .roles-perm-toolbar__filters{
    justify-content:flex-start;
  }
}
@media (max-width: 640px){
  .roles-modal-head__content strong{
    font-size:1.4rem;
  }
  .roles-modal-subtitle{
    font-size:.95rem;
  }
  .roles-modal-head,
  .roles-modal-body,
  .roles-modal-foot{
    padding-left:16px;
    padding-right:16px;
  }
  .roles-hero-card,
  .roles-panel--permissions{
    padding:14px;
    border-radius:18px;
  }
  .roles-panel__actions{
    width:100%;
  }
  .roles-panel__actions .btn{
    flex:1 1 100%;
    min-width:unset;
  }
  .roles-perm-searchbox{
    padding:10px 12px;
  }
  .roles-perm-searchbox__clear{
    padding:0;
    font-size:.92rem;
  }
  .roles-perm-grid--enhanced .perm-group{
    padding:14px;
  }
  .roles-perm-grid--enhanced .perm-group__head{
    flex-direction:column;
    align-items:stretch;
  }
  .roles-perm-grid--enhanced .perm-group__toggle{
    align-self:flex-start;
  }
  .roles-modal-foot{
    flex-direction:column;
    align-items:stretch;
  }
  .roles-modal-foot__actions{
    width:100%;
    margin-left:0;
  }
  .roles-modal-foot__actions .btn{
    flex:1 1 100%;
    max-width:none;
  }
}



/* ===== Roles form rebuilt ===== */
.roles-modal-shell{
  width:min(1180px, 96vw);
  max-width:1180px !important;
  max-height:min(92vh, 940px);
  border-radius:26px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  background:var(--panel, #081223);
}
.roles-modal-shell__head{
  padding:22px 26px 16px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(15,23,42,.96), rgba(15,23,42,.88));
}
.roles-modal-shell__eyebrow{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(34,197,94,.28);
  background:rgba(34,197,94,.12);
  color:var(--accent-strong, #86efac);
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.roles-modal-shell__titleblock{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-top:14px;
}
.roles-modal-shell__title{
  margin:0;
  font-size:1.9rem;
  line-height:1.05;
  color:var(--text);
}
.roles-modal-shell__subtitle{
  margin:8px 0 0;
  max-width:760px;
  color:var(--text-soft);
  font-size:1rem;
  line-height:1.55;
}
.roles-modal-shell__close{
  flex:0 0 auto;
}
.roles-modal-shell__body{
  flex:1 1 auto;
  overflow:auto;
  padding:24px;
  background:linear-gradient(180deg, rgba(2,6,23,.55), rgba(2,6,23,.35));
}
.roles-form-hero{
  display:grid;
  grid-template-columns:minmax(0, 1.6fr) minmax(280px, .9fr);
  gap:18px;
  align-items:start;
}
.roles-form-maincard,
.roles-form-permissions,
.roles-sidecard{
  border:1px solid var(--border);
  border-radius:22px;
  background:var(--surface-2);
  box-shadow:var(--shadow-soft);
}
.roles-form-maincard{
  padding:22px;
}
.roles-form-maincard__head{
  margin-bottom:16px;
}
.roles-form-section__title{
  font-size:1.35rem;
  font-weight:900;
  color:var(--text);
}
.roles-form-section__hint{
  margin:6px 0 0;
  color:var(--text-soft);
  line-height:1.5;
}
.roles-form-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:16px;
}
.roles-field{
  min-width:0;
}
.roles-field label{
  display:block;
  margin-bottom:8px;
  font-size:.95rem;
  font-weight:800;
  color:var(--text);
}
.roles-field input,
.roles-field textarea{
  width:100%;
}
.roles-field textarea{
  min-height:104px;
  resize:vertical;
}
.roles-form-sidecards{
  display:grid;
  gap:16px;
}
.roles-sidecard{
  padding:18px;
}
.roles-sidecard__label{
  font-size:.76rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:10px;
}
.roles-sidecard__value{
  font-size:2.15rem;
  line-height:1;
  font-weight:900;
  color:var(--text);
}
.roles-sidecard__hint{
  color:var(--text-soft);
  line-height:1.5;
}
.roles-status-toggle{
  display:flex;
  align-items:flex-start;
  gap:12px;
}
.roles-status-toggle input{
  margin-top:4px;
}
.roles-status-toggle__copy{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.roles-status-toggle__copy strong{
  color:var(--text);
  font-size:1rem;
}
.roles-status-toggle__copy small{
  color:var(--text-soft);
  line-height:1.45;
}
.roles-form-permissions{
  margin-top:18px;
  padding:22px;
}
.roles-form-permissions__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}
.roles-form-permissions__actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.roles-perm-toolbar--rebuild{
  margin-top:16px;
}
.roles-perm-groups{
  margin-top:16px;
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}
.roles-perm-groups .perm-group{
  padding:18px;
  border:1px solid var(--border);
  border-radius:20px;
  background:linear-gradient(180deg, rgba(148,163,184,.10), rgba(148,163,184,.05));
}
.roles-perm-groups .perm-group__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}
.roles-perm-groups .perm-group__titlewrap{
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.roles-perm-groups .perm-group__head strong{
  font-size:1.08rem;
  color:var(--text);
}
.roles-perm-groups .perm-group__meta,
.roles-perm-groups .perm-group__selection{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:4px 10px;
  border-radius:999px;
  font-size:.8rem;
  font-weight:800;
}
.roles-perm-groups .perm-group__meta{
  background:rgba(148,163,184,.14);
  color:var(--muted);
}
.roles-perm-groups .perm-group__selection{
  background:rgba(34,197,94,.12);
  color:#22c55e;
}
.roles-perm-groups .perm-group__toggle{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(148,163,184,.08);
  color:var(--text-soft);
  font-weight:800;
}
.roles-perm-groups .perm-group__toggle input{
  margin:0;
}
.roles-perm-groups .perm-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px 12px;
}
.roles-perm-groups .perm-check{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:12px;
  align-items:flex-start;
  min-width:0;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:16px;
  background:rgba(255,255,255,.04);
  transition:border-color .18s ease, background .18s ease, transform .18s ease;
}
.roles-perm-groups .perm-check:hover{
  border-color:rgba(34,197,94,.28);
  background:rgba(34,197,94,.08);
  transform:translateY(-1px);
}
.roles-perm-groups .perm-check input{
  margin-top:3px;
}
.roles-perm-groups .perm-check__main{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.roles-perm-groups .perm-check__title{
  font-size:.96rem;
  line-height:1.35;
  color:var(--text);
  font-weight:800;
}
.roles-perm-groups .perm-check__code{
  font-size:.76rem;
  line-height:1.3;
  color:var(--muted);
  overflow-wrap:anywhere;
}
.roles-error-box{
  margin-top:16px;
}
.roles-modal-shell__foot{
  display:flex;
  align-items:center;
  gap:14px;
  justify-content:space-between;
  padding:16px 22px;
  border-top:1px solid var(--line);
  background:rgba(2,6,23,.84);
}
.roles-modal-shell__footnote{
  color:var(--muted);
}
.roles-modal-shell__actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-left:auto;
}

:root[data-theme="light"] .roles-modal-shell{
  background:#f8fafc;
}
:root[data-theme="light"] .roles-modal-shell__head{
  background:linear-gradient(180deg, #ffffff, #f8fafc);
}
:root[data-theme="light"] .roles-form-maincard,
:root[data-theme="light"] .roles-form-permissions,
:root[data-theme="light"] .roles-sidecard,
:root[data-theme="light"] .roles-perm-groups .perm-group{
  background:#ffffff;
}
:root[data-theme="light"] .roles-modal-shell__title,
:root[data-theme="light"] .roles-form-section__title,
:root[data-theme="light"] .roles-field label,
:root[data-theme="light"] .roles-sidecard__value,
:root[data-theme="light"] .roles-perm-groups .perm-group__head strong,
:root[data-theme="light"] .roles-perm-groups .perm-check__title{
  color:#0f172a;
}
:root[data-theme="light"] .roles-modal-shell__subtitle,
:root[data-theme="light"] .roles-form-section__hint,
:root[data-theme="light"] .roles-sidecard__hint,
:root[data-theme="light"] .roles-status-toggle__copy small,
:root[data-theme="light"] .roles-perm-toolbar__stats,
:root[data-theme="light"] .roles-perm-groups .perm-check__code{
  color:#475569;
}
:root[data-theme="light"] .roles-perm-searchbox{
  background:#f8fafc;
}
:root[data-theme="light"] .roles-perm-groups .perm-check{
  background:#f8fafc;
}
:root[data-theme="light"] .roles-modal-shell__foot{
  background:#ffffff;
}
@media (max-width: 1100px){
  .roles-form-hero{
    grid-template-columns:1fr;
  }
  .roles-form-sidecards{
    grid-template-columns:repeat(3, minmax(0,1fr));
  }
}
@media (max-width: 820px){
  .roles-modal-shell{
    width:min(100vw, 100vw);
    max-height:100vh;
    border-radius:0;
  }
  .roles-modal-shell__head,
  .roles-modal-shell__body,
  .roles-modal-shell__foot{
    padding-left:16px;
    padding-right:16px;
  }
  .roles-form-grid,
  .roles-perm-groups .perm-grid{
    grid-template-columns:1fr;
  }
  .roles-form-permissions__head,
  .roles-modal-shell__titleblock,
  .roles-modal-shell__foot{
    flex-direction:column;
    align-items:stretch;
  }
  .roles-modal-shell__actions{
    margin-left:0;
    justify-content:flex-end;
  }
  .roles-form-sidecards{
    grid-template-columns:1fr;
  }
  .roles-perm-groups .perm-group__head{
    flex-direction:column;
    align-items:flex-start;
  }
}


/* === Pagos: diferenciación visual para Pago al contado === */
.payment-kind-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  line-height:1;
  border:1px solid #dbeafe;
  background:#eff6ff;
  color:#1d4ed8;
}
.payment-kind-badge--cashout{
  border-color:#bbf7d0;
  background:#ecfdf5;
  color:#047857;
}
.payment-kind-badge__dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background:currentColor;
  opacity:.85;
}
.payment-method-stack{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.payment-compact-lines{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-top:6px;
}
.payment-compact-line{
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:12px;
  color:#6b7280;
}
.payment-compact-line strong{
  color:inherit;
  font-size:12px;
}
.payment-cashout-note{
  margin-top:6px;
  padding:6px 8px;
  border-radius:10px;
  background:rgba(16,185,129,.08);
  color:#065f46;
  font-size:12px;
  font-weight:600;
}
.table tr.row-cashout-payment td{
  background:rgba(16,185,129,.04);
}
.table tr.row-cashout-payment:hover td{
  background:rgba(16,185,129,.07);
}
.rep-hero{
  border:1px solid #bbf7d0;
  background:linear-gradient(135deg, rgba(16,185,129,.10), rgba(59,130,246,.06));
  border-radius:14px;
  padding:14px;
  margin-bottom:12px;
}
.rep-hero__title{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 6px;
  font-size:16px;
}
.rep-hero__copy{
  margin:0;
  color:#065f46;
  font-size:13px;
}
.rep-summary-cards{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-top:12px;
}
.rep-summary-card{
  border:1px solid #d1fae5;
  background:#fff;
  border-radius:12px;
  padding:10px 12px;
}
.rep-summary-card .label{
  display:block;
  font-size:12px;
  color:#6b7280;
  margin-bottom:6px;
}
.rep-summary-card strong{
  font-size:15px;
  line-height:1.2;
}
.rep-summary-card--accent{
  border-color:#86efac;
  background:#f0fdf4;
}
.rep-summary-card--accent strong{
  color:#065f46;
}
.rep-tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border-radius:999px;
  padding:4px 10px;
  font-size:12px;
  font-weight:700;
  background:#ecfdf5;
  color:#047857;
  border:1px solid #bbf7d0;
}
@media (max-width: 920px){
  .rep-summary-cards{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width: 720px){
  .payment-compact-line{
    flex-direction:column;
    gap:2px;
  }
  .rep-summary-cards,
  .rep-grid{
    grid-template-columns:1fr;
  }
}
:root[data-theme="light"] .table tr.row-cashout-payment td{
  background:rgba(16,185,129,.05);
}


/* =====================
   REPORTES DASHBOARD
====================== */
.report-kpis{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin: 14px 0 18px;
}
.report-kpi{
  position:relative;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius: 18px;
  background: rgba(255,255,255,0.03);
  padding: 14px 16px;
  box-shadow: var(--shadow-soft);
}
.report-kpi::after{
  content:'';
  position:absolute;
  inset:auto 0 0 0;
  height:4px;
  opacity:.95;
}
.report-kpi__label{ font-size:12px; color:var(--muted); font-weight:800; letter-spacing:.3px; text-transform:uppercase; }
.report-kpi__value{ margin-top:8px; font-size:28px; font-weight:900; line-height:1.05; }
.report-kpi__hint{ margin-top:6px; font-size:12px; color:var(--muted); }
.report-kpi--neutral::after{ background:linear-gradient(90deg,#94a3b8,#cbd5e1); }
.report-kpi--active::after{ background:linear-gradient(90deg,#22c55e,#86efac); }
.report-kpi--late::after{ background:linear-gradient(90deg,#ef4444,#fb7185); }
.report-kpi--paid::after{ background:linear-gradient(90deg,#3b82f6,#93c5fd); }
.report-kpi--month::after{ background:linear-gradient(90deg,#f59e0b,#fcd34d); }
.report-kpi--money::after{ background:linear-gradient(90deg,#14b8a6,#5eead4); }
.report-kpi--money-warn::after{ background:linear-gradient(90deg,#f97316,#fdba74); }

.report-date-quickcuts{ display:flex; flex-direction:column; gap:8px; }
.report-date-quickcuts__actions{ display:flex; flex-wrap:wrap; gap:8px; }
.report-date-quickcuts--compact .report-date-quickcuts__actions .btn{
  min-height:40px;
}
.report-filter-hint .subtle-box{
  min-height:44px;
  display:flex;
  align-items:center;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background: rgba(255,255,255,0.03);
  color: var(--text);
  font-size:13px;
}

:root[data-theme="light"] .report-kpi{ background:#fff; border-color:#dbe4ee; }
:root[data-theme="light"] .report-filter-hint .subtle-box{ background:#fff; border-color:#dbe4ee; color:#334155; }

.report-section-title{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  margin:20px 0 10px;
}
.report-section-title h3{
  margin:0;
  color:var(--text);
  font-size:1.05rem;
  font-weight:900;
  line-height:1.2;
}
.report-section-title p{
  margin:4px 0 0;
  color:var(--muted);
  font-size:.88rem;
  line-height:1.35;
}
.report-section-title--payments{
  margin-top:16px;
}

@media (max-width:1100px){
  .report-kpis{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:720px){
  .report-kpis{ grid-template-columns:1fr; }
  .report-date-quickcuts__actions{ width:100%; }
  .report-date-quickcuts__actions .btn{ flex:1 1 calc(50% - 8px); }
}


/* ===== Préstamos: cliente seleccionado ===== */
.prestamo-cliente-card{
  border:1px dashed var(--border-soft);
  background: rgba(0,0,0,0.08);
  border-radius: 16px;
  padding: 14px 16px;
  margin-top: 2px;
}
.prestamo-cliente-card__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.prestamo-cliente-card__eyebrow{
  font-size:12px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color: var(--muted);
}
.prestamo-cliente-card__title{
  font-size:16px;
  font-weight:900;
  color: var(--text);
  line-height:1.25;
  margin-top:4px;
}
.prestamo-cliente-card__badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid var(--border-soft);
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
  background: rgba(148,163,184,.12);
  color: var(--text-soft);
}
.prestamo-cliente-card__grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:12px;
}
.prestamo-cliente-card__value{
  margin-top:4px;
  font-weight:700;
  color: var(--text);
  line-height:1.35;
  word-break: break-word;
}
.prestamo-cliente-card__hint{
  margin-top:12px;
  font-size:13px;
  color: var(--muted);
}
.prestamo-cliente-card--selected{
  border-style: solid;
  border-color: rgba(34,197,94,.32);
  background: rgba(34,197,94,.08);
  box-shadow: 0 10px 24px rgba(34,197,94,.08);
}
.prestamo-cliente-card--selected .prestamo-cliente-card__badge{
  border-color: rgba(34,197,94,.35);
  background: rgba(34,197,94,.18);
  color: var(--text);
}
.prestamo-cliente-card--empty{
  border-color: var(--border-soft);
}
@media (max-width: 980px){
  .prestamo-cliente-card__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px){
  .prestamo-cliente-card{
    padding: 14px;
  }
  .prestamo-cliente-card__head{
    flex-direction:column;
    align-items:flex-start;
  }
  .prestamo-cliente-card__grid{
    grid-template-columns: 1fr;
  }
}
:root[data-theme="light"] .prestamo-cliente-card{
  background: rgba(15,23,42,.02);
}
:root[data-theme="light"] .prestamo-cliente-card--selected{
  background: rgba(34,197,94,.10);
}


.prestamo-resumen-card{
  border:1px solid var(--line);
  border-radius:18px;
  padding:16px 18px;
  background: color-mix(in srgb, var(--card) 90%, transparent);
  box-shadow: var(--shadow-1);
}
.prestamo-resumen-card__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.prestamo-resumen-card__eyebrow{
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:800;
}
.prestamo-resumen-card__title{
  font-size:16px;
  font-weight:800;
  color:var(--text);
  margin-top:4px;
}
.prestamo-resumen-card__badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:96px;
  padding:8px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  border:1px solid rgba(245, 158, 11, .24);
  color:#f59e0b;
  background:rgba(245, 158, 11, .12);
}
.prestamo-resumen-card__grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px 18px;
}
.prestamo-resumen-card__value{
  margin-top:4px;
  font-size:15px;
  font-weight:700;
  color:var(--text);
  word-break:break-word;
}
.prestamo-resumen-card__hint{
  margin-top:14px;
  font-size:12px;
  color:var(--muted);
}
.prestamo-resumen-card--ready{
  border-color: rgba(16, 185, 129, .28);
  background: color-mix(in srgb, rgba(16, 185, 129, .10) 65%, var(--card));
}
.prestamo-resumen-card--ready .prestamo-resumen-card__badge{
  border-color: rgba(16, 185, 129, .28);
  color:#10b981;
  background:rgba(16, 185, 129, .14);
}
.prestamo-resumen-card--empty{
  opacity:.96;
}
@media (max-width: 860px){
  .prestamo-resumen-card__grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px){
  .prestamo-resumen-card{
    padding:14px;
  }
  .prestamo-resumen-card__head{
    flex-direction:column;
    align-items:flex-start;
  }
  .prestamo-resumen-card__grid{
    grid-template-columns:1fr;
  }
}
:root[data-theme="light"] .prestamo-resumen-card{
  background:#fff;
}
:root[data-theme="light"] .prestamo-resumen-card--ready{
  background:#f0fdf4;
}


/* =====================
   REPORTES TABS
====================== */
.report-tabs{
  display:flex;
  gap:10px;
  margin: 10px 0 18px;
  flex-wrap:wrap;
}
.report-tab{
  border:1px solid var(--border);
  background: rgba(255,255,255,0.03);
  color: var(--muted);
  border-radius: 999px;
  padding: 11px 18px;
  font-weight: 800;
  cursor:pointer;
  transition: .18s ease;
}
.report-tab:hover{
  border-color: rgba(34,197,94,.35);
  color: var(--text);
}
.report-tab.is-active{
  color:#052e16;
  border-color: rgba(34,197,94,.55);
  background: linear-gradient(135deg,#4ade80,#22c55e);
  box-shadow: 0 12px 24px rgba(34,197,94,.18);
}
.report-panel{ display:none; }
.report-panel.is-active{ display:block; }
.report-loan-meta{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.report-loan-meta__top{
  color: var(--text);
}
.report-loan-meta__next{
  font-size:12px;
  color: var(--muted);
}
.report-loan-meta__next.is-late{
  color:#ef4444;
  font-weight:700;
}
.report-payment-date{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.report-payment-date__late{
  color:#ef4444;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.report-legend{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin:16px 0 18px;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:16px;
  background:rgba(148,163,184,.08);
}
.report-legend__label{
  font-size:12px;
  font-weight:800;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.04em;
}
.report-legend__order{
  font-size:12px;
  color:var(--muted);
  margin-left:auto;
}
.report-status-stack{
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:flex-start;
}
.report-attention-badge{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid transparent;
  font-size:11px;
  font-weight:800;
  letter-spacing:.03em;
  text-transform:uppercase;
  white-space:nowrap;
}
.report-attention--today{
  color:#92400e;
  background:rgba(245,158,11,.18);
  border-color:rgba(245,158,11,.35);
}
.report-attention--overdue{
  color:#b91c1c;
  background:rgba(239,68,68,.16);
  border-color:rgba(239,68,68,.35);
}
.report-attention--range{
  color:#0f766e;
  background:rgba(20,184,166,.16);
  border-color:rgba(20,184,166,.32);
}
.report-attention--stable{
  color:#475569;
  background:rgba(148,163,184,.14);
  border-color:rgba(148,163,184,.28);
}
:root[data-theme="light"] .report-legend{
  background:#fff;
  border-color:#dbe4ee;
}
:root[data-theme="light"] .report-tab{
  background:#fff;
  border-color:#dbe4ee;
  color:#475569;
}
@media (max-width:720px){
  .report-tabs{ flex-direction:column; }
  .report-tab{ width:100%; }
  .report-legend__order{ width:100%; margin-left:0; }
}


.report-quick-filter{
  display:grid;
  grid-template-columns:minmax(220px,320px) 1fr;
  gap:12px;
  align-items:end;
  margin:10px 0 14px;
}
.report-quick-filter__hint{
  min-height:46px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  padding:0 14px;
  border:1px dashed var(--line);
  border-radius:14px;
  color:var(--muted);
  background:rgba(148,163,184,.06);
  font-size:13px;
}
.report-quick-filter__hint span{
  min-width:220px;
  flex:1 1 360px;
}
:root[data-theme="light"] .report-quick-filter__hint{
  background:#f8fafc;
  border-color:#dbe4ee;
}
@media (max-width:900px){
  .report-quick-filter{ grid-template-columns:1fr; }
}

.payment-dashboard-shell{
  display:flex;
  flex-direction:column;
  gap:18px;
  margin-top:14px;
}
.payment-dashboard-hero{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  padding:18px 20px;
  border:1px solid var(--border);
  border-radius:22px;
  background:rgba(15,23,42,.32);
  box-shadow:var(--shadow-soft);
}
.payment-dashboard-eyebrow{
  margin:0 0 4px;
  font-size:12px;
  font-weight:900;
  color:var(--accent-2);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.payment-dashboard-hero h3{
  margin:0;
  color:var(--text);
  font-size:1.45rem;
  font-weight:950;
  letter-spacing:0;
}
.payment-dashboard-hero p{
  margin:5px 0 0;
  color:var(--muted);
  font-size:.93rem;
  line-height:1.4;
}
.payment-dashboard-range{
  align-self:center;
  padding:8px 12px;
  border:1px solid rgba(34,197,94,.28);
  border-radius:999px;
  background:rgba(34,197,94,.10);
  color:var(--text);
  font-size:12px;
  font-weight:850;
  white-space:nowrap;
}
.payment-report-filters{
  display:grid;
  grid-template-columns:repeat(4,minmax(150px,1fr)) auto;
  gap:12px;
  align-items:end;
}
.payment-report-filter-actions{
  display:flex;
  gap:8px;
  justify-content:flex-end;
}
.payment-report-filter-actions .btn{
  min-height:44px;
  white-space:nowrap;
}
.payment-kpi-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
.payment-kpi{
  min-height:116px;
  padding:16px 18px;
  border:1px solid var(--border);
  border-radius:18px;
  background:rgba(255,255,255,.04);
  box-shadow:var(--shadow-soft);
}
.payment-kpi span{
  display:block;
  color:var(--muted);
  font-size:12px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.payment-kpi strong{
  display:block;
  margin-top:9px;
  color:var(--text);
  font-size:clamp(1.45rem,2.4vw,2.25rem);
  line-height:1.05;
  font-weight:950;
}
.payment-kpi small{
  display:block;
  margin-top:7px;
  color:var(--muted);
  font-size:12px;
}
.payment-charts-grid{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(280px,.8fr);
  gap:14px;
}
.payment-chart-panel{
  min-width:0;
  padding:16px;
  border:1px solid var(--border);
  border-radius:20px;
  background:rgba(255,255,255,.035);
  box-shadow:var(--shadow-soft);
}
.payment-chart-panel--wide{
  grid-row:span 2;
}
.payment-chart-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.payment-chart-head h4,
.payment-summary-table-head h4{
  margin:0;
  color:var(--text);
  font-size:1rem;
  font-weight:950;
}
.payment-chart-head p,
.payment-summary-table-head p{
  margin:3px 0 0;
  color:var(--muted);
  font-size:12px;
  line-height:1.35;
}
.payment-chart-head select{
  width:auto;
  min-width:132px;
}
.payment-line-chart,
.payment-bar-chart,
.payment-donut-chart{
  min-height:236px;
}
.payment-chart-metrics{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-bottom:8px;
}
.payment-chart-metrics span{
  padding:9px 11px;
  border:1px solid rgba(34,197,94,.18);
  border-radius:14px;
  background:rgba(34,197,94,.07);
}
.payment-chart-metrics small,
.payment-donut-leader small{
  display:block;
  color:var(--muted);
  font-size:10px;
  font-weight:900;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.payment-chart-metrics strong{
  display:block;
  margin-top:3px;
  color:var(--text);
  font-size:14px;
  font-weight:950;
}
.payment-line-svg{
  width:100%;
  height:248px;
  display:block;
}
.payment-chart-grid{
  stroke:rgba(148,163,184,.20);
  stroke-width:1;
}
.payment-chart-y,
.payment-chart-x{
  fill:var(--muted);
  font-size:11px;
  font-weight:750;
}
.payment-line-area{
  fill:url(#paymentLineFill);
}
.payment-line-path{
  fill:none;
  stroke:#16a34a;
  stroke-width:4.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.payment-line-dot{
  fill:#16a34a;
  stroke:var(--surface);
  stroke-width:3;
  transition:r .18s ease, filter .18s ease;
}
.payment-line-dot--peak{
  fill:#a3e635;
  stroke:#14532d;
  filter:drop-shadow(0 8px 12px rgba(34,197,94,.32));
}
.payment-line-point:hover .payment-line-dot{
  r:7;
}
.payment-peak-line{
  stroke:rgba(34,197,94,.35);
  stroke-width:1.5;
  stroke-dasharray:4 5;
}
.payment-peak-label{
  fill:var(--text);
  font-size:12px;
  font-weight:900;
}
.payment-chart-empty{
  min-height:210px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:18px;
  border:1px dashed var(--border);
  border-radius:16px;
  color:var(--muted);
  text-align:center;
}
.payment-chart-empty strong{
  color:var(--text);
}
.payment-bar-chart{
  display:grid;
  align-items:stretch;
}
.payment-range-chart{
  min-height:236px;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
  align-items:end;
}
.payment-range-column{
  min-width:0;
  display:grid;
  grid-template-rows:auto 1fr auto auto;
  gap:7px;
  align-items:end;
}
.payment-range-value{
  color:var(--text);
  font-size:18px;
  line-height:1;
  font-weight:950;
  text-align:center;
}
.payment-range-track{
  height:142px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:6px;
  border:1px solid rgba(148,163,184,.18);
  border-radius:18px;
  background:linear-gradient(180deg, rgba(148,163,184,.10), rgba(148,163,184,.04));
  overflow:hidden;
}
.payment-range-fill{
  width:100%;
  min-height:8px;
  border-radius:13px;
  background:linear-gradient(180deg,#a3e635 0%,#22c55e 52%,#0f766e 100%);
  box-shadow:0 12px 24px rgba(34,197,94,.22);
  transition:height .28s ease;
}
.payment-range-column:hover .payment-range-fill{
  filter:saturate(1.08) brightness(1.04);
}
.payment-range-label{
  color:var(--text);
  font-size:11px;
  font-weight:900;
  text-align:center;
  line-height:1.15;
}
.payment-range-total{
  color:var(--muted);
  font-size:11px;
  font-weight:750;
  text-align:center;
  white-space:nowrap;
}
.payment-donut-chart{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:16px;
}
.payment-donut-modern{
  display:grid;
  grid-template-columns:150px 1fr;
  align-items:center;
  gap:14px;
}
.payment-donut{
  width:150px;
  aspect-ratio:1;
  border-radius:999px;
  display:grid;
  place-items:center;
  position:relative;
  box-shadow:0 18px 35px rgba(15,23,42,.18);
  transition:transform .18s ease;
}
.payment-donut:hover{
  transform:translateY(-2px);
}
.payment-donut::after{
  content:'';
  position:absolute;
  inset:30px;
  border-radius:inherit;
  background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--border);
}
.payment-donut span,
.payment-donut small{
  position:relative;
  z-index:1;
  text-align:center;
}
.payment-donut span{
  max-width:92px;
  color:var(--text);
  font-size:15px;
  font-weight:950;
  line-height:1.05;
}
.payment-donut small{
  display:block;
  color:var(--muted);
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
}
.payment-donut-leader{
  min-width:0;
  padding:12px 13px;
  border:1px solid rgba(34,197,94,.18);
  border-radius:16px;
  background:rgba(34,197,94,.07);
}
.payment-donut-leader strong{
  display:block;
  margin-top:5px;
  color:var(--text);
  font-size:18px;
  font-weight:950;
}
.payment-donut-leader span{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:12px;
  line-height:1.3;
}
.payment-donut-legend{
  display:flex;
  flex-direction:column;
  gap:9px;
}
.payment-donut-legend div{
  display:grid;
  grid-template-columns:12px 1fr auto;
  align-items:center;
  gap:8px;
  color:var(--text);
  font-size:13px;
}
.payment-donut-legend i{
  width:10px;
  height:10px;
  border-radius:999px;
}
.payment-donut-legend strong{
  font-size:12px;
}
.payment-summary-table-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-top:4px;
}
.payment-summary-table-wrap{
  margin-top:-6px;
}
.payment-summary-row.is-voided td{
  background:rgba(239,68,68,.045);
}
.payment-method-chip{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:3px 9px;
  border-radius:999px;
  background:rgba(34,197,94,.12);
  color:var(--accent-2);
  font-weight:900;
  font-size:12px;
}
:root[data-theme="light"] .payment-dashboard-hero,
:root[data-theme="light"] .payment-kpi,
:root[data-theme="light"] .payment-chart-panel{
  background:#fff;
  border-color:#dbe4ee;
}
:root[data-theme="light"] .payment-dashboard-range,
:root[data-theme="light"] .payment-method-chip{
  background:#ecfdf5;
  border-color:#bbf7d0;
  color:#166534;
}
:root[data-theme="light"] .payment-chart-metrics span,
:root[data-theme="light"] .payment-donut-leader{
  background:#f0fdf4;
  border-color:#bbf7d0;
}
:root[data-theme="light"] .payment-donut::after{
  background:#fff;
}
@media (max-width:1320px){
  .payment-report-filters{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .payment-report-filter-actions{
    justify-content:flex-start;
  }
  .payment-kpi-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .payment-charts-grid{
    grid-template-columns:1fr;
  }
  .payment-chart-panel--wide{
    grid-row:auto;
  }
}
@media (max-width:760px){
  .payment-dashboard-hero,
  .payment-chart-head,
  .payment-summary-table-head{
    flex-direction:column;
    align-items:stretch;
  }
  .payment-dashboard-range{
    align-self:flex-start;
    white-space:normal;
  }
  .payment-report-filters,
  .payment-kpi-grid{
    grid-template-columns:1fr;
  }
  .payment-report-filter-actions{
    flex-direction:column;
  }
  .payment-chart-metrics,
  .payment-donut-modern{
    grid-template-columns:1fr;
    justify-items:center;
  }
  .payment-range-chart{
    grid-template-columns:1fr;
    gap:12px;
  }
  .payment-range-column{
    grid-template-columns:64px 1fr 92px;
    grid-template-rows:auto auto;
    align-items:center;
  }
  .payment-range-value{
    grid-row:span 2;
    text-align:left;
  }
  .payment-range-track{
    height:18px;
    padding:4px;
  }
  .payment-range-fill{
    width:100%;
    height:100% !important;
    transform-origin:left center;
    transform:scaleX(var(--range-scale, 1));
  }
  .payment-range-label{
    text-align:left;
  }
  .payment-range-total{
    grid-column:3;
    grid-row:1 / span 2;
    text-align:right;
  }
  .payment-donut-legend{
    width:100%;
  }
}


.toolbar-pay-history{
  margin-bottom:14px;
  align-items:end;
}

.toolbar-pay-history > div{
  min-width:220px;
}

.toolbar-pay-history__quickcuts{
  min-width:260px;
}

.toolbar-pay-history__export{
  min-width:220px;
}

.toolbar-pay-history__actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.pay-history-summary{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin:0 0 14px;
}

.pay-history-summary__grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}

.pay-history-card{
  border:1px solid var(--border);
  border-radius:18px;
  background:rgba(255,255,255,0.03);
  padding:14px 16px;
  box-shadow:var(--shadow-soft);
}

.pay-history-card--accent{
  border-color:rgba(59,130,246,.25);
}

.pay-history-card--money{
  border-color:rgba(20,184,166,.24);
}

.pay-history-card--voided{
  border-color:rgba(239,68,68,.26);
}

.pay-history-card__label{
  display:block;
  font-size:12px;
  color:var(--muted);
  font-weight:800;
  letter-spacing:.03em;
  text-transform:uppercase;
}

.pay-history-card__value{
  display:block;
  margin-top:8px;
  font-size:28px;
  font-weight:900;
  line-height:1.05;
}

.pay-history-card__hint{
  display:block;
  margin-top:6px;
  font-size:12px;
  color:var(--muted);
}

.pay-history-methods{
  border:1px solid var(--border);
  border-radius:18px;
  background:rgba(148,163,184,.08);
  padding:14px 16px;
}

.pay-history-methods__label{
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:10px;
}

.pay-history-methods__list{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.pay-method-pill{
  display:inline-flex;
  flex-direction:column;
  gap:3px;
  min-width:160px;
  border:1px solid var(--border);
  border-radius:14px;
  padding:10px 12px;
  background:rgba(255,255,255,0.04);
}

.pay-method-pill strong{
  font-size:13px;
  color:var(--text);
}

.pay-method-pill span{
  font-size:12px;
  color:var(--muted);
}

.pay-history-summary__empty{
  display:flex;
  flex-direction:column;
  gap:6px;
  border:1px dashed var(--border);
  border-radius:16px;
  padding:14px 16px;
  color:var(--muted);
  background:rgba(148,163,184,.06);
}

.payment-status-stack{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:190px;
}

.payment-status-badge{
  display:inline-flex;
  width:max-content;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  font-size:11px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.payment-status-badge--active{
  color:var(--accent);
  border-color:rgba(34,197,94,.30);
  background:rgba(34,197,94,.10);
}

.payment-status-badge--voided{
  color:var(--danger);
  border-color:rgba(239,68,68,.36);
  background:rgba(239,68,68,.12);
}

.payment-void-detail,
.payment-original-detail{
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(239,68,68,.22);
  background:rgba(239,68,68,.08);
  color:var(--text-soft);
  font-size:12px;
  line-height:1.35;
}

.payment-original-detail{
  border-color:var(--border);
  background:rgba(148,163,184,.08);
}

.payment-amount-voided{
  color:var(--muted);
  text-decoration:line-through;
  text-decoration-thickness:2px;
}

.table tr.row-payment-voided td{
  background:rgba(239,68,68,.045);
}

.table tr.row-payment-voided:hover td{
  background:rgba(239,68,68,.08);
}

.payment-void-modal{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.payment-void-modal--readonly{
  gap:16px;
}

.payment-void-modal__message{
  margin:0;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(239,68,68,.28);
  background:rgba(239,68,68,.10);
  color:var(--text-soft);
}

.payment-void-summary{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.payment-void-summary > div{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(148,163,184,.08);
}

.payment-void-summary span{
  display:block;
  font-size:12px;
  color:var(--muted);
  font-weight:800;
  letter-spacing:.03em;
  text-transform:uppercase;
}

.payment-void-summary strong{
  display:block;
  margin-top:4px;
  font-size:14px;
  line-height:1.3;
}

.payment-void-detail--modal,
.payment-original-detail--modal{
  font-size:14px;
  line-height:1.5;
}

:root[data-theme="light"] .pay-history-card,
:root[data-theme="light"] .pay-history-methods,
:root[data-theme="light"] .pay-method-pill{
  background:#fff;
  border-color:#dbe4ee;
}

:root[data-theme="light"] .pay-history-summary__empty{
  background:#f8fafc;
  border-color:#dbe4ee;
}

:root[data-theme="light"] .payment-void-detail{
  background:#fef2f2;
  border-color:#fecaca;
}

:root[data-theme="light"] .payment-original-detail,
:root[data-theme="light"] .payment-void-summary > div{
  background:#f8fafc;
  border-color:#dbe4ee;
}

@media (max-width:1100px){
  .pay-history-summary__grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:720px){
  .toolbar-pay-history__actions .btn{
    flex:1 1 calc(50% - 8px);
  }
  .pay-history-summary__grid{
    grid-template-columns:1fr;
  }
  .pay-method-pill{
    min-width:100%;
  }
  .payment-void-summary{
    grid-template-columns:1fr;
  }
}

.reporte-dialog--ticket{
  width:min(360px,92vw);
  max-height:88vh;
  padding:12px;
}

.reporte-dialog--ticket .reporte-body{
  padding:10px 0;
}

.ticket58{
  width:80mm;
  max-width:100%;
  margin:0 auto;
  background:#fff;
  color:#000;
  font-family:"Courier New", Courier, monospace;
  font-size:12px;
  line-height:1.45;
  padding:4mm 3mm 3mm;
}

.ticket58__title{
  text-align:center;
  font-weight:700;
  letter-spacing:.04em;
  margin-bottom:8px;
}

.ticket58__divider{
  border-top:1px dashed #000;
  margin:7px 0;
}

.ticket58__row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin:4px 0;
}

.ticket58__label{
  flex:1 1 auto;
  min-width:0;
}

.ticket58__value{
  flex:0 0 auto;
  text-align:right;
  max-width:56%;
  overflow-wrap:anywhere;
  word-break:normal;
}

.ticket58__signature-line{
  margin:64px auto 10px;
  width:84%;
  border-top:1px solid #000;
}

.ticket58__footer{
  text-align:center;
  margin-top:4px;
}

.ticket58__watermark{
  text-align:center;
  margin-top:6px;
  font-size:10px;
  line-height:1.25;
  opacity:.42;
  letter-spacing:.02em;
}

@media print{
  @page{ size: 58mm auto; margin: 2mm; }
  .reporte-header{ display:none !important; }
  .reporte-footer{ display:none !important; }
  .reporte-dialog--ticket{ width:58mm !important; max-width:58mm !important; padding:0 !important; }
  .reporte-body{ padding:0 !important; background:#fff !important; }
  .ticket58{
    width:58mm !important;
    max-width:58mm !important;
    padding:0 !important;
    margin:0 !important;
    background:#fff !important;
    color:#000 !important;
    font-family:"Courier New", Consolas, Menlo, Monaco, monospace !important;
    font-size:12px !important;
    font-weight:700 !important;
    line-height:1.35 !important;
    letter-spacing:0.2px !important;
    text-shadow:none !important;
    box-shadow:none !important;
    opacity:1 !important;
  }
  .ticket58__title{
    font-size:15px !important;
    font-weight:800 !important;
    text-align:center !important;
    text-transform:uppercase !important;
    color:#000 !important;
    letter-spacing:0.2px !important;
  }
  .ticket58__row, .ticket58__label, .ticket58__value{
    color:#000 !important;
    font-weight:700 !important;
    text-shadow:none !important;
    opacity:1 !important;
  }
  .ticket58__row--important{ font-size:13px !important; font-weight:800 !important; }
  .ticket58__row--important .ticket58__label,
  .ticket58__row--important .ticket58__value{ font-weight:800 !important; }
  .ticket58__footer, .ticket58__watermark{
    font-size:11px !important;
    font-weight:700 !important;
    color:#000 !important;
    opacity:1 !important;
  }
  .ticket58__divider, .ticket58__signature-line{ border-color:#000 !important; opacity:1 !important; }
}


.pagos-module-header{
  margin-bottom:14px;
}

.pagos-module-header .module-actions .btn{
  min-width:180px;
}

@media (max-width:640px){
  .pagos-module-header .module-actions{
    width:100%;
    justify-content:stretch;
  }
  .pagos-module-header .module-actions .btn{
    width:100%;
  }
}

/* CHECKPOINT 10: acciones del comprobante ajustadas para ticket térmico + PDF carta */
.reporte-dialog--ticket .reporte-footer{
  flex-wrap:wrap;
  justify-content:center;
}
.reporte-dialog--ticket .reporte-footer .btn{
  min-width:120px;
}

/* Permisos de acceso a clientes (módulo Usuarios) */
.access-check{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:12px;
  border:1px solid var(--border-soft, #dbe3ee);
  border-radius:14px;
  background:rgba(148,163,184,.08);
  min-height:72px;
}
.access-check input{ margin-top:3px; flex:0 0 auto; }
.access-check span{ display:flex; flex-direction:column; gap:3px; line-height:1.25; }
.access-check small{ color:var(--muted); font-size:12px; font-weight:500; }
.access-check--wide{ min-height:auto; }
.access-chip-list{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.access-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border:1px solid rgba(96,165,250,.22);
  border-radius:999px;
  background:rgba(59,130,246,.10);
  font-size:12.5px;
  font-weight:700;
}
.access-chip button{
  width:20px;
  height:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:999px;
  cursor:pointer;
  background:rgba(239,68,68,.14);
  color:#dc2626;
  font-weight:900;
}
#assignedCompaniesBox.is-disabled{ opacity:.64; }
#assignedCompaniesBox.is-disabled .access-chip button{ display:none; }

/* CHECKPOINT 2: UI profesional para permisos de acceso en Usuarios */
input[type="checkbox"],
input[type="radio"]{
  width:auto;
  min-width:16px;
  accent-color:var(--accent);
  box-shadow:none;
}

.usuarios-modal-card{
  max-width:920px;
  border-radius:18px;
}

.usuarios-modal-body{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:18px;
  background:linear-gradient(180deg, rgba(148,163,184,.045), transparent 36%);
}

.usuarios-form-section{
  border:1px solid var(--border);
  border-radius:18px;
  background:rgba(255,255,255,.035);
  padding:16px;
  box-shadow:0 10px 26px rgba(15,23,42,.06);
}

.usuarios-form-section__head{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:flex-start;
  padding-bottom:12px;
  margin-bottom:12px;
  border-bottom:1px solid var(--border);
}

.usuarios-form-section__head h3{
  margin:0;
  font-size:16px;
  line-height:1.2;
  color:var(--text);
  font-weight:850;
  letter-spacing:-.01em;
}

.usuarios-form-section__head p{
  margin:4px 0 0;
  color:var(--muted);
  font-size:12.5px;
  line-height:1.45;
}

.usuarios-form-grid{
  gap:14px;
  align-items:start;
}

.usuarios-form-grid label,
.access-company-card label{
  margin-top:0;
  font-size:12.5px;
  letter-spacing:.02em;
}

.usuarios-status-box{
  min-height:64px;
  display:flex;
  align-items:center;
  gap:10px;
  padding-top:22px;
}

.usuarios-status-check{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin:0;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:999px;
  background:rgba(148,163,184,.08);
  color:var(--text);
  font-weight:800;
  white-space:nowrap;
}

.usuarios-status-check input{
  flex:0 0 auto;
}

.usuarios-access-section{
  background:linear-gradient(180deg, rgba(59,130,246,.07), rgba(148,163,184,.035));
}

.usuarios-access-section__head{
  align-items:center;
}

.usuarios-section-badge{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(96,165,250,.25);
  background:rgba(59,130,246,.11);
  color:var(--text);
  font-size:11px;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.access-options-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
  margin-top:2px;
}

.access-check{
  display:flex;
  align-items:flex-start;
  gap:11px;
  padding:13px 14px;
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--surface);
  min-height:76px;
  margin:0;
  cursor:pointer;
  overflow:hidden;
}

.access-check input{
  flex:0 0 auto;
  width:17px;
  height:17px;
  margin:2px 0 0;
}

.access-check span{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
  line-height:1.28;
}

.access-check strong{
  color:var(--text);
  font-size:13.5px;
  font-weight:850;
}

.access-check small{
  color:var(--muted);
  font-size:12px;
  font-weight:500;
  line-height:1.35;
}

.access-check--wide{
  grid-column:1 / -1;
  min-height:auto;
}

.access-company-card{
  margin-top:12px;
  padding:14px;
  border:1px dashed var(--border-soft, var(--border));
  border-radius:16px;
  background:rgba(15,23,42,.035);
}

.access-company-card__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.access-company-card__head label{
  margin:0;
  color:var(--text-soft);
  font-weight:850;
}

.access-company-card__head p{
  margin:3px 0 0;
  color:var(--muted);
  font-size:12px;
  line-height:1.4;
}

.access-company-search input{
  min-height:42px;
  font-size:14px;
}

.access-chip-list{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:10px;
  min-height:30px;
  align-items:center;
}

.access-chip{
  max-width:100%;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:5px 7px 5px 10px;
  border:1px solid rgba(96,165,250,.25);
  border-radius:999px;
  background:rgba(59,130,246,.10);
  color:var(--text);
  font-size:12px;
  font-weight:800;
  line-height:1.2;
}

.access-chip span{
  min-width:0;
  max-width:260px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.access-chip button{
  width:18px;
  height:18px;
  min-width:18px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:999px;
  cursor:pointer;
  background:rgba(239,68,68,.14);
  color:#dc2626;
  font-size:14px;
  line-height:1;
  font-weight:900;
}

#assignedCompaniesBox.is-disabled{
  opacity:.68;
  background:rgba(148,163,184,.10);
}

#assignedCompaniesBox.is-disabled .access-chip button{
  display:none;
}

#assignedCompaniesBox.is-disabled .access-company-search input{
  cursor:not-allowed;
}

@media (max-width:860px){
  .usuarios-modal-card{ max-width:calc(100vw - 24px); }
  .usuarios-modal-body{ padding:14px; }
  .access-options-grid,
  .usuarios-form-grid{ grid-template-columns:1fr; }
  .usuarios-access-section__head{ align-items:flex-start; }
  .usuarios-section-badge{ margin-top:2px; }
  .usuarios-status-box{ padding-top:0; min-height:auto; }
}

@media (max-width:560px){
  .usuarios-form-section{ padding:13px; border-radius:15px; }
  .usuarios-form-section__head{ flex-direction:column; align-items:flex-start; gap:8px; }
  .usuarios-section-badge{ width:max-content; }
  .access-check{ padding:12px; }
  .access-chip span{ max-width:190px; }
  .modal-foot{ flex-direction:column; align-items:stretch; }
  .modal-foot .btn{ flex:1; }
}

/* CHECKPOINT 3: contraste y legibilidad de campos interactivos en modo día */
:root[data-theme="light"] input,
:root[data-theme="light"] select,
:root[data-theme="light"] textarea{
  background:#ffffff;
  color:#0f172a;
  border-color:#cbd5e1;
}

:root[data-theme="light"] input::placeholder,
:root[data-theme="light"] textarea::placeholder{
  color:#64748b;
  opacity:1;
}

:root[data-theme="light"] option,
:root[data-theme="light"] optgroup{
  background:#ffffff;
  color:#0f172a;
}

.access-company-search{
  position:relative;
  z-index:2;
}

.access-company-search input{
  position:relative;
  z-index:2;
}

.access-company-results{
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 6px);
  z-index:40;
  max-height:220px;
  overflow:auto;
  padding:6px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--panel-solid);
  color:var(--text);
  box-shadow:var(--shadow-soft);
}

.access-company-result{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:9px 10px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:var(--text);
  text-align:left;
  cursor:pointer;
}

.access-company-result:hover,
.access-company-result:focus-visible{
  background:rgba(34,197,94,.12);
  outline:none;
}

.access-company-result strong{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:13.5px;
  font-weight:850;
}

.access-company-result small{
  flex:0 0 auto;
  color:var(--muted);
  font-size:11.5px;
  font-weight:750;
}

.access-company-result--empty{
  cursor:default;
  color:var(--muted);
  font-size:13px;
  justify-content:flex-start;
}

.access-company-result--empty:hover{
  background:transparent;
}

:root[data-theme="light"] .access-company-card{
  background:#f8fafc;
  border-color:#cbd5e1;
}

:root[data-theme="light"] .access-company-search input{
  background:#ffffff;
  color:#0f172a;
  border-color:#cbd5e1;
}

:root[data-theme="light"] .access-company-results{
  background:#ffffff;
  color:#0f172a;
  border-color:#cbd5e1;
  box-shadow:0 18px 45px rgba(15,23,42,.18);
}

:root[data-theme="light"] .access-company-result{
  color:#0f172a;
}

:root[data-theme="light"] .access-company-result:hover,
:root[data-theme="light"] .access-company-result:focus-visible{
  background:#ecfdf3;
}

:root[data-theme="light"] .access-company-result small,
:root[data-theme="light"] .access-company-result--empty{
  color:#475569;
}

:root[data-theme="light"] .access-chip{
  background:#eff6ff;
  border-color:#bfdbfe;
  color:#0f172a;
}

:root[data-theme="light"] .access-check{
  background:#ffffff;
  border-color:#dbe4ee;
}

/* CHECKPOINT 4: modal de detalle de usuario */
.user-detail-modal-card{
  max-width:920px;
  border-radius:18px;
  overflow:hidden;
}

.user-detail-head{
  border-bottom:1px solid var(--border);
}

.user-detail-body{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:18px;
  background:linear-gradient(180deg, rgba(59,130,246,.055), transparent 34%);
}

.user-detail-hero{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr) auto;
  gap:14px;
  align-items:center;
  padding:16px;
  border:1px solid var(--border);
  border-radius:18px;
  background:var(--surface);
  box-shadow:0 12px 28px rgba(15,23,42,.08);
}

.user-detail-avatar{
  width:54px;
  height:54px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:18px;
  background:linear-gradient(135deg, rgba(59,130,246,.22), rgba(34,197,94,.16));
  border:1px solid rgba(96,165,250,.28);
  color:var(--text);
  font-size:22px;
  font-weight:900;
}

.user-detail-hero__text{
  min-width:0;
}

.user-detail-hero__text h3{
  margin:0;
  color:var(--text);
  font-size:20px;
  line-height:1.2;
  letter-spacing:-.02em;
}

.user-detail-hero__text p{
  margin:4px 0 0;
  color:var(--muted);
  font-size:13px;
  font-weight:750;
}

.user-detail-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 11px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  border:1px solid var(--border);
  white-space:nowrap;
}

.user-detail-status.is-active{
  background:rgba(34,197,94,.12);
  color:#16a34a;
  border-color:rgba(34,197,94,.32);
}

.user-detail-status.is-inactive{
  background:rgba(239,68,68,.12);
  color:#dc2626;
  border-color:rgba(239,68,68,.32);
}

.user-detail-section{
  padding:15px;
  border:1px solid var(--border);
  border-radius:18px;
  background:rgba(255,255,255,.035);
}

.user-detail-section__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
  padding-bottom:10px;
  border-bottom:1px solid var(--border);
}

.user-detail-section__head h4{
  margin:0;
  color:var(--text);
  font-size:15px;
  line-height:1.2;
  font-weight:900;
}

.user-detail-section__head span{
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}

.user-detail-grid,
.user-detail-access-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}

.user-detail-grid--compact{
  grid-template-columns:repeat(3, minmax(0, 1fr));
}

.user-detail-item{
  min-width:0;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
}

.user-detail-item span{
  display:block;
  margin-bottom:4px;
  color:var(--muted);
  font-size:11px;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.user-detail-item strong{
  display:block;
  min-width:0;
  color:var(--text);
  font-size:13px;
  line-height:1.35;
  word-break:break-word;
}

.user-detail-subtitle{
  margin:13px 0 8px;
  color:var(--text);
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.user-detail-company-list,
.user-detail-permissions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.user-detail-company-list span,
.user-detail-permissions span{
  display:inline-flex;
  align-items:center;
  max-width:100%;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(96,165,250,.24);
  background:rgba(59,130,246,.10);
  color:var(--text);
  font-size:12px;
  font-weight:800;
  line-height:1.25;
}

.user-detail-permissions{
  margin-top:12px;
}

.user-detail-note{
  padding:10px 12px;
  border-radius:14px;
  font-size:13px;
  font-weight:800;
  border:1px solid var(--border);
}

.user-detail-note--ok{
  background:rgba(34,197,94,.10);
  color:var(--text);
  border-color:rgba(34,197,94,.24);
}

.user-detail-note--warn{
  background:rgba(245,158,11,.10);
  color:var(--text);
  border-color:rgba(245,158,11,.25);
}

.user-detail-foot{
  border-top:1px solid var(--border);
}

:root[data-theme="light"] .user-detail-section,
:root[data-theme="light"] .user-detail-body{
  background:#fff;
}

@media (max-width:760px){
  .user-detail-modal-card{ max-width:calc(100vw - 24px); }
  .user-detail-hero{ grid-template-columns:auto minmax(0, 1fr); }
  .user-detail-status{ grid-column:1 / -1; justify-self:start; }
  .user-detail-grid,
  .user-detail-access-grid,
  .user-detail-grid--compact{ grid-template-columns:1fr; }
}

@media (max-width:560px){
  .user-detail-body{ padding:14px; }
  .user-detail-hero,
  .user-detail-section{ padding:13px; border-radius:15px; }
  .user-detail-foot{ flex-direction:column; align-items:stretch; }
}

/* CHECKPOINT 5: Usuarios - interfaz más atractiva, clara e interactiva */
.usuarios-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 14px;
  padding:6px;
  border:1px solid var(--border);
  border-radius:18px;
  background:rgba(148,163,184,.08);
  box-shadow:var(--shadow-soft);
}
.usuarios-tab{
  border:none;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  border-radius:14px;
  padding:10px 16px;
  font-weight:900;
  letter-spacing:0;
  transition:background var(--transition), color var(--transition), box-shadow var(--transition);
}
.usuarios-tab:hover{
  background:var(--sidebar-hover);
  color:var(--text);
}
.usuarios-tab.is-active{
  background:linear-gradient(90deg,var(--accent-2),var(--accent));
  color:var(--accent-ink);
  box-shadow:var(--shadow-soft);
}
.usuarios-tab[hidden],
.usuarios-tab-panel[hidden]{
  display:none !important;
}
.users-module-card{
  position:relative;
  overflow:hidden;
  padding:22px;
  border-color:rgba(34,197,94,.18);
}
.users-module-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:150px;
  pointer-events:none;
  background:
    radial-gradient(circle at 16% 20%, rgba(34,197,94,.18), transparent 34%),
    radial-gradient(circle at 86% 6%, rgba(59,130,246,.14), transparent 34%);
  opacity:.9;
}
.users-module-card > *{ position:relative; z-index:1; }
.users-hero{
  padding:18px;
  border:1px solid var(--border);
  border-radius:20px;
  background:linear-gradient(135deg, rgba(15,23,42,.72), rgba(15,23,42,.36));
  box-shadow:0 18px 38px rgba(0,0,0,.18);
}
.users-kicker{
  width:max-content;
  margin-bottom:6px;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid rgba(34,197,94,.28);
  background:rgba(34,197,94,.10);
  color:var(--accent);
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.users-hero h2{
  margin:0;
  font-size:clamp(24px, 3vw, 34px);
  letter-spacing:-.035em;
}
.users-primary-action{
  min-height:44px;
  padding-inline:18px;
  border-radius:999px;
  box-shadow:0 14px 28px rgba(34,197,94,.20);
}
.users-primary-action:hover{ transform:translateY(-2px); filter:brightness(1.04); }
.users-stats-grid{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:12px;
  margin:16px 0;
}
.users-stat-card{
  display:flex;
  gap:10px;
  align-items:center;
  padding:14px;
  border:1px solid var(--border);
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
  box-shadow:0 12px 26px rgba(0,0,0,.12);
  transition:transform var(--transition), border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.users-stat-card:hover{
  transform:translateY(-2px);
  border-color:rgba(34,197,94,.34);
  box-shadow:0 18px 36px rgba(0,0,0,.18);
}
.users-stat-card__icon{
  flex:0 0 42px;
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:15px;
  background:rgba(34,197,94,.12);
  border:1px solid rgba(34,197,94,.22);
  font-size:19px;
}
.users-stat-card strong{
  display:block;
  color:var(--text);
  font-size:22px;
  line-height:1;
  font-weight:950;
}
.users-stat-card span{
  display:block;
  color:var(--text-soft);
  font-size:12.5px;
  font-weight:850;
  margin-top:2px;
}
.users-stat-card small{
  display:block;
  color:var(--muted);
  font-size:11px;
  line-height:1.25;
  margin-top:2px;
}
.users-filter-panel{
  display:grid;
  grid-template-columns:minmax(220px, 1.4fr) minmax(160px, .75fr) minmax(150px, .75fr) auto;
  gap:12px;
  align-items:end;
  padding:14px;
  border:1px solid var(--border);
  border-radius:18px;
  background:rgba(15,23,42,.18);
}
.users-filter-panel label{
  margin-top:0;
  font-size:12px;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.users-search-field{ position:relative; }
.users-search-field span{
  position:absolute;
  left:13px;
  top:50%;
  transform:translateY(-50%);
  color:var(--muted);
  font-size:18px;
  pointer-events:none;
}
.users-search-field input{ padding-left:38px; }
.users-filter-actions{ display:flex; justify-content:flex-end; }
.users-filter-actions .btn{ min-height:42px; white-space:nowrap; }
.users-table-wrap{
  border-radius:20px;
  border:1px solid var(--border);
  overflow:auto;
  box-shadow:0 18px 36px rgba(0,0,0,.14);
}
.users-table{ min-width:880px; }
.users-table thead th{
  position:sticky;
  top:0;
  z-index:1;
  padding-top:14px;
  padding-bottom:14px;
  font-size:11px;
  letter-spacing:.065em;
  text-transform:uppercase;
}
.users-row td{ vertical-align:middle; }
.users-row{
  transition:transform var(--transition), background var(--transition), box-shadow var(--transition);
}
.users-row:hover{
  background:linear-gradient(90deg, rgba(34,197,94,.09), transparent 60%);
}
.users-id-cell{
  color:var(--muted);
  font-weight:900;
}
.users-name-cell{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:220px;
}
.users-avatar{
  flex:0 0 40px;
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:15px;
  background:linear-gradient(135deg, rgba(34,197,94,.23), rgba(59,130,246,.18));
  border:1px solid rgba(34,197,94,.28);
  color:var(--text);
  font-size:13px;
  font-weight:950;
  letter-spacing:.02em;
}
.users-name-cell strong{
  display:block;
  color:var(--text);
  font-weight:900;
  line-height:1.15;
}
.users-name-cell small{
  display:block;
  max-width:280px;
  margin-top:3px;
  color:var(--muted);
  font-size:11.5px;
  line-height:1.25;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.users-role-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  font-weight:900;
}
.users-role-badge::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:999px;
  background:var(--accent);
  box-shadow:0 0 0 4px rgba(34,197,94,.12);
}
.users-action-stack{
  gap:6px;
  justify-content:center;
  flex-wrap:nowrap;
}
.users-action-stack .btn-icon,
.users-action-stack .btn{
  box-shadow:none;
}
.users-view-btn{
  border-color:rgba(59,130,246,.35);
  background:rgba(59,130,246,.11);
}
.users-view-btn:hover{
  background:rgba(59,130,246,.18);
  border-color:rgba(59,130,246,.52);
}
.users-toggle-btn{
  min-width:92px;
}
.users-support-card{
  border-radius:20px;
  overflow:hidden;
}
.usuarios-modal-card--interactive,
.user-detail-modal-card--interactive{
  width:min(960px, 94vw);
  border:1px solid rgba(34,197,94,.20);
  box-shadow:0 28px 90px rgba(0,0,0,.42);
}
.usuarios-modal-head,
.user-detail-head{
  background:
    radial-gradient(circle at 12% 10%, rgba(34,197,94,.18), transparent 34%),
    linear-gradient(135deg, rgba(15,23,42,.96), rgba(15,23,42,.78));
}
.usuarios-modal-head strong,
.user-detail-head strong{
  font-size:18px;
  letter-spacing:-.015em;
}
.usuarios-form-section{
  transition:transform var(--transition), border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.usuarios-form-section:hover{
  transform:translateY(-1px);
  border-color:rgba(34,197,94,.22);
  box-shadow:0 16px 34px rgba(0,0,0,.12);
}
.usuarios-form-section__head h3::before{
  content:"";
  display:inline-block;
  width:8px;
  height:8px;
  margin-right:8px;
  border-radius:999px;
  background:var(--accent);
  box-shadow:0 0 0 5px rgba(34,197,94,.12);
  vertical-align:middle;
}
.access-check{
  transition:transform var(--transition), border-color var(--transition), background var(--transition), box-shadow var(--transition);
}
.access-check:hover{
  transform:translateY(-1px);
  border-color:rgba(34,197,94,.32);
  box-shadow:0 12px 24px rgba(0,0,0,.10);
}
.access-check:has(input:checked){
  border-color:rgba(34,197,94,.45);
  background:linear-gradient(180deg, rgba(34,197,94,.12), rgba(34,197,94,.05));
}
.access-chip{
  transition:transform var(--transition), background var(--transition), border-color var(--transition);
}
.access-chip:hover{
  transform:translateY(-1px);
  border-color:rgba(59,130,246,.48);
}
.access-company-result{
  transition:background var(--transition), transform var(--transition);
}
.access-company-result:hover{ transform:translateX(2px); }
.usuarios-modal-foot,
.user-detail-foot{
  background:rgba(15,23,42,.72);
  backdrop-filter:blur(10px);
}
.usuarios-modal-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.user-detail-hero{
  background:
    radial-gradient(circle at 0% 0%, rgba(34,197,94,.16), transparent 36%),
    var(--surface);
}
.user-detail-section{
  transition:transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.user-detail-section:hover{
  transform:translateY(-1px);
  border-color:rgba(59,130,246,.28);
  box-shadow:0 14px 28px rgba(0,0,0,.10);
}
:root[data-theme="light"] .users-hero{
  background:linear-gradient(135deg, #ffffff, #f1f5f9);
  box-shadow:0 18px 38px rgba(15,23,42,.08);
}
:root[data-theme="light"] .usuarios-tabs{
  background:#f8fafc;
  border-color:#dbe4ee;
}
:root[data-theme="light"] .users-filter-panel,
:root[data-theme="light"] .users-stat-card,
:root[data-theme="light"] .usuarios-form-section,
:root[data-theme="light"] .user-detail-section{
  background:#ffffff;
}
:root[data-theme="light"] .users-table-wrap{
  background:#ffffff;
  box-shadow:0 18px 36px rgba(15,23,42,.08);
}
:root[data-theme="light"] .users-row:hover{
  background:linear-gradient(90deg, #ecfdf3, #ffffff 72%);
}
:root[data-theme="light"] .users-avatar{
  color:#064e3b;
  background:linear-gradient(135deg, #dcfce7, #dbeafe);
}
:root[data-theme="light"] .usuarios-modal-head,
:root[data-theme="light"] .user-detail-head{
  background:linear-gradient(135deg, #ffffff, #f8fafc);
}
:root[data-theme="light"] .usuarios-modal-foot,
:root[data-theme="light"] .user-detail-foot{
  background:#ffffff;
}
@media (max-width:1080px){
  .users-stats-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .users-filter-panel{ grid-template-columns:1fr 1fr; }
  .users-filter-actions{ justify-content:flex-start; }
}
@media (max-width:720px){
  .usuarios-tab{ width:100%; }
  .users-module-card{ padding:14px; }
  .users-hero{ flex-direction:column; align-items:flex-start; }
  .users-primary-action{ width:100%; justify-content:center; }
  .users-stats-grid{ grid-template-columns:1fr; }
  .users-filter-panel{ grid-template-columns:1fr; }
  .users-filter-actions .btn{ width:100%; }
  .usuarios-modal-actions{ width:100%; }
  .usuarios-modal-actions .btn{ flex:1 1 auto; }
}

/* Pagos: pestañas superiores y buscador interactivo de préstamos */
.pagos-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 14px;
  padding:6px;
  border:1px solid var(--border);
  border-radius:18px;
  background:rgba(148,163,184,.08);
  box-shadow:var(--shadow-soft);
}
.pagos-tab{
  border:none;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  border-radius:14px;
  padding:10px 16px;
  font-weight:900;
  letter-spacing:.02em;
  transition:background var(--transition), color var(--transition), transform var(--transition);
}
.pagos-tab:hover{ background:var(--sidebar-hover); color:var(--text); }
.pagos-tab.is-active{
  background:linear-gradient(90deg,var(--accent-2),var(--accent));
  color:var(--accent-ink);
  box-shadow:var(--shadow-soft);
}
.pagos-tab-panel[hidden]{ display:none !important; }
.prestamo-search-field,
.entity-search-field{
  position:relative;
  overflow:visible;
}
.prestamo-search-field:focus-within,
.entity-search-field:focus-within{
  z-index:3000;
}
.sr-only-select{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}
.prestamo-search-results{
  position:absolute;
  z-index:50;
  top:calc(100% - 18px);
  left:0;
  right:0;
  max-height:280px;
  overflow:auto;
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--card);
  box-shadow:var(--shadow);
  padding:6px;
}
.prestamo-search-option{
  width:100%;
  border:0;
  background:transparent;
  color:var(--text);
  text-align:left;
  cursor:pointer;
  border-radius:12px;
  padding:10px 12px;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.prestamo-search-option:hover,
.prestamo-search-option:focus{ outline:none; background:var(--sidebar-hover); }
.prestamo-search-option strong{ font-size:13px; }
.prestamo-search-option span,
.prestamo-search-empty{ color:var(--muted); font-size:12px; }
.prestamo-search-empty{ padding:12px; }
:root[data-theme="light"] .pagos-tabs{ background:#f8fafc; border-color:#dbe4ee; }
:root[data-theme="light"] .prestamo-search-results{ background:#fff; border-color:#dbe4ee; }
@media (max-width:720px){
  .pagos-tab{ width:100%; }
  .prestamo-search-results,
  .entity-search-results{
    position:absolute;
    margin-top:0;
  }
}

/* === CP-002: Préstamo autocomplete sólido + módulo Sucursal === */
.prestamo-search-field{
  position:relative;
  isolation:isolate;
}
.prestamo-search-control,
.entity-search-control{
  position:relative;
  display:flex;
  align-items:center;
}
.prestamo-search-control input,
.entity-search-control input{
  width:100%;
  padding-right:118px;
}
.prestamo-search-control input.has-selected-prestamo,
.prestamo-search-control input.has-selected-entity,
.entity-search-control input.has-selected-entity{
  border-color:rgba(34,197,94,.78);
  background:linear-gradient(90deg, rgba(34,197,94,.18), rgba(34,197,94,.08));
  color:#ecfdf5;
  box-shadow:0 0 0 3px rgba(34,197,94,.16), inset 0 0 0 1px rgba(34,197,94,.18);
}
.prestamo-search-control input.has-selected-prestamo:focus,
.prestamo-search-control input.has-selected-entity:focus,
.entity-search-control input.has-selected-entity:focus{
  border-color:rgba(74,222,128,.95);
  box-shadow:0 0 0 4px rgba(34,197,94,.22), inset 0 0 0 1px rgba(34,197,94,.22);
}
.prestamo-clear-btn{
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  min-width:92px;
  height:32px;
  padding:0 11px;
  border:1px solid rgba(34,197,94,.42);
  border-radius:999px;
  background:linear-gradient(180deg, rgba(15,23,42,.96), rgba(17,24,39,.90));
  color:#bbf7d0;
  font-weight:900;
  font-size:12px;
  letter-spacing:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  cursor:pointer;
  box-shadow:0 8px 16px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.06);
  transition:background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}
.prestamo-clear-btn[hidden]{ display:none !important; }
.prestamo-clear-btn:hover,
.prestamo-clear-btn:focus{
  outline:none;
  background:linear-gradient(180deg, rgba(22,163,74,.26), rgba(15,23,42,.94));
  border-color:rgba(74,222,128,.78);
  color:#ffffff;
  transform:translateY(-50%) scale(1.02);
}
.prestamo-clear-btn__icon{
  width:15px;
  height:15px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex:0 0 auto;
}
.prestamo-search-results,
.entity-search-results{
  position:absolute;
  left:0;
  right:0;
  top:calc(100% - 12px);
  z-index:3200;
  max-height:320px;
  overflow:auto;
  border:1px solid var(--border-soft);
  background:var(--panel-solid);
  color:var(--text);
  box-shadow:0 22px 60px rgba(0,0,0,.62);
  backdrop-filter:none;
}
.prestamo-search-option,
.entity-search-option{
  border:1px solid transparent;
  background:rgba(15,23,42,.88);
  color:var(--text);
  margin:3px 0;
}
.prestamo-search-option strong,
.entity-search-option strong{
  color:var(--text);
  letter-spacing:.01em;
}
.prestamo-search-option span,
.entity-search-option span{
  color:var(--text-soft);
}
.prestamo-search-option:hover,
.prestamo-search-option:focus,
.entity-search-option:hover,
.entity-search-option:focus{
  background:rgba(34,197,94,.16);
  border-color:rgba(34,197,94,.55);
  color:#ffffff;
}
.prestamo-search-option:hover strong,
.prestamo-search-option:focus strong,
.prestamo-search-option:hover span,
.prestamo-search-option:focus span,
.entity-search-option:hover strong,
.entity-search-option:focus strong,
.entity-search-option:hover span,
.entity-search-option:focus span{
  color:#ffffff;
}
.prestamo-search-empty{
  padding:14px;
  color:var(--text-soft);
  background:rgba(15,23,42,.75);
  border-radius:12px;
}
:root[data-theme="light"] .prestamo-search-results,
:root[data-theme="light"] .entity-search-results{
  background:#ffffff;
  border-color:#cbd5e1;
  box-shadow:0 22px 48px rgba(15,23,42,.18);
}
:root[data-theme="light"] .prestamo-search-option,
:root[data-theme="light"] .entity-search-option{
  background:#f8fafc;
  color:#0f172a;
}
:root[data-theme="light"] .prestamo-clear-btn{
  background:linear-gradient(180deg, #f8fafc, #f0fdf4);
  border-color:rgba(34,197,94,.48);
  color:#166534;
  box-shadow:0 8px 16px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.80);
}
:root[data-theme="light"] .prestamo-search-control input.has-selected-prestamo,
:root[data-theme="light"] .prestamo-search-control input.has-selected-entity,
:root[data-theme="light"] .entity-search-control input.has-selected-entity{
  border-color:#22c55e;
  background:linear-gradient(90deg, #dcfce7, #f0fdf4);
  color:#052e14;
  box-shadow:0 0 0 3px rgba(34,197,94,.18), inset 0 0 0 1px rgba(34,197,94,.18);
}
:root[data-theme="light"] .prestamo-clear-btn:hover,
:root[data-theme="light"] .prestamo-clear-btn:focus{
  background:linear-gradient(180deg, #dcfce7, #f8fafc);
  border-color:#22c55e;
  color:#052e14;
}
@media (max-width:520px){
  .prestamo-search-control input,
  .entity-search-control input{ padding-right:54px; }
  .prestamo-clear-btn{
    min-width:38px;
    width:38px;
    padding:0;
  }
  .prestamo-clear-btn span{ display:none; }
}
:root[data-theme="light"] .prestamo-search-option strong{ color:#0f172a; }
:root[data-theme="light"] .prestamo-search-option span{ color:#475569; }
:root[data-theme="light"] .prestamo-search-option:hover,
:root[data-theme="light"] .prestamo-search-option:focus{
  background:#dcfce7;
  border-color:#86efac;
  color:#052e14;
}
:root[data-theme="light"] .prestamo-search-option:hover strong,
:root[data-theme="light"] .prestamo-search-option:focus strong,
:root[data-theme="light"] .prestamo-search-option:hover span,
:root[data-theme="light"] .prestamo-search-option:focus span{ color:#052e14; }
:root[data-theme="light"] .prestamo-search-empty{
  background:#f8fafc;
  color:#475569;
}
.sucursal-hero{
  border-color:rgba(34,197,94,.22);
}
.sucursal-form-grid textarea{
  min-height:82px;
  resize:vertical;
}
#sucursalesTable td strong{
  color:var(--text);
}
:root[data-theme="light"] #sucursalesTable td strong{
  color:#0f172a;
}

/* =====================
   RESPONSIVE SIDEBAR + DASHBOARD POLISH
   Checkpoint 12: ajuste controlado del menú lateral y layout principal.
====================== */
#btnToggleSidebar{
  position:relative;
  border-color: var(--border-soft);
  background: rgba(255,255,255,.03);
}
#btnToggleSidebar:hover{
  border-color: rgba(34,197,94,.42);
  box-shadow: var(--ring);
}

.shell{
  width:100%;
  transition: grid-template-columns var(--transition), max-width var(--transition), padding var(--transition);
}
.content{
  min-width:0;
  width:100%;
}
#sidebar{
  overflow:auto;
  box-shadow: var(--shadow-soft);
  transition: transform var(--transition), opacity var(--transition), box-shadow var(--transition);
}
#sidebar .nav-btn{
  min-height:44px;
  font-weight:800;
}
#sidebar .submenu{
  display:grid;
  gap:8px;
  padding-left:8px;
  border-left:1px solid var(--border);
}

@media (min-width:1101px){
  body.sidebar-collapsed .shell{
    grid-template-columns:minmax(0, 1fr);
    max-width:1180px;
  }
  body.sidebar-collapsed #sidebar{
    display:none;
  }
}

@media (max-width:1100px){
  .shell{
    grid-template-columns:1fr;
    max-width:100%;
    margin-top:14px;
  }
  #sidebar{
    position:fixed;
    top:76px;
    left:14px;
    width:min(320px, calc(100vw - 28px));
    max-height:calc(100dvh - 96px);
    height:auto;
    z-index:30;
    transform:translateX(calc(-100% - 28px));
    opacity:0;
    pointer-events:none;
  }
  body.sidebar-open #sidebar{
    transform:translateX(0);
    opacity:1;
    pointer-events:auto;
    box-shadow:0 24px 70px rgba(0,0,0,.45);
  }
  body.sidebar-open::after{
    content:"";
    position:fixed;
    inset:0;
    z-index:20;
    background:rgba(2,6,23,.46);
    backdrop-filter:blur(2px);
  }
  header{ z-index:40; }
  .content{ width:100%; }
}

@media (max-width:720px){
  header .wrap{
    gap:10px;
  }
  .brand{
    font-size:15px;
    line-height:1.2;
  }
  .header-right{
    gap:8px;
  }
  .api-pill .label{
    display:none;
  }
  .card{
    padding:16px;
    border-radius:14px;
  }
  .table-wrap{
    max-height:62vh;
  }
}

.card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0)),
    var(--panel);
}
.module-header,
.toolbar,
.inline-actions{
  row-gap:8px;
}
.table-wrap{
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
thead th{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.35px;
  color:var(--text-soft);
}
tbody td{
  color:var(--text);
}

/* =====================
   PRESTAMOS FORM UX
====================== */
.prestamo-form-section{
  margin-top:16px;
  padding:16px;
  border:1px solid var(--border);
  border-radius:18px;
  background:rgba(148,163,184,.06);
}
.prestamo-section-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.prestamo-section-heading h3{
  margin:0;
  font-size:1.02rem;
  font-weight:900;
}
.prestamo-section-heading p{
  margin:4px 0 0;
  color:var(--muted);
  font-size:.88rem;
}
.prestamo-section-heading--inline{
  align-items:center;
}
.prestamo-collapsible-body{
  padding-top:12px;
  border-top:1px dashed var(--border);
}
.switch-line{
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:42px;
  padding:8px 12px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface);
  font-weight:850;
  cursor:pointer;
  white-space:nowrap;
}
.switch-line--option{
  border-color:rgba(245,158,11,.52);
  background:rgba(245,158,11,.14);
  color:#fde68a;
  box-shadow:0 10px 24px rgba(245,158,11,.10);
}
.switch-line--option:hover{
  border-color:rgba(250,204,21,.74);
  background:rgba(245,158,11,.20);
  transform:translateY(-1px);
}
.switch-line--option.is-active{
  border-color:#f59e0b;
  background:#f59e0b;
  color:#111827;
  box-shadow:0 14px 30px rgba(245,158,11,.22);
}
.switch-line input{
  width:18px;
  height:18px;
  accent-color:var(--accent);
}
.switch-line--option input{
  accent-color:#f59e0b;
}
.number-stepper{
  display:grid;
  grid-template-columns:44px minmax(72px, 1fr) 44px;
  align-items:center;
  gap:8px;
}
.number-stepper input{
  text-align:center;
  font-weight:900;
  appearance:textfield;
  -moz-appearance:textfield;
}
.number-stepper input::-webkit-outer-spin-button,
.number-stepper input::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}
.number-stepper__btn{
  min-height:44px;
  border-radius:14px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  font-size:1.2rem;
  font-weight:950;
  cursor:pointer;
}
.number-stepper__btn:hover{
  border-color:rgba(34,197,94,.45);
  background:rgba(34,197,94,.10);
}
.number-stepper__btn:disabled{
  opacity:.45;
  cursor:not-allowed;
}
.btn.ghost.prestamo-option-button{
  border-color:rgba(245,158,11,.52);
  background:rgba(245,158,11,.14);
  color:#fde68a;
  box-shadow:0 10px 24px rgba(245,158,11,.10);
}
.btn.ghost.prestamo-option-button:hover{
  border-color:rgba(250,204,21,.74);
  background:rgba(245,158,11,.20);
  transform:translateY(-1px);
}
.btn.ghost.prestamo-option-button.is-active{
  border-color:#f59e0b;
  background:#f59e0b;
  color:#111827;
  box-shadow:0 14px 30px rgba(245,158,11,.22);
}
:root[data-theme="light"] .switch-line--option,
:root[data-theme="light"] .btn.ghost.prestamo-option-button{
  border-color:#f59e0b;
  background:#fff7ed;
  color:#92400e;
  box-shadow:0 12px 28px rgba(146,64,14,.10);
}
:root[data-theme="light"] .switch-line--option:hover,
:root[data-theme="light"] .btn.ghost.prestamo-option-button:hover{
  border-color:#d97706;
  background:#ffedd5;
}
:root[data-theme="light"] .switch-line--option.is-active,
:root[data-theme="light"] .btn.ghost.prestamo-option-button.is-active{
  background:#f59e0b;
  color:#111827;
  box-shadow:0 14px 30px rgba(245,158,11,.20);
}
.prestamo-generate-actions{
  justify-content:center;
  margin-top:20px;
  padding-top:8px;
}
.btn.primary.prestamo-generate-button{
  min-width:min(100%, 320px);
  min-height:56px;
  padding:14px 26px;
  border:1px solid rgba(34,197,94,.55);
  border-radius:18px;
  background:#22c55e;
  color:#052e14;
  font-size:1.02rem;
  font-weight:950;
  letter-spacing:.01em;
  box-shadow:0 16px 36px rgba(34,197,94,.24);
}
.btn.primary.prestamo-generate-button:hover{
  background:#16a34a;
  border-color:#16a34a;
  transform:translateY(-1px);
  box-shadow:0 20px 42px rgba(34,197,94,.30);
}
.btn.primary.prestamo-generate-button:active{
  transform:translateY(0);
}
:root[data-theme="light"] .btn.primary.prestamo-generate-button{
  background:#16a34a;
  border-color:#15803d;
  color:#ffffff;
  box-shadow:0 16px 34px rgba(22,163,74,.22);
}
:root[data-theme="light"] .btn.primary.prestamo-generate-button:hover{
  background:#15803d;
  box-shadow:0 20px 42px rgba(22,163,74,.28);
}
.prestamo-field{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.prestamo-client-search-control{
  position:relative;
  display:flex;
  align-items:center;
}
.prestamo-client-search-control input{
  padding-right:118px;
}
.prestamo-client-search-control input.has-selected-cliente{
  border-color:rgba(34,197,94,.78);
  background:linear-gradient(90deg, rgba(34,197,94,.18), rgba(34,197,94,.08));
  color:#ecfdf5;
  box-shadow:0 0 0 3px rgba(34,197,94,.16), inset 0 0 0 1px rgba(34,197,94,.18);
}
.prestamo-client-search-control input.has-selected-cliente:focus{
  border-color:rgba(74,222,128,.95);
  box-shadow:0 0 0 4px rgba(34,197,94,.22), inset 0 0 0 1px rgba(34,197,94,.22);
}
.prestamo-field label{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
.optional-badge{
  display:inline-flex;
  align-items:center;
  width:max-content;
  padding:2px 7px;
  border-radius:999px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--muted);
  background:var(--surface-2);
  border:1px solid var(--border);
}
.prestamo-field--required label{ color:var(--text); }
.prestamo-field--highlight{
  padding:10px;
  border-radius:16px;
  background:linear-gradient(135deg, rgba(67,97,238,.10), rgba(76,201,240,.12));
  border:1px solid rgba(67,97,238,.24);
  box-shadow:0 10px 24px rgba(67,97,238,.08);
}
.prestamo-field--highlight input{
  background:rgba(255,255,255,.92);
  border-color:rgba(67,97,238,.34);
  color:#0f172a;
  caret-color:#0f172a;
  color-scheme:light;
}
.prestamo-field--highlight input::-webkit-datetime-edit{
  color:#0f172a;
}
.prestamo-field--highlight input::-webkit-calendar-picker-indicator{
  opacity:.78;
}
.prestamo-field--highlight label{
  color:var(--primary);
  font-weight:900;
}
.prestamo-field--invalid{
  border-color:rgba(239,68,68,.36) !important;
}
.prestamo-field-error{
  color:var(--danger);
  font-size:11px;
  font-weight:800;
  line-height:1.25;
}
.prestamo-field--invalid input,
.prestamo-field--invalid select{
  border-color:var(--danger) !important;
  box-shadow:var(--ring-danger) !important;
}
@media (max-width:720px){
  .prestamo-form-section{ padding:13px; }
  .prestamo-section-heading,
  .prestamo-section-heading--inline{
    flex-direction:column;
    align-items:stretch;
  }
  .switch-line{ justify-content:space-between; }
  .prestamo-field--highlight{ padding:9px; }
  .optional-badge{ font-size:9px; }
}
@media (max-width:520px){
  .prestamo-client-search-control input{ padding-right:54px; }
}
:root[data-theme="light"] .prestamo-client-search-control input.has-selected-cliente{
  border-color:#22c55e;
  background:linear-gradient(90deg, #dcfce7, #f0fdf4);
  color:#052e14;
  box-shadow:0 0 0 3px rgba(34,197,94,.18), inset 0 0 0 1px rgba(34,197,94,.18);
}

/* =====================
   GUÍA DEL SISTEMA
====================== */
.sidebar-section{
  margin:10px 6px 2px;
  padding-top:10px;
  border-top:1px solid var(--border);
  color:var(--muted);
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.9px;
}
.guia-card{ overflow:hidden; }
.guia-layout{
  display:grid;
  grid-template-columns:280px minmax(0,1fr);
  gap:16px;
  align-items:start;
}
.guia-menu{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:rgba(0,0,0,.08);
  padding:12px;
  position:sticky;
  top:98px;
}
.guia-menu__title{
  color:var(--muted);
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.8px;
  margin:2px 4px 10px;
}
.guia-menu__list{ display:grid; gap:8px; }
.guia-menu-btn{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  text-align:left;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  padding:10px 12px;
  cursor:pointer;
}
.guia-menu-btn small{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  color:var(--muted);
  font-size:11.5px;
  line-height:1.35;
  margin-top:2px;
}
.guia-menu-btn:hover{ transform:translateY(-1px); border-color:var(--border-soft); }
.guia-menu-btn.active{
  background:var(--sidebar-active);
  border-color:rgba(34,197,94,.48);
  box-shadow:var(--ring);
}
.guia-menu-btn__icon{
  width:30px;
  height:30px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(34,197,94,.12);
  flex:0 0 auto;
}
.guia-content{ min-width:0; display:grid; gap:16px; }
.guia-tutorial{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:rgba(0,0,0,.08);
  padding:16px;
  min-width:0;
}
.guia-tutorial__head{
  display:flex;
  gap:14px;
  align-items:flex-start;
  margin-bottom:14px;
}
.guia-tutorial__icon{
  width:48px;
  height:48px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,rgba(34,197,94,.26),rgba(34,197,94,.08));
  border:1px solid rgba(34,197,94,.24);
  font-size:22px;
  flex:0 0 auto;
}
.guia-breadcrumb{
  color:var(--muted);
  font-size:12px;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.7px;
  margin-bottom:4px;
}
.guia-video-tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:0 0 12px;
}
.guia-video-tab{
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text-soft);
  border-radius:999px;
  padding:8px 12px;
  font-size:13px;
  font-weight:800;
  cursor:pointer;
}
.guia-video-tab.active{
  color:var(--text);
  border-color:rgba(34,197,94,.48);
  background:rgba(34,197,94,.12);
}
.guia-empty-state{
  border:1px dashed var(--border-soft);
  border-radius:14px;
  padding:14px;
  color:var(--muted);
  display:grid;
  gap:4px;
}
.guia-empty-state strong{ color:var(--text); }
.guia-empty-state--main{ min-height:220px; place-content:center; text-align:center; }
.guia-video-box{
  width:100%;
  aspect-ratio:16 / 9;
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--border);
  background:var(--surface);
  box-shadow:var(--shadow-soft);
}
.guia-video-box iframe{ width:100%; height:100%; border:0; display:block; }
.guia-video-placeholder{
  height:100%;
  display:grid;
  place-items:center;
  gap:8px;
  text-align:center;
  padding:22px;
  color:var(--muted);
}
.guia-video-placeholder strong{ color:var(--text); font-size:18px; }
.guia-config-note{
  margin-top:12px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  padding:10px 12px;
  border:1px dashed var(--border-soft);
  border-radius:14px;
  background:rgba(34,197,94,.06);
  color:var(--text-soft);
  font-size:13px;
}
.guia-related-wrap{
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  background:rgba(0,0,0,.06);
}
.guia-related-list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:10px;
  margin-top:10px;
}
.guia-related-card{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-areas:'icon title' 'icon desc';
  gap:2px 10px;
  text-align:left;
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:14px;
  padding:12px;
  cursor:pointer;
}
.guia-related-card span{ grid-area:icon; font-size:22px; align-self:center; }
.guia-related-card strong{ grid-area:title; }
.guia-related-card small{ grid-area:desc; color:var(--muted); line-height:1.35; }
.guia-related-card:hover{ transform:translateY(-1px); border-color:var(--border-soft); }

@media (max-width: 980px){
  .guia-layout{ grid-template-columns:1fr; }
  .guia-menu{ position:relative; top:auto; }
  .guia-menu__list{ grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
}

@media (max-width: 560px){
  .guia-tutorial__head{ flex-direction:column; }
  .guia-related-list{ grid-template-columns:1fr; }
  .guia-config-note{ align-items:flex-start; }
}

/* =====================
   UI REFRESH: ESTRUCTURA GENERAL
====================== */
html{
  overflow-x:hidden;
}

body{
  min-width:320px;
  overflow-x:hidden;
}

header{
  z-index:80;
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,0)),
    var(--panel);
  box-shadow:0 10px 30px rgba(0,0,0,.10);
}

header .wrap{
  width:100%;
  max-width:none;
  min-height:72px;
  margin:0;
  padding:12px clamp(14px, 2vw, 28px);
}

.header-left{
  min-width:0;
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:12px;
  min-width:0;
  letter-spacing:0;
}

.brand-logo{
  width:116px;
  height:52px;
  flex:0 0 116px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 10px;
  overflow:hidden;
  border-radius:16px;
  border:1px solid rgba(34,197,94,.30);
  background:linear-gradient(135deg, #4b5563, #3f3f46);
  box-shadow:0 12px 26px rgba(15,23,42,.18);
}

.brand-logo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}

.brand-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:1px;
  line-height:1.08;
}

.brand-copy strong{
  display:block;
  color:var(--text);
  font-size:18px;
  font-weight:950;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.brand-copy small{
  color:var(--muted);
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
}

.header-right{
  min-width:0;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.shell{
  width:100%;
  max-width:none;
  margin:0;
  padding:18px clamp(14px, 2vw, 28px) 56px;
  grid-template-columns:280px minmax(0, 1fr);
  gap:20px;
}

.content{
  min-width:0;
  width:100%;
}

#sidebar{
  top:88px;
  height:calc(100dvh - 110px);
  padding:12px;
  border-radius:20px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.040), rgba(255,255,255,0)),
    var(--panel);
  border-color:rgba(148,163,184,.22);
}

#sidebar .nav-btn{
  position:relative;
  width:100%;
  min-height:46px;
  justify-content:flex-start;
  border-radius:14px;
  border-color:transparent;
  background:transparent;
  color:var(--text-soft);
  font-weight:900;
  line-height:1.2;
}

#sidebar .nav-btn:hover{
  color:var(--text);
  background:var(--sidebar-hover);
  border-color:var(--border);
}

#sidebar .nav-btn.active{
  color:var(--text);
  background:linear-gradient(90deg, rgba(34,197,94,.18), rgba(34,197,94,.08));
  border-color:rgba(34,197,94,.36);
  box-shadow:inset 3px 0 0 var(--accent), 0 8px 20px rgba(15,23,42,.10);
}

#sidebar .submenu{
  margin:0 0 0 8px;
  padding:4px 0 4px 10px;
}

#sidebar .submenu .nav-btn{
  min-height:40px;
  padding-left:10px;
  font-size:13.5px;
  color:var(--muted);
}

.sidebar-section{
  margin:12px 8px 4px;
  padding-top:12px;
  letter-spacing:.08em;
}

.card{
  border-color:rgba(148,163,184,.24);
}

.module-header{
  align-items:center;
  margin-bottom:14px;
}

.module-header h2{
  letter-spacing:0;
}

.toolbar,
.inline-actions,
.module-actions{
  min-width:0;
}

.table-wrap{
  width:100%;
  max-width:100%;
}

.table-pagination{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin:-4px 0 16px;
  padding:10px 12px;
  border:1px solid rgba(148,163,184,.24);
  border-top:0;
  border-radius:0 0 16px 16px;
  background:rgba(148,163,184,.075);
  color:var(--text-soft);
  box-shadow:0 10px 22px rgba(15,23,42,.06);
}

.table-pagination__summary{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  min-width:0;
  font-size:12.5px;
  font-weight:800;
  color:var(--muted);
}

.table-pagination__summary span{
  display:inline-flex;
  align-items:center;
  gap:4px;
  white-space:nowrap;
}

.table-pagination__summary strong{
  color:var(--text);
  font-variant-numeric:tabular-nums;
}

.table-pagination__controls{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}

.table-pagination__controls label{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin:0;
  color:var(--muted);
  font-size:12.5px;
  font-weight:850;
}

.table-pagination__controls select{
  width:auto;
  min-width:74px;
  height:34px;
  padding:6px 28px 6px 9px;
  border-radius:10px;
  font-size:13px;
  font-weight:850;
}

.table-pagination__page{
  min-width:56px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 10px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  font-size:12.5px;
  font-weight:900;
  font-variant-numeric:tabular-nums;
}

.table-pagination .btn.sm{
  min-height:34px;
  padding:7px 10px;
  font-size:12.5px;
}

:root[data-theme="light"] .table-pagination{
  background:#f8fafc;
  border-color:#dbe4ee;
}

.modal-card{
  max-height:calc(100dvh - 32px);
}

.modal-head,
.modal-foot{
  flex-wrap:wrap;
}

.confirm-dialog-message{
  margin:0;
  padding:14px;
  border:1px solid var(--border);
  border-radius:14px;
  background:rgba(148,163,184,.09);
  color:var(--text-soft);
  font-size:15px;
  line-height:1.5;
}

/* Alertas flotantes modernizadas */
.toast{
  bottom:18px;
  right:18px;
  width:min(430px, calc(100vw - 36px));
  min-height:54px;
  display:grid;
  grid-template-columns:auto minmax(0, 1fr);
  gap:10px;
  align-items:center;
  padding:12px 14px;
  border-radius:16px;
  border-color:rgba(148,163,184,.28);
  background:rgba(17,24,39,.96);
  box-shadow:0 22px 58px rgba(0,0,0,.34);
  z-index:10050;
}

.toast__icon{
  width:30px;
  height:30px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(59,130,246,.16);
  color:#93c5fd;
  font-size:12px;
  font-weight:950;
  text-transform:uppercase;
}

.toast__body{
  min-width:0;
  color:var(--text);
  font-size:14px;
  font-weight:750;
  line-height:1.35;
  overflow-wrap:anywhere;
}

.toast.success{
  border-color:rgba(34,197,94,.38);
}

.toast.success .toast__icon{
  background:rgba(34,197,94,.16);
  color:var(--accent);
}

.toast.warn{
  border-color:rgba(245,158,11,.42);
}

.toast.warn .toast__icon{
  background:rgba(245,158,11,.16);
  color:var(--warn);
}

.toast.error{
  border-color:rgba(239,68,68,.45);
}

.toast.error .toast__icon{
  background:rgba(239,68,68,.15);
  color:var(--danger);
}

:root[data-theme="light"] .toast{
  background:rgba(255,255,255,.98);
  box-shadow:0 22px 58px rgba(15,23,42,.20);
}

/* Permisos: destacar configuración sensible de API */
.roles-perm-groups .perm-group[data-group-key="api-config"]{
  border-color:rgba(59,130,246,.32);
  background:linear-gradient(180deg, rgba(59,130,246,.10), rgba(34,197,94,.045));
}

.roles-perm-groups .perm-group[data-group-key="api-config"] .perm-group__selection{
  background:rgba(59,130,246,.14);
  color:#60a5fa;
}

.roles-perm-groups .perm-check:has(input:checked){
  border-color:rgba(34,197,94,.38);
  background:rgba(34,197,94,.09);
}

.api-pill[hidden],
#btnApiBannerOpen[hidden]{
  display:none !important;
}

.api-pill{
  min-height:40px;
  padding:8px 12px;
  border-color:rgba(148,163,184,.24);
}

.api-banner{
  top:72px;
  z-index:70;
  padding:10px clamp(14px, 2vw, 28px);
}

.api-banner:not(.hidden) + .shell #sidebar{
  top:140px;
  height:calc(100dvh - 162px);
}

@media (min-width:1101px){
  body.sidebar-collapsed .shell{
    max-width:none;
    grid-template-columns:minmax(0, 1fr);
    padding-left:clamp(18px, 2.5vw, 36px);
    padding-right:clamp(18px, 2.5vw, 36px);
  }
}

@media (max-width:1100px){
  .shell{
    grid-template-columns:1fr;
    padding-top:16px;
  }

  #sidebar{
    top:86px;
    left:12px;
    width:min(330px, calc(100vw - 24px));
    height:auto;
    max-height:calc(100dvh - 104px);
    z-index:75;
  }

  .api-banner:not(.hidden) + .shell #sidebar{
    top:136px;
    max-height:calc(100dvh - 150px);
    height:auto;
  }

  body.sidebar-open::after{
    z-index:70;
  }
}

@media (max-width:760px){
  header .wrap{
    min-height:66px;
    gap:10px;
  }

  .brand-logo{
    width:88px;
    height:40px;
    flex-basis:88px;
    padding:5px 7px;
    border-radius:13px;
  }

  .brand-copy strong{
    max-width:42vw;
    font-size:15px;
  }

  .brand-copy small{
    display:none;
  }

  .header-right{
    gap:7px;
  }

  .theme-toggle,
  .logout-btn,
  .icon-square{
    width:40px;
    min-width:40px;
    height:40px;
  }

  .user-chip{
    padding:5px;
  }

  .api-banner{
    top:66px;
    align-items:flex-start;
    flex-direction:column;
  }

  .api-banner__actions{
    width:100%;
  }

  .api-banner__actions .btn{
    flex:1 1 0;
    max-width:none;
  }

  #sidebar{
    top:78px;
    max-height:calc(100dvh - 92px);
  }

  .api-banner:not(.hidden) + .shell #sidebar{
    top:158px;
    max-height:calc(100dvh - 172px);
  }

  .module-header{
    align-items:flex-start;
    flex-direction:column;
  }

  .module-actions,
  .toolbar,
  .inline-actions{
    width:100%;
    justify-content:flex-start;
  }

  .module-actions .btn,
  .toolbar .btn,
  .inline-actions .btn{
    max-width:none;
  }

  .roles-modal-shell{
    width:100vw;
    max-height:100dvh;
    border-radius:0;
  }

  .roles-modal-shell__title{
    font-size:1.45rem;
  }

  .roles-form-maincard,
  .roles-form-permissions,
  .roles-sidecard{
    border-radius:16px;
  }

  .toast{
    left:12px;
    right:12px;
    bottom:12px;
    width:auto;
  }

  .table-pagination{
    align-items:stretch;
    flex-direction:column;
    margin-top:-2px;
  }

  .table-pagination__summary,
  .table-pagination__controls{
    width:100%;
    justify-content:flex-start;
  }

  .table-pagination__controls .btn{
    flex:1 1 auto;
  }
}

@media (max-width:480px){
  header .wrap{
    padding-left:10px;
    padding-right:10px;
  }

  .brand-copy strong{
    max-width:34vw;
  }

  .shell{
    padding-left:10px;
    padding-right:10px;
  }

  .card{
    padding:14px;
  }

  #sidebar{
    left:10px;
    width:calc(100vw - 20px);
  }
}

/* =====================
   VIREBO UI SYSTEM - final reusable layer
====================== */
:root{
  --virebo-lime:#a8f000;
  --virebo-lime-2:#7fd000;
  --virebo-green:#19c86b;
  --virebo-green-2:#0fa968;
  --virebo-forest:#0a3f2a;
  --virebo-forest-2:#072d23;
  --virebo-charcoal:#181c22;
  --virebo-charcoal-2:#252b33;
  --virebo-ink:#0f172a;
  --virebo-muted:#aeb7c5;
  --virebo-grad:linear-gradient(145deg, #181c22 0%, #24332e 42%, #0fa968 100%);
  --virebo-grad-soft:linear-gradient(135deg, rgba(168,240,0,.22), rgba(25,200,107,.10));
  --ui-bg:var(--bg-solid);
  --ui-surface:var(--panel-solid);
  --ui-surface-soft:rgba(255,255,255,.055);
  --ui-field-bg:#08111f;
  --ui-field-bg-focus:#0b1627;
  --ui-field-text:#f8fafc;
  --ui-field-muted:#9ca3af;
  --ui-field-border:#263245;
  --ui-border:rgba(148,163,184,.22);
  --ui-radius:14px;
  --ui-radius-sm:10px;
  --ui-shadow:0 24px 70px rgba(0,0,0,.36);
  --ui-shadow-soft:0 14px 34px rgba(0,0,0,.22);
  --ui-focus:0 0 0 4px rgba(34,197,94,.18);
}

:root[data-theme="light"]{
  --ui-bg:#f7faf9;
  --ui-surface:#ffffff;
  --ui-surface-soft:rgba(15,23,42,.035);
  --ui-field-bg:#ffffff;
  --ui-field-bg-focus:#fbfefc;
  --ui-field-text:#0f172a;
  --ui-field-muted:#64748b;
  --ui-field-border:#d5e1dc;
  --ui-border:rgba(15,23,42,.12);
  --ui-shadow:0 24px 70px rgba(15,23,42,.14);
  --ui-shadow-soft:0 14px 34px rgba(15,23,42,.10);
}

body{
  background:
    radial-gradient(circle at 8% 8%, rgba(168,240,0,.10), transparent 28rem),
    radial-gradient(circle at 95% 12%, rgba(25,200,107,.10), transparent 30rem),
    linear-gradient(180deg,var(--bg-grad-1),var(--bg-grad-2));
}

:root[data-theme="light"] body{
  background:
    radial-gradient(circle at 7% 8%, rgba(168,240,0,.20), transparent 30rem),
    radial-gradient(circle at 94% 12%, rgba(25,200,107,.14), transparent 32rem),
    linear-gradient(180deg,#f7fbf8,#edf4f7);
}

header{
  border-bottom:1px solid var(--ui-border);
  background:rgba(8,13,24,.76);
  backdrop-filter:blur(18px);
}

:root[data-theme="light"] header{
  background:rgba(255,255,255,.86);
}

header .wrap{
  gap:clamp(12px, 2vw, 22px);
}

.brand{
  gap:14px;
  min-width:0;
}

.brand-logo{
  width:128px;
  height:56px;
  flex:0 0 128px;
  padding:9px 14px;
  border:1px solid rgba(168,240,0,.34);
  border-radius:18px;
  background:linear-gradient(145deg, var(--virebo-charcoal), var(--virebo-charcoal-2));
  box-shadow:0 18px 44px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.05);
}

.brand-logo img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.brand-copy strong{
  letter-spacing:0;
}

.brand-copy small{
  color:var(--muted);
  letter-spacing:.07em;
}

#btnToggleSidebar.icon-square{
  border-color:var(--ui-border);
  background:var(--ui-surface);
  color:var(--text);
  box-shadow:var(--ui-shadow-soft);
}

#btnToggleSidebar.icon-square:hover{
  border-color:rgba(34,197,94,.42);
  box-shadow:var(--ui-focus), var(--ui-shadow-soft);
}

#sidebar{
  position:sticky;
  top:96px;
  align-self:start;
  overflow:auto;
  padding:18px 14px;
  border:1px solid rgba(168,240,0,.20);
  border-radius:26px;
  background:
    radial-gradient(circle at 18% 8%, rgba(168,240,0,.24), transparent 16rem),
    radial-gradient(circle at 100% 100%, rgba(25,200,107,.28), transparent 17rem),
    linear-gradient(160deg, rgba(24,28,34,.98), rgba(9,48,36,.97) 56%, rgba(13,113,70,.94));
  box-shadow:0 26px 70px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.10);
  color:#f8fafc;
  scrollbar-color:rgba(168,240,0,.40) rgba(255,255,255,.06);
}

#sidebar .nav-btn{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  width:100%;
  min-height:54px;
  margin:3px 0;
  padding:10px 12px;
  border:1px solid transparent;
  border-radius:16px;
  background:transparent;
  color:rgba(248,250,252,.88);
  font-weight:850;
  letter-spacing:0;
  text-align:left;
  box-shadow:none;
  transition:transform 150ms ease, background 150ms ease, border-color 150ms ease, color 150ms ease;
}

#sidebar .nav-btn:hover{
  transform:translateX(2px);
  border-color:rgba(168,240,0,.22);
  background:rgba(255,255,255,.09);
  color:#ffffff;
}

#sidebar .nav-btn.active{
  border-color:rgba(168,240,0,.42);
  background:linear-gradient(90deg, rgba(168,240,0,.28), rgba(255,255,255,.10));
  color:#ffffff;
  box-shadow:inset 4px 0 0 var(--virebo-lime), 0 12px 30px rgba(0,0,0,.18);
}

#sidebar .nav-btn.danger{
  margin-top:16px;
  color:#fee2e2;
}

#sidebar .nav-btn.danger:hover{
  border-color:rgba(248,113,113,.38);
  background:rgba(239,68,68,.14);
}

.nav-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  min-width:36px;
  height:36px;
  border-radius:12px;
  color:var(--virebo-lime);
  background:rgba(255,255,255,.10);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}

.nav-icon--mini{
  width:30px;
  min-width:30px;
  height:30px;
  border-radius:10px;
}

.nav-icon svg{
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.nav-icon--mini svg{
  width:17px;
  height:17px;
}

.nav-label{
  min-width:0;
  flex:1 1 auto;
}

.nav-caret{
  margin-left:auto;
  color:rgba(248,250,252,.72);
  font-size:13px;
}

#sidebar .submenu{
  margin:8px 0 10px 18px;
  padding:7px 0 7px 12px;
  border-left:1px solid rgba(168,240,0,.24);
}

#sidebar .submenu .nav-btn{
  min-height:46px;
  padding:8px 10px;
  color:rgba(226,232,240,.86);
  font-size:14px;
}

.sidebar-section{
  margin:20px 10px 9px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.16);
  color:rgba(226,232,240,.76);
  font-size:12px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
}

body.sidebar-collapsed #sidebar{
  display:none;
}

.content{
  min-width:0;
}

.content > .card,
.card,
.module-card,
.report-card,
.roles-form-maincard,
.roles-form-permissions,
.roles-sidecard{
  border:1px solid var(--ui-border);
  background:var(--panel);
  box-shadow:var(--ui-shadow-soft);
}

.form-card{
  padding:clamp(16px, 2.2vw, 24px);
  border:1px solid var(--ui-border);
  border-radius:20px;
  background:var(--panel);
  box-shadow:var(--ui-shadow-soft);
}

.form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  align-items:end;
}

.form-group{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:7px;
}

.form-label,
label > span:first-child,
.field label,
.roles-field label{
  color:var(--text);
  font-weight:850;
  letter-spacing:0;
}

.form-control,
.form-select,
.form-textarea,
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea{
  width:100%;
  min-height:46px;
  padding:11px 13px;
  border:1px solid var(--ui-field-border);
  border-radius:13px;
  background:var(--ui-field-bg);
  color:var(--ui-field-text);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
  outline:none;
  transition:border-color 150ms ease, box-shadow 150ms ease, background 150ms ease, transform 150ms ease;
}

textarea,
.form-textarea{
  min-height:94px;
  resize:vertical;
}

.form-control:hover,
.form-select:hover,
.form-textarea:hover,
input:not([type="checkbox"]):not([type="radio"]):hover,
select:hover,
textarea:hover{
  border-color:rgba(34,197,94,.40);
}

.form-control:focus,
.form-select:focus,
.form-textarea:focus,
input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus{
  border-color:var(--virebo-green);
  background:var(--ui-field-bg-focus);
  box-shadow:var(--ui-focus);
}

input::placeholder,
textarea::placeholder{
  color:var(--ui-field-muted);
  opacity:1;
}

select option{
  background:var(--ui-field-bg);
  color:var(--ui-field-text);
}

input[readonly],
textarea[readonly],
select[disabled],
input[disabled],
textarea[disabled]{
  opacity:.74;
  cursor:not-allowed;
  background:rgba(148,163,184,.12);
}

.helper-text{
  color:var(--muted);
  font-size:13px;
}

.input-error,
.form-control.input-error,
input.input-error,
select.input-error,
textarea.input-error{
  border-color:var(--danger);
  box-shadow:var(--ring-danger);
}

.form-actions,
.actions,
.modal-foot{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
}

.btn{
  min-height:42px;
  border-radius:13px;
  font-weight:850;
  letter-spacing:0;
  transition:transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease, background 150ms ease, opacity 150ms ease;
}

.btn:hover:not(:disabled){
  transform:translateY(-1px);
}

.btn.primary,
.btn.btn-primary{
  border-color:rgba(168,240,0,.20);
  background:linear-gradient(135deg, var(--virebo-green), #21d064);
  color:#062616;
  box-shadow:0 14px 30px rgba(25,200,107,.25);
}

.btn.ghost,
.btn.btn-secondary{
  border-color:var(--ui-border);
  background:rgba(255,255,255,.055);
  color:var(--text);
}

:root[data-theme="light"] .btn.ghost,
:root[data-theme="light"] .btn.btn-secondary{
  background:#ffffff;
}

.btn.danger,
.btn.btn-danger{
  border-color:rgba(239,68,68,.30);
  background:linear-gradient(135deg, #ef4444, #dc2626);
  color:#fff;
}

.btn:disabled{
  cursor:not-allowed;
  opacity:.56;
  transform:none;
  box-shadow:none;
}

input[type="date"],
input[type="month"],
input[type="datetime-local"],
input[type="time"]{
  background-color:var(--ui-field-bg) !important;
  color:var(--ui-field-text) !important;
  color-scheme:dark;
}

:root[data-theme="light"] input[type="date"],
:root[data-theme="light"] input[type="month"],
:root[data-theme="light"] input[type="datetime-local"],
:root[data-theme="light"] input[type="time"]{
  color-scheme:light;
}

input[type="date"]::-webkit-datetime-edit,
input[type="month"]::-webkit-datetime-edit,
input[type="datetime-local"]::-webkit-datetime-edit,
input[type="time"]::-webkit-datetime-edit{
  color:var(--ui-field-text);
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator{
  opacity:.95;
  filter:invert(1) brightness(1.4);
}

:root[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator,
:root[data-theme="light"] input[type="month"]::-webkit-calendar-picker-indicator,
:root[data-theme="light"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
:root[data-theme="light"] input[type="time"]::-webkit-calendar-picker-indicator{
  filter:none;
}

:root:not([data-theme="light"]) .prestamo-field--highlight input{
  background:var(--ui-field-bg) !important;
  color:var(--ui-field-text) !important;
  color-scheme:dark;
}

:root:not([data-theme="light"]) .prestamo-field--highlight input::-webkit-datetime-edit{
  color:var(--ui-field-text);
}

.smart-date-popover{
  z-index:10020;
  width:min(540px, calc(100vw - 24px));
  border-color:rgba(34,197,94,.22);
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015)),
    var(--panel-solid);
  color:var(--text);
  box-shadow:0 30px 80px rgba(0,0,0,.44);
  backdrop-filter:blur(10px);
}

:root[data-theme="light"] .smart-date-popover{
  background:#ffffff;
  border-color:#cfded7;
  box-shadow:0 30px 80px rgba(15,23,42,.20);
}

.smart-date-month,
.smart-date-year,
.smart-date-nav{
  border:1px solid var(--ui-field-border);
  background:var(--ui-field-bg);
  color:var(--ui-field-text);
}

.smart-date-weekdays span{
  color:var(--muted);
}

.smart-date-day{
  color:var(--text);
}

.smart-date-day:hover{
  background:rgba(34,197,94,.14);
  border-color:rgba(34,197,94,.28);
}

.smart-date-day.is-outside{
  color:rgba(148,163,184,.52);
}

.smart-date-day.is-today{
  border-color:rgba(168,240,0,.62);
  color:var(--virebo-lime);
}

.smart-date-day.is-selected{
  background:linear-gradient(135deg, var(--virebo-lime), var(--virebo-green));
  color:#07180f;
}

.smart-date-foot .btn{
  max-width:none;
}

.user-chip{
  cursor:pointer;
  min-height:48px;
  padding:6px 10px 6px 6px;
  border:1px solid var(--ui-border);
  border-radius:999px;
  background:rgba(255,255,255,.055);
  transition:transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.user-chip:hover,
.user-chip:focus-visible{
  transform:translateY(-1px);
  border-color:rgba(34,197,94,.42);
  background:rgba(34,197,94,.10);
  box-shadow:var(--ui-focus);
  outline:none;
}

.user-chip__avatar{
  background:linear-gradient(135deg, var(--virebo-green), var(--virebo-lime));
  color:#062616;
  box-shadow:0 10px 22px rgba(25,200,107,.24);
}

.user-chip__text strong{
  color:var(--text);
}

.user-chip__role{
  color:var(--muted);
  letter-spacing:.06em;
}

.user-chip__chevron{
  display:inline-flex;
  align-items:center;
  color:var(--muted);
  font-size:13px;
  line-height:1;
}

.logout-btn{
  border:1px solid rgba(239,68,68,.32);
  background:rgba(239,68,68,.08);
  color:#fecaca;
}

.logout-btn:hover{
  background:rgba(239,68,68,.16);
  box-shadow:0 0 0 4px rgba(239,68,68,.13);
}

.profile-modal{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.profile-summary{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px;
  border:1px solid rgba(34,197,94,.22);
  border-radius:18px;
  background:var(--virebo-grad-soft);
}

.profile-summary__avatar{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:54px;
  min-width:54px;
  height:54px;
  border-radius:18px;
  background:linear-gradient(135deg, var(--virebo-green), var(--virebo-lime));
  color:#062616;
  font-weight:950;
  font-size:20px;
}

.profile-summary strong{
  display:block;
  color:var(--text);
  font-size:18px;
}

.profile-summary span{
  color:var(--muted);
}

.profile-tabs{
  display:flex;
  gap:8px;
  padding:5px;
  border:1px solid var(--ui-border);
  border-radius:16px;
  background:rgba(255,255,255,.045);
}

.profile-tab{
  flex:1 1 0;
  min-height:40px;
  border:0;
  border-radius:12px;
  background:transparent;
  color:var(--muted);
  font-weight:900;
  cursor:pointer;
}

.profile-tab.is-active{
  background:linear-gradient(135deg, var(--virebo-green), #23d06f);
  color:#062616;
  box-shadow:0 12px 24px rgba(25,200,107,.22);
}

.profile-panel{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.profile-feedback{
  min-height:22px;
  margin:0;
  font-weight:800;
}

.profile-feedback.is-error{
  color:#fca5a5;
}

.profile-feedback.is-success{
  color:var(--virebo-lime);
}

:root[data-theme="light"] .profile-feedback.is-error{
  color:#b91c1c;
}

:root[data-theme="light"] .profile-feedback.is-success{
  color:#15803d;
}

.modal-card{
  border:1px solid var(--ui-border);
  background:var(--panel-solid);
  box-shadow:var(--ui-shadow);
}

.modal-body{
  min-width:0;
}

.modal-close-action{
  max-width:160px;
}

@media (max-width:1100px){
  #sidebar{
    position:fixed;
    top:86px;
    left:14px;
    width:min(340px, calc(100vw - 28px));
    max-height:calc(100dvh - 104px);
    z-index:75;
    transform:translateX(-120%);
    opacity:0;
    pointer-events:none;
    transition:transform 180ms ease, opacity 180ms ease;
  }

  body.sidebar-open #sidebar{
    transform:translateX(0);
    opacity:1;
    pointer-events:auto;
  }

  body.sidebar-collapsed #sidebar{
    display:block;
  }
}

@media (max-width:760px){
  header .wrap{
    flex-wrap:nowrap;
  }

  .brand-logo{
    width:96px;
    height:42px;
    flex-basis:96px;
    border-radius:14px;
    padding:7px 10px;
  }

  .brand-copy strong{
    max-width:38vw;
  }

  .form-grid{
    grid-template-columns:1fr;
    gap:13px;
  }

  .form-actions,
  .actions,
  .modal-foot{
    align-items:stretch;
    flex-direction:column;
  }

  .form-actions .btn,
  .actions .btn,
  .modal-foot .btn{
    width:100%;
    max-width:none !important;
  }

  .profile-tabs{
    flex-direction:column;
  }

  .user-chip__text{
    display:none;
  }

  .user-chip{
    padding-right:8px;
  }
}

@media (max-width:480px){
  .brand-logo{
    width:82px;
    flex-basis:82px;
  }

  .brand-copy strong{
    max-width:32vw;
    font-size:14px;
  }

  #sidebar{
    left:10px;
    width:calc(100vw - 20px);
  }

  .modal-overlay{
    padding:10px;
  }

  .modal-card{
    max-height:calc(100dvh - 20px);
    overflow:auto;
    border-radius:18px;
  }
}

/* =====================
   VIREBO SIDEBAR PALETTE TUNING
   Menos ruido visual: verde corporativo como acento, no como masa de fondo.
====================== */
:root{
  --virebo-sidebar-bg:
    radial-gradient(circle at 18% 0%, rgba(168,240,0,.10), transparent 12rem),
    linear-gradient(180deg, #171c22 0%, #121b1a 58%, #0f1d18 100%);
  --virebo-sidebar-border:rgba(168,240,0,.16);
  --virebo-sidebar-text:rgba(248,250,252,.88);
  --virebo-sidebar-muted:rgba(203,213,225,.70);
  --virebo-sidebar-hover:rgba(168,240,0,.075);
  --virebo-sidebar-hover-border:rgba(168,240,0,.20);
  --virebo-sidebar-active:linear-gradient(90deg, rgba(168,240,0,.16), rgba(25,200,107,.055));
  --virebo-sidebar-active-border:rgba(168,240,0,.30);
  --virebo-sidebar-icon-bg:rgba(255,255,255,.07);
  --virebo-sidebar-icon-active:linear-gradient(135deg, rgba(168,240,0,.96), rgba(25,200,107,.92));
  --virebo-sidebar-shadow:0 22px 58px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.06);
}

:root[data-theme="light"]{
  --virebo-sidebar-bg:
    radial-gradient(circle at 15% 0%, rgba(168,240,0,.18), transparent 13rem),
    linear-gradient(180deg, #ffffff 0%, #f7fbf8 56%, #eef7f1 100%);
  --virebo-sidebar-border:rgba(15,118,70,.15);
  --virebo-sidebar-text:#172033;
  --virebo-sidebar-muted:#64748b;
  --virebo-sidebar-hover:rgba(22,163,74,.075);
  --virebo-sidebar-hover-border:rgba(22,163,74,.18);
  --virebo-sidebar-active:linear-gradient(90deg, rgba(168,240,0,.22), rgba(25,200,107,.09));
  --virebo-sidebar-active-border:rgba(22,163,74,.28);
  --virebo-sidebar-icon-bg:rgba(15,118,70,.075);
  --virebo-sidebar-icon-active:linear-gradient(135deg, #a8f000, #19c86b);
  --virebo-sidebar-shadow:0 20px 54px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.85);
}

#sidebar{
  border-color:var(--virebo-sidebar-border);
  background:var(--virebo-sidebar-bg);
  box-shadow:var(--virebo-sidebar-shadow);
  color:var(--virebo-sidebar-text);
  scrollbar-color:rgba(168,240,0,.28) rgba(255,255,255,.055);
}

:root[data-theme="light"] #sidebar{
  scrollbar-color:rgba(15,118,70,.28) rgba(15,118,70,.055);
}

#sidebar::-webkit-scrollbar{
  width:10px;
}

#sidebar::-webkit-scrollbar-track{
  background:rgba(255,255,255,.055);
  border-radius:999px;
}

#sidebar::-webkit-scrollbar-thumb{
  border:2px solid transparent;
  border-radius:999px;
  background:rgba(168,240,0,.30);
  background-clip:padding-box;
}

:root[data-theme="light"] #sidebar::-webkit-scrollbar-track{
  background:rgba(15,118,70,.055);
}

:root[data-theme="light"] #sidebar::-webkit-scrollbar-thumb{
  background:rgba(15,118,70,.30);
  background-clip:padding-box;
}

#sidebar .nav-btn{
  color:var(--virebo-sidebar-text);
}

#sidebar .nav-btn:hover{
  transform:translateX(1px);
  border-color:var(--virebo-sidebar-hover-border);
  background:var(--virebo-sidebar-hover);
  color:var(--virebo-sidebar-text);
}

#sidebar .nav-btn.active{
  border-color:var(--virebo-sidebar-active-border);
  background:var(--virebo-sidebar-active);
  color:var(--virebo-sidebar-text);
  box-shadow:inset 3px 0 0 var(--virebo-lime);
}

#sidebar .nav-btn.danger{
  color:#fecaca;
}

:root[data-theme="light"] #sidebar .nav-btn.danger{
  color:#b91c1c;
}

#sidebar .nav-btn.danger:hover{
  border-color:rgba(239,68,68,.24);
  background:rgba(239,68,68,.08);
}

.nav-icon{
  color:var(--virebo-green);
  background:var(--virebo-sidebar-icon-bg);
  box-shadow:inset 0 0 0 1px rgba(168,240,0,.08);
}

:root:not([data-theme="light"]) .nav-icon{
  color:var(--virebo-lime);
}

#sidebar .nav-btn.active .nav-icon{
  color:#082417;
  background:var(--virebo-sidebar-icon-active);
  box-shadow:0 10px 22px rgba(25,200,107,.18);
}

#sidebar .submenu{
  border-left-color:var(--virebo-sidebar-hover-border);
}

#sidebar .submenu .nav-btn{
  color:var(--virebo-sidebar-muted);
}

#sidebar .submenu .nav-btn.active,
#sidebar .submenu .nav-btn:hover{
  color:var(--virebo-sidebar-text);
}

.sidebar-section{
  border-top-color:var(--virebo-sidebar-hover-border);
  color:var(--virebo-sidebar-muted);
}

/* =====================
   HEADER LOGOUT + TABLE RECORD CASE
====================== */
:root[data-theme="light"] .logout-btn{
  border-color:rgba(185,28,28,.42);
  background:#fff1f2;
  color:#b91c1c;
  box-shadow:0 12px 26px rgba(185,28,28,.13), inset 0 0 0 1px rgba(255,255,255,.75);
}

:root[data-theme="light"] .logout-btn:hover,
:root[data-theme="light"] .logout-btn:focus-visible{
  border-color:#dc2626;
  background:#fecaca;
  color:#7f1d1d;
  box-shadow:0 0 0 4px rgba(220,38,38,.16), 0 14px 30px rgba(185,28,28,.16);
}

:root[data-theme="light"] .logout-btn:active{
  background:#fca5a5;
  color:#7f1d1d;
}

table tbody td{
  text-transform:uppercase;
}

table tbody td :is(button, .btn, input, select, textarea, code, pre, kbd, samp, .table-actions, .empty-state, .empty-state *, .table-pagination, .table-pagination *),
table tbody td.empty-td,
table tbody td.empty-td *,
table tbody td.preserve-case,
table tbody td.preserve-case *{
  text-transform:none;
}

table tbody td :is(.badge, .tag, .chip, .status-pill, .role-pill){
  text-transform:uppercase;
  letter-spacing:.055em;
}

/* =====================
   MODERN SELECTS
====================== */
select.v-select__native{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  opacity:0 !important;
  pointer-events:none !important;
}

.v-select{
  position:relative;
  width:100%;
  min-width:0;
}

.v-select__button{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  min-height:48px;
  padding:11px 12px 11px 14px;
  border:1px solid var(--ui-field-border);
  border-radius:14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)),
    var(--ui-field-bg);
  color:var(--ui-field-text);
  font:inherit;
  font-weight:780;
  text-align:left;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045), 0 10px 26px rgba(0,0,0,.08);
  outline:none;
  transition:border-color 150ms ease, box-shadow 150ms ease, background 150ms ease, transform 150ms ease;
}

.v-select__button:hover{
  border-color:rgba(34,197,94,.42);
  background:
    linear-gradient(180deg, rgba(34,197,94,.075), rgba(255,255,255,.018)),
    var(--ui-field-bg);
}

.v-select__button:focus-visible,
.v-select.is-open .v-select__button{
  border-color:var(--virebo-green);
  background:
    linear-gradient(180deg, rgba(34,197,94,.11), rgba(255,255,255,.02)),
    var(--ui-field-bg-focus);
  box-shadow:var(--ui-focus), inset 0 1px 0 rgba(255,255,255,.05);
}

.v-select__value{
  min-width:0;
  flex:1 1 auto;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.v-select__chevron{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  min-width:30px;
  height:30px;
  border-radius:10px;
  color:var(--virebo-green);
  background:rgba(34,197,94,.10);
  transition:transform 150ms ease, background 150ms ease;
}

:root:not([data-theme="light"]) .v-select__chevron{
  color:var(--virebo-lime);
}

.v-select__chevron svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.v-select.is-open .v-select__chevron{
  transform:rotate(180deg);
  background:rgba(34,197,94,.16);
}

.v-select__list{
  position:fixed;
  z-index:10040;
  top:0;
  left:0;
  right:auto;
  display:flex;
  flex-direction:column;
  gap:4px;
  max-height:280px;
  width:240px;
  padding:7px;
  overflow:auto;
  border:1px solid rgba(34,197,94,.22);
  border-radius:16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)),
    var(--panel-solid);
  color:var(--text);
  box-shadow:0 24px 60px rgba(0,0,0,.32);
  backdrop-filter:blur(12px);
  transform-origin:top center;
  animation:vSelectOpen 140ms ease-out;
}

.v-select__list.is-above{
  transform-origin:bottom center;
}

.v-select__list[hidden]{
  display:none !important;
}

@keyframes vSelectOpen{
  from{ opacity:0; transform:translateY(-4px) scale(.985); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}

.v-select__option{
  display:grid;
  grid-template-columns:22px minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  width:100%;
  min-height:38px;
  padding:8px 10px;
  border:1px solid transparent;
  border-radius:11px;
  background:transparent;
  color:var(--text);
  font:inherit;
  font-weight:760;
  text-align:left;
  cursor:pointer;
}

.v-select__option:hover,
.v-select__option:focus-visible,
.v-select__option.is-active{
  border-color:rgba(34,197,94,.24);
  background:rgba(34,197,94,.10);
  outline:none;
}

.v-select__option.is-selected{
  border-color:rgba(168,240,0,.34);
  background:linear-gradient(90deg, rgba(168,240,0,.18), rgba(34,197,94,.08));
}

.v-select__check{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border-radius:8px;
  color:#082417;
  background:transparent;
  font-size:13px;
  font-weight:950;
}

.v-select__option.is-selected .v-select__check{
  background:linear-gradient(135deg, var(--virebo-lime), var(--virebo-green));
}

.v-select__option-text{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.v-select__group{
  color:var(--muted);
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.v-select__option.is-disabled{
  cursor:not-allowed;
  opacity:.48;
}

.v-select.is-disabled .v-select__button{
  cursor:not-allowed;
  opacity:.62;
  box-shadow:none;
}

.table-pagination .v-select{
  min-width:92px;
}

.table-pagination .v-select__button{
  min-height:38px;
  padding:7px 8px 7px 10px;
  border-radius:11px;
}

.table-pagination .v-select__chevron{
  width:26px;
  min-width:26px;
  height:26px;
}

:root[data-theme="light"] .v-select__button{
  background:
    linear-gradient(180deg, rgba(255,255,255,.86), rgba(248,250,252,.96)),
    var(--ui-field-bg);
  box-shadow:0 10px 24px rgba(15,23,42,.07), inset 0 1px 0 rgba(255,255,255,.80);
}

:root[data-theme="light"] .v-select__button:hover,
:root[data-theme="light"] .v-select__button:focus-visible,
:root[data-theme="light"] .v-select.is-open .v-select__button{
  background:
    linear-gradient(180deg, rgba(240,253,244,.98), rgba(255,255,255,.98)),
    var(--ui-field-bg);
}

:root[data-theme="light"] .v-select__list{
  background:#ffffff;
  border-color:rgba(22,163,74,.20);
  box-shadow:0 24px 54px rgba(15,23,42,.16);
}

:root[data-theme="light"] .v-select__option{
  color:#172033;
}

:root[data-theme="light"] .v-select__option:hover,
:root[data-theme="light"] .v-select__option:focus-visible,
:root[data-theme="light"] .v-select__option.is-active{
  background:rgba(22,163,74,.08);
}

:root[data-theme="light"] .v-select__option.is-selected{
  background:linear-gradient(90deg, rgba(168,240,0,.24), rgba(22,163,74,.075));
}

@media (max-width:560px){
  .v-select__list{
    max-height:240px;
  }
}