@import url('https://fonts.cdnfonts.com/css/bai-jamjuree');

:root{
  /* Shared (non-palette) tokens */
  --bnk-topbar-h:54px;
  --bnk-sidebar-w:240px;
  --bnk-sidebar-w-collapsed:64px;
  --bnk-font:'Bai Jamjuree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* Default palette = Classic light (overridden per [data-theme]) */
  --bnk-accent:#0d9488;
  --bnk-accent-2:#22d3ee;
  --bnk-sidebar-bg:#0f172a;
  --bnk-sidebar-fg:#cbd5e1;
  --bnk-sidebar-hover:#1e293b;
}
/* Bai Jamjuree applied system-wide (admin + auth + iframes share admin.css) */
html,body,
.btn,.form-control,.form-select,.dropdown-menu,.modal,.table,
input,select,textarea,button{ font-family:var(--bnk-font); }
html,body{height:100%}
body{font-size:14px}

/* ── Global button typography: ALWAYS UPPERCASE, slightly smaller ── */
.btn{ text-transform:uppercase; letter-spacing:.3px; font-weight:600; }
.btn-sm,.btn-group-sm > .btn{ font-size:.75rem; }
.btn:not(.btn-sm){ font-size:.84rem; }
/* Topbar chrome (theme/bell/user) keeps its natural casing */
.adm-topbar .btn{ text-transform:none; letter-spacing:normal; }

/* ---------- AUTH (login, recuperar) — two-column, Ally Moving colors ---------- */
.auth-body{
  --bnk-accent:#c0392b;            /* Ally red */
  --bnk-accent-2:#e25563;          /* Ally light red */
  --ally-maroon:#991115;           /* official maroon (getaquote bg base) */
  min-height:100vh; display:flex; color:#cbd5e1; overflow:hidden; background:#0b0f15;
}
/* Left panel — holds the form */
.auth-left{
  flex:0 0 auto; width:460px; max-width:46vw; min-width:330px;
  display:flex; flex-direction:column; padding:36px 44px;
  background:linear-gradient(180deg,#11161e 0%, #0b0f15 100%);
  border-right:1px solid rgba(255,255,255,.06);
  position:relative; z-index:1;
}
.auth-left-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.auth-left-body{ margin-top:clamp(22px,5vh,52px); margin-bottom:auto; width:100%; padding:0; }
.auth-left h1{ color:#f3f6fa; font-weight:700; }
/* Right hero — getaquote background over the official Ally maroon */
.auth-hero{
  flex:1 1 auto; min-width:0;
  background:url('../getaquote/BG-Q-1.png') var(--ally-maroon) no-repeat center center / cover;
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center; perspective:1100px;
}
.auth-hero::after{
  content:''; position:absolute; inset:0; z-index:0;
  background:linear-gradient(110deg, rgba(11,15,21,.55) 0%, rgba(153,17,21,.12) 45%, transparent 100%);
}

/* ===== Hero animation: "moving atom" — white truck + orbiting electrons ===== */
.hero-anim{
  position:relative; z-index:1; width:min(70vmin,460px); height:min(70vmin,460px);
  transform-style:preserve-3d; will-change:transform; transition:transform .25s ease-out;
}
.hero-glow{
  position:absolute; inset:30%; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.22), transparent 70%);
  filter:blur(10px); animation:heroPulse 4.5s ease-in-out infinite;
}
.hero-rings{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.hero-rings circle{ fill:none; stroke:rgba(255,255,255,.16); stroke-width:1.4; }
.hero-rings-dash{ animation:ringSpin 55s linear infinite; }
.hero-rings-dash circle{ stroke:rgba(255,255,255,.30); stroke-dasharray:2 11; stroke-width:2; }

.hero-core{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:34%; height:34%; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.16), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.24);
  box-shadow:0 12px 34px rgba(0,0,0,.40), inset 0 0 30px rgba(255,255,255,.06);
  animation:heroFloat 5s ease-in-out infinite;
}
.hero-core i{ font-size:clamp(34px,9vmin,58px); color:#fff; filter:drop-shadow(0 4px 10px rgba(0,0,0,.45)); }

.orbit{ position:absolute; top:50%; left:50%; border-radius:50%; transform:translate(-50%,-50%);
  animation:heroSpin linear infinite; }
.orbit .el{ position:absolute; top:0; left:50%; transform:translate(-50%,-50%);
  display:flex; align-items:center; justify-content:center; }
.orbit .el.ic{ width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.30); backdrop-filter:blur(2px);
  box-shadow:0 4px 14px rgba(0,0,0,.30); }
