/* ==========================================================================
   Compta · estilos de la aplicación (sobre Tabler / Bootstrap 5)
   ========================================================================== */
:root {
  --cf-azul: #0e5a5f;
  --cf-azul-oscuro: #0a3f43;
  --cf-oro: #e8a33d;
  --cf-rojo: #c0262d;
  --cf-verde: #2f8f5b;
  --tblr-primary: #0e5a5f;
  --tblr-primary-rgb: 14, 90, 95;
  --tblr-primary-darken: #0a3f43;
  --bs-primary: #0e5a5f;
  --bs-primary-rgb: 14, 90, 95;
}

body { min-height: 100vh; }

/* --- Importes: 1.000,00 €, negativos en rojo --------------------------------- */
.importe { font-variant-numeric: tabular-nums; white-space: nowrap; }
.importe-negativo, .tabulator .importe-negativo { color: var(--cf-rojo) !important; font-weight: 600; }
td.num, th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* --- Barra lateral -------------------------------------------------------- */
.app-sidebar { background: linear-gradient(180deg, var(--cf-azul) 0%, var(--cf-azul-oscuro) 100%); }
.app-marca { display: flex; align-items: center; gap: .6rem; padding: .75rem .25rem; text-decoration: none; }
.app-marca-img { width: 40px; height: 40px; object-fit: contain; border-radius: 10px; background: rgba(255,255,255,.08); }
.app-marca-texto { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.app-marca-titulo { font-weight: 700; font-size: 1.05rem; color: #fff; }
.app-marca-sub { font-size: .75rem; color: rgba(255,255,255,.75); white-space: normal; }
.app-sidebar .dropdown-item.active { background: rgba(255,255,255,.12); }

/* --- Barra superior ------------------------------------------------------- */
.app-topbar { background: var(--tblr-bg-surface, #fff); border-bottom: 1px solid var(--tblr-border-color, #e6e7e9); }
.selector-barra { min-width: 9rem; max-width: 18rem; }

/* --- Tarjetas e indicadores del panel ------------------------------------- */
.kpi { border: 0; box-shadow: 0 1px 3px rgba(20, 40, 80, .08); }
.kpi .kpi-etiqueta { font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--tblr-secondary, #667085); }
.kpi .kpi-valor { font-size: 1.65rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi .kpi-pie { font-size: .8rem; color: var(--tblr-secondary, #667085); }
.kpi-principal { background: linear-gradient(135deg, var(--cf-azul) 0%, var(--cf-azul-oscuro) 100%); color: #fff; }
.kpi-principal .kpi-etiqueta, .kpi-principal .kpi-pie { color: rgba(255,255,255,.8); }
.kpi-principal .importe-negativo { color: #ffc9cc !important; }
.grafico, .grafico-caja { position: relative; height: 280px; }
.grafico-alto { position: relative; height: 380px; }

/* --- Módulos ----------------------------------------------------------------- */
.fila-pagada td { color: var(--tblr-secondary, #667085); }
.fila-pagada td.concepto { text-decoration: line-through; text-decoration-color: rgba(0,0,0,.25); }
.fila-grupo > td { font-weight: 600; background: rgba(var(--tblr-primary-rgb), .04); }
.fila-hijo td:first-child { padding-left: 2rem; }
.cuadro-fondo th, .cuadro-fondo td { white-space: nowrap; }
.cuadro-fondo .mes-actual { background: rgba(var(--tblr-primary-rgb), .06); }
.mes-tarjeta .card-header { background: var(--tblr-bg-surface-secondary, #f6f8fb); }
.casilla-pago { width: 1.25rem; height: 1.25rem; cursor: pointer; }
.cifra { font-variant-numeric: tabular-nums; white-space: nowrap; }
.etiqueta-funcion { font-size: .7rem; }
.progress-sm { height: .4rem; }

/* --- Fichas ---------------------------------------------------------------- */
.ficha dt { font-weight: 500; color: var(--tblr-secondary, #667085); }
.saldo-grande { font-size: 1.9rem; font-weight: 800; font-variant-numeric: tabular-nums; }

/* --- Tablas ---------------------------------------------------------------- */
.table-sm td, .table-sm th { vertical-align: middle; }
.tabla-totales tfoot td, .tabla-totales tfoot th { font-weight: 700; border-top: 2px solid var(--cf-azul); }
.fila-subtotal td { font-weight: 600; background: rgba(var(--tblr-primary-rgb), .04); }
.tabulator { font-size: .9rem; border-radius: 6px; }
.tabulator .tabulator-header .tabulator-col { background: var(--tblr-bg-surface-secondary, #f6f8fb); }
.tabulator-row.fila-unidad { font-weight: 600; background: rgba(var(--tblr-primary-rgb), .05); }
.tabulator-row.fila-baja { opacity: .6; }
.tabulator .tabulator-cell.num { text-align: right; }

/* --- Formularios ------------------------------------------------------------ */
.barra-acciones { display: flex; justify-content: flex-end; gap: .5rem; flex-wrap: wrap; }
@media (max-width: 767.98px) {
  .barra-acciones { position: sticky; bottom: 0; background: var(--tblr-body-bg, #f6f8fb); padding: .75rem 0; z-index: 10; }
  .barra-acciones .btn { flex: 1; }
}
input.importe-input { text-align: right; font-variant-numeric: tabular-nums; }
[aria-invalid="true"] { border-color: var(--tblr-danger, #d63939) !important; }

/* --- Pantalla de carga -------------------------------------------------------- */
.cargando { position: fixed; inset: 0; background: rgba(246, 248, 251, .85); backdrop-filter: blur(2px); display: none; align-items: center; justify-content: center; z-index: 2000; }
.cargando.visible { display: flex; }
.cargando-caja { text-align: center; color: var(--cf-azul); }
.cargando-caja .spinner-border { width: 3.2rem; height: 3.2rem; border-width: .32rem; }

/* --- Modo oscuro ------------------------------------------------------------ */
[data-bs-theme="dark"] .importe-negativo { color: #ff8a8f !important; }
[data-bs-theme="dark"] .cargando { background: rgba(20, 24, 33, .85); }

/* --- Impresión -------------------------------------------------------------- */
@media print {
  .app-sidebar, .app-topbar, .footer, .btn, .no-print { display: none !important; }
  .page-wrapper { margin: 0 !important; }
}