/* ===== APP ===== */
#screen-app { display:none; min-height:100vh; flex-direction:column; }
.sidebar {
  width: 240px;
  background: var(--navy);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 100;
  transition: width 0.28s cubic-bezier(.22,1,.36,1);
  overflow: hidden;
}
.sidebar.collapsed { width: 60px; }

/* Logo area */
.sb-logo {
  padding: 20px 16px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  min-height: 68px;
  position: relative;
}
.sb-logo-mark {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'DM Serif Display', serif;
  font-size: 15px; color: var(--navy);
  flex-shrink: 0;
}
.sb-logo-text { overflow: hidden; transition: opacity 0.2s, width 0.28s; white-space: nowrap; }
.sidebar.collapsed .sb-logo-text { opacity: 0; width: 0; }
.sb-app-name { font-family: 'DM Serif Display', serif; font-size: 1.05rem; color: var(--white); }
.sb-tipo-badge {
  display: inline-block; font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.1em; padding: 2px 7px; border-radius: 4px;
  background: rgba(201,168,76,0.15); color: var(--gold-light); margin-top: 3px;
}
#sb-negocio-nombre { font-size: 0.72rem; color: rgba(255,255,255,0.5); font-weight: 500; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Toggle button */
.sb-toggle {
  position: absolute; top: 50%; right: 10px;
  transform: translateY(-50%);
  width: 24px; height: 24px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px; cursor: pointer;
  color: rgba(255,255,255,0.5);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem;
  transition: all 0.2s;
  flex-shrink: 0;
}
.sb-toggle:hover { background: rgba(201,168,76,0.15); color: var(--gold-light); border-color: rgba(201,168,76,0.3); }
.sidebar.collapsed .sb-toggle { right: 50%; transform: translate(50%, -50%); }

/* Nav */
.sb-nav { flex: 1; padding: 8px 0; overflow-y: auto; overflow-x: hidden; }
.sb-nav::-webkit-scrollbar { width: 3px; }
.sb-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 10px; }

.sb-section-label {
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(255,255,255,0.2);
  padding: 14px 18px 4px;
  white-space: nowrap; overflow: hidden;
  transition: opacity 0.2s, padding 0.28s;
}
.sidebar.collapsed .sb-section-label { opacity: 0; padding: 7px 0; pointer-events: none; }

.sb-nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 18px;
  cursor: pointer;
  color: rgba(255,255,255,0.45);
  font-size: 0.83rem; font-weight: 400;
  transition: all 0.18s;
  border-left: 3px solid transparent;
  position: relative;
  white-space: nowrap;
}
.sb-nav-item svg { width: 17px; height: 17px; flex-shrink: 0; opacity: 0.6; transition: opacity 0.18s; }
.sb-nav-item:hover { color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.05); }
.sb-nav-item:hover svg { opacity: 1; }
.sb-nav-item.active { color: var(--gold-light); background: rgba(201,168,76,0.09); border-left-color: var(--gold); font-weight: 500; }
.sb-nav-item.active svg { opacity: 1; }
.sb-nav-item.usd-item { color: rgba(86,210,143,0.55); }
.sb-nav-item.usd-item.active { color: #56d28f; background: rgba(86,210,143,0.08); border-left-color: #56d28f; }

/* Label text dentro del nav item */
.sb-nav-item .sb-label { transition: opacity 0.18s; overflow: hidden; }
.sidebar.collapsed .sb-nav-item .sb-label { opacity: 0; width: 0; }

/* Tooltip cuando está colapsado */
.sidebar.collapsed .sb-nav-item { justify-content: center; padding: 10px; border-left-color: transparent !important; }
.sidebar.collapsed .sb-nav-item.active { background: rgba(201,168,76,0.14); border-radius: 0; }
.sidebar.collapsed .sb-nav-item.usd-item.active { background: rgba(86,210,143,0.1); }

.sb-nav-item .sb-tooltip {
  display: none;
  position: absolute; left: 68px; top: 50%;
  transform: translateY(-50%);
  background: var(--navy-light);
  color: var(--white);
  font-size: 0.75rem; font-weight: 500;
  padding: 5px 10px; border-radius: 6px;
  white-space: nowrap; pointer-events: none;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.1);
  z-index: 200;
}
.sb-nav-item .sb-tooltip::before {
  content: '';
  position: absolute; right: 100%; top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-right-color: var(--navy-light);
}
.sidebar.collapsed .sb-nav-item:hover .sb-tooltip { display: block; }

