@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
/* ============================================================
   GestioNet · V3 — Skin estilo Taluney (violeta GestioNet)
   Se carga DESPUÉS de brubank-v2.css y solo pisa lo visual.
   Rollback: quitar el <link> de este archivo en index.html.
   ============================================================ */

:root,
html[data-theme="light"]{
  --bg:#f4f6f8; --bg2:#ffffff; --bg3:#eef1f5; --bg4:#f8f9fb;
  --border:#e4e7ec; --border-soft:#eef1f5;

  --text:#101828; --text2:#475467; --text3:#667085; --text4:#98a2b3;

  --shadow-xs:0 1px 2px rgba(16,24,40,.05);
  --shadow-sm:0 4px 14px rgba(16,24,40,.06);
  --shadow:0 10px 30px -10px rgba(16,24,40,.14);
  --shadow-lg:0 24px 60px rgba(16,24,40,.18);

  --radius:10px; --radius-lg:14px; --radius-xl:18px;

  /* gradiente de marca (topbar / statusbar / login) */
  --tp-grad:linear-gradient(100deg,#160d3d 0%,#291a70 55%,#4327b8 100%);
}

body,button,input,select,textarea,.btn,.menu-btn,.dd-item{
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif !important;
}
body{font-size:13.5px;letter-spacing:0}

/* ============ TOPBAR OSCURA (Taluney) ============ */
#topbar{background:var(--tp-grad) !important;border-bottom:1px solid rgba(255,255,255,.10);box-shadow:none;height:60px;backdrop-filter:none}
@media(max-width:820px){#menubar{background:#1d1152;border-top:1px solid rgba(255,255,255,.12)}}
#logo{border-right:1px solid rgba(255,255,255,.18)}
#logo-icon{background:#fff;color:var(--accent);box-shadow:0 3px 10px rgba(10,0,40,.35);border-radius:10px;font-weight:800}
#logo-text{color:#fff}
#logo-text span{-webkit-text-fill-color:#c9b8ff;color:#c9b8ff;background:none}
#mobile-toggle{color:#fff}

.menu-btn{color:rgba(255,255,255,.75);border-radius:10px;font-weight:600}
.menu-btn svg{color:rgba(255,255,255,.60);opacity:1}
.menu-btn:hover{background:rgba(255,255,255,.10);color:#fff}
.menu-btn:hover svg{color:#fff}
.menu-btn.active{background:rgba(255,255,255,.16);color:#fff;font-weight:700}
.menu-btn.active svg{color:#fff}
.menu-btn .arrow{color:rgba(255,255,255,.55);opacity:1}

.top-local-badge{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);color:#fff}
.top-local-badge:hover{background:rgba(255,255,255,.20)}
.top-local-badge select{color:#fff !important}
.top-local-badge select option{color:var(--text)}
.cot-badge{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20);color:rgba(255,255,255,.80)}
.cot-badge b{color:#fff}
.cot-sep{background:rgba(255,255,255,.25)}
.top-btn,#btn-notif,#btn-theme{background:rgba(255,255,255,.12) !important;border:1px solid rgba(255,255,255,.25) !important;color:#fff !important}
.top-btn:hover{background:rgba(255,255,255,.22) !important;border-color:rgba(255,255,255,.45) !important;color:#fff !important;transform:translateY(-1px)}
#topbar-right{border-left:1px solid rgba(255,255,255,.18)}
#user-badge{background:rgba(255,255,255,.12) !important;border:1px solid rgba(255,255,255,.25) !important;color:#fff !important;border-radius:999px !important;font-weight:700}
#user-badge:hover{background:rgba(255,255,255,.20) !important}

/* dropdowns quedan claros sobre la topbar oscura (como Taluney) */
/* SIN margin-top: un gap entre botón y dropdown corta el :hover y el menú "se cierra solo" */
.dropdown{margin-top:0;border-radius:14px}
.dd-item{border-radius:10px;font-weight:600}
/* apertura por click (además del hover) */
.menu-item.open .dropdown{display:block}
.menu-item.open .menu-btn{background:rgba(255,255,255,.16);color:#fff}

/* ============ SUPERFICIES ============ */
.kpi-card{border-radius:14px;padding:15px 17px;border-color:var(--border)}
.kpi-label{font-size:9.5px;letter-spacing:.07em}
.kpi-value{font-size:20px;letter-spacing:-.02em}
.panel{border-radius:14px !important}
.table-wrap{border-radius:14px;overflow-x:auto}
thead th{background:#f9fafb}
.bnk-info{border-radius:16px}
.bnk-info .bru-chip{border-radius:12px}
.bru-act{border-radius:12px}
.bru-act-ic{border-radius:10px}
.modal{border-radius:18px}
.modal-header-icon{border-radius:10px}
.gn-window{border-radius:14px}

/* ============ CONTROLES ============ */
.btn{border-radius:10px;font-weight:700;font-size:13px;padding:9px 16px}
.btn[disabled]{opacity:.35;pointer-events:none}
.btn-sm{border-radius:9px;padding:6px 12px;font-size:12px}
.btn-icon{border-radius:10px}
.btn-primary{box-shadow:0 1px 2px rgba(16,24,40,.1),inset 0 1px 0 rgba(255,255,255,.12)}
input,select,textarea{border-radius:10px !important;border:1px solid #d0d5dd !important;padding:10px 13px !important;font-size:13.5px !important;box-shadow:var(--shadow-xs)}
input:focus,select:focus,textarea:focus{border-color:var(--accent) !important;box-shadow:0 0 0 4px rgba(108,62,245,.12) !important}
.badge{font-weight:700}

/* ============ STATUSBAR ============ */
#statusbar{background:var(--tp-grad) !important;border-top:1px solid rgba(255,255,255,.10);color:rgba(255,255,255,.65)}
.sb-item{border-right:1px solid rgba(255,255,255,.14)}
.sb-item b{color:#fff}
.sb-ver{color:rgba(255,255,255,.40)}

/* ============ LOGIN ============ */
#login-screen{background:linear-gradient(135deg,#160d3d 0%,#2a1a6e 45%,#5a34e8 100%) !important}

/* ============ TEMA OSCURO: la topbar ya es oscura, ajustar bordes ============ */
html[data-theme="dark"] #topbar{background:var(--tp-grad) !important}
html[data-theme="dark"]{
  --bg:#0f0f17; --bg2:#1a1a26; --border:#2a2a3a; --border-soft:#242433;
  --text:#f1eefb; --text2:#c6c0dd; --text3:#928bab; --text4:#6b6588;
}

/* ============ FEED MOVIMIENTOS: cerrable ============ */
.dash-side{padding-top:38px !important}
#dash-side-close{position:absolute;top:10px;right:12px;width:28px;height:28px;border:1px solid var(--border);border-radius:8px;background:var(--bg2);color:var(--text3);cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:5;transition:all .15s}
#dash-side-close:hover{background:var(--accent-soft);color:var(--accent);border-color:var(--accent3)}
.dash-side.hidden{display:none !important}
#page-dashboard.no-side{padding-right:0 !important}
#dash-side-reopen{display:none;position:fixed;right:0;top:110px;z-index:55;background:var(--accent);color:#fff;border:0;border-radius:10px 0 0 10px;padding:10px 7px;cursor:pointer;box-shadow:-2px 3px 12px rgba(30,15,80,.30);align-items:center}
#dash-side-reopen:hover{background:var(--accent2)}
body:has(#page-dashboard.active) #dash-side-reopen.show{display:flex}
@media(max-width:1100px){#dash-side-close,#dash-side-reopen{display:none !important}}

/* ============ TOPBAR responsive: que nada se corte ============ */
/* OJO: nada de overflow en #menubar ni .menu-item — recorta los dropdowns (position:absolute) y el menú "no abre".
   Anti-solape estructural: los ítems se ENCOGEN (texto clipeado en el botón) en vez de desbordar sobre la derecha. */
#topbar{gap:4px}
#menubar{min-width:0;flex-wrap:nowrap}
#menubar .menu-item{min-width:0}
#menubar .menu-btn{min-width:0;max-width:100%;overflow:hidden;white-space:nowrap}
#topbar-right{flex-shrink:0;flex-wrap:nowrap}
@media(max-width:1700px){
  .menu-btn svg{display:none}
  .menu-btn{padding:9px 10px}
}
@media(max-width:1560px){
  .cot-badge{display:none}
  #topbar{padding:0 14px}
}
@media(max-width:1380px){
  .menu-btn{padding:9px 8px;font-size:12.5px}
  #logo{padding-right:12px}
  #logo-text{display:none}
}
@media(max-width:1200px){
  #user-badge #user-badge-name{max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .menu-btn{padding:9px 6px}
}
@media(max-width:1080px){
  #user-badge #user-badge-name{display:none}
  .menu-btn{font-size:12px;padding:9px 5px}
  .top-local-badge{padding:5px 10px}
  .top-local-badge select{font-size:11.5px !important}
}
@media(max-width:1010px){
  .menu-btn{font-size:11.5px;padding:9px 4px}
  .top-btn,#btn-notif,#btn-theme{width:30px !important;height:30px !important}
  .top-local-badge{max-width:120px;overflow:hidden}
  #topbar{padding:0 10px;gap:3px}
  #topbar-right{gap:5px;padding-left:8px}
}

/* ============ PULIDO v2 ============ */
/* Saludo del dashboard como hero violeta (estilo Taluney) */
.bru-greet{position:relative;overflow:hidden;background:linear-gradient(120deg,#2a1a70 0%,#4327b8 55%,#6C3EF5 100%);border-radius:16px;padding:22px 26px;margin-bottom:22px;box-shadow:0 10px 28px rgba(60,30,180,.22)}
.bru-greet:before{content:"";position:absolute;inset:0;background:radial-gradient(420px 260px at 88% -30%,rgba(255,255,255,.20),transparent 60%),radial-gradient(340px 240px at -6% 130%,rgba(255,255,255,.10),transparent 60%);pointer-events:none}
.bru-hi{color:#fff;position:relative}
.bru-date{color:rgba(255,255,255,.78);position:relative}

/* Tabs tipo segmented control */
.tab-btn{font-weight:700;border-radius:9px}
.tab-btn.active{color:var(--accent)}

/* Acciones de fila: hover con tinte de marca */
.act-btn:hover{background:var(--accent-soft);color:var(--accent)}
.act-btn.delete:hover{background:var(--red-bg);color:var(--red)}

/* Login: inputs siempre claros aunque el tema global sea oscuro */
#login-screen input,#login-screen select{background:#fff !important;color:#101828 !important;border-color:#d0d5dd !important}

/* Selección de texto y ghost hover con el violeta de marca */
::selection{background:rgba(108,62,245,.22)}
.btn-ghost:hover{background:var(--accent-soft);color:var(--accent)}

/* ============ RIBBON de versión ============ */
#v2-ribbon{font-family:'Plus Jakarta Sans',sans-serif;background:var(--accent)}