:root{
  --green-deep:#0E3324;
  --green-mid:#164A34;
  --green-bright:#1E7A4C;
  --green-btn:#1E8F55;
  --green-btn-dark:#166B40;
  --blue-accent:#2454C7;
  --page-bg:#EEF4F0;
  --card:#FFFFFF;
  --ink:#16241C;
  --muted:#67766D;
  --line:#E1E7E3;
  --good:#1D8A56;
  --good-tint:#E4F4EB;
  --bad:#B4242E;
  --bad-tint:#FBEAEA;
  --warn:#8A5A00;
  --warn-tint:#F6E8CC;
  --bcp:#E4661C;
  --ibk:#00933A;
  --bbva:#0A5FA8;
  --scotia:#DC1F2E;
  --radius:12px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{font-family:'Inter',sans-serif;background:var(--page-bg);color:var(--ink);-webkit-font-smoothing:antialiased;}
h1,h2,h3,.brand-name{font-family:'Space Grotesk',sans-serif;}
.mono{font-family:'IBM Plex Mono',monospace;}
@media (prefers-reduced-motion: reduce){*{animation:none !important; transition:none !important;}}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
:focus-visible{outline:2px solid var(--green-btn); outline-offset:2px;}

.app{display:flex; min-height:100vh;}

.sidebar{width:262px; flex-shrink:0; background:linear-gradient(180deg, var(--green-deep) 0%, #0A2A1D 100%);
  color:#DCEAE1; padding:20px 14px; display:flex; flex-direction:column; gap:16px; overflow-y:auto;}
.brand{display:flex; align-items:center; gap:10px; padding:0 6px;}
.brand-mark{width:34px; height:34px; border-radius:8px; background:var(--green-btn); display:flex; align-items:center;
  justify-content:center; color:#fff; font-weight:700; font-family:'Space Grotesk',sans-serif; font-size:15px; flex-shrink:0;}
.brand-name{color:#fff; font-size:16px; font-weight:700; line-height:1.1;}
.brand-sub{color:#8FAF9C; font-size:10px; text-transform:uppercase; letter-spacing:0.04em; margin-top:1px;}
.menu-eyebrow{font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:#5E7B69; padding:0 8px; font-weight:700;}
.nav-section-title{font-size:10px; letter-spacing:0.06em; text-transform:uppercase; color:#5E7B69; padding:0 8px; margin-bottom:-6px; font-weight:600;}

.nav-group{border-radius:8px;}
.group-header{display:flex; align-items:center; gap:9px; padding:10px 10px; font-size:13px; font-weight:600; color:#EAF3EC; border-radius:8px;}
.group-header:hover{background:rgba(255,255,255,0.05);}
.group-header .chev{margin-left:auto; font-size:10px; transition:transform .15s ease; color:#6E9080;}
.nav-group.open > .group-header .chev{transform:rotate(90deg);}
.group-icon{width:15px; text-align:center; opacity:0.85; font-size:12px;}
.sub-list{display:none; padding:3px 4px 4px 20px; border-left:1px solid rgba(255,255,255,0.08); margin-left:16px;}
.nav-group.open > .sub-list{display:block;}

.bank-group{margin-top:2px;}
.bank-group .group-header{padding:7px 9px; font-size:12.5px; font-weight:500; color:#C3D8CB;}
.bank-group .group-header .sw{width:7px;height:7px;border-radius:2px; flex-shrink:0;}
.bank-group .sub-list{padding:2px 2px 4px 18px; margin-left:9px;}

.sub-item{display:flex; align-items:center; gap:9px; padding:6px 10px; border-radius:7px; font-size:12px; color:#AEC7B9; margin-top:1px;}
.sub-item:hover{background:rgba(255,255,255,0.05); color:#fff;}
.sub-item.active{background:#EAF6EF; color:var(--blue-accent); font-weight:700;}

.side-extra .sub-item{color:#8FAF9C; padding-left:10px;}

.sidebar-footer{margin-top:auto; border-top:1px solid rgba(255,255,255,0.08); padding-top:14px; display:flex; align-items:center; gap:10px;}
.shift-avatar{width:30px;height:30px;border-radius:50%; background:var(--green-btn); color:#fff; display:flex; align-items:center;
  justify-content:center; font-size:12px; font-weight:600; font-family:'Space Grotesk',sans-serif;}
.shift-info .name{font-size:12.5px; color:#EAF3EC; font-weight:500;}
.shift-info .role{font-size:10.5px; color:#7C9A88;}

.main{flex:1; min-width:0; padding:22px 26px 30px 26px;}
.screen-card{background:var(--card); border:1px solid var(--line); border-radius:16px;
  box-shadow:0 1px 2px rgba(16,40,28,0.04), 0 8px 24px rgba(16,40,28,0.05); overflow:hidden;}

.content-header{padding:22px 26px 0 26px; display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.crumb{font-size:11.5px; color:var(--muted); margin-bottom:6px;}
.crumb span{color:var(--ink); font-weight:600;}
.title-row{display:flex; align-items:center; gap:10px;}
.bank-dot-lg{width:11px;height:11px;border-radius:3px;}
.curr-pill{font-size:11px; font-weight:700; padding:2px 9px; border-radius:100px; background:#EEF1EC; color:var(--muted);}
.page-title{font-size:20px; font-weight:700; margin:0;}
.page-sub{color:var(--muted); font-size:12.5px; margin-top:4px; max-width:560px;}

.user-chip{background:#F6F8F6; border:1px solid var(--line); border-radius:100px; padding:6px 14px 6px 6px; display:flex; align-items:center; gap:8px;}
.user-chip .av{width:26px;height:26px;border-radius:50%; background:var(--green-btn); color:#fff; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700;}
.user-chip .nm{font-size:12px; font-weight:600;}
.user-chip .rl{font-size:10px; color:var(--muted);}

.content-body{padding:18px 26px 26px 26px;}
.panel{display:none;}
.panel.active{display:block;}

.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start;}
@media (max-width:960px){.grid-2{grid-template-columns:1fr;}}

.inner-card{background:#FBFDFB; border:1px solid var(--line); border-radius:10px; padding:18px;}
.inner-card-title{font-size:12.5px; font-weight:700; margin:0; text-transform:uppercase; letter-spacing:0.03em; color:var(--muted);}
.card-hint{font-size:11.5px; color:var(--muted); margin:3px 0 14px 0;}
.card-head{display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:14px; gap:10px; flex-wrap:wrap;}

textarea.rawbox{width:100%; min-height:270px; resize:vertical; border:1px solid var(--line); border-radius:8px; padding:14px;
  font-family:'IBM Plex Mono',monospace; font-size:12px; color:#374151; background:#fff;}
textarea.rawbox:focus{border-color:var(--green-btn);}

.btn{border-radius:8px; padding:9px 14px; font-size:12.5px; font-weight:600; border:1px solid transparent; display:inline-flex; align-items:center; gap:7px;}
.btn-primary{background:var(--green-btn); color:#fff;}
.btn-primary:hover{background:var(--green-btn-dark);}
.btn-ghost{background:#fff; border-color:var(--line); color:var(--ink);}
.btn-ghost:hover{border-color:#C7CCD6;}
.btn-sm{padding:7px 12px; font-size:11.5px;}
.btn-row{display:flex; gap:8px; flex-wrap:wrap;}

.spinner{width:12px;height:12px;border-radius:50%; border:2px solid rgba(255,255,255,0.4); border-top-color:#fff; animation:spin .7s linear infinite; display:none;}
.btn.loading .spinner{display:inline-block;}
.btn.loading .lbl{display:none;}
@keyframes spin{to{transform:rotate(360deg);}}

.semaphore{display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; padding:5px 11px; border-radius:100px; white-space:nowrap;}
.semaphore .dot{width:7px;height:7px;border-radius:50%; background:currentColor;}
.semaphore.ok{background:var(--good-tint); color:var(--good);}
.semaphore.error{background:var(--bad-tint); color:var(--bad);}

.table-wrap{border:1px solid var(--line); border-radius:9px; overflow:hidden; background:#fff;}
table{width:100%; border-collapse:collapse; font-size:12.5px;}
thead th{text-align:left; font-size:10px; text-transform:uppercase; letter-spacing:0.04em; color:var(--blue-accent);
  background:#FAFBFC; padding:9px 12px; border-bottom:1px solid var(--line); font-weight:700;}
tbody td{padding:11px 12px; border-bottom:1px solid #EEF1EE; vertical-align:top;}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover{background:#FAFBFA;}
tbody tr.row-error{background:#FEF8F8;}
.opnum{font-family:'IBM Plex Mono',monospace; font-weight:600; color:var(--blue-accent);}
.amount{font-family:'IBM Plex Mono',monospace; font-weight:600;}
.amount.pos{color:var(--green-btn);}
.amount.neg{color:var(--bad);}
.amount.na{color:#9AA2B1;}
.status-badge{font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:100px; display:inline-block; white-space:nowrap;}
.status-badge.ok{background:var(--good-tint); color:var(--good);}
.status-badge.warn{background:var(--warn-tint); color:var(--warn);}
.status-badge.error{background:var(--bad-tint); color:var(--bad);}
.err-note{font-size:10.5px; color:var(--bad); margin-top:3px;}

.empty-hint{padding:34px 14px; text-align:center; color:var(--muted); font-size:12.5px;}

.filters{display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; margin-bottom:16px;}
.field{display:flex; flex-direction:column; gap:5px;}
.field label{font-size:10px; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:0.03em;}
.field input{border:1px solid var(--line); border-radius:8px; padding:8px 10px; font-size:12.5px; background:#fff; min-width:150px;}
.field input:focus{border-color:var(--green-btn);}

.foot-note{padding:14px 26px 20px 26px; font-size:11px; color:var(--muted); border-top:1px solid var(--line); margin-top:6px;}

@media (max-width:880px){
  .app{flex-direction:column;}
  .sidebar{width:100%;}
  .main{padding:14px;}
}

/* ---------- pantallas: app / login / acceso denegado (mutuamente excluyentes) ---------- */
#app{display:none;}
#app.active-screen{display:flex;}
.auth-screen{display:none;}
.auth-screen.active-screen{display:flex; align-items:center; justify-content:center; min-height:100vh; padding:20px;}
.auth-card{
  width:100%; max-width:380px; background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:36px 32px; box-shadow:0 1px 2px rgba(16,40,28,0.04), 0 8px 24px rgba(16,40,28,0.05);
}