/* Footer */
.sb-footer {
  padding: 12px 18px;
  border-top: 1px solid rgba(255,255,255,0.07);
  font-size: 0.7rem; color: rgba(255,255,255,0.2);
  text-align: center; overflow: hidden;
  white-space: nowrap; transition: opacity 0.2s;
}
.sidebar.collapsed .sb-footer { opacity: 0; padding: 8px 0; }
.sb-footer .creator { margin-top: 4px; font-size: 0.65rem; color: var(--gold-light); }

/* Main area */
.sidebar.collapsed ~ .layout .main,
.layout:has(.sidebar.collapsed) .main { margin-left: 60px; }
.topbar { background:var(--white); border-bottom:1px solid var(--border); padding:0 32px; height:64px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:50; }
.topbar-title { font-size:1rem; font-weight:500; color:var(--text-dark); }
.topbar-right { display:flex; align-items:center; gap:16px; }
.topbar-year { font-size:0.8rem; color:var(--text-muted); background:var(--cream); padding:5px 12px; border-radius:20px; border:1px solid var(--border); }
.topbar-tipo { font-size:0.75rem; font-weight:600; padding:5px 12px; border-radius:20px; background:rgba(201,168,76,0.12); color:var(--warning); border:1px solid rgba(201,168,76,0.25); }
.btn-salir { font-size:0.8rem; padding:6px 14px; border:1px solid var(--border); border-radius:var(--radius-sm); background:none; color:var(--text-muted); cursor:pointer; transition:all 0.15s; font-family:'DM Sans',sans-serif; }
.btn-salir:hover { background:var(--danger-bg); color:var(--danger); border-color:rgba(185,28,28,0.2); }
.content { padding:32px; flex:1; }
.section { display:none; }
.section.active { display:block; animation:fadeIn 0.3s ease; }
.section-header { margin-bottom:28px; }
.section-header h2 { font-family:'DM Serif Display',serif; font-size:1.8rem; color:var(--text-dark); margin-bottom:6px; }
.section-header p { font-size:0.875rem; color:var(--text-muted); }

/* Cards */
.card { background:var(--white); border:1px solid var(--border); border-radius:var(--radius); padding:24px; margin-bottom:20px; box-shadow:var(--shadow); }
.card.usd-card { border-color:rgba(13,110,62,0.2); background:linear-gradient(to bottom right, var(--white), #f8fffe); }
.card-title { font-size:0.8rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-muted); margin-bottom:20px; display:flex; align-items:center; gap:8px; }
.card-title::before { content:''; width:3px; height:14px; background:var(--gold); border-radius:2px; }
.card.usd-card .card-title::before { background:var(--usd-green-light); }

/* Metrics */
.metrics-row { display:grid; gap:16px; margin-bottom:20px; }
.metrics-row.cols2 { grid-template-columns:repeat(2,1fr); }
.metrics-row.cols3 { grid-template-columns:repeat(3,1fr); }
.metrics-row.cols4 { grid-template-columns:repeat(4,1fr); }
.metric { background:var(--cream); border:1px solid var(--border); border-radius:var(--radius-sm); padding:18px 20px; }
.metric.accent { background:var(--navy); border-color:var(--navy-light); }
.metric.usd-accent { background:var(--usd-green); border-color:var(--usd-green-light); }
.metric-label { font-size:0.72rem; font-weight:500; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-muted); margin-bottom:6px; }
.metric.accent .metric-label, .metric.usd-accent .metric-label { color:rgba(255,255,255,0.45); }
.metric-value { font-size:1.5rem; font-weight:600; color:var(--text-dark); line-height:1; }
.metric.accent .metric-value { color:var(--gold-light); }
.metric.usd-accent .metric-value { color:#a8ffce; }
.metric-sub { font-size:0.72rem; color:var(--text-muted); margin-top:4px; }

/* Forms */
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-grid.cols3 { grid-template-columns:1fr 1fr 1fr; }
.form-grid.cols4 { grid-template-columns:1fr 1fr 1fr 1fr; }
.field { display:flex; flex-direction:column; gap:6px; }
.field label { font-size:0.78rem; font-weight:500; color:var(--text-mid); }
.field input, .field select, .field textarea { border:1px solid var(--border); border-radius:var(--radius-sm); padding:10px 14px; font-family:'DM Sans',sans-serif; font-size:0.9rem; color:var(--text-dark); background:var(--white); transition:border-color 0.15s; outline:none; }
.field input:focus, .field select:focus, .field textarea:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,168,76,0.12); }
.field textarea { resize:vertical; min-height:60px; }

