:root {
  --azul-marino: #0d2b4e;
  --azul-marino-2: #123a66;
  --naranja: #d85a30;
  --naranja-suave: #f5ded4;
  --verde-ok: #1d7a4c;
  --verde-suave: #e3f3ea;
  --rojo-error: #b0261e;
  --rojo-suave: #fbe6e4;
  --amarillo-pendiente: #93650b;
  --amarillo-suave: #fbf0dc;
  --gris-fondo: #f4f5f7;
  --gris-borde: #dfe3e8;
  --texto-principal: #1b2430;
  --texto-secundario: #5b6673;
  --fuente: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  --fuente-num: 'Consolas', 'SFMono-Regular', Menlo, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--fuente);
  background: var(--gris-fondo);
  color: var(--texto-principal);
  font-size: 15px;
  line-height: 1.5;
}

.topbar {
  background: var(--azul-marino);
  color: #fff;
}
.topbar-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 28px 16px;
  display: flex;
  align-items: center;
  gap: 18px;
}
.logo { height: 56px; width: auto; }
.titulo-app h1 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: 0.2px; }
.subtitulo { font-size: 13px; color: #c7d3e0; }

.selector-anio-form {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.selector-anio-label { font-size: 12px; color: #c7d3e0; }
.selector-anio {
  background: rgba(255,255,255,0.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 14px;
  font-weight: 600;
}
.selector-anio option { color: var(--texto-principal); }

.nav-principal {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 4px;
  padding: 0 20px;
  border-top: 1px solid rgba(255,255,255,0.12);
  overflow-x: auto;
}
.nav-principal a {
  color: #cfd9e6;
  text-decoration: none;
  padding: 12px 14px;
  font-size: 14px;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}
.nav-principal a:hover { color: #fff; }
.nav-principal a.activo {
  color: #fff;
  border-bottom-color: var(--naranja);
  font-weight: 600;
}

.contenido {
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px;
}

.pie {
  text-align: center;
  color: var(--texto-secundario);
  font-size: 12px;
  padding: 24px;
}

/* ---- Encabezados de sección ---- */
.encabezado-pagina {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}
.encabezado-pagina h2 { margin: 0 0 4px; font-size: 22px; }
.encabezado-pagina p { margin: 0; color: var(--texto-secundario); font-size: 13px; }

/* ---- Selector de mes ---- */
.selector-mes { display: flex; gap: 6px; flex-wrap: wrap; }
.selector-mes a {
  padding: 6px 12px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid var(--gris-borde);
  color: var(--texto-secundario);
  text-decoration: none;
  font-size: 13px;
}
.selector-mes a.activo {
  background: var(--azul-marino);
  color: #fff;
  border-color: var(--azul-marino);
  font-weight: 600;
}

/* ---- Tarjetas de dashboard ---- */
.grid-tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}
.tarjeta {
  background: #fff;
  border: 1px solid var(--gris-borde);
  border-radius: 10px;
  padding: 18px 20px;
}
.tarjeta .etiqueta { font-size: 12px; color: var(--texto-secundario); margin-bottom: 6px; }
.tarjeta .valor { font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tarjeta .valor.positivo { color: var(--verde-ok); }
.tarjeta .valor.negativo { color: var(--rojo-error); }

/* ---- Tablas de estados financieros ---- */
.panel {
  background: #fff;
  border: 1px solid var(--gris-borde);
  border-radius: 10px;
  padding: 4px 0 12px;
  margin-bottom: 24px;
  overflow-x: auto;
}
.panel h3 {
  padding: 16px 20px 8px;
  margin: 0;
  font-size: 15px;
  color: var(--azul-marino-2);
}
table.tabla-financiera {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
table.tabla-financiera th, table.tabla-financiera td {
  padding: 8px 20px;
  text-align: left;
  border-bottom: 1px solid #eef0f3;
}
table.tabla-financiera th { color: var(--texto-secundario); font-weight: 600; font-size: 12.5px; text-transform: none; }
table.tabla-financiera td.num, table.tabla-financiera th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.tabla-financiera tr.subtotal td { font-weight: 600; border-top: 2px solid var(--gris-borde); }
table.tabla-financiera tr.total td { font-weight: 700; background: #f8f9fb; border-top: 2px solid var(--azul-marino); }
table.tabla-financiera tr.grupo td { color: var(--azul-marino-2); font-weight: 600; padding-top: 16px; }
table.tabla-financiera tr:hover td { background: #fafbfc; }

/* ---- Badges de estado (cuadre) ---- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
}
.badge.ok { background: var(--verde-suave); color: var(--verde-ok); }
.badge.error { background: var(--rojo-suave); color: var(--rojo-error); }
.badge.pendiente { background: var(--amarillo-suave); color: var(--amarillo-pendiente); }
.badge .punto { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

/* ---- Formularios (notas / captura) ---- */
.form-linea {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}
input[type=text], input[type=number] {
  padding: 8px 10px;
  border: 1px solid var(--gris-borde);
  border-radius: 6px;
  font-family: var(--fuente);
  font-size: 14px;
}
input[type=number] { font-variant-numeric: tabular-nums; width: 160px; text-align: right; }
button, .boton {
  background: var(--azul-marino);
  color: #fff;
  border: none;
  padding: 9px 16px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
button:hover, .boton:hover { background: var(--azul-marino-2); }
button.secundario { background: #fff; color: var(--azul-marino); border: 1px solid var(--gris-borde); }
button.peligro { background: var(--rojo-error); }

.tabs { display: flex; gap: 4px; margin-bottom: 18px; border-bottom: 1px solid var(--gris-borde); }
.tabs a {
  padding: 10px 16px;
  text-decoration: none;
  color: var(--texto-secundario);
  font-size: 14px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tabs a.activo { color: var(--azul-marino); border-bottom-color: var(--naranja); font-weight: 600; }

.nota-caja {
  background: #fff;
  border: 1px solid var(--gris-borde);
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 16px;
}
.nota-caja h4 { margin: 0 0 4px; font-size: 15px; }
.nota-caja .desc { color: var(--texto-secundario); font-size: 13px; margin-bottom: 10px; }

/* ---- Nombres editables (cuentas y líneas) ---- */
.nombre-editable-wrap { display: inline-flex; align-items: center; gap: 6px; }
.btn-lapiz {
  background: none; border: none; padding: 2px 4px; font-size: 13px;
  cursor: pointer; opacity: 0.55; line-height: 1;
}
.btn-lapiz:hover { opacity: 1; background: none; }
.form-nombre-cuenta {
  display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 8px;
}
.form-nombre-cuenta input[type=text] { min-width: 220px; }
.input-nombre-linea {
  border: 1px solid transparent;
  background: transparent;
  width: 100%;
  padding: 6px 8px;
}
.input-nombre-linea:hover, .input-nombre-linea:focus {
  border-color: var(--gris-borde);
  background: #fff;
}

.alerta {
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 13.5px;
  margin-bottom: 16px;
}
.alerta.info { background: #e8f0fb; color: var(--azul-marino-2); }
.alerta.exito { background: var(--verde-suave); color: var(--verde-ok); }
.alerta.advertencia { background: var(--amarillo-suave); color: var(--amarillo-pendiente); }

.negativo-txt { color: var(--rojo-error); }

/* ---- Flujo de Efectivo: vista Comparativo estilo "Excel" ---- */
table.tabla-efe-excel { font-size: 13px; }
table.tabla-efe-excel th, table.tabla-efe-excel td { padding: 6px 10px; white-space: nowrap; }
table.tabla-efe-excel th.mes-header, table.tabla-efe-excel th.pct-header {
  background: var(--azul-marino);
  color: #fff;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  border-bottom: none;
}
table.tabla-efe-excel th.pct-header { font-size: 11px; }
table.tabla-efe-excel td.num-pct, table.tabla-efe-excel th.num-pct {
  text-align: right;
  color: var(--texto-secundario);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
table.tabla-efe-excel tr.seccion-efe td {
  background: var(--azul-marino-2);
  color: #fff;
  font-weight: 700;
  padding-top: 8px;
  padding-bottom: 8px;
  border-bottom: none;
}
table.tabla-efe-excel tr.subtotal-efe td {
  background: var(--azul-marino);
  color: #fff;
  font-weight: 700;
  border-top: none;
  border-bottom: none;
}
table.tabla-efe-excel tr.subtotal-efe td.num-pct { color: #e7ecf3; }
table.tabla-efe-excel tr:hover td { background: inherit; }
table.tabla-efe-excel tr:not(.seccion-efe):not(.subtotal-efe):hover td { background: #fafbfc; }