.orbit .el.ic i{ font-size:15px; color:#fff; }
.orbit .el.dot{ width:10px; height:10px; border-radius:50%; background:#fff; box-shadow:0 0 12px rgba(255,255,255,.85); }
.orbit .el.dot.sm{ width:7px; height:7px; opacity:.85; }

/* sizes as % of .hero-anim so electrons sit exactly on the SVG rings (r=95/145/190 in a 400 viewBox) */
/* radius via %; negative animation-delay staggers each one's START position */
.o1 { width:47.5%; height:47.5%; animation-duration:13s; animation-delay:-2s; }
.o1b{ width:47.5%; height:47.5%; animation-duration:13s; animation-direction:reverse; animation-delay:-6s; }
.o1c{ width:47.5%; height:47.5%; animation-duration:15s; animation-delay:-11s; }
.o2 { width:72.5%; height:72.5%; animation-duration:20s; animation-delay:-4s; }
.o2b{ width:72.5%; height:72.5%; animation-duration:16s; animation-direction:reverse; animation-delay:-9s; }
.o2c{ width:72.5%; height:72.5%; animation-duration:23s; animation-delay:-16s; }
.o3 { width:95%;   height:95%;   animation-duration:30s; animation-delay:-7s; }
.o3b{ width:95%;   height:95%;   animation-duration:25s; animation-direction:reverse; animation-delay:-14s; }
.o3c{ width:95%;   height:95%;   animation-duration:35s; animation-delay:-26s; }
.o3d{ width:95%;   height:95%;   animation-duration:21s; animation-direction:reverse; animation-delay:-10s; }
/* counter-rotate icon electrons so they stay upright (match each orbit's speed, opposite spin AND same delay) */
.o1  .el.ic{ animation:heroSpin 13s linear infinite reverse; animation-delay:-2s; }
.o1c .el.ic{ animation:heroSpin 15s linear infinite reverse; animation-delay:-11s; }
.o2  .el.ic{ animation:heroSpin 20s linear infinite reverse; animation-delay:-4s; }
.o2b .el.ic{ animation:heroSpin 16s linear infinite;         animation-delay:-9s; }
.o2c .el.ic{ animation:heroSpin 23s linear infinite reverse; animation-delay:-16s; }
.o3  .el.ic{ animation:heroSpin 30s linear infinite reverse; animation-delay:-7s; }
.o3b .el.ic{ animation:heroSpin 25s linear infinite;         animation-delay:-14s; }
.o3c .el.ic{ animation:heroSpin 35s linear infinite reverse; animation-delay:-26s; }

/* Center: Ally logo mark (white SVG) */
.hero-core .hero-mark{ width:66%; height:auto; object-fit:contain; filter:drop-shadow(0 5px 12px rgba(0,0,0,.45)); }

@keyframes heroSpin{ from{ transform:translate(-50%,-50%) rotate(0deg); } to{ transform:translate(-50%,-50%) rotate(360deg); } }
@keyframes ringSpin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
@keyframes heroFloat{ 0%,100%{ transform:translate(-50%,-50%) translateY(0); } 50%{ transform:translate(-50%,-50%) translateY(-6px); } }
@keyframes heroPulse{ 0%,100%{ opacity:.5; transform:scale(.95); } 50%{ opacity:.9; transform:scale(1.06); } }

@media (prefers-reduced-motion: reduce){
  .hero-rings-dash, .orbit, .orbit .el.ic, .hero-glow, .hero-core{ animation:none !important; }
}

.auth-brand{font-size:22px;font-weight:800;letter-spacing:.5px;color:#fff;display:flex;align-items:center}
.auth-brand .bnk{background:linear-gradient(90deg,var(--bnk-accent),var(--bnk-accent-2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.auth-empresa{color:#94a3b8 !important}
.auth-title{font-size:34px;font-weight:800;color:#f3f6fa;margin:0 0 6px;letter-spacing:-.5px;line-height:1.1}
.auth-sub{color:#8b97a6;font-size:13.5px;margin-bottom:22px}

/* Centered logo mark with two thin dotted rings spinning in opposite directions */
.auth-logo{ position:relative; width:104px; height:104px; margin:0 auto 24px; }
.auth-logo-ring{ position:absolute; inset:0; width:100%; height:100%; }
.auth-logo-ring.r-out{ animation:ringSpin 18s linear infinite; }
.auth-logo-ring.r-in { animation:ringSpin 13s linear infinite reverse; }
.auth-logo-ring.r-in circle{ stroke:#e25563; }                 /* Ally red tint */
.auth-logo-mark{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:76%; height:auto; filter:brightness(.88) drop-shadow(0 3px 9px rgba(0,0,0,.45)); }
/* Glossy reflection sweeping across the logo (masked to the logo shape) */
.auth-logo-shine{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:76%; aspect-ratio:887/800; pointer-events:none; mix-blend-mode:screen;
  -webkit-mask:url('../img/ally-mark.svg') center/contain no-repeat;
          mask:url('../img/ally-mark.svg') center/contain no-repeat;
  background:linear-gradient(115deg, transparent 38%, rgba(255,255,255,.95) 50%, transparent 62%);
  background-size:260% 100%; background-repeat:no-repeat;
  animation:logoShine 5s linear infinite;
}
@keyframes logoShine{ 0%{ background-position:210% 0; } 100%{ background-position:-70% 0; } }
@media (prefers-reduced-motion: reduce){ .auth-logo-shine{ animation:none; opacity:0; } }
@media (prefers-reduced-motion: reduce){ .auth-logo-ring{ animation:none; } }

.auth-form .form-label{font-weight:600;color:#cbd5e1;font-size:12px;letter-spacing:.3px;margin-bottom:5px}
.auth-form .input-group-text{background:rgba(255,255,255,.03);border-color:rgba(148,163,184,.22);color:#7a8699}
.auth-form .form-control{background:rgba(255,255,255,.03);border:1px solid rgba(148,163,184,.22);color:#e6eef7;padding:11px 14px;border-radius:10px}
.auth-form .form-control::placeholder{color:#5b6675}
.auth-form .form-control:focus{background:rgba(255,255,255,.05);border-color:var(--bnk-accent-2);box-shadow:0 0 0 3px color-mix(in srgb, var(--bnk-accent-2) 22%, transparent);color:#fff}
.auth-form .form-check-input{background:rgba(255,255,255,.05);border-color:rgba(148,163,184,.35)}
.auth-form .form-check-input:checked{background:var(--bnk-accent);border-color:var(--bnk-accent)}
.auth-form .form-check-label{color:#cbd5e1}
.auth-form .btn-primary{
  background:linear-gradient(90deg,var(--bnk-accent),var(--bnk-accent-2));
  border:0;color:#fff;font-weight:700;padding:12px 0;letter-spacing:.3px;border-radius:10px;
  box-shadow:0 8px 22px color-mix(in srgb, var(--bnk-accent) 32%, transparent);transition:.18s;
}
.auth-form .btn-primary:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 12px 30px color-mix(in srgb, var(--bnk-accent) 42%, transparent)}
.auth-form a{color:var(--bnk-accent-2);text-decoration:none}
.auth-form a:hover{color:color-mix(in srgb, var(--bnk-accent-2) 65%, #fff);text-decoration:underline}
.auth-foot{color:#5b6675 !important;font-size:11.5px}
.auth-left .alert{border:1px solid rgba(248,113,113,.3);background:rgba(248,113,113,.08);color:#fca5a5}
.auth-left .alert-success{border-color:rgba(52,211,153,.3);background:rgba(52,211,153,.08);color:#86efac}
.auth-left .alert-warning{border-color:rgba(251,191,36,.3);background:rgba(251,191,36,.08);color:#fcd34d}

@media (max-width: 820px){
  .auth-hero{ display:none; }
  .auth-left{ width:100%; max-width:none; }
}

/* ---------- ADMIN LAYOUT ---------- */
.adm-body{margin-left:var(--bnk-sidebar-w);padding-top:var(--bnk-topbar-h);transition:.2s}
.adm-body.adm-collapsed{margin-left:var(--bnk-sidebar-w-collapsed)}

.adm-sidebar{
  position:fixed;left:0;top:0;bottom:0;width:var(--bnk-sidebar-w);
  background:var(--bnk-sidebar-bg);color:var(--bnk-sidebar-fg);
  overflow-y:auto;z-index:1030;transition:.2s;
}
.adm-collapsed .adm-sidebar{width:var(--bnk-sidebar-w-collapsed)}
.adm-collapsed .adm-sidebar .adm-empresa,
.adm-collapsed .adm-sidebar .adm-reloj,
.adm-collapsed .adm-sidebar .adm-seccion,
.adm-collapsed .adm-sidebar .adm-menu li a .lbl{display:none}
.adm-collapsed .adm-sidebar .adm-brand span:not(.bnk){display:none}
.adm-collapsed .adm-sidebar .adm-brand{justify-content:center;padding:18px 0 8px;font-size:18px}
.adm-collapsed .adm-sidebar .adm-menu li a{justify-content:center;padding:12px 0}
.adm-collapsed .adm-sidebar .adm-menu li a i{width:auto;font-size:16px;margin:0}

.adm-brand{
  display:flex;align-items:center;justify-content:center;gap:6px;padding:18px 18px 6px;
  font-size:20px;font-weight:800;letter-spacing:.5px;color:#fff;text-align:center;
}
.adm-brand .bnk{background:linear-gradient(90deg,var(--bnk-accent),var(--bnk-accent-2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
/* Brand: "ALLY ERP" — ALLY white, ERP in the secondary/accent color */
.adm-brand .b-ally{color:#fff}
.adm-brand .b-erp{background:linear-gradient(90deg,var(--bnk-accent),var(--bnk-accent-2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.adm-brand .brand-mini{display:none}
.adm-collapsed .adm-sidebar .adm-brand .brand-mini{display:inline}
.adm-empresa{padding-left:18px;padding-right:18px}
/* ===== Reloj del sidebar (reemplaza al nombre de empresa) ===== */
.adm-reloj{
  padding:6px 18px 12px;
  font-size:18px; font-weight:700;
  color:#22d3ee;                                              /* turquesa de la marca */
  letter-spacing:.7px;
  display:flex; align-items:center; justify-content:center;
}
.adm-reloj #admRelojHora{
  font-variant-numeric:tabular-nums;                          /* dígitos del mismo ancho — no "saltan" */
  font-family:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;
}
.adm-reloj .fa-clock{ opacity:.85; }

.adm-menu{list-style:none;padding:8px 6px;margin:0}
.adm-menu .adm-seccion{
  font-size:9px;text-transform:uppercase;letter-spacing:1px;
  color:#64748b;padding:10px 12px 3px;
}
.adm-menu li a{
  display:flex;align-items:center;gap:9px;padding:7px 12px;border-radius:8px;
  color:var(--bnk-sidebar-fg);text-decoration:none;font-size:11px;font-weight:600;
  letter-spacing:.3px;transition:.12s;
}
.adm-menu li a .lbl{text-transform:uppercase}
.adm-menu li a i{width:18px;text-align:center;color:#94a3b8}
.adm-menu li a:hover{background:var(--bnk-sidebar-hover);color:#fff}
.adm-menu li a:hover i{color:var(--bnk-accent-2)}
.adm-menu li a.active{background:linear-gradient(90deg,var(--bnk-accent),var(--bnk-accent-2));color:#04121b}
.adm-menu li a.active i{color:#04121b}

.adm-topbar{
  position:fixed;top:0;left:var(--bnk-sidebar-w);right:0;height:var(--bnk-topbar-h);
  background:var(--bs-body-bg);border-bottom:1px solid var(--bs-border-color);
  display:flex;align-items:center;padding:0 16px;z-index:1020;transition:.2s;
}
.adm-collapsed .adm-topbar{left:var(--bnk-sidebar-w-collapsed)}
.adm-toggle{color:var(--bs-body-color);font-size:18px;padding:0 6px}
.adm-titulo{font-weight:600;margin-left:6px}
.adm-tools .btn{height:32px}
.badge-pill{position:absolute;top:-4px;right:-4px;font-size:10px;padding:2px 6px}
/* Parpadeo del badge de notificaciones para llamar la atención */
@keyframes notifPulse{
  0%   {transform:scale(1);    box-shadow:0 0 0 0 rgba(220,38,38,.55)}
  70%  {transform:scale(1.18); box-shadow:0 0 0 7px rgba(220,38,38,0)}
  100% {transform:scale(1);    box-shadow:0 0 0 0 rgba(220,38,38,0)}
}
.badge-pill.notif-pulse{animation:notifPulse 1.1s ease-out infinite}
/* Menú de notificaciones (scrolleable + distribución) */
.notif-menu{min-width:330px;max-height:380px;overflow-y:auto;padding:0}
.notif-menu-head{position:sticky;top:0;z-index:1;background:var(--bs-tertiary-bg);
  border-bottom:1px solid var(--bs-border-color);padding:8px 12px;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.5px;color:var(--bs-secondary-color)}
.notif-item{display:flex;align-items:flex-start;gap:10px;padding:9px 12px;border-bottom:1px solid var(--bs-border-color)}
.notif-item:last-child{border-bottom:0}
.notif-ico{flex:0 0 auto;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px}
.notif-body{flex:1 1 auto;min-width:0}
.notif-text{font-size:12.5px;line-height:1.3;color:var(--bs-body-color)}
.notif-fecha{font-size:10.5px;color:var(--bs-secondary-color);margin-top:3px}

.adm-main{padding:18px}

/* ---------- Tarjeta de usuario (dropdown del topbar) ---------- */
.usercard-menu{
  width:250px;border:1px solid var(--bs-border-color);border-radius:14px;overflow:hidden;
  box-shadow:0 18px 44px rgba(0,0,0,.30);background:var(--bs-body-bg);
}
.usercard-head{
  background:linear-gradient(135deg,var(--bnk-accent),var(--bnk-accent-2));
  padding:18px 16px 16px;text-align:center;
}
.usercard-avatar{
  width:70px;height:70px;border-radius:50%;margin:0 auto 10px;
  background:rgba(255,255,255,.22);border:3px solid rgba(255,255,255,.7);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  font-size:28px;color:#fff;
}
.usercard-avatar img{width:100%;height:100%;object-fit:cover}
.usercard-nombre{font-weight:700;font-size:14px;line-height:1.2;color:#04121b;text-shadow:0 1px 1px rgba(255,255,255,.15)}
.usercard-rol{font-size:11.5px;margin-top:2px;color:#04121b;opacity:.85;text-transform:uppercase;letter-spacing:.5px}
.usercard-actions{display:flex;gap:8px;padding:12px}
.usercard-btn{
  flex:1;text-align:center;padding:8px 6px;border-radius:8px;font-size:12px;font-weight:700;
  letter-spacing:.5px;text-decoration:none;transition:.15s;
  background:var(--bs-tertiary-bg);color:var(--bs-body-color);border:1px solid var(--bs-border-color);
}
.usercard-btn:hover{background:var(--bnk-accent);color:#fff;border-color:var(--bnk-accent)}
.usercard-btn-danger{color:#dc2626}
.usercard-btn-danger:hover{background:#dc2626;color:#fff;border-color:#dc2626}

/* ---------- COMPONENTES ---------- */
.btn-sm{font-size:12px;padding:.30rem .65rem}
.card{border-radius:10px;border:1px solid var(--bs-border-color)}
.card-header{font-weight:600}
.page-head{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.page-head h1{font-size:18px;font-weight:700;margin:0}
/* All system titles in UPPERCASE */
.page-head h1,.md-head,.fi-head b,.modal-title,.adm-seccion{text-transform:uppercase}

/* KPI cards */
.kpi{border-radius:12px;padding:16px;color:#fff;position:relative;overflow:hidden}
.kpi .num{font-size:28px;font-weight:800;line-height:1}
.kpi .lbl{font-size:11px;letter-spacing:1px;text-transform:uppercase;opacity:.9;margin-top:4px}
.kpi .ico{position:absolute;right:10px;top:10px;font-size:36px;opacity:.18}
.kpi-1{background:linear-gradient(135deg,#0d9488,#22d3ee)}
.kpi-2{background:linear-gradient(135deg,#6366f1,#22d3ee)}
.kpi-3{background:linear-gradient(135deg,#f59e0b,#ef4444)}
.kpi-4{background:linear-gradient(135deg,#16a34a,#22d3ee)}
.kpi-5{background:linear-gradient(135deg,#7c3aed,#ec4899)}
.kpi-6{background:linear-gradient(135deg,#475569,#0f172a)}

/* Master/Detail con iframe */
.md-grid{display:grid;grid-template-columns: 1.35fr 1fr;gap:14px}
.md-list,.md-detail{background:var(--bs-body-bg);border:1px solid var(--bs-border-color);border-radius:10px;overflow:hidden}
.md-head{padding:10px 14px;background:var(--bs-tertiary-bg);border-bottom:1px solid var(--bs-border-color);
  font-weight:600;display:flex;align-items:center;gap:8px}
.md-body{padding:12px}
.md-detail{display:flex;flex-direction:column}
.md-detail iframe{width:100%;height:calc(100vh - 180px);border:0;background:var(--bs-body-bg)}
.md-detail .md-vacio{padding:30px;text-align:center;color:var(--bs-secondary-color)}

/* Tablas de listado dentro de master/detail — más compactas */
.md-list .table{font-size:11.5px;margin:0}
.md-list .table > thead th{font-size:9.5px;padding:8px 10px;letter-spacing:.4px}
.md-list .table > tbody td{padding:7px 10px;vertical-align:middle;line-height:1.35}
.md-list .table .bdg{font-size:9.5px;padding:2px 7px}
.md-list .btn-abrir{font-size:10px;padding:3px 9px}
.md-list .cli-cell{font-size:10.5px;line-height:1.3;max-width:240px}

/* Controles de DataTables dentro del master/detail */
.md-dt{padding:10px 12px}
.md-dt .dt-layout-row{margin:0 0 8px;align-items:center}
.md-dt .dt-search input, .md-dt .dt-length select{
  font-size:12px;padding:.25rem .5rem;height:auto;
  background:var(--bs-body-bg);color:var(--bs-body-color);border:1px solid var(--bs-border-color);border-radius:6px;
}
.md-dt .dt-search label, .md-dt .dt-length label, .md-dt .dt-info{font-size:11.5px;color:var(--bs-secondary-color)}
.md-dt .dt-paging .page-link{font-size:11.5px;padding:3px 9px}
.md-dt .dt-paging .active > .page-link{background:var(--bnk-accent);border-color:var(--bnk-accent)}
.md-dt table.dataTable thead th{cursor:pointer}            /* indicar que se puede ordenar */
.md-dt .dt-scroll-body{border-top:1px solid var(--bs-border-color)}
.md-head{font-size:13px}

/* Botones ABRIR/ABIERTO */
.btn-abrir{font-size:11px;padding:3px 10px;border-radius:6px;border:1px solid var(--bnk-accent);
  background:transparent;color:var(--bnk-accent);font-weight:700;letter-spacing:.5px}
.btn-abrir:hover{background:var(--bnk-accent);color:#fff}
.btn-abrir.abierto{background:var(--bnk-accent);color:#fff}
/* Variantes de color con el mismo tamaño compacto de ABRIR */
.btn-abrir.success{border-color:#16a34a;color:#16a34a}
.btn-abrir.success:hover{background:#16a34a;color:#fff}
.btn-abrir.info{border-color:#0ea5e9;color:#0ea5e9}
.btn-abrir.info:hover{background:#0ea5e9;color:#fff}
tr.md-abierto > td{background:rgba(13,148,136,.08)}

/* Iframe body */
.iframe-body{padding:14px;background:var(--bs-tertiary-bg)}
.iframe-wrap{background:var(--bs-body-bg);border-radius:10px;border:1px solid var(--bs-border-color);padding:14px}

/* Tablas pequeñas */
.table{font-size:12.5px}
.table > thead{font-size:11px;text-transform:uppercase;color:var(--bs-secondary-color);letter-spacing:.5px}

/* Badges de tipo */
.bdg{display:inline-block;padding:2px 8px;border-radius:20px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.3px}
.bdg-CF{background:#0ea5e9;color:#fff}
.bdg-CCF{background:#7c3aed;color:#fff}
.bdg-EXP{background:#0d9488;color:#fff}
.bdg-SE{background:#f59e0b;color:#fff}
.bdg-emitida{background:#16a34a;color:#fff}
.bdg-anulada{background:#dc2626;color:#fff}
.bdg-borrador{background:#475569;color:#fff}
.bdg-activo{background:#16a34a;color:#fff}
.bdg-inactivo{background:#94a3b8;color:#fff}
.bdg-pais{background:#0d9488;color:#fff}
/* Estados de seguimiento de productos */
.bdg-seg-INGRESADO{background:#0ea5e9;color:#fff}
.bdg-seg-SOMETIDO{background:#6366f1;color:#fff}
.bdg-seg-OBSERVADO{background:#f59e0b;color:#fff}
.bdg-seg-DESISTIDO{background:#94a3b8;color:#fff}
.bdg-seg-APROBADO{background:#16a34a;color:#fff}
.bdg-seg-RECHAZADO{background:#dc2626;color:#fff}

/* Tarjetas de información factura (panel) */
.fi-card{border:1px solid var(--bs-border-color);border-radius:10px;overflow:hidden;background:var(--bs-body-bg)}
.fi-head{display:flex;align-items:center;padding:8px 14px;background:var(--bs-tertiary-bg);
  border-bottom:1px solid var(--bs-border-color);font-size:12px;letter-spacing:.4px}
.fi-body{padding:8px 14px}
.fi-row{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px dashed var(--bs-border-color);font-size:13px}
.fi-row:last-child{border-bottom:0}
.fi-lbl{flex:0 0 170px;color:var(--bs-secondary-color);font-weight:600;font-size:12px}
.fi-val{flex:1 1 auto;word-break:break-all;color:var(--bs-body-color)}
.btn-copy-mini{
  border:0;background:transparent;color:var(--bs-secondary-color);
  padding:2px 8px;border-radius:6px;font-size:11px;cursor:pointer;flex:0 0 auto;
  opacity:.55;transition:.15s;
}
.btn-copy-mini:hover{opacity:1;background:var(--bs-tertiary-bg);color:var(--bnk-accent)}

/* Factura form */
.factura-detalle thead th{background:var(--bs-tertiary-bg)}
.factura-detalle-wrap{overflow:visible}              /* no clipear el dropdown */
.factura-detalle, .factura-detalle tbody, .factura-detalle tr{overflow:visible}
.factura-detalle .det-cel{position:relative;overflow:visible}
.srv-sug{position:absolute;left:6px;right:6px;top:calc(100% + 2px);
  background:var(--bs-body-bg);border:1px solid var(--bs-border-color);
  border-radius:8px;box-shadow:0 10px 28px rgba(0,0,0,.35);
  max-height:300px;overflow-y:auto;z-index:1060}
.srv-sug:empty{display:none}
.srv-item{display:block;width:100%;text-align:left;background:transparent;border:0;
  padding:8px 12px;border-bottom:1px solid var(--bs-border-color);cursor:pointer;color:var(--bs-body-color)}
.srv-item:last-child{border-bottom:0}
.srv-item:hover{background:var(--bs-tertiary-bg)}
.srv-row{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.srv-nombre{font-size:13px;font-weight:700}
.srv-precio{font-size:12px;font-weight:700;color:var(--bnk-accent);white-space:nowrap}
.srv-desc{font-size:11.5px;color:var(--bs-secondary-color);margin-top:2px}
.srv-empty{padding:8px 12px;font-size:12px;color:var(--bs-secondary-color);font-style:italic}
.factura-totales{margin-left:auto;max-width:340px;background:var(--bs-tertiary-bg);border-radius:10px;padding:14px}
.factura-totales .row + .row{margin-top:4px}
.factura-totales .total{font-size:18px;font-weight:800}

/* Errores */
.err-body{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--bs-tertiary-bg)}
.err-box{background:var(--bs-body-bg);border:1px solid var(--bs-border-color);border-radius:12px;padding:28px;text-align:center;max-width:420px}
.err-num{font-size:64px;font-weight:800;color:var(--bnk-accent)}

/* Copy button (servicios) */
.btn-copy{font-size:11px;padding:2px 8px}

/* Select2: igualar altura con form-select-sm (32px) y respetar tema oscuro */
.select2-container--bootstrap-5 .select2-selection{
  min-height:31px !important;padding-top:2px !important;padding-bottom:2px !important;font-size:13px;
}
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered{
  padding:.18rem .5rem !important;line-height:1.4 !important;
}
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow{height:30px}
.select2-dropdown{font-size:13px;border-color:var(--bs-border-color)}
.select2-container--bootstrap-5 .select2-dropdown,
.select2-container--bootstrap-5 .select2-dropdown .select2-search--dropdown .select2-search__field{
  background:var(--bs-body-bg) !important;color:var(--bs-body-color) !important;border-color:var(--bs-border-color) !important
}
.select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field::placeholder{
  color:var(--bs-secondary-color) !important
}
.select2-container--bootstrap-5 .select2-results__option--highlighted{
  background:var(--bnk-accent) !important;color:#fff !important
}
.select2-container--bootstrap-5 .select2-selection--single{
  background:var(--bs-body-bg);color:var(--bs-body-color);border-color:var(--bs-border-color)
}
/* Forzar color del texto en el control y las opciones (Select2 fija color oscuro por defecto) */
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered,
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__display,
.select2-container--bootstrap-5 .select2-results__option,
.select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field{
  color: var(--bs-body-color) !important;
}
.select2-container--bootstrap-5 .select2-selection__placeholder{
  color: var(--bs-secondary-color) !important;
}
/* En tema oscuro reforzar contraste */
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered,
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-results__option{
  color:#e6eef7 !important;
}
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-results__option--selected{
  background:color-mix(in srgb, var(--bnk-accent) 22%, transparent) !important;color:#e6eef7 !important;
}
/* Multi-select: pills con estilo BNK */
.select2-container--bootstrap-5 .select2-selection--multiple{
  min-height:auto !important;padding:4px 6px !important;
  background:var(--bs-body-bg) !important;color:var(--bs-body-color) !important;
  border-color:var(--bs-border-color) !important;
}
/* Campo de búsqueda inline dentro del multi-select: transparente para heredar fondo */
.select2-container--bootstrap-5 .select2-search--inline .select2-search__field{
  background:transparent !important;color:var(--bs-body-color) !important;
  border:0 !important;outline:0 !important;box-shadow:none !important;
  font-size:13px !important;padding:2px 4px !important;
}
.select2-container--bootstrap-5 .select2-search--inline .select2-search__field::placeholder{
  color:var(--bs-secondary-color);
}
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice{
  background:rgba(13,148,136,.18) !important;border:1px solid var(--bnk-accent) !important;
  border-radius:14px !important;color:var(--bs-body-color) !important;
  margin:2px 4px 2px 0 !important;padding:2px 8px !important;font-size:11.5px !important;
}
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove{
  color:var(--bnk-accent) !important;margin-right:4px !important;border:0 !important;background:transparent !important;
}

/* ---------- Tabla de renovaciones (compacta) ---------- */
#tblRenov{font-size:11px}
#tblRenov thead th{font-size:9.5px}
#tblRenov td,#tblRenov th{padding:5px 6px;vertical-align:middle}
#tblRenov small{font-size:9.5px}
#tblRenov .bdg{font-size:9px;padding:2px 6px}
#tblRenov .btn-abrir{font-size:9.5px;padding:2px 7px}

/* ---------- FullCalendar (renovaciones) ---------- */
.fc{font-size:12px}
.fc .fc-toolbar-title{font-size:16px;font-weight:700}
.fc .fc-button-primary{
  background:var(--bnk-accent);border-color:var(--bnk-accent);
  text-transform:capitalize;font-size:12px;padding:.3rem .6rem;box-shadow:none;
}
.fc .fc-button-primary:hover,
.fc .fc-button-primary:not(:disabled):active,
.fc .fc-button-primary:not(:disabled).fc-button-active{background:#0b7d72;border-color:#0b7d72}
.fc .fc-daygrid-event{font-size:10.5px;padding:1px 4px;cursor:default}
.fc a{color:inherit;text-decoration:none}
[data-bs-theme="dark"] .fc{
  --fc-border-color:#334155;
  --fc-page-bg-color:transparent;
  --fc-neutral-bg-color:#1e293b;
  --fc-today-bg-color:color-mix(in srgb, var(--bnk-accent) 13%, transparent);
  --fc-list-event-hover-bg-color:#1e293b;
}
[data-bs-theme="dark"] .fc .fc-col-header-cell-cushion,
[data-bs-theme="dark"] .fc .fc-daygrid-day-number,
[data-bs-theme="dark"] .fc .fc-toolbar-title,
[data-bs-theme="dark"] .fc .fc-list-day-text,
[data-bs-theme="dark"] .fc .fc-list-day-side-text{color:#e6eef7}

/* ---------- Trámites (gestión de producto) ---------- */
.tramite-box{ border:1px solid var(--bs-border-color); border-radius:10px; padding:10px 12px; margin-bottom:10px; background:var(--bs-tertiary-bg); }
.tramite-head{ display:flex; align-items:flex-start; gap:8px; margin-bottom:8px; }
.tramite-entradas{ display:flex; flex-direction:column; gap:6px; margin-bottom:8px; }
.tramite-entrada{ display:flex; gap:8px; align-items:flex-start; background:var(--bs-body-bg);
  border:1px solid var(--bs-border-color); border-radius:8px; padding:6px 8px; font-size:12px; }
.te-ic{ flex:0 0 auto; width:18px; text-align:center; color:var(--bs-secondary-color); margin-top:2px; }
.tramite-entrada.te-notificacion .te-ic{ color:#0ea5e9; }
.tramite-entrada.te-enlace .te-ic{ color:#0d9488; }
.te-cuerpo{ flex:1 1 auto; min-width:0; word-break:break-word; }
.te-meta{ flex:0 0 auto; text-align:right; font-size:9.5px; color:var(--bs-secondary-color); white-space:nowrap; }
.tramite-acciones{ display:flex; gap:6px; flex-wrap:wrap; }
.tramite-acciones .btn{ font-size:11px; padding:2px 8px; }

/* Responsive */
@media (max-width: 900px){
  /* El contenido ocupa todo el ancho; sin desplazamiento horizontal. */
  html, body{ overflow-x:hidden; max-width:100%; }
  .adm-body, .adm-body.adm-collapsed{ margin-left:0; }

  /* Sidebar oculto fuera de pantalla por defecto (esté o no en modo colapsado);
     se muestra a ancho completo SOLO al pulsar las tres barras (adm-mobile-open). */
  .adm-sidebar, .adm-collapsed .adm-sidebar{
    width:var(--bnk-sidebar-w);
    transform:translateX(-100%);
    transition:transform .25s;
    box-shadow:0 0 40px rgba(0,0,0,.4);
  }
  .adm-sidebar.adm-mobile-open{ transform:translateX(0); }

  /* Al abrir en mobile, mostrar el sidebar en modo EXPANDIDO (con textos),
     anulando las reglas del modo colapsado del escritorio. */
  .adm-collapsed .adm-sidebar .adm-empresa,
  .adm-collapsed .adm-sidebar .adm-reloj{ display:flex; }
  .adm-collapsed .adm-sidebar .adm-seccion{ display:block; }
  .adm-collapsed .adm-sidebar .adm-menu li a .lbl{ display:inline; }
  .adm-collapsed .adm-sidebar .adm-brand span:not(.bnk){ display:inline; }
  .adm-collapsed .adm-sidebar .adm-brand .brand-mini{ display:none; }
  .adm-collapsed .adm-sidebar .adm-brand{ justify-content:flex-start; padding:18px 18px 6px; font-size:20px; }
  .adm-collapsed .adm-sidebar .adm-menu li a{ justify-content:flex-start; padding:7px 12px; }
  .adm-collapsed .adm-sidebar .adm-menu li a i{ width:18px; font-size:inherit; margin:0; }

  /* La barra superior ocupa todo el ancho (sin hueco del sidebar). */
  .adm-topbar, .adm-collapsed .adm-topbar{ left:0; }

  .adm-main{ padding:12px; }
  .md-grid{ grid-template-columns:1fr; }
  .md-detail iframe{ height:60vh; }

  /* Tablas anchas: scroll interno propio en lugar de ensanchar la página. */
  .md-dt, .table-responsive{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
}

/* ════════════════════════════════════════════════════════════════
   THEME — based on reference dashboards
   LIGHT: airy blue page, deep-navy sidebar, indigo topbar, white cards
   DARK : slate-navy page, lifted cards, cyan/lime accents
   ════════════════════════════════════════════════════════════════ */

/* ---------- LIGHT ---------- */
[data-bs-theme="light"]{
  --bnk-accent:#1f9bde;            /* bright blue (reference) */
  --bnk-accent-2:#22b8e6;          /* cyan */
  --bs-body-bg:#ffffff;            /* cards & surfaces stay white */
  --bs-tertiary-bg:#eef5fb;        /* card heads / md-head / inputs */
  --bs-secondary-bg:#dceef6;
  --bs-border-color:#cfe1ec;
  --bs-body-color:#1c2542;
  --bnk-sidebar-bg:#1e2547;        /* deep navy sidebar */
  --bnk-sidebar-fg:rgba(255,255,255,.82);
  --bnk-sidebar-hover:rgba(255,255,255,.10);
}
/* Page background is an airy light blue so white cards pop */
[data-bs-theme="light"] body{ background-color:#d9edf6; color:#1c2542; }

/* Topbar: muted indigo with white controls (reference) */
[data-bs-theme="light"] .adm-topbar{ background:#565d92; border-bottom-color:#4a5183; }
[data-bs-theme="light"] .adm-topbar .adm-toggle,
[data-bs-theme="light"] .adm-topbar .btn-link{ color:#fff; }
[data-bs-theme="light"] .adm-topbar .btn-outline-secondary{ color:#fff; border-color:rgba(255,255,255,.34); }
[data-bs-theme="light"] .adm-topbar .btn-outline-secondary:hover,
[data-bs-theme="light"] .adm-topbar .btn-outline-secondary.show{ background:rgba(255,255,255,.16); color:#fff; border-color:rgba(255,255,255,.5); }

/* Sidebar on navy: white text, white-overlay hover, blue active pill */
[data-bs-theme="light"] .adm-menu li a{ color:rgba(255,255,255,.82); }
[data-bs-theme="light"] .adm-menu li a i{ color:rgba(255,255,255,.66); }
[data-bs-theme="light"] .adm-menu li a:hover{ background:rgba(255,255,255,.10); color:#fff; }
[data-bs-theme="light"] .adm-menu li a:hover i{ color:#fff; }
[data-bs-theme="light"] .adm-menu li a.active{ background:linear-gradient(90deg,#1f9bde,#22b8e6); color:#fff; }
[data-bs-theme="light"] .adm-menu li a.active i{ color:#fff; }
[data-bs-theme="light"] .adm-seccion{ color:rgba(255,255,255,.55); }
[data-bs-theme="light"] .adm-reloj{ color:rgba(255,255,255,.85); }
/* Brand on navy: ALLY white, ERP cyan (like the reference logo) */
[data-bs-theme="light"] .adm-brand .bnk{ background:none; -webkit-text-fill-color:#fff; color:#fff; }
[data-bs-theme="light"] .adm-brand .b-ally{ color:#fff; }
[data-bs-theme="light"] .adm-brand .b-erp{ background:none; -webkit-text-fill-color:#22b8e6; color:#22b8e6; }

/* Soft elevation so cards read as floating surfaces */
[data-bs-theme="light"] .fi-card,
[data-bs-theme="light"] .md-list,
[data-bs-theme="light"] .md-detail,
[data-bs-theme="light"] .card,
[data-bs-theme="light"] .iframe-wrap,
[data-bs-theme="light"] .err-box{
  box-shadow:0 1px 3px rgba(28,37,66,.08), 0 1px 2px rgba(28,37,66,.05);
}

/* ════════════════════════════════════════════════════════════════
   THEME PALETTES — selected per user via [data-theme]; the page also
   sets data-bs-theme="dark|light" so Bootstrap components render right.
   7 dark + 7 light. Each block sets accent, surfaces, sidebar; helper
   rules set page/topbar bg and the active-menu gradient.
   ════════════════════════════════════════════════════════════════ */

/* ---------- DARK themes ---------- */
[data-theme="dark-slate"]{ --bnk-accent:#22d3ee; --bnk-accent-2:#4ade80; --bs-body-bg:#313a4b; --bs-tertiary-bg:#2a3140; --bs-secondary-bg:#1f2531; --bs-border-color:#3a4458; --bnk-sidebar-bg:#232a37; --bnk-sidebar-fg:#9aa6bd; --bnk-sidebar-hover:#2c3545; }
[data-theme="dark-slate"] body, [data-theme="dark-slate"] .adm-topbar{ background:#272d3a; }
[data-theme="dark-slate"] .adm-menu li a.active{ background:linear-gradient(90deg,#22d3ee,#4ade80); color:#06202a; }
[data-theme="dark-slate"] .adm-menu li a.active i{ color:#06202a; }

[data-theme="dark-oled"]{ --bnk-accent:#e11d48; --bnk-accent-2:#fb7185; --bs-body-bg:#151515; --bs-tertiary-bg:#1d1d1d; --bs-secondary-bg:#121212; --bs-border-color:#2a2a2a; --bnk-sidebar-bg:#000000; --bnk-sidebar-fg:#a1a1aa; --bnk-sidebar-hover:#1a1a1a; }
[data-theme="dark-oled"] body, [data-theme="dark-oled"] .adm-topbar{ background:#0a0a0a; }
[data-theme="dark-oled"] .adm-menu li a.active{ background:linear-gradient(90deg,#e11d48,#fb7185); color:#fff; }
[data-theme="dark-oled"] .adm-menu li a.active i{ color:#fff; }

[data-theme="dark-indigo"]{ --bnk-accent:#6366f1; --bnk-accent-2:#a78bfa; --bs-body-bg:#211d33; --bs-tertiary-bg:#272240; --bs-secondary-bg:#1a1726; --bs-border-color:#353050; --bnk-sidebar-bg:#120f1c; --bnk-sidebar-fg:#9a93b5; --bnk-sidebar-hover:#251f3a; }
[data-theme="dark-indigo"] body, [data-theme="dark-indigo"] .adm-topbar{ background:#15131f; }
[data-theme="dark-indigo"] .adm-menu li a.active{ background:linear-gradient(90deg,#6366f1,#a78bfa); color:#fff; }
[data-theme="dark-indigo"] .adm-menu li a.active i{ color:#fff; }

[data-theme="dark-emerald"]{ --bnk-accent:#10b981; --bnk-accent-2:#34d399; --bs-body-bg:#14211c; --bs-tertiary-bg:#1a2a23; --bs-secondary-bg:#0f1814; --bs-border-color:#26392f; --bnk-sidebar-bg:#0a1410; --bnk-sidebar-fg:#8fae9f; --bnk-sidebar-hover:#16241d; }
[data-theme="dark-emerald"] body, [data-theme="dark-emerald"] .adm-topbar{ background:#0c1410; }
[data-theme="dark-emerald"] .adm-menu li a.active{ background:linear-gradient(90deg,#10b981,#34d399); color:#04130c; }
[data-theme="dark-emerald"] .adm-menu li a.active i{ color:#04130c; }

[data-theme="dark-amber"]{ --bnk-accent:#f59e0b; --bnk-accent-2:#fbbf24; --bs-body-bg:#26241f; --bs-tertiary-bg:#2d2a23; --bs-secondary-bg:#1c1b18; --bs-border-color:#3a3730; --bnk-sidebar-bg:#161512; --bnk-sidebar-fg:#b0a890; --bnk-sidebar-hover:#2a261d; }
[data-theme="dark-amber"] body, [data-theme="dark-amber"] .adm-topbar{ background:#1c1b18; }
[data-theme="dark-amber"] .adm-menu li a.active{ background:linear-gradient(90deg,#f59e0b,#fbbf24); color:#1c1300; }
[data-theme="dark-amber"] .adm-menu li a.active i{ color:#1c1300; }

[data-theme="dark-rose"]{ --bnk-accent:#f43f5e; --bnk-accent-2:#fb7185; --bs-body-bg:#241a1d; --bs-tertiary-bg:#2d2024; --bs-secondary-bg:#1a1316; --bs-border-color:#3a2a2f; --bnk-sidebar-bg:#160f11; --bnk-sidebar-fg:#b89aa0; --bnk-sidebar-hover:#2a1d21; }
[data-theme="dark-rose"] body, [data-theme="dark-rose"] .adm-topbar{ background:#1a1315; }
[data-theme="dark-rose"] .adm-menu li a.active{ background:linear-gradient(90deg,#f43f5e,#fb7185); color:#fff; }
[data-theme="dark-rose"] .adm-menu li a.active i{ color:#fff; }

[data-theme="dark-ocean"]{ --bnk-accent:#3b82f6; --bnk-accent-2:#38bdf8; --bs-body-bg:#16202e; --bs-tertiary-bg:#1c2838; --bs-secondary-bg:#101824; --bs-border-color:#2a3a4f; --bnk-sidebar-bg:#0b1320; --bnk-sidebar-fg:#8fa3bd; --bnk-sidebar-hover:#16222f; }
[data-theme="dark-ocean"] body, [data-theme="dark-ocean"] .adm-topbar{ background:#0d1420; }
[data-theme="dark-ocean"] .adm-menu li a.active{ background:linear-gradient(90deg,#3b82f6,#38bdf8); color:#fff; }
[data-theme="dark-ocean"] .adm-menu li a.active i{ color:#fff; }

/* ---------- LIGHT themes (white cards, tinted page, dark tinted sidebar) ---------- */
[data-theme="light-classic"]{ --bnk-accent:#0d9488; --bnk-accent-2:#22d3ee; --bs-body-bg:#ffffff; --bs-tertiary-bg:#f1f5f9; --bs-secondary-bg:#f8fafc; --bs-border-color:#e2e8f0; --bnk-sidebar-bg:#0f5b54; --bnk-sidebar-fg:#bfe0db; --bnk-sidebar-hover:#14746b; }
[data-theme="light-classic"] body, [data-theme="light-classic"] .adm-topbar{ background:#eef2f6; }
[data-theme="light-classic"] .adm-menu li a.active{ background:linear-gradient(90deg,#0d9488,#22d3ee); color:#04121b; }
[data-theme="light-classic"] .adm-menu li a.active i{ color:#04121b; }

[data-theme="light-rose"]{ --bnk-accent:#e11d48; --bnk-accent-2:#fb7185; --bs-body-bg:#ffffff; --bs-tertiary-bg:#fdeff1; --bs-secondary-bg:#fbf6f7; --bs-border-color:#f1dde1; --bnk-sidebar-bg:#9f1239; --bnk-sidebar-fg:#f4cdd6; --bnk-sidebar-hover:#be123c; }
[data-theme="light-rose"] body, [data-theme="light-rose"] .adm-topbar{ background:#fbf5f6; }
[data-theme="light-rose"] .adm-menu li a.active{ background:linear-gradient(90deg,#e11d48,#fb7185); color:#fff; }
[data-theme="light-rose"] .adm-menu li a.active i{ color:#fff; }

[data-theme="light-indigo"]{ --bnk-accent:#6366f1; --bnk-accent-2:#818cf8; --bs-body-bg:#ffffff; --bs-tertiary-bg:#eeeefb; --bs-secondary-bg:#f6f6fc; --bs-border-color:#e2e2f3; --bnk-sidebar-bg:#3730a3; --bnk-sidebar-fg:#cbc7ef; --bnk-sidebar-hover:#4338ca; }
[data-theme="light-indigo"] body, [data-theme="light-indigo"] .adm-topbar{ background:#f4f4fb; }
[data-theme="light-indigo"] .adm-menu li a.active{ background:linear-gradient(90deg,#6366f1,#818cf8); color:#fff; }
[data-theme="light-indigo"] .adm-menu li a.active i{ color:#fff; }

[data-theme="light-emerald"]{ --bnk-accent:#059669; --bnk-accent-2:#34d399; --bs-body-bg:#ffffff; --bs-tertiary-bg:#e8f7ef; --bs-secondary-bg:#f4fbf7; --bs-border-color:#d6ece0; --bnk-sidebar-bg:#065f46; --bnk-sidebar-fg:#bdead8; --bnk-sidebar-hover:#047857; }
[data-theme="light-emerald"] body, [data-theme="light-emerald"] .adm-topbar{ background:#f0faf5; }
[data-theme="light-emerald"] .adm-menu li a.active{ background:linear-gradient(90deg,#059669,#34d399); color:#04130c; }
[data-theme="light-emerald"] .adm-menu li a.active i{ color:#04130c; }

[data-theme="light-amber"]{ --bnk-accent:#d97706; --bnk-accent-2:#f59e0b; --bs-body-bg:#ffffff; --bs-tertiary-bg:#fbf2e2; --bs-secondary-bg:#fdf8f0; --bs-border-color:#efe2cc; --bnk-sidebar-bg:#92400e; --bnk-sidebar-fg:#f2ddbd; --bnk-sidebar-hover:#b45309; }
[data-theme="light-amber"] body, [data-theme="light-amber"] .adm-topbar{ background:#fdf8ef; }
[data-theme="light-amber"] .adm-menu li a.active{ background:linear-gradient(90deg,#d97706,#f59e0b); color:#1c1300; }
[data-theme="light-amber"] .adm-menu li a.active i{ color:#1c1300; }

[data-theme="light-sky"]{ --bnk-accent:#0284c7; --bnk-accent-2:#38bdf8; --bs-body-bg:#ffffff; --bs-tertiary-bg:#e6f3fb; --bs-secondary-bg:#f3f9fd; --bs-border-color:#d4e8f5; --bnk-sidebar-bg:#075985; --bnk-sidebar-fg:#c2e3f3; --bnk-sidebar-hover:#0369a1; }
[data-theme="light-sky"] body, [data-theme="light-sky"] .adm-topbar{ background:#f0f7fc; }
[data-theme="light-sky"] .adm-menu li a.active{ background:linear-gradient(90deg,#0284c7,#38bdf8); color:#fff; }
[data-theme="light-sky"] .adm-menu li a.active i{ color:#fff; }

[data-theme="light-violet"]{ --bnk-accent:#7c3aed; --bnk-accent-2:#a78bfa; --bs-body-bg:#ffffff; --bs-tertiary-bg:#f1eafb; --bs-secondary-bg:#f8f5fd; --bs-border-color:#e7ddf5; --bnk-sidebar-bg:#5b21b6; --bnk-sidebar-fg:#d9ccf3; --bnk-sidebar-hover:#6d28d9; }
[data-theme="light-violet"] body, [data-theme="light-violet"] .adm-topbar{ background:#f7f4fc; }
[data-theme="light-violet"] .adm-menu li a.active{ background:linear-gradient(90deg,#7c3aed,#a78bfa); color:#fff; }
[data-theme="light-violet"] .adm-menu li a.active i{ color:#fff; }

/* ---------- DARK themes (extra) ---------- */
[data-theme="dark-violet"]{ --bnk-accent:#8b5cf6; --bnk-accent-2:#c084fc; --bs-body-bg:#1f1b2e; --bs-tertiary-bg:#272240; --bs-secondary-bg:#181426; --bs-border-color:#332b50; --bnk-sidebar-bg:#14101f; --bnk-sidebar-fg:#a99fc4; --bnk-sidebar-hover:#241d3a; }
[data-theme="dark-violet"] body, [data-theme="dark-violet"] .adm-topbar{ background:#17131f; }
[data-theme="dark-violet"] .adm-menu li a.active{ background:linear-gradient(90deg,#8b5cf6,#c084fc); color:#fff; }
[data-theme="dark-violet"] .adm-menu li a.active i{ color:#fff; }

[data-theme="dark-teal"]{ --bnk-accent:#14b8a6; --bnk-accent-2:#2dd4bf; --bs-body-bg:#142523; --bs-tertiary-bg:#162825; --bs-secondary-bg:#0f1b1a; --bs-border-color:#25403c; --bnk-sidebar-bg:#0a1615; --bnk-sidebar-fg:#8fb0ab; --bnk-sidebar-hover:#162825; }
[data-theme="dark-teal"] body, [data-theme="dark-teal"] .adm-topbar{ background:#0c1716; }
[data-theme="dark-teal"] .adm-menu li a.active{ background:linear-gradient(90deg,#14b8a6,#2dd4bf); color:#04130f; }
[data-theme="dark-teal"] .adm-menu li a.active i{ color:#04130f; }

[data-theme="dark-orange"]{ --bnk-accent:#f97316; --bnk-accent-2:#fb923c; --bs-body-bg:#261d16; --bs-tertiary-bg:#2d231a; --bs-secondary-bg:#1c1611; --bs-border-color:#3a2e22; --bnk-sidebar-bg:#161009; --bnk-sidebar-fg:#b3a08c; --bnk-sidebar-hover:#2a2014; }
[data-theme="dark-orange"] body, [data-theme="dark-orange"] .adm-topbar{ background:#1c1610; }
[data-theme="dark-orange"] .adm-menu li a.active{ background:linear-gradient(90deg,#f97316,#fb923c); color:#1c1003; }
[data-theme="dark-orange"] .adm-menu li a.active i{ color:#1c1003; }

[data-theme="dark-magenta"]{ --bnk-accent:#ec4899; --bnk-accent-2:#f472b6; --bs-body-bg:#251a21; --bs-tertiary-bg:#2d2029; --bs-secondary-bg:#1a1218; --bs-border-color:#3a2a34; --bnk-sidebar-bg:#160f14; --bnk-sidebar-fg:#bb9aac; --bnk-sidebar-hover:#2a1d25; }
[data-theme="dark-magenta"] body, [data-theme="dark-magenta"] .adm-topbar{ background:#1a1217; }
[data-theme="dark-magenta"] .adm-menu li a.active{ background:linear-gradient(90deg,#ec4899,#f472b6); color:#fff; }
[data-theme="dark-magenta"] .adm-menu li a.active i{ color:#fff; }

/* ---------- LIGHT themes (extra) ---------- */
[data-theme="light-blue"]{ --bnk-accent:#2563eb; --bnk-accent-2:#60a5fa; --bs-body-bg:#ffffff; --bs-tertiary-bg:#eaf1fe; --bs-secondary-bg:#f4f8fe; --bs-border-color:#d8e6fb; --bnk-sidebar-bg:#1e3a8a; --bnk-sidebar-fg:#c8d7f6; --bnk-sidebar-hover:#1d4ed8; }
[data-theme="light-blue"] body, [data-theme="light-blue"] .adm-topbar{ background:#f1f6fe; }
[data-theme="light-blue"] .adm-menu li a.active{ background:linear-gradient(90deg,#2563eb,#60a5fa); color:#fff; }
[data-theme="light-blue"] .adm-menu li a.active i{ color:#fff; }

[data-theme="light-cyan"]{ --bnk-accent:#0891b2; --bnk-accent-2:#22d3ee; --bs-body-bg:#ffffff; --bs-tertiary-bg:#e3f6fb; --bs-secondary-bg:#f2fbfd; --bs-border-color:#cdeaf2; --bnk-sidebar-bg:#0e6b80; --bnk-sidebar-fg:#bfe8f0; --bnk-sidebar-hover:#0e7490; }
[data-theme="light-cyan"] body, [data-theme="light-cyan"] .adm-topbar{ background:#eef9fc; }
[data-theme="light-cyan"] .adm-menu li a.active{ background:linear-gradient(90deg,#0891b2,#22d3ee); color:#03161c; }
[data-theme="light-cyan"] .adm-menu li a.active i{ color:#03161c; }

[data-theme="light-lime"]{ --bnk-accent:#65a30d; --bnk-accent-2:#84cc16; --bs-body-bg:#ffffff; --bs-tertiary-bg:#eef7dc; --bs-secondary-bg:#f7fbef; --bs-border-color:#ddebc2; --bnk-sidebar-bg:#3f6212; --bnk-sidebar-fg:#dbe9b8; --bnk-sidebar-hover:#4d7c0f; }
[data-theme="light-lime"] body, [data-theme="light-lime"] .adm-topbar{ background:#f4f9e9; }
[data-theme="light-lime"] .adm-menu li a.active{ background:linear-gradient(90deg,#65a30d,#84cc16); color:#131a03; }
[data-theme="light-lime"] .adm-menu li a.active i{ color:#131a03; }

[data-theme="light-slate"]{ --bnk-accent:#475569; --bnk-accent-2:#64748b; --bs-body-bg:#ffffff; --bs-tertiary-bg:#eef1f5; --bs-secondary-bg:#f6f8fa; --bs-border-color:#dde3ea; --bnk-sidebar-bg:#334155; --bnk-sidebar-fg:#cbd5e1; --bnk-sidebar-hover:#3f4d63; }
[data-theme="light-slate"] body, [data-theme="light-slate"] .adm-topbar{ background:#eef1f5; }
[data-theme="light-slate"] .adm-menu li a.active{ background:linear-gradient(90deg,#475569,#64748b); color:#fff; }
[data-theme="light-slate"] .adm-menu li a.active i{ color:#fff; }

/* Light themes: the header takes the (dark, theme-tinted) sidebar color so it
   isn't a washed-out white bar — header + sidebar form one cohesive frame. */
[data-bs-theme="light"] .adm-topbar{
  background: var(--bnk-sidebar-bg);
  border-bottom: 1px solid rgba(0,0,0,.28);
}
[data-bs-theme="light"] .adm-topbar .adm-toggle,
[data-bs-theme="light"] .adm-topbar .adm-tools .btn{
  color: var(--bnk-sidebar-fg);
  border-color: rgba(255,255,255,.18);
  background: transparent;
}
[data-bs-theme="light"] .adm-topbar .adm-tools .btn:hover,
[data-bs-theme="light"] .adm-topbar .adm-toggle:hover{
  background: rgba(255,255,255,.10);
  color: #fff;
}
[data-bs-theme="light"] .adm-topbar .adm-tools .btn .badge{ color:#fff; }

/* ════════════════════════════════════════════════════════════════
   GLOBAL ACCENT WIRING — bind the active theme's accent into Bootstrap's
   component tokens so EVERY primary button, link, badge, focus ring and
   .text-primary follows the chosen theme (not the default blue). Uses hex
   vars + color-mix() so no per-theme rgb triplets are needed.
   ════════════════════════════════════════════════════════════════ */
:root, [data-bs-theme]{
  --bs-primary: var(--bnk-accent);
  --bs-link-color: var(--bnk-accent);
  --bs-link-hover-color: var(--bnk-accent-2);
}
.btn-primary{
  --bs-btn-bg: var(--bnk-accent);            --bs-btn-border-color: var(--bnk-accent);
  --bs-btn-hover-bg: var(--bnk-accent-2);    --bs-btn-hover-border-color: var(--bnk-accent-2);
  --bs-btn-active-bg: var(--bnk-accent-2);   --bs-btn-active-border-color: var(--bnk-accent-2);
  --bs-btn-disabled-bg: var(--bnk-accent);   --bs-btn-disabled-border-color: var(--bnk-accent);
  --bs-btn-color:#fff; --bs-btn-hover-color:#fff; --bs-btn-active-color:#fff; --bs-btn-disabled-color:#fff;
}
.btn-outline-primary{
  --bs-btn-color: var(--bnk-accent);         --bs-btn-border-color: var(--bnk-accent);
  --bs-btn-hover-bg: var(--bnk-accent);      --bs-btn-hover-border-color: var(--bnk-accent);
  --bs-btn-active-bg: var(--bnk-accent);     --bs-btn-active-border-color: var(--bnk-accent);
  --bs-btn-hover-color:#fff; --bs-btn-active-color:#fff;
}
.text-primary{ color: var(--bnk-accent) !important; }
.bg-primary, .text-bg-primary, .badge.bg-primary{ background-color: var(--bnk-accent) !important; color:#fff !important; }
.link-primary{ color: var(--bnk-accent) !important; }
.page-link{ color: var(--bnk-accent); }
.page-item.active .page-link{ background-color: var(--bnk-accent); border-color: var(--bnk-accent); }
.form-control:focus, .form-select:focus, .form-check-input:focus{
  border-color: var(--bnk-accent);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--bnk-accent) 25%, transparent);
}
.form-check-input:checked{ background-color: var(--bnk-accent); border-color: var(--bnk-accent); }
.nav-pills{ --bs-nav-pills-link-active-bg: var(--bnk-accent); }
.progress-bar{ background-color: var(--bnk-accent); }
.spinner-border.text-primary, .spinner-grow.text-primary{ color: var(--bnk-accent) !important; }

[data-bs-theme="dark"] .fi-card,
[data-bs-theme="dark"] .md-list,
[data-bs-theme="dark"] .md-detail,
[data-bs-theme="dark"] .card{
  box-shadow:0 1px 0 rgba(255,255,255,.03), 0 4px 12px rgba(0,0,0,.30);
}

/* ════════════════════════════════════════════════════════════════
   DASHBOARD — gradient stat cards (reference style)
   ════════════════════════════════════════════════════════════════ */
.stat-grad{
  position:relative; overflow:hidden; border:0; border-radius:14px;
  padding:18px 20px; color:#fff; min-height:104px;
  display:flex; flex-direction:column; justify-content:center;
  box-shadow:0 10px 24px rgba(0,0,0,.18);
}
.stat-grad .stat-num{ font-size:34px; font-weight:800; line-height:1; letter-spacing:.5px; }
.stat-grad .stat-lbl{ font-size:12px; font-weight:700; opacity:.95; margin-top:4px; }
.stat-grad .stat-sub{ font-size:11px; font-weight:600; opacity:.85; margin-top:2px; }
.stat-grad .stat-ic{
  position:absolute; right:16px; top:50%; transform:translateY(-50%);
  font-size:40px; opacity:.28;
}
/* KPI cards derive from the active theme accent (4 tonal variants, all in-family) */
.stat-grad.g-teal  { background:linear-gradient(120deg, var(--bnk-accent), var(--bnk-accent-2)); }
.stat-grad.g-orange{ background:linear-gradient(120deg, color-mix(in srgb, var(--bnk-accent) 82%, #000), var(--bnk-accent)); }
.stat-grad.g-blue  { background:linear-gradient(120deg, color-mix(in srgb, var(--bnk-accent-2) 80%, #000), var(--bnk-accent-2)); }
.stat-grad.g-pink  { background:linear-gradient(120deg, var(--bnk-accent-2), color-mix(in srgb, var(--bnk-accent) 65%, #fff)); }
.stat-grad:hover{ transform:translateY(-2px); transition:transform .15s ease; }

/* Status pipeline bars */
.pl-row{ display:flex; align-items:center; gap:10px; padding:5px 0; font-size:12.5px; }
.pl-row .pl-name{ width:88px; font-weight:600; color:var(--bs-body-color); }
.pl-row .pl-track{ flex:1; height:9px; border-radius:6px; background:var(--bs-tertiary-bg); overflow:hidden; }
.pl-row .pl-fill{ height:100%; border-radius:6px; }
.pl-row .pl-val{ width:30px; text-align:right; font-weight:700; color:var(--bs-body-color); }

/* Standalone progress track (dashboard legends, revenue rows) */
.pl-track{ height:7px; border-radius:6px; background:var(--bs-tertiary-bg); overflow:hidden; }
.pl-fill{ display:block; height:100%; border-radius:6px; }

/* Dashboard legend table (Quotes by status) */
.dash-legend{ border-collapse:separate; border-spacing:0; }
.dash-legend th{ font-weight:600; padding:0 0 6px; border-bottom:1px solid var(--bs-border-color); }
.dash-legend td{ padding:5px 0; font-size:12.5px; border-bottom:1px solid var(--bs-border-color); white-space:nowrap; }
.dash-legend tbody tr:last-child td{ border-bottom:0; }

/* Mini status badges reused on dashboard recent table */
.dash-badge{ font-size:10.5px; font-weight:700; padding:2px 9px; border-radius:20px; letter-spacing:.3px; }

/* Decline-reason word clouds (wordcloud2 canvas) */
.wc-wrap{ position:relative; width:100%; min-height:250px; }
.wc-canvas{ display:block; width:100%; height:250px; }
.wc-empty{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }

/* Email "chips" / tag input (reusable badge editor) */
.chips-field{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; height:auto; min-height:38px; cursor:text; padding:6px 8px; }
.chips-field .chip{ display:inline-flex; align-items:center; gap:7px; background:var(--bs-tertiary-bg);
  border:1px solid var(--bnk-accent,#0d9488); color:var(--bs-body-color); border-radius:16px;
  padding:3px 6px 3px 11px; font-size:12px; line-height:1.4; white-space:nowrap; }
.chips-field .chip-x{ border:0; background:transparent; color:var(--bs-secondary-color); cursor:pointer;
  font-size:15px; line-height:1; padding:0 2px; border-radius:50%; }
.chips-field .chip-x:hover{ color:#fff; background:#dc2626; }
.chips-field .chips-entry{ border:0; outline:0; background:transparent; color:var(--bs-body-color);
  flex:1 1 160px; min-width:160px; font-size:13px; padding:2px; }

/* Email Recipients manager (Settings) */
.btn-ally{ background:#991115; border:1px solid #991115; color:#fff; font-weight:700; border-radius:24px; padding:.45rem 1.3rem; }
.btn-ally:hover{ background:#7a0d10; border-color:#7a0d10; color:#fff; }
.rcpt-add{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.rcpt-add .form-control{ flex:1 1 200px; min-width:160px; }
.rcpt-add #rcptName{ max-width:240px; }
.rcpt-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:12px; }
.rcpt{ display:flex; align-items:center; gap:11px; background:var(--bs-tertiary-bg);
  border:1px solid var(--bs-border-color); border-radius:30px; padding:9px 12px; transition:opacity .15s ease; }
.rcpt.off{ opacity:.5; }
.rcpt-ic{ flex:0 0 auto; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(153,17,21,.12); color:#991115; font-size:14px; }
.rcpt-info{ flex:1 1 auto; min-width:0; }
.rcpt-name{ font-weight:700; font-size:13px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rcpt-email{ font-size:11.5px; color:var(--bs-secondary-color); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rcpt-actions{ flex:0 0 auto; display:flex; align-items:center; gap:8px; }
.rcpt-actions .form-check-input{ cursor:pointer; }
.rcpt-del{ border:0; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(220,38,38,.12); color:#dc2626; font-size:13px; cursor:pointer; transition:background .12s ease; }
.rcpt-del:hover{ background:#dc2626; color:#fff; }

/* Cloud card that stretches to fill its row height (e.g. next to a tall table) */
.fi-card.fi-cloud{ display:flex; flex-direction:column; }
.fi-card.fi-cloud .fi-body{ flex:1 1 auto; display:flex; min-height:0; }
.fi-card.fi-cloud .wc-wrap{ flex:1 1 auto; min-height:260px; }
.fi-card.fi-cloud .wc-canvas{ height:100%; }

/* Botón flotante del chat: fijado de forma estable (capa propia) para que no
   "salte" durante el scroll en navegadores móviles. */
.chat-fab{ will-change:transform; }