/* Buttons */
.btn-row { display:flex; gap:12px; flex-wrap:wrap; margin-top:20px; }
.btn { display:inline-flex; align-items:center; gap:8px; padding:10px 20px; border-radius:var(--radius-sm); font-family:'DM Sans',sans-serif; font-size:0.875rem; font-weight:500; cursor:pointer; border:1px solid var(--border); transition:all 0.15s; background:var(--white); color:var(--text-dark); }
.btn:hover { background:var(--cream); }
.btn-primary { background:var(--navy); color:var(--white); border-color:var(--navy); }
.btn-primary:hover { background:var(--navy-light); border-color:var(--navy-light); }
.btn-gold { background:var(--gold); color:var(--navy); border-color:var(--gold); font-weight:600; }
.btn-gold:hover { background:var(--gold-light); }
.btn-success { background:var(--success); color:var(--white); border-color:var(--success); }
.btn-success:hover { background:#15643d; }
.btn-danger { background:var(--danger); color:var(--white); border-color:var(--danger); }
.btn-danger:hover { background:#991515; }
.btn-usd { background:var(--usd-green); color:var(--white); border-color:var(--usd-green); }
.btn-usd:hover { background:var(--usd-green-light); }
.btn-sm { padding:7px 14px; font-size:0.8rem; }
.btn-xs { padding:4px 10px; font-size:0.75rem; }

/* Tables */
.data-table { width:100%; border-collapse:collapse; font-size:0.875rem; }
.data-table th { font-size:0.72rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-muted); padding:10px 14px; text-align:left; border-bottom:2px solid var(--border); background:var(--cream); }
.data-table td { padding:11px 14px; border-bottom:1px solid var(--border); color:var(--text-dark); vertical-align:middle; }
.data-table tr:last-child td { border-bottom:none; }
.td-pos { color:var(--success); font-weight:600; }
.td-neg { color:var(--danger); font-weight:600; }
.td-label { font-weight:500; }
.badge { display:inline-flex; align-items:center; padding:3px 10px; border-radius:20px; font-size:0.72rem; font-weight:600; letter-spacing:0.05em; }
.badge-green { background:var(--success-bg); color:var(--success); }
.badge-red { background:var(--danger-bg); color:var(--danger); }
.badge-gold { background:rgba(201,168,76,0.15); color:var(--warning); }
.badge-usd { background:rgba(13,110,62,0.12); color:var(--usd-green); }

/* Alerts */
.alert { display:flex; align-items:flex-start; gap:10px; padding:12px 16px; border-radius:var(--radius-sm); font-size:0.875rem; margin-top:16px; }
.alert-icon { font-size:1rem; margin-top:1px; }
.alert-success { background:var(--success-bg); color:var(--success); border:1px solid rgba(26,122,74,0.2); }
.alert-warning { background:var(--warning-bg); color:var(--warning); border:1px solid rgba(146,96,10,0.2); }
.alert-danger { background:var(--danger-bg); color:var(--danger); border:1px solid rgba(185,28,28,0.2); }
.alert-info { background:rgba(59,130,246,0.08); color:#1d4ed8; border:1px solid rgba(59,130,246,0.2); }

/* Results */
.result-list { list-style:none; }
.result-item { display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid var(--border); font-size:0.875rem; }
.result-item:last-child { border-bottom:none; }
.result-item .rl { color:var(--text-muted); }
.result-item .rv { font-weight:500; color:var(--text-dark); }
.result-item.total { padding-top:14px; }
.result-item.total .rl { font-weight:600; color:var(--text-dark); font-size:0.95rem; }
.result-item.total .rv { font-size:1.1rem; color:var(--navy); }

/* Charts */
.chart-wrap { position:relative; height:240px; }
hr.divider { border:none; border-top:1px solid var(--border); margin:20px 0; }

/* Tab system */
.tab-bar { display:flex; gap:4px; border-bottom:2px solid var(--border); margin-bottom:24px; }
.tab-btn { padding:10px 20px; font-size:0.875rem; font-weight:500; color:var(--text-muted); cursor:pointer; border:none; background:none; border-bottom:2px solid transparent; margin-bottom:-2px; transition:all 0.15s; font-family:'DM Sans',sans-serif; }
.tab-btn.active { color:var(--navy); border-bottom-color:var(--gold); font-weight:600; }
.tab-btn:hover { color:var(--text-dark); }
.tab-content { display:none; }
.tab-content.active { display:block; animation:fadeIn 0.2s ease; }

/* Transaction list */
.txn-list { max-height:400px; overflow-y:auto; }
.txn-item { display:flex; align-items:center; gap:14px; padding:12px 16px; border-radius:var(--radius-sm); margin-bottom:8px; background:var(--cream); border:1px solid var(--border); transition:background 0.15s; }
.txn-item:hover { background:rgba(201,168,76,0.06); }
.txn-icon { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:0.9rem; flex-shrink:0; }
.txn-icon.ing { background:var(--success-bg); color:var(--success); }
.txn-icon.gas { background:var(--danger-bg); color:var(--danger); }
.txn-icon.ing-usd { background:rgba(13,110,62,0.12); color:var(--usd-green); }
.txn-icon.gas-usd { background:rgba(255,100,50,0.12); color:#c0390d; }
.txn-desc { flex:1; }
.txn-desc .txn-cat { font-size:0.72rem; font-weight:600; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-muted); }
.txn-desc .txn-note { font-size:0.875rem; color:var(--text-dark); }
.txn-desc .txn-date { font-size:0.72rem; color:var(--text-muted); }
.txn-amount { font-family:'DM Mono',monospace; font-size:0.95rem; font-weight:600; text-align:right; }
.txn-amount.pos { color:var(--success); }
.txn-amount.neg { color:var(--danger); }
.txn-actions { display:flex; gap:6px; }
.txn-del { width:28px; height:28px; border-radius:6px; border:1px solid var(--border); background:none; cursor:pointer; color:var(--text-muted); font-size:0.8rem; display:flex; align-items:center; justify-content:center; transition:all 0.15s; }
.txn-del:hover { background:var(--danger-bg); color:var(--danger); border-color:rgba(185,28,28,0.2); }

/* Cierre cards */
.cierre-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:20px; }
.cierre-card { background:var(--white); border:1px solid var(--border); border-radius:var(--radius); padding:20px; cursor:pointer; transition:all 0.2s; text-align:center; }
.cierre-card:hover { border-color:var(--gold); box-shadow:0 4px 20px rgba(201,168,76,0.15); transform:translateY(-2px); }
.cierre-card .cc-icon { font-size:1.8rem; margin-bottom:8px; }
.cierre-card .cc-label { font-size:0.875rem; font-weight:600; color:var(--text-dark); margin-bottom:4px; }
.cierre-card .cc-desc { font-size:0.75rem; color:var(--text-muted); }

/* Declaracion Jurada */
.dj-header { background:var(--navy); color:var(--white); border-radius:var(--radius) var(--radius) 0 0; padding:24px; }
.dj-title { font-family:'DM Serif Display',serif; font-size:1.4rem; }
.dj-sub { font-size:0.8rem; color:rgba(255,255,255,0.5); margin-top:4px; }
.dj-body { border:1px solid var(--border); border-top:none; border-radius:0 0 var(--radius) var(--radius); padding:24px; background:var(--white); }
.dj-row { display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--border); font-size:0.9rem; }
.dj-row:last-child { border-bottom:none; }
.dj-row.highlight { background:rgba(201,168,76,0.08); margin:0 -12px; padding:10px 12px; border-radius:6px; font-weight:600; }
.dj-row.highlight .dj-val { color:var(--navy); font-size:1rem; }

