* { box-sizing: border-box; }
/* El atributo hidden manda sobre cualquier display de clase */
[hidden] { display: none !important; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #f1f5f9; color: #333; }

/* ===== Tokens del design system (adoptado de Sistema Gestión) ===== */
:root {
  --color-primary: #2563EB;
  --color-primary-dark: #1D4ED8;
  --color-border: #e2e8f0;
  --cebra-par: #E8E8E8;
  --cebra-hover: #CBD5E1;
  --ok-strong: #006633;
  --peligro-strong: #F00528;
  --ok-bg: #dcfce7;
  --ok-text: #0F4D0F;
  --error-bg: #fee2e2;
  --error-text: #991b1b;
}

#app { display: flex; height: 100vh; }

/* Menú lateral (paleta del ERP: pizarra oscura, no negro plano) */
.menu {
  width: 222px; background: #0f172a; color: #fff; display: flex; flex-direction: column;
  border-right: 1px solid #1e293b; overflow-y: auto;
}

.menu-header { padding: 16px; border-bottom: 1px solid #1e293b; display: flex; align-items: center; gap: 12px; }
.menu-header .logo { width: 40px; height: 40px; border-radius: 8px; }
.menu-titulo { display: flex; flex-direction: column; gap: 4px; }
.menu-header h1 { margin: 0; font-size: 1rem; font-weight: 600; color: #f1f5f9; }

.menu-nav { flex: 1; padding: 8px 0; }
.menu-item {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 16px; text-align: left; background: none; border: none; color: #94a3b8;
  cursor: pointer; font-size: 0.9rem; transition: all 0.15s;
}
.menu-item:hover { background: #1e293b; color: #e2e8f0; }
.menu-item.activo { background: #1e293b; color: #fff; font-weight: 600; box-shadow: inset 3px 0 0 var(--color-primary); }
.menu-item svg { width: 20px; height: 20px; flex-shrink: 0; stroke: currentColor; }
.menu-item span { flex: 1; }

.menu-footer { padding: 12px 16px; border-top: 1px solid #1e293b; font-size: 0.8rem; color: #64748b; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Chip de instancia (build 121): imposible confundir maqueta con real */
.chip-modo {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 10px; font-size: 12px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.chip-modo.maqueta { background: #fee2e2; color: #991b1b; }
.chip-modo.real { background: #dcfce7; color: #0F4D0F; }
body.menu-colapsado .chip-modo { font-size: 11px; padding: 3px 6px; }

/* Botón para compactar el menú (solo iconos, como Sistema Gestión) */
.btn-colapsar {
  margin-left: auto; background: none; border: none; color: #94a3b8; cursor: pointer;
  padding: 4px; border-radius: 6px; display: flex; flex-shrink: 0;
}
.btn-colapsar:hover { background: #1e293b; color: #e2e8f0; }
.btn-colapsar svg { width: 16px; height: 16px; stroke: currentColor; transition: transform 0.15s; }
body.menu-colapsado .btn-colapsar svg { transform: scaleX(-1); }

body.menu-colapsado .menu { width: 82px; }
body.menu-colapsado .menu-header { flex-direction: row; justify-content: center; gap: 6px; padding: 16px 6px; }
body.menu-colapsado .btn-colapsar { margin-left: 0; }
body.menu-colapsado .menu-titulo { display: none; }
body.menu-colapsado .menu-item { justify-content: center; padding: 11px 0; }
body.menu-colapsado .menu-item span { display: none; }
body.menu-colapsado .menu-footer { flex-direction: column; gap: 6px; }
body.menu-colapsado .menu-footer > span:first-child { display: none; }

.badge-build {
  display: inline-block; padding: 0; background: none; border-radius: 0;
  color: #64748b; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.3px;
  align-self: flex-end; /* derecha respecto del nombre */
}

/* Contenido principal */
.contenido { flex: 1; overflow-y: auto; padding: 32px 24px 24px; }
.panel { display: none; }
.panel.activo { display: block; }
.panel header { margin-bottom: 20px; }
.panel h2 { margin: 0 0 16px; font-size: 1.6rem; font-weight: 600; }

.filtros { display: flex; gap: 12px; margin-top: 12px; }
.filtros select {
  padding: 8px 12px; border: 1px solid #ccc; border-radius: 4px; background: #fff;
  font-size: 0.9rem; cursor: pointer; color: #333;
}
.filtros select:focus { outline: none; border-color: #2e7d4f; box-shadow: 0 0 0 2px rgba(46, 125, 79, 0.1); }

/* Filtros de rango */
.toolbar { display: flex; gap: 12px; align-items: flex-end; margin-top: 16px; flex-wrap: wrap; }
.buscador {
  width: 280px; height: 36px; padding: 6px 10px;
  border: 1px solid #ccc; border-radius: 8px; background: #fff; font-size: 14px; color: #333;
}
.buscador:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12); }
.zona-filtros { display: flex; gap: 12px; align-items: flex-end; margin-left: auto; flex-wrap: wrap; }

.nav-mes { display: flex; align-items: center; gap: 8px; margin-left: 12px; }
.nav-mes .btn-mes {
  height: 36px; width: 36px; border: 1px solid var(--color-border); background: #fff;
  border-radius: 8px; cursor: pointer; font-size: 13px; color: #333;
}
.nav-mes .btn-mes:hover:not(:disabled) { border-color: var(--color-primary); color: var(--color-primary); }
.nav-mes .btn-mes:disabled { opacity: 0.35; cursor: default; }
.nav-mes strong { font-size: 15px; min-width: 155px; text-align: center; }

.seg-views { display: flex; border: 1px solid var(--color-border); border-radius: 8px; overflow: hidden; background: #fff; }
.seg-btn {
  padding: 0 18px; height: 36px; border: none; background: none; font-size: 14px;
  cursor: pointer; color: #555; transition: background 0.15s;
}
.seg-btn + .seg-btn { border-left: 1px solid var(--color-border); }
.seg-btn.activo { background: var(--color-primary); color: #fff; font-weight: 600; }

/* Controles a 36px (regla global del design system) */
.filtro-grupo input[type="date"], .btn-aplicar, .seg-btn, .toolbar .buscador { height: 36px; }
.filtro-grupo input[type="date"] { padding: 6px 10px; font-size: 14px; }
.btn-aplicar { padding: 0 18px; }

.filtros-rango { display: flex; gap: 12px; align-items: flex-end; margin-top: 16px; }
.filtro-grupo { display: flex; flex-direction: column; gap: 4px; }
.filtro-grupo label { font-size: 0.8rem; color: #666; font-weight: 500; }
.filtro-grupo input[type="date"] {
  padding: 8px 12px; border: 1px solid #ccc; border-radius: 4px; background: #fff;
  font-size: 0.9rem; color: #333; min-width: 150px;
}
.filtro-grupo input[type="date"]:focus { outline: none; border-color: #2e7d4f; box-shadow: 0 0 0 2px rgba(46, 125, 79, 0.1); }
.btn-aplicar {
  padding: 8px 20px; background: #2e7d4f; color: #fff; border: none; border-radius: 8px;
  cursor: pointer; font-size: 0.9rem; font-weight: 500; transition: background 0.2s;
}
.btn-aplicar:hover { background: #24644d; }

/* Tabla de mes/semana */
.contenedor-tabla { background: #fff; border-radius: 4px; border: 1px solid #ddd; overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); }

.mes-grupo {
  border-bottom: 1px solid #ddd;
}

.mes-titulo {
  background: #2e7d4f; color: #fff; padding: 14px 16px; font-size: 1.1rem; font-weight: 600;
  border-bottom: 2px solid #1c654a;
}

.semana-tabla {
  display: grid; gap: 0;
}

.semana-encabezado {
  display: grid; grid-template-columns: 180px repeat(auto-fit, minmax(100px, 1fr)) 90px;
  background: #f5f5f5; border-bottom: 1px solid #ddd; padding: 0;
}

.semana-encabezado > div {
  padding: 10px 12px; font-size: 0.85rem; font-weight: 500; color: #666;
  border-right: 1px solid #e5e5e5; text-align: right;
}

.semana-encabezado > div:first-child { text-align: left; }
.semana-encabezado > div:last-child { border-right: none; }

.semana-label {
  font-size: 0.8rem; color: #888; display: block; margin-top: 2px;
}

.semana-fila {
  display: grid; grid-template-columns: 180px repeat(auto-fit, minmax(100px, 1fr)) 90px;
  border-bottom: 1px solid #f0f0f0; padding: 0;
  transition: background 0.1s;
}

.semana-fila:nth-child(odd) { background: #fff; }
.semana-fila:nth-child(even) { background: #fafafa; }
.semana-fila:hover { background: #f5f5f5; }

.semana-celda {
  padding: 3.5px 12px; height: 35px; border-right: 1px solid #e5e5e5; font-size: 13px;
  text-align: right; font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.semana-celda:first-child { text-align: left; color: #555; }
.semana-celda:last-child { border-right: none; }

.semana-celda.monto { font-weight: 500; }
.semana-celda.cero { color: #aaa; }

.semana-label-rango {
  color: #666; font-weight: 500; margin-bottom: 4px;
}

/* Sin datos */
.sin-datos {
  padding: 40px 20px; text-align: center; color: #999; font-size: 0.95rem;
}

/* ===== Vista Mes: fijos del mes + semanas de lo variable ===== */
.mes-titulo { display: flex; justify-content: space-between; align-items: baseline; }
.mes-titulo .mes-total { font-size: 0.95rem; font-weight: 600; }
.mes-titulo .mes-total .rotulo { font-weight: 400; color: #d8e8de; margin-right: 8px; }

.bloque-fijos { padding: 12px 16px; background: #fff; border-bottom: 1px solid #ddd; }
.bloque-fijos h3 {
  margin: 0 0 10px; font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.3px; color: #666;
}
.fijos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.fijo-item { border: 1px solid var(--color-border); border-radius: 4px; padding: 8px 10px; background: #fff; }
.fijo-item .cat { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; color: #666; }
.fijo-item .monto { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 3px; }
.fijo-item .detalle { font-size: 11px; color: #999; margin-top: 1px; }
.fijo-item.vacio { opacity: 0.45; }
.fijos-total { margin-top: 10px; text-align: right; font-size: 13px; color: #555; }
.fijos-total strong { color: var(--color-primary); font-size: 14px; }

.rotulo-bloque {
  padding: 8px 16px 6px; font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.3px; color: #666; background: #fafafa; border-bottom: 1px solid #e5e5e5;
}

.semana-tabla .total-fila .semana-celda { font-weight: 600; border-top: 2px solid #ddd; }

/* Celdas de la grilla que abren el detalle */
.semana-celda.con-datos { cursor: pointer; }
.semana-celda.con-datos:hover { background: #eff6ff; box-shadow: inset 0 0 0 1.5px var(--color-primary); }

/* Tarjetas del mes */
.tarjetas-bloque { padding: 12px 16px 4px; background: #fff; }
.tarjeta-fila {
  display: flex; align-items: center; gap: 18px; padding: 10px 12px; margin-bottom: 8px;
  border: 1px solid var(--color-border); border-radius: 4px; background: #fff; cursor: pointer;
}
.tarjeta-fila:hover { border-color: var(--color-primary); box-shadow: inset 3px 0 0 var(--color-primary); }
.tarjeta-fila.abierta { border-color: var(--color-primary); box-shadow: inset 3px 0 0 var(--color-primary); background: #eff6ff; }
.tarjeta-nombre { font-weight: 600; font-size: 14px; width: 130px; }

/* Nombre de la tarjeta en el color corporativo de su banco (texto, no badge) */
.tarjeta-chip {
  min-width: 120px; padding: 0; background: none; border-radius: 0;
  color: #0f172a; font-size: 14px; font-weight: 700; letter-spacing: 0;
}
.tarjeta-chip[data-banco="Macro"] { color: #1E2753; }        /* azul Macro (identidad actual) */
.tarjeta-chip[data-banco="Santander"] { color: #EC0000; }    /* rojo Santander oficial */
.tarjeta-chip[data-banco="Naranja"] { color: #FF6D00; }
.tarjeta-chip[data-banco="Mercado Pago"] { color: #009EE3; }
.tarjeta-dato { font-size: 13px; color: #555; }
.tarjeta-dato strong { color: var(--color-primary); font-variant-numeric: tabular-nums; }
.tarjeta-dato .cuenta { color: #999; }
.tarjetas-nota { font-size: 11px; color: #999; margin: -2px 0 10px; }

/* Total del mes */
.total-mes-linea {
  display: flex; justify-content: flex-end; align-items: baseline; gap: 12px;
  padding: 14px 16px; background: #fafafa; border-top: 1px solid #ddd;
  font-size: 14px; color: #555;
}
.total-mes-linea strong { color: var(--color-primary); font-size: 19px; font-variant-numeric: tabular-nums; }

/* Detalle desplegable (drill-down) */
.drilldown { background: #f8fafc; border-top: 1px dashed var(--color-border); }
.drilldown .drill-titulo {
  padding: 8px 16px 2px 28px; font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.3px; color: #666;
}
.fila-mov {
  display: flex; align-items: center; gap: 12px; padding: 5px 16px 5px 28px;
  border-bottom: 1px solid #eef2f7; font-size: 13px; font-variant-numeric: tabular-nums;
}
.fila-mov:last-child { border-bottom: none; }
.fila-mov .fecha { width: 50px; color: #888; flex-shrink: 0; }
.fila-mov .nombre { flex: 1; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-mov .nombre:hover { color: var(--color-primary); }
.fila-mov .cat { width: 130px; color: #666; cursor: pointer; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-mov .cat:hover { color: var(--color-primary); }
.fila-mov .cat.sin-categoria { color: #999; font-style: italic; }
.fila-mov .medio { width: 160px; color: #888; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-mov .monto { width: 105px; text-align: right; font-weight: 600; flex-shrink: 0; }
.drilldown .drill-vacio { padding: 10px 16px 10px 28px; color: #999; font-size: 13px; }
.celda-input {
  width: 100%; height: 26px; padding: 3px 8px; font-size: 13px;
  border: 1px solid var(--color-primary); border-radius: 3px; background: #fff; color: #333;
}

/* ===== Vista Lista: movimientos unificados con edición inline ===== */
.contenedor-tabla { overflow-x: auto; }
.tabla-lista { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 900px; }
.tabla-lista thead th {
  padding: 8px 12px; font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.3px; color: #666; text-align: left; background: #fafafa;
  border-bottom: 1px solid #ddd; white-space: nowrap;
}
.tabla-lista tbody td {
  height: 35px; padding: 3.5px 12px; font-size: 13px; border-bottom: 1px solid #f0f0f0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tabla-lista tbody tr:nth-child(odd) { background: #fff; }
.tabla-lista tbody tr:nth-child(even) { background: var(--cebra-par); }
.tabla-lista tbody tr:hover { background: var(--cebra-hover); }
.tabla-lista .col-fecha { width: 100px; }
.tabla-lista .col-medio { width: 200px; }
.tabla-lista .col-categoria { width: 170px; }
.tabla-lista .col-monto { width: 130px; text-align: right; }
.tabla-lista td.col-monto { font-weight: 500; }
.tabla-lista td.editable { cursor: pointer; }
.tabla-lista td.editable:hover { box-shadow: inset 0 0 0 1.5px var(--color-primary); }
.celda-input {
  width: 100%; height: 28px; padding: 4px 8px; font-size: 13px;
  border: 1px solid var(--color-primary); border-radius: 3px; background: #fff; color: #333;
}
.celda-input:focus { outline: none; box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.18); }
tr.guardado-flash td { animation: flashOk 1.4s ease-out; }
tr.error-flash td { animation: flashError 1.4s ease-out; }
@keyframes flashOk { 0% { background: var(--ok-bg); } 100% { background: transparent; } }
@keyframes flashError { 0% { background: var(--error-bg); } 100% { background: transparent; } }
.sin-categoria { color: #999; font-style: italic; }
.medio-detalle { color: #888; }

/* ===== Toast global ===== */
.toast {
  position: fixed; right: 20px; bottom: 20px; z-index: 50;
  background: #1c1f1a; color: #fff; padding: 12px 18px; border-radius: 6px;
  font-size: 14px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.toast.ok { border-left: 4px solid #00C853; }
.toast.error { border-left: 4px solid var(--peligro-strong); }

/* ===== Build 3: bloques como tarjetas redondeadas + semanas bien separadas ===== */
#vista-presupuesto, #vista-tarjetas { background: transparent; border: none; box-shadow: none; overflow: visible; }
/* La hoja de la tarjeta scrollea adentro de su bloque (vertical y horizontal), no mueve la pantalla */
#vista-tarjetas .tabla-scroll { max-height: calc(100vh - 240px); overflow: auto; }
.presu-tarjeta {
  background: #fff; border: 1px solid var(--color-border); border-radius: 12px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05); margin-bottom: 14px; overflow: hidden;
}

.mes-banner { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; gap: 16px; flex-wrap: wrap; }
.mes-banner-nombre { font-size: 20px; font-weight: 700; color: var(--color-primary); }
.mes-banner-kpis { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.kpi { font-size: 13px; color: #64748b; white-space: nowrap; }
.kpi strong { font-size: 14.5px; color: #0f172a; font-variant-numeric: tabular-nums; margin-left: 6px; font-weight: 600; }
.kpi.ahorro strong.positivo { color: #b45309; }
.kpi.ahorro strong.negativo { color: var(--peligro-strong); }
.kpi.gastos strong { font-size: 14.5px; color: var(--color-primary); }
.kpi.variacion .flecha { font-size: 12px; margin-right: 4px; }
.kpi.variacion .flecha-abajo { color: var(--ok-strong); }
.kpi.variacion .flecha-arriba { color: var(--peligro-strong); }

.rotulo-bloque {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 16px; font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.4px; color: #666; background: #fff; border-bottom: 1px solid #f1f5f9;
}
.rotulo-bloque::before {
  content: ''; width: 3px; height: 12px; border-radius: 2px; background: var(--color-primary);
}

.bloque-fijos { padding: 12px 16px 14px; }
.fijo-item { border-radius: 10px; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; }
.fijo-item:hover { border-color: var(--color-primary); box-shadow: 0 2px 8px rgba(37, 99, 235, 0.10); }

.semana-tabla { display: grid; gap: 8px; padding: 8px 10px 10px; }
.semana-tabla .semana-encabezado {
  border-radius: 8px; background: #f1f5f9; border-bottom: none;
}
.semana-tabla .semana-encabezado > div { border-right: 1px solid #e2e8f0; }
.semana-tabla .semana-fila:nth-child(n) { background: #fff; }
.semana-tabla .semana-fila.total-fila { background: #f8fafc !important; border-color: #e2e8f0; }
.semana-tabla .semana-fila {
  border: 1px solid #eef2f7; border-radius: 8px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.semana-tabla .semana-fila:hover { background: #f8faff !important; border-color: #c7d2fe; }
.semana-tabla .semana-fila > .semana-celda:first-child {
  display: flex; flex-direction: row; align-items: center; gap: 6px;
}
.semana-tabla .semana-fila .semana-num { font-weight: 600; color: #334155; }
.semana-tabla .semana-fila .semana-celda { border-right: 1px solid #f6f8fa; }
.semana-tabla .drilldown { border: 1px dashed var(--color-border); border-radius: 8px; }

.tarjetas-bloque { padding: 12px 16px 6px; }
.tarjeta-fila { border-radius: 10px; transition: border-color 0.15s, box-shadow 0.15s; }
.tarjeta-fila:hover { box-shadow: 0 2px 8px rgba(37, 99, 235, 0.08); }

/* ===== Panel: informes y KPIs ===== */
.panel-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 14px; }
.kpi-tarjeta {
  background: #fff; border: 1px solid var(--color-border); border-radius: 12px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05); padding: 14px 16px;
}
.kpi-valor { font-size: 18px; font-weight: 700; color: #0f172a; font-variant-numeric: tabular-nums; }
.kpi-valor.positivo { color: var(--ok-strong); }
.kpi-valor.negativo { color: var(--peligro-strong); }
.kpi-pct { font-size: 13px; color: #64748b; font-weight: 600; }
.kpi-valor .flecha { font-size: 14px; }
.flecha-arriba { color: var(--peligro-strong); }
.flecha-abajo { color: var(--ok-strong); }
.kpi-rotulo {
  font-size: 11px; color: #64748b; margin-top: 4px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.3px;
}
.panel-body { padding: 12px 16px 14px; }
.panel-vacio { color: #999; font-size: 13px; padding: 6px 0; }

.cat-fila {
  display: grid; grid-template-columns: 110px minmax(120px, 1fr) 115px 46px 60px;
  gap: 10px; align-items: center; padding: 6px 0;
  border-bottom: 1px solid #f6f8fa; font-size: 13px;
}
.cat-fila:last-child { border-bottom: none; }
.cat-nombre { font-weight: 600; color: #334155; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-barra { background: #f1f5f9; border-radius: 999px; height: 10px; overflow: hidden; }
.cat-relleno { background: var(--color-primary); height: 100%; border-radius: 999px; min-width: 2px; }
.cat-monto { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.cat-pct { text-align: right; color: #64748b; font-variant-numeric: tabular-nums; }
.cat-var { text-align: right; font-weight: 600; font-size: 12px; }
.cat-var.subio { color: var(--peligro-strong); }
.cat-var.bajo { color: var(--ok-strong); }
.cat-var.sin-dato { color: #cbd5e1; }

.medio-fila {
  display: grid; grid-template-columns: 130px minmax(120px, 1fr) 115px 46px;
  gap: 10px; align-items: center; padding: 7px 0;
  border-bottom: 1px solid #f6f8fa; font-size: 13px;
}
.medio-fila:last-child { border-bottom: none; }
.medio-nombre { font-weight: 700; }

.chart { padding-top: 4px; }
.chart-leyenda { display: flex; gap: 18px; font-size: 12px; color: #64748b; margin-bottom: 10px; }
.chart-leyenda .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }
.dot-gastos { background: var(--color-primary); }
.dot-ingresos { background: #00A651; }
.chart-columnas { display: flex; align-items: stretch; gap: 8px; height: 180px; }
.chart-col { flex: 1; display: flex; flex-direction: column; align-items: center; }
.chart-par { flex: 1; display: flex; align-items: flex-end; gap: 3px; width: 100%; justify-content: center; }
.chart-barra { width: 16px; border-radius: 4px 4px 0 0; min-height: 2px; }
.chart-barra.gastos { background: var(--color-primary); }
.chart-barra.ingresos { background: #00A651; opacity: 0.85; }
.chart-mes { font-size: 11px; color: #64748b; margin-top: 6px; }

.panel-cuotas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cuota-col { border: 1px solid var(--color-border); border-radius: 10px; padding: 12px; text-align: center; }
.cuota-mes {
  font-size: 11px; color: #64748b; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.3px;
}
.cuota-total { font-size: 16px; font-weight: 700; color: var(--color-primary); margin-top: 6px; font-variant-numeric: tabular-nums; }

/* ===== Importar: mails del banco ===== */
.importar-ayuda { font-size: 13px; color: #555; margin: 0 0 10px; }
.mail-texto {
  width: 100%; min-height: 150px; padding: 10px 12px; font-size: 13px;
  border: 1px solid #ccc; border-radius: 8px; background: #fff; color: #333;
  resize: vertical; font-family: inherit;
}
.mail-texto:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12); }
.importar-acciones { display: flex; gap: 10px; margin-top: 12px; }
.btn-primario {
  height: 36px; padding: 0 18px; background: var(--color-primary); color: #fff;
  border: none; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 600;
}
.btn-primario:hover { background: var(--color-primary-dark); }
.btn-secundario {
  height: 36px; padding: 0 18px; background: #fff; color: #334155;
  border: 1px solid var(--color-border); border-radius: 8px; cursor: pointer; font-size: 14px;
}
.btn-secundario:hover { border-color: #94a3b8; }
.importar-aviso {
  background: #fef9c3; color: #854d0e; border-radius: 8px; padding: 8px 12px;
  font-size: 13px; margin-bottom: 8px;
}
.tabla-scroll { overflow-x: auto; }
.tabla-lista.preview { min-width: 0; }

/* Próximas fechas (calendario de cierres y vencimientos) */
.panel-fechas { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 48px; }
.fecha-fila { display: flex; align-items: center; gap: 8px; height: 35px; }
/* El nombre de la tarjeta solo ocupa lo suyo (sin ancho fijo que deje un hueco en nombres cortos) */
.fecha-fila .tarjeta-chip { min-width: 0; }
.fecha-tipo { font-size: 13px; }
.fecha-aviso { font-size: 12px; color: #64748b; }
.fecha-cuenta { font-size: 12px; margin-left: 4px; }
.fecha-cuenta.cuenta-verde { color: var(--ok-strong); font-weight: 600; }
.fecha-cuenta.cuenta-naranja { color: #b45309; font-weight: 600; }
/* HOY es el día del cierre: comprar hoy entra en el resumen que se paga antes — rojo para desalentar */
.fecha-cuenta.cuenta-roja { color: var(--peligro-strong); font-weight: 700; }

/* La tarjeta de Cierres compacta en vertical (pedido del dueño: que ocupe menos y suba el resumen) */
.tarjeta-cierres .rotulo-bloque { padding: 7px 16px 5px; }
.tarjeta-cierres .panel-fechas { gap: 0 48px; padding-top: 6px; padding-bottom: 8px; }
.tarjeta-cierres .fecha-fila { height: 27px; }
.fecha-fila .chip {
  display: inline-block; padding: 2px 10px; border-radius: 10px; font-size: 12px; font-weight: 600; white-space: nowrap;
}

/* ===== Vista Tarjetas: la hoja de Andrés ===== */
.tarjeta-rotulo {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  font-size: 13px; color: #334155;
}
.tarjeta-rotulo .tarjeta-chip { font-size: 15px; }
.tabla-hoja { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 0; table-layout: fixed; background: #fff; }
/* La tarjeta de la hoja mantiene el aire gris hacia el bloque siguiente (no fusionarse visualmente) */
.tarjeta-hoja { margin-bottom: 14px; }
/* La tarjeta de Cierres nunca cede alto bajo presion flex (flex-shrink por defecto la estrujaba en año completo) */
#vista-tarjetas .tarjeta-cierres { flex-shrink: 0; }
/* Modo foco: sin scroll horizontal y con el encabezado fijo (igual criterio que año completo) */
.tabla-hoja.modo-foco thead th { position: sticky; top: 0; z-index: 3; }
/* En año completo el scroll vertical deja el encabezado fijo (solo dentro de la tarjeta) */
.tabla-hoja.modo-completo thead th, .tabla-hoja.modo-foco thead th { position: sticky; top: 0; z-index: 3; }
/* Tamaño maximo PRE-FIJADO de la hoja en foco (no depende del alto de la ventana) */
.tabla-hoja.modo-foco .tabla-scroll { max-height: none; }
/* Esquema del ERP acotado a foco (C elegido por el dueño): la hoja SIEMPRE llena el alto de la
   ventana y scrollea adentro; mantiene su margen inferior (aire gris, no fusionarse) */
.contenido:has(#panel-tarjetas.panel.activo) { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 21px; }
#panel-tarjetas.panel.activo { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
#panel-tarjetas.panel.activo > header { flex-shrink: 0; }
#vista-tarjetas { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#vista-tarjetas .tarjeta-hoja.modo-foco { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#vista-tarjetas .tarjeta-hoja.modo-foco .rotulo-bloque { flex-shrink: 0; }
#vista-tarjetas .tarjeta-hoja.modo-foco .tabla-scroll { flex: 1; min-height: 0; }
.tabla-hoja th, .tabla-hoja td { height: 35px; padding: 3.5px 7px; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabla-hoja thead th { background: #fff; border-bottom: 2px solid var(--color-border); }
.tabla-hoja tbody tr:nth-child(odd) { background: #FFFFFF; }
.tabla-hoja tbody tr:nth-child(even) { background: var(--cebra-par); }
.tabla-hoja tbody tr:hover { background: var(--cebra-hover); }
.tabla-hoja .col-producto { width: 142px; min-width: 142px; font-weight: 700; }
.tabla-hoja thead th.col-producto { text-align: left; }
.tabla-hoja .col-fecha-hoja { width: 62px; text-align: center; }
.tabla-hoja .col-plan { width: 52px; text-align: center; }
.tabla-hoja .celda-mes { width: 92px; }
.tabla-hoja thead th.celda-mes { text-transform: capitalize; }
.tabla-hoja .celda-total { width: 110px; }
.tabla-hoja .celda-siguiente { background: #f1f5f9; }
.tabla-hoja td.celda-monto { text-align: right; white-space: nowrap; }
.tabla-hoja td.celda-monto.cero { color: #cbd5e1; }
.tabla-hoja td.con-datos { font-variant-numeric: tabular-nums; }
.tabla-hoja .fila-suscripcion td { color: #475569; font-weight: 600; }
.tabla-hoja .fila-costo td { color: #854d0e; }
/* Conmutador Resto del año / Año completo en el rótulo de la hoja + columna Total año */
.tarjeta-rotulo .seg-hoja { margin-left: auto; }
.tarjeta-rotulo .seg-hoja .seg-btn { padding: 0 12px; height: 28px; font-size: 12px; }
.tabla-hoja .celda-total { background: #f8fafc; font-weight: 600; }
.tabla-hoja .total-fila td.celda-total { color: var(--color-primary); }
/* El scroll horizontal imanta columnas enteras: nunca queda un mes cortado al medio */
#panel-tarjetas .tabla-scroll { scroll-snap-type: x mandatory; }
.tabla-hoja thead th.celda-mes, .tabla-hoja thead th.celda-siguiente { scroll-snap-align: start; scroll-margin-left: var(--fijo3, 266px); }

/* Columnas fijas al scrollear en horizontal (como el Excel del dueño: Negocio, Fecha y Plan no se van) */
.tabla-hoja .col-producto, .tabla-hoja .col-fecha-hoja, .tabla-hoja .col-plan { position: sticky; z-index: 1; }
.tabla-hoja .col-producto { left: 0; }
.tabla-hoja .col-fecha-hoja { left: var(--fijo1, 152px); }
.tabla-hoja .col-plan { left: var(--fijo2, 214px); }
.tabla-hoja thead th.col-producto, .tabla-hoja thead th.col-fecha-hoja, .tabla-hoja thead th.col-plan { background: #fff; z-index: 2; }
.tabla-hoja tbody tr:nth-child(odd) .col-producto, .tabla-hoja tbody tr:nth-child(odd) .col-fecha-hoja, .tabla-hoja tbody tr:nth-child(odd) .col-plan { background: #FFFFFF; }
.tabla-hoja tbody tr:nth-child(even) .col-producto, .tabla-hoja tbody tr:nth-child(even) .col-fecha-hoja, .tabla-hoja tbody tr:nth-child(even) .col-plan { background: var(--cebra-par); }
.tabla-hoja tbody tr:hover .col-producto, .tabla-hoja tbody tr:hover .col-fecha-hoja, .tabla-hoja tbody tr:hover .col-plan { background: var(--cebra-hover); }

/* Línea gris vertical que marca la frontera entre años (el dueño no quiere el año en el rótulo) */
.tabla-hoja .sep-anio { border-left: 2px solid #94a3b8 !important; }
.tabla-hoja .total-fila td {
  border-top: 2px solid var(--color-border); font-weight: 700; color: var(--color-primary);
  background: #fff; font-variant-numeric: tabular-nums;
}

/* ===== Clasificación de transferencias (DISENO.md Q1/Q2/Q4d) ===== */
.fila-revisar > td { background: #fef9c3; }
.chip-revisar {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: 12px; font-weight: 600; background: #fef9c3; color: #854d0e;
}
.chip-pago {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: 12px; font-weight: 600; background: #dbeafe; color: #1d4ed8;
}
.chip-traspaso {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: 12px; font-weight: 600; background: #f1f5f9; color: #475569;
}
.chip-fijo {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: 12px; font-weight: 600; background: #dcfce7; color: #0F4D0F;
}

/* ===== Buzón automático (panel Importar) ===== */
.buzon-estado { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.buzon-chip {
  display: inline-block; padding: 3px 10px; border-radius: 10px;
  font-size: 12px; font-weight: 600; background: #f1f5f9; color: #475569;
}
.buzon-chip.buzon-ok { background: var(--ok-bg); color: var(--ok-text); }
.buzon-chip.buzon-mal { background: var(--error-bg); color: var(--error-text); }
.buzon-error { font-size: 12px; color: var(--error-text); }
.buzon-aviso { font-size: 12px; color: #854d0e; margin-top: 2px; }
/* Columna Resultado de la actividad del buzon: texto, mas ancha, a la izquierda y con salto de linea */
.tabla-lista .col-resultado { width: 240px; text-align: left; overflow: hidden; text-overflow: ellipsis; }
.tabla-lista .col-resultado .buzon-aviso { white-space: normal; overflow-wrap: anywhere; }

/* ===== Importar resumen PDF (modal en Tarjetas, patrón modal del ERP) ===== */
.btn-importar-resumen { margin-left: auto; white-space: nowrap; }
.modal-overlay {
  position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45);
  display: flex; align-items: center; justify-content: center; z-index: 50;
}
.modal-caja {
  width: 640px; max-width: calc(100vw - 48px); max-height: calc(100vh - 96px);
  overflow-y: auto; background: #fff; border-radius: 12px;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.35);
}
.modal-cabecera {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; background: #0f172a; color: #fff;
  border-radius: 12px 12px 0 0;
}
.modal-cabecera h3 { margin: 0; font-size: 15px; font-weight: 600; }
.modal-cerrar { background: none; border: none; color: #94a3b8; font-size: 16px; cursor: pointer; }
.modal-cerrar:hover { color: #fff; }
.modal-cuerpo { padding: 16px; }
.form-fila-import { display: flex; gap: 10px; align-items: center; margin-top: 10px; }
.form-fila-import input[type="file"] { flex: 1; height: 36px; padding: 6px 10px; font-size: 14px; border: 1px solid #ccc; border-radius: 8px; background: #fff; }
.label-clave { font-size: 13px; font-weight: 600; }
.req { color: #991b1b; }
.resumen-datos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 16px; margin-top: 12px; }
.resumen-datos > div { display: flex; flex-direction: column; gap: 2px; }
.resumen-datos strong { font-size: 14px; }
.total-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; color: #64748b; }
.resumen-ok { margin-top: 10px; padding: 8px 12px; border-radius: 8px; background: var(--ok-bg); color: var(--ok-text); font-size: 13px; font-weight: 600; }
.resumen-mal { margin-top: 10px; padding: 8px 12px; border-radius: 8px; background: var(--error-bg); color: var(--error-text); font-size: 13px; font-weight: 600; }

/* Ficha de carga (panel Cargar) — controles de FORMULARIO: 36px / letra 14 / radius 8 (STYLE §4) */
.ficha { padding: 10px 16px 12px; }
.ficha-fila { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-top: 10px; }
.ficha-fila .form-actions { display: flex; gap: 10px; margin-left: auto; }
.ficha-fila:first-child { margin-top: 0; }
.ficha-campo { display: flex; flex-direction: column; gap: 6px; }
.ficha-campo label {
  font-size: 13px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.3px; color: #64748b; white-space: nowrap;
}
.ficha-input {
  height: 36px; padding: 8px 12px; font-size: 14px;
  border: 1px solid #ccc; border-radius: 8px; background: #fff; color: #333; width: 100%;
}
.ficha-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12); }
/* Ficha en UNA línea de campos (decisión del dueño): fecha 120 · hora 70 · comercio 200 ·
   monto 120 · medio 120 · categoría 130 · item 200 · atajo 130; se pliega si no entra */
.w-fecha { width: 130px; }
.w-comercio { width: 200px; }
.w-hora { width: 90px; }
/* el reloj del selector de hora consume menos lugar: entra la hora sin agrandar el campo */
.w-hora input[type="time"]::-webkit-calendar-picker-indicator { margin-left: -10px; margin-right: -4px; }
.w-monto { width: 120px; }
.w-medio { width: 120px; }
.w-atajo { width: 145px; }
.w-tarjeta { width: 180px; }
.w-cuotas { width: 140px; }
.w-categoria { width: 220px; }
.ficha-crece { flex: 1; }

/* Cargados hoy: la tabla scrollea adentro de su tarjeta (STYLE §1) */
.cargados-scroll { max-height: 300px; overflow: auto; }
.cargados-scroll .tabla-lista { min-width: 0; }  /* esta tabla se adapta al ancho de SU tarjeta */
/* anchos dimensionados: fecha/hora/medio/monto en píxel fijo (nunca se cortan);
   comercio pensado para el nombre largo tipo "El rey del descartable"; hora con columna propia */
.cargados-scroll .col-fecha { width: 90px; }
.cargados-scroll .col-hora { width: 70px; color: #64748b; }
.cargados-scroll td:nth-child(3) { width: 42%; }
.cargados-scroll .col-categoria { width: 22%; }
.cargados-scroll .col-medio { width: 130px; }
.cargados-scroll .col-monto { width: 130px; }
.cargados-scroll .col-monto, .cargados-scroll th.col-monto { text-align: right; }
.cargados-scroll th.col-monto { padding-right: 18px; }
.cargados-scroll thead th { position: sticky; top: 0; background: #fafafa; z-index: 1; box-shadow: inset 0 -1px 0 #ddd; }
.cargados-scroll .celda-nombre strong { font-weight: 700; }
/* orden por encabezado (regla del ERP): flecha y texto azul en la columna activa */
.th-orden { cursor: pointer; user-select: none; }
.th-orden:hover { color: var(--color-primary); }
.th-orden-activa { color: var(--color-primary); }
.hora-cargada { color: #64748b; font-size: 12px; margin-left: 4px; }

/* Pendientes del mes (CARGADOR D3): un renglón compacto por cargo */
.pendientes-lista { display: flex; flex-direction: column; }
.pendiente-fila {
  display: flex; gap: 12px; align-items: center; padding: 5px 4px;
  border-bottom: 1px solid #f0f0f0;
}
.pendiente-fila:last-child { border-bottom: none; }
.pendiente-nombre { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pendiente-nombre strong { font-size: 14px; }
.pendiente-detalle { margin-left: 8px; font-size: 12px; color: #64748b; }
.pendiente-monto { width: 130px; text-align: right; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.btn-confirmar-pendiente { flex-shrink: 0; }
.pendientes-pie { display: flex; justify-content: flex-end; margin-top: 12px; }
.con-cuenta { color: #64748b; font-weight: 600; }

/* Pendientes de ingresos: tres campos de desglose + total en vivo (SPEC §12) */
.pendientes-ingresos .ing-campo { width: 110px; text-align: right; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.pendientes-ingresos .ing-campo::placeholder { text-align: right; color: #94a3b8; }
.ing-total { font-size: 13px; color: #475569; white-space: nowrap; flex-shrink: 0; }
.ing-total strong { color: var(--color-primary); font-variant-numeric: tabular-nums; }
.celda-nombre-fuente { cursor: pointer; }
.celda-nombre-fuente:hover { color: var(--color-primary); }
.celda-vacia { text-align: center; color: #94a3b8; padding: 14px 8px !important; }

/* Servicios rediseño A (build 120): KPI del mes + maestro plegado + alta en modal */
.kpi-cargos-numeros { display: flex; gap: 28px; flex-wrap: wrap; }
.kpi-cargos-numeros .kpi strong { font-variant-numeric: tabular-nums; }
.kpi-cargos-numeros .kpi-ok strong { color: var(--ok-strong); }
.kpi-cargos-numeros .kpi-falta strong { color: var(--peligro-strong); }
.kpi-cargos-barra {
  margin-top: 10px; height: 10px; border-radius: 6px; background: #E8E8E8; overflow: hidden;
}
.kpi-cargos-relleno { height: 100%; background: var(--ok-strong); border-radius: 6px; transition: width 0.25s; }
.maestro-toggle {
  width: 100%; display: flex; align-items: center; gap: 8px;
  background: none; border: none; cursor: pointer;
  padding: 12px 16px; font-size: 13px; font-weight: 600; text-transform: uppercase;
  color: #475569; letter-spacing: 0.02em;
}
.maestro-toggle:hover { color: var(--color-primary); }
.maestro-flecha { font-size: 11px; width: 12px; }
.btn-chico { padding: 4px 12px; font-size: 12px; }
#vista-pendientes .rotulo-bloque { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* Conciliación por resumen (D14): esperado vs abonado en la vista Tarjetas */
.conc-fila {
  display: flex; gap: 16px; align-items: center; padding: 6px 4px;
  border-bottom: 1px solid #f0f0f0; font-size: 13px;
}
.conc-fila:last-child { border-bottom: none; }
.conc-mes { min-width: 100px; font-weight: 600; }
.conc-dato { color: #475569; }
.conc-dato strong { color: #1e293b; font-variant-numeric: tabular-nums; }
.conc-estado { margin-left: auto; font-weight: 600; font-size: 12px; padding: 2px 10px; border-radius: 10px; }
.conc-ok { background: #dcfce7; color: #0F4D0F; }
.conc-dif { background: #fee2e2; color: #991b1b; }
.conc-pendiente { background: #f1f5f9; color: #475569; }

/* Gráfico apilado de ingresos: básico + comisiones + otros en una sola columna */
.chart-pila {
  height: 120px; width: 22px; display: flex; flex-direction: column-reverse;
  justify-content: flex-start; border-radius: 4px 4px 0 0; overflow: hidden;
}
.chart-seg { width: 100%; min-height: 0; }
.chart-seg.basico { background: var(--color-primary); }
.chart-seg.comisiones { background: #7EA6F4; }
.chart-seg.otros { background: #00A651; opacity: 0.85; }
.dot-basico { background: var(--color-primary); }
.dot-comisiones { background: #7EA6F4; }
.dot-otros { background: #00A651; }

/* Maestro de cargos (Servicios): anchos dimensionados por el dato más largo real
   ("Octubre 2026" completo en Rige, montos enteros) — nada de nombre comiéndose la tabla */
#panel-cargos .tabla-lista { min-width: 0; }
#panel-cargos th:nth-child(1), #panel-cargos td:nth-child(1) { width: 26%; }
#panel-cargos th:nth-child(2), #panel-cargos td:nth-child(2) { width: 24%; }
#panel-cargos th:nth-child(3), #panel-cargos td:nth-child(3) { width: 50px; text-align: center; }
#panel-cargos th:nth-child(4), #panel-cargos td:nth-child(4) { width: 110px; }
#panel-cargos th:nth-child(5), #panel-cargos td:nth-child(5) { width: 130px; }
#panel-cargos th:nth-child(6), #panel-cargos td:nth-child(6) { width: 120px; }
#panel-cargos th:nth-child(7), #panel-cargos td:nth-child(7) { width: 70px; text-align: center; }
.cargos-toolbar { display: flex; justify-content: flex-end; padding: 10px 16px 0; }
.cargos-toolbar .buscador { width: 280px; }
.celda-nombre-cargo { cursor: pointer; }
.celda-nombre-cargo:hover strong { color: var(--color-primary); }
.col-dia { width: 90px; }
.col-estado { width: 90px; text-align: center; }
.fila-inactiva td { opacity: 0.5; }
.chip-confirmado {
  display: inline-block; padding: 2px 10px; border-radius: 10px; font-size: 12px;
  background: var(--ok-bg); color: var(--ok-text); font-weight: 600; white-space: nowrap;
}
.cargo-historial {
  margin-top: 12px; padding: 8px 12px; border-radius: 8px; background: #f1f5f9;
  font-size: 13px; color: #475569;
}

/* Toggle activo/inactivo: verde #006633 (STYLE §3), inactivo gris */
.toggle { display: inline-flex; cursor: pointer; }
.toggle input { display: none; }
.toggle-deslizador {
  width: 34px; height: 18px; border-radius: 10px; background: #CBD5E1;
  position: relative; transition: background 0.15s;
}
.toggle-deslizador::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
  border-radius: 50%; background: #fff; transition: left 0.15s;
}
.toggle input:checked + .toggle-deslizador { background: var(--ok-strong); }
.toggle input:checked + .toggle-deslizador::after { left: 18px; }

/* Servicios del mes en Presupuesto: confirmado = real con ✓ verde; proyectado = atenuado */
.servicio-item.proyectado { opacity: 0.55; }
.servicio-item { cursor: pointer; }
.icono-categoria { height: 32px; margin-bottom: 2px; text-align: center; }
.icono-categoria svg { width: 30px; height: 30px; stroke: var(--color-primary); }
.servicio-item { text-align: center; }
.servicio-item .cat { font-size: 10px; color: #94a3b8; }
.servicio-item .monto { color: var(--color-primary); font-size: 16px; margin-top: 6px; }
.kpi.obligaciones strong { color: var(--ok-strong); font-size: 22px; }
.rotulo-con-total { display: flex; align-items: center; }
.rotulo-total { margin-left: auto; font-size: 13px; color: #555; font-weight: 400; text-transform: none; }
.rotulo-total strong { color: var(--color-primary); font-size: 14px; }
.fila-servicio { display: flex; align-items: center; gap: 12px; padding: 6px 16px 6px 28px; font-size: 13px; border-top: 1px solid #f0f0f0; }
.fila-servicio .serv-nombre { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-servicio .serv-estado { color: #64748b; font-size: 12px; }
.fila-servicio .serv-monto { font-weight: 600; font-variant-numeric: tabular-nums; }
.serv-check { color: var(--ok-strong); font-weight: 700; }
.servicios-nota { font-size: 12px; color: #64748b; font-weight: 400; margin-left: 10px; }

/* Avisito de "Copiado" al hacer clic en un valor de la hoja */
#toast-copiado {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  background: #0f172a; color: #fff; padding: 8px 16px; border-radius: 8px;
  font-size: 13px; opacity: 0; transition: opacity 0.15s; pointer-events: none; z-index: 60;
}
#toast-copiado.visible { opacity: 1; }