/* Tema claro, simple y legible */
:root{
  --bg:#f6f7fb;
  --card:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --border:#e5e7eb;
  --shadow: 0 10px 24px rgba(17,24,39,.08);
  --danger:#dc2626;
  --dangerBg:#fee2e2;
  --success:#16a34a;
  --successBg:#dcfce7;
  --primary:#111827;
  --primaryBg:#e5e7eb;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
}

.topbar{
  position:sticky; top:0; z-index:10;
  background:rgba(255,255,255,.9);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
}

.brand{
  max-width:1100px;
  margin:0 auto;
  padding:14px 16px;
  display:flex; gap:12px; align-items:center;
}
.brand__logo{width:40px; height:40px; border-radius:12px; box-shadow: var(--shadow);}
.brand__title{font-weight:800; font-size:16px;}
.brand__subtitle{font-size:12px; color:var(--muted); margin-top:2px;}

.container{max-width:1100px; margin:0 auto; padding:16px;}

.layout{
  display:grid;
  grid-template-columns: 300px 1fr;
  gap:14px;
  align-items:start;
}

@media (max-width: 900px){
  .layout{grid-template-columns: 1fr;}
}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  padding:14px;
  box-shadow: var(--shadow);
}

.card__title{
  font-weight:800;
  margin-bottom:10px;
}

.muted{color:var(--muted); font-size:12px;}
.footer{padding:14px 2px; text-align:center;}

.row{display:flex; align-items:center;}
.row--between{justify-content:space-between;}
.row--wrap{flex-wrap:wrap;}
.row--gap{gap:10px;}