/* Filter bar */
.filter-bar { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:20px; background:var(--white); padding:16px; border-radius:var(--radius); border:1px solid var(--border); }
.filter-bar label { font-size:0.78rem; font-weight:500; color:var(--text-muted); }
.filter-bar input, .filter-bar select { border:1px solid var(--border); border-radius:var(--radius-sm); padding:8px 12px; font-size:0.875rem; color:var(--text-dark); background:var(--white); outline:none; font-family:'DM Sans',sans-serif; }
.filter-bar input:focus, .filter-bar select:focus { border-color:var(--gold); }

/* Empty state */
.empty-state { text-align:center; padding:48px 24px; color:var(--text-muted); }
.empty-state .es-icon { font-size:2.5rem; margin-bottom:16px; opacity:0.4; }
.empty-state p { font-size:0.875rem; }

/* Mes grid */
.mes-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; margin-bottom:24px; }
.mes-btn { background:var(--cream); border:1px solid var(--border); border-radius:var(--radius-sm); padding:10px 6px; text-align:center; cursor:pointer; transition:all 0.15s; }
.mes-btn:hover { border-color:var(--gold); }
.mes-btn.active { background:var(--navy); border-color:var(--navy); }
.mes-btn .mb-name { font-size:0.72rem; font-weight:600; color:var(--text-muted); }
.mes-btn.active .mb-name { color:rgba(255,255,255,0.6); }
.mes-btn .mb-val { font-size:0.8rem; font-weight:600; color:var(--text-dark); margin-top:3px; }
.mes-btn.active .mb-val { color:var(--gold-light); }

/* USD section theming */
.usd-theme .card-title::before { background:var(--usd-green-light); }

/* Toast */
.toast { position:fixed; bottom:24px; right:24px; background:var(--navy); color:var(--white); padding:14px 20px; border-radius:var(--radius); font-size:0.875rem; box-shadow:var(--shadow-lg); z-index:9999; transform:translateY(80px); opacity:0; transition:all 0.3s cubic-bezier(.22,1,.36,1); display:flex; align-items:center; gap:10px; }
.toast.show { transform:translateY(0); opacity:1; }
.toast.success { border-left:4px solid var(--success); }
.toast.error { border-left:4px solid var(--danger); }

/* Modal overlay */
.modal-overlay { position:fixed; inset:0; background:rgba(10,22,40,0.6); z-index:200; display:none; align-items:center; justify-content:center; backdrop-filter:blur(4px); }
.modal-overlay.open { display:flex; }
.modal-box { background:var(--white); border-radius:var(--radius); padding:32px; width:90%; max-width:640px; max-height:90vh; overflow-y:auto; box-shadow:var(--shadow-lg); animation:fadeUp 0.3s cubic-bezier(.22,1,.36,1); }
.modal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
.modal-header h3 { font-family:'DM Serif Display',serif; font-size:1.4rem; }
.modal-close { width:32px; height:32px; border-radius:8px; border:1px solid var(--border); background:none; cursor:pointer; font-size:1rem; color:var(--text-muted); display:flex; align-items:center; justify-content:center; }
.modal-close:hover { background:var(--danger-bg); color:var(--danger); }

/* Animations */
@keyframes fadeUp { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

/* Print */
@media print {
  .sidebar, .topbar, .btn-row, .btn-salir, .no-print { display:none !important; }
  .main { margin-left:0 !important; }
  .content { padding:0 !important; }
  .section { display:block !important; }
}