.field{display:flex; flex-direction:column; gap:6px; min-width:160px;}
.field--wide{grid-column: 1 / -1;}
label{font-size:12px; color:var(--muted);}
input, select{
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  font-size:14px;
  outline:none;
  background:#fff;
}
input:focus, select:focus{border-color:#c7cbd1;}

.btn{
  border:none;
  border-radius:14px;
  padding:10px 12px;
  cursor:pointer;
  background:var(--primary);
  color:#fff;
  font-weight:700;
  font-size:13px;
}
.btn:disabled{opacity:.5; cursor:not-allowed;}
.btn--ghost{background:var(--primaryBg); color:var(--text);}
.btn--danger{background:var(--danger); color:#fff;}

.pill{
  border-radius:16px;
  padding:10px 12px;
  min-width:230px;
  border:1px solid var(--border);
}
.pill__label{font-size:12px; color:var(--muted); font-weight:700;}
.pill__value{font-size:18px; font-weight:900; margin-top:3px; letter-spacing:.2px;}
.pill--danger{background:var(--dangerBg); border-color:#fecaca;}
.pill--danger .pill__value{color:var(--danger);}
.pill--success{background:var(--successBg); border-color:#bbf7d0;}
.pill--success .pill__value{color:var(--success);}

.banks__list{display:flex; flex-direction:column; gap:8px; padding-right:4px;}
.bankItem{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:14px;
  cursor:pointer;
  background:#fff;
}
.bankItem:hover{border-color:#cfd5dd;}
.bankItem--active{border-color:#111827;}
.bankItem__name{font-weight:800; font-size:13px;}
.bankItem__meta{font-size:12px; color:var(--muted);}

.grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px;
}
@media (max-width: 700px){
  .grid{grid-template-columns: 1fr;}
  .pill{min-width:unset; width:100%;}
  .field{min-width:unset; width:100%;}
}

.table{
  overflow:auto;
  border:1px solid var(--border);
  border-radius:14px;
}
.table table{width:100%; border-collapse:collapse; font-size:13px; background:#fff;}
.table th, .table td{padding:10px 10px; border-bottom:1px solid var(--border); text-align:left; vertical-align:top;}
.table th{font-size:12px; color:var(--muted); font-weight:900; background:#fafafa;}
.table tr:last-child td{border-bottom:none;}
.tag{
  display:inline-flex;
  padding:4px 8px;
  border-radius:999px;
  font-weight:800;
  font-size:12px;
}
.tag--in{background:var(--successBg); color:var(--success); border:1px solid #bbf7d0;}
.tag--out{background:var(--dangerBg); color:var(--danger); border:1px solid #fecaca;}
.actions{display:flex; gap:8px; flex-wrap:wrap;}
.linkbtn{
  border:none;
  background:transparent;
  color:#111827;
  font-weight:900;
  cursor:pointer;
  padding:0;
}
.linkbtn--danger{color:var(--danger);}

/* En móviles, mostramos los bancos como chips en grid para que se vean todos */
@media (max-width: 900px){
  .banks__list{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:8px;
  }
  .bankItem{padding:10px 10px;}
  .bankItem__meta{display:none;}
}

/* Panel compacto por banco (mensual y total) */
.card--soft{box-shadow:none;}
.perbank{margin-top:12px; padding:12px;}
.perbank__grid{
  margin-top:10px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:10px;
}
@media (max-width: 900px){
  .perbank__grid{grid-template-columns: repeat(2, minmax(0, 1fr));}
}
.perbankItem{
  border:1px solid var(--border);
  border-radius:14px;
  padding:10px;
  background:#fff;
}
.perbankItem__name{font-weight:900; font-size:12px; margin-bottom:8px;}
.perbankItem__row{display:flex; justify-content:space-between; gap:8px; align-items:center; font-size:12px;}
.perbankItem__label{color:var(--muted); font-weight:800;}
.perbankItem__val{font-weight:900;}
.perbankItem__val--danger{color:var(--danger);}
.perbankItem__val--success{color:var(--success);}

/* Layout sin lista lateral de bancos */
.layout--single{
  grid-template-columns: 1fr !important;
}

textarea{width:100%;padding:12px;border:1px solid #e5e7eb;border-radius:14px;resize:vertical;}

/* Nuevos paneles v7 */
.independent-panel,.cash-panel{margin-top:14px;}
.metric-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
.metric-card{border:1px solid var(--border);border-radius:16px;padding:14px;background:#fff;min-height:112px;display:flex;flex-direction:column;justify-content:center;}
.metric-card__label{font-size:12px;color:var(--muted);font-weight:800;}
.metric-card__value{font-size:24px;font-weight:950;margin:5px 0;letter-spacing:.2px;}
.metric-card--difference.is-negative{background:var(--dangerBg);border-color:#fecaca;}
.metric-card--difference.is-negative .metric-card__value{color:var(--danger);}
.metric-card--difference.is-positive{background:var(--successBg);border-color:#bbf7d0;}
.metric-card--difference.is-positive .metric-card__value{color:var(--success);}
.dual-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start;}
.ledger-card{min-width:0;}
.compact-form{margin-top:12px;}
.grid--compact{grid-template-columns:repeat(3,minmax(0,1fr));}
.compact-table{margin-top:12px;max-height:360px;overflow:auto;}
.btn--small{padding:8px 10px;font-size:12px;border-radius:12px;}
.cash-preview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px;}
.cash-preview>div{border:1px solid var(--border);border-radius:14px;padding:10px;background:#fafafa;display:flex;flex-direction:column;gap:4px;}
.cash-preview span{font-size:12px;color:var(--muted);font-weight:800;}
.cash-preview strong{font-size:16px;}
.money-negative{color:var(--danger)!important;}
.money-positive{color:var(--success)!important;}
.bank-admin input{min-width:220px;}
.perbankItem{cursor:pointer;transition:border-color .15s,transform .15s;}
.perbankItem:hover{border-color:#9ca3af;transform:translateY(-1px);}
.perbankItem--active{border-color:#111827;box-shadow:0 0 0 1px #111827 inset;}

@media (max-width:900px){
  .dual-grid{grid-template-columns:1fr;}
  .metric-grid{grid-template-columns:1fr;}
  .cash-preview{grid-template-columns:1fr;}
}
@media (max-width:700px){
  .grid--compact,.cash-form-grid{grid-template-columns:1fr;}
  .bank-admin input{min-width:unset;width:100%;}
  .bank-admin .row{width:100%;}
  .bank-admin .btn{flex:1 1 auto;}
}

/* v8: resumen superior compacto con todos los totales visibles */
.overview-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
  margin-bottom:12px;
}
.top-metric{
  min-width:0;
  min-height:86px;
  border:1px solid var(--border);
  border-radius:16px;
  padding:10px 12px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow:hidden;
}
.top-metric__label{
  font-size:11px;
  line-height:1.15;
  font-weight:900;
  color:#4b5563;
}
.top-metric__value{
  margin-top:4px;
  font-size:20px;
  line-height:1.05;
  font-weight:950;
  letter-spacing:.1px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.top-metric__hint{
  margin-top:4px;
  font-size:10px;
  line-height:1.1;
  color:#6b7280;
}
.top-metric--month{background:#fff1f2;border-color:#fecdd3;}
.top-metric--month .top-metric__value{color:#dc2626;}
.top-metric--total{background:#ecfdf5;border-color:#bbf7d0;}
.top-metric--total .top-metric__value{color:#16a34a;}
.top-metric--sales{background:#eff6ff;border-color:#bfdbfe;}
.top-metric--sales .top-metric__value{color:#2563eb;}
.top-metric--bs{background:#f5f3ff;border-color:#ddd6fe;}
.top-metric--bs .top-metric__value{color:#7c3aed;}
.top-metric--difference{background:#fffbeb;border-color:#fde68a;}
.top-metric--difference .top-metric__value{color:#d97706;}
.top-metric--difference.is-negative{background:var(--dangerBg);border-color:#fecaca;}
.top-metric--difference.is-negative .top-metric__value{color:var(--danger);}
.top-metric--difference.is-positive{background:var(--successBg);border-color:#bbf7d0;}
.top-metric--difference.is-positive .top-metric__value{color:var(--success);}
.summary-tools{margin-bottom:12px;}
.field--month{min-width:210px;}

@media (max-width:700px){
  .overview-grid{
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:7px;
  }
  .overview-grid .top-metric:nth-child(-n+3){grid-column:span 2;}
  .overview-grid .top-metric:nth-child(n+4){grid-column:span 3;}
  .top-metric{
    min-height:72px;
    padding:8px 8px;
    border-radius:13px;
  }
  .top-metric__label{font-size:10px;}
  .top-metric__value{font-size:16px;}
  .top-metric__hint{font-size:9px;}
  .summary-tools .field{width:100%;}
  .summary-tools .btn{flex:1 1 100%;}
}

/* v9: hora visible y lista de movimientos (más recientes primero) */
.record-date{display:block;white-space:nowrap;font-weight:700;}
.record-time{display:block;margin-top:3px;white-space:nowrap;font-size:12px;color:#4b5563;}
.record-index{font-weight:850;color:#6b7280;white-space:nowrap;}
.bank-name{color:#1d4ed8;white-space:nowrap;}
.global-history{margin-top:14px;}
.history-table{max-height:530px;overflow:auto;}
.history-table table{min-width:750px;}
.history-table th{position:sticky;top:0;z-index:1;}
@media (max-width:700px){
  .global-history #globalHistoryFilter{max-width:100%;}
}