/* ---------- ARMONÍA (09/10/2026) ----------
   Las decisiones de diseño del CRM (crm.pulsarwebs.com, rediseño del 09/10/2026) aplicadas a Finanzas, para que las dos
   apps se vean iguales: solo 5 tamaños de letra, títulos en peso medio (no seminegrita), rótulos pequeños y en gris
   (sin mayúsculas), espacios fijos, paneles más hundidos con bordes sutiles, botones secundarios discretos (el lima,
   solo el principal) y filas de lista con línea fina entre ellas. El menú se queda arriba (Rafa, 09/10/2026).
   Se carga la última en las tres partes (Pulsarwebs, Casa e Inversiones) para mandar sobre style.css, casa.css e
   inversiones.css. Lo nuevo debe usar estos valores en vez de inventar otros. */
:root {
  --t-pagina: 1.5rem;     /* cifra principal de una página (la hucha) */
  --t-bloque: 1rem;       /* título de un bloque, ventana o tarjeta */
  --t-texto: .9375rem;    /* texto normal (15 px) */
  --t-pequeno: .8125rem;  /* rótulos, fechas, etiquetas, ayudas */
  --t-cifra: 1.75rem;     /* cifras destacadas */
  --p-normal: 400; --p-medio: 500; --p-fuerte: 600;   /* fuerte, solo en el botón principal */
  --panel: #0b0a08;              /* fondo de tarjetas, igual que el CRM */
  --linea: rgb(18 17 15);        /* bordes de tarjetas y líneas entre filas, más sutiles */
  --hundido: #100f0d;            /* cajitas dentro de una tarjeta, campos y botones al pasar el ratón */
  --borde-boton: #1d1b18;
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px; --e-7: 48px;
  --radius: 14px;
  --radius-sm: 8px;
}
body { font-size: var(--t-texto); line-height: 1.6; }
::placeholder { color: var(--text2); opacity: .6; }

/* Títulos: peso medio, nunca seminegrita */
h1, h2, h3, h4, .login-title, .modal-header, .fiscal-bloque-titulo, .import-card-concepto, .import-summary-title,
.import-dropzone-title, .rec-name, .t-nombre { font-weight: var(--p-medio); letter-spacing: -.005em; }
.login-title { font-size: var(--t-pagina); }
.modal-header, .t-nombre, .import-card-concepto, .import-summary-title { font-size: var(--t-bloque); }

/* Rótulos y etiquetas: pequeños, en gris y sin mayúsculas (como las cabeceras de las cifras del CRM) */
.card-title, .bloque-titulo, .kpi-label, .kpi-mes-label, .tile-etq, .tiles-grupo, .insight-title, .fiscal-box-title,
.fiscal-trim-label, .form-label, .import-card-field label, .dist-bar-label, .tabla-simple tr.cab td, .excel-table th {
  font-family: var(--titulares); font-size: var(--t-pequeno); font-weight: var(--p-normal); color: var(--text2);
  text-transform: none; letter-spacing: .01em; }
.card-title, .bloque-titulo { font-size: var(--t-bloque); color: var(--text); font-weight: var(--p-medio); margin-bottom: var(--e-4); }
.bloque-titulo::before { width: 5px; height: 5px; }
.tiles-grupo { margin: var(--e-5) 0 var(--e-2); }
.form-label { margin-bottom: var(--e-1); }
.excel-table td.cat-col.group-header, .excel-table tr.seccion td { text-transform: none; letter-spacing: .01em;
  font-size: var(--t-pequeno); font-weight: var(--p-medio); }

/* Cifras destacadas: un solo tamaño y peso medio */
.kpi-val, .insight-val, .tile-val, .kpi-mes-val, .fiscal-bloque-resultado, .import-card-importe {
  font-size: var(--t-cifra); font-weight: var(--p-medio); letter-spacing: -.01em; line-height: 1.2; }
.kpi-mes-val, .fiscal-bloque-resultado, .t-valor { font-size: 1.25rem; font-weight: var(--p-medio); }
.hucha-cifra { font-size: 2.25rem; font-weight: var(--p-medio); }
.fiscal-trim-val, .dist-bar-val, .t-plus { font-weight: var(--p-medio); }
.mes-frase { font-size: 1.0625rem; margin-bottom: var(--e-5); }
.hucha-frase, .hucha-mes { font-size: var(--t-bloque); }
.mes-frase strong, .hucha-frase strong, .hucha-mes strong { font-weight: var(--p-medio); }
.kpi-sub, .tile-sub, .insight-sub, .kpi-mes-sub, .fiscal-trim-sub, .fiscal-bloque-sub, .fiscal-note, .t-sub, .rec-meta,
.tx-meta, .import-card-meta, .nota-pie, .toolbar-hint, .hucha-bloque .suave, .hucha-mes .suave, .import-dropzone-sub,
.cat-label, .cat-pct, .cat-amount, .tooltip-nota, .tooltip-fecha { font-size: var(--t-pequeno); }
.kpi-sub, .tile-sub { margin-top: var(--e-1); }

/* Página: más aire entre bloques */
main { padding: var(--e-6) var(--e-7) var(--e-7); }
.view { gap: var(--e-5); }
.grid2, .grid3, .kpi-grid, .kpi-mes-grid { gap: var(--e-5); }
.tiles, .fiscal-trim-grid { gap: var(--e-4); }
.tarjetas { gap: var(--e-5); }
#view-inicio .card + .card, .card[style*="margin-top:16px"] { margin-top: 0 !important; }

/* Tarjetas: más hundidas, borde sutil y más aire dentro */
.card, .kpi, .insight, .dist-bar, .fiscal-bloque, .import-card, .login-box, .modal {
  background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radius); }
.card, .kpi, .insight, .fiscal-bloque, .import-card { padding: var(--e-5); }
.dist-bar { padding: var(--e-4) var(--e-5); }
.login-box { padding: var(--e-6) var(--e-6) var(--e-5); }
.modal { padding: var(--e-5); }
.modal-header { margin-bottom: var(--e-5); }
.modal-bg { background: rgb(0 0 0 / .6); }
/* Cajitas dentro de una tarjeta (cifras del Inicio, trimestres, previa de inversiones) */
.tile, .fiscal-trim-item, .previa { background: var(--hundido); border: 1px solid var(--linea); border-radius: 12px; }
.tile { padding: var(--e-4); }
.fiscal-trim-item { padding: var(--e-3) var(--e-4); }
/* Cajas de color (avisos de la hucha): mismo panel, el color solo en el rótulo */
.fiscal-box { background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radius); padding: var(--e-5); }
.fiscal-box-title { color: var(--amber); margin-bottom: var(--e-3); }

/* Líneas entre filas, más sutiles */
.fiscal-row, .fiscal-detalle, .fiscal-detalle-row.total-row, .tabla-simple td, .tabla-simple tr.total td,
.hucha-mes, .hucha-bloque, .cuenta-fila, .partida, .t-fila, .tooltip-row + .tooltip-row { border-color: var(--linea); }
.tabla-simple td { padding: var(--e-3) var(--e-2); border-bottom-width: 1px; }
.tabla-simple tr.total td { border-top-width: 1px; font-weight: var(--p-medio); }
.fiscal-row, .fiscal-detalle-row { padding: var(--e-2) 0; }
.fiscal-detalle-row.total-row span, .tooltip-amt { font-weight: var(--p-medio); }
.t-fila { padding: var(--e-2) 0; border-top-width: 1px; }
.cuenta-fila, .partida { padding: var(--e-3) 0; border-bottom-width: 1px; }
.hucha-bloque { padding: var(--e-5) 0; border-bottom-width: 1px; }
.cat-list { gap: var(--e-3); }
.cat-amount { font-weight: var(--p-normal); }
.cat-bar-bg, .dist-bar-track, .barra-fondo { background: var(--hundido); }

/* Tabla tipo Excel: sin rejilla gruesa, solo líneas horizontales finas */
/* Las cifras no se parten en dos líneas: si la tabla no cabe, se desliza de lado (como ya pasaba en Casa), con la
   columna de las categorías fija a la izquierda (Rafa, 09/10/2026) */
.excel-table td, .excel-table th { white-space: nowrap; }
.excel-table { font-size: .875rem; }
.excel-table th, .excel-table td { border: 0; border-bottom: 1px solid var(--linea); padding: var(--e-3) var(--e-3); }
.excel-table th { background: var(--panel); }
.excel-table td.cat-col { background: var(--bg); }
.excel-table td.cat-col.group-header, .excel-table tr.seccion td, .excel-table td.total-row { background: var(--hundido); }
.excel-table tr:hover td, .excel-table tr:hover td.cat-col { background: #0f0e0c; }
.excel-table td.total-row, .excel-table td.total-col, .excel-table tr.resultado td { font-weight: var(--p-medio); }
.excel-table td.total-col { background: rgb(219 72 45 / .04); }

/* Listas de movimientos y recurrentes: filas con línea fina entre ellas (como las listas del CRM), sin cajas */
.tx-list, .rec-list { gap: 0; margin-top: var(--e-2); }
.tx-item, .rec-item { background: transparent; border: 0; border-bottom: 1px solid var(--linea); border-radius: 8px;
  border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding: var(--e-3); gap: var(--e-3); transition: background-color .15s; }
.tx-item:hover, .rec-item:hover { background: var(--panel); }
.tx-item.previsto { opacity: .6; border-style: none none dashed; }
.tx-cat { font-size: var(--t-texto); }
.tx-meta, .rec-meta { margin-top: 2px; }
.tx-amt, .rec-amt { font-size: var(--t-texto); font-weight: var(--p-medio); font-variant-numeric: tabular-nums; }
.rec-name { font-size: var(--t-texto); }

/* Etiquetas y estados: pequeños y discretos */
.tx-badge, .estado, .pill, .plantilla-tag, .dist-badge, .etq { font-size: .75rem; font-weight: var(--p-normal); border-radius: 6px; }
.tx-badge, .estado { padding: .15em .6em; }
.pill, .plantilla-tag { padding: var(--e-1) var(--e-3); background: transparent; border: 1px solid var(--borde-boton); }

/* Botones (como el CRM): todos con la misma letra, alto (36 px) y esquinas. Lima solo el principal; los demás, sin
   relleno y con borde suave, y al pasar el ratón un fondo apenas visible */
.btn-primary, .btn-secondary, .btn-danger, .btn-confirm, .import-card-actions .btn-danger {
  font-family: var(--titulares); font-size: .875rem; line-height: 20px; min-height: 36px; padding: 7px 14px;
  border-radius: var(--radius-sm); border: 1px solid var(--borde-boton); display: inline-flex; align-items: center;
  justify-content: center; gap: .4em; white-space: nowrap; }
.btn-primary { border-color: var(--lima); font-weight: var(--p-medio); }
.btn-secondary { background: transparent; font-weight: var(--p-normal); }
.btn-secondary:hover { background: var(--hundido); border-color: #2e2a26; color: #fff; }
.btn-danger { background: transparent; border-color: var(--red-border); }
.btn-danger:hover { background: var(--red-bg); }
.btn-confirm { min-height: 28px; padding: 3px 10px; font-size: var(--t-pequeno); }
.btn-sm { min-height: 32px; padding: 5px 12px; font-size: var(--t-pequeno); }
.login-box .btn-primary { width: 100%; margin-top: var(--e-2); }

/* Campos (como el CRM): fondo apenas más claro que el panel, borde discreto y, al escribir, un borde naranja tenue */
.form-input, .form-select, .filter-sel, .input-tabla, .year-sel {
  background: var(--hundido); border: 1px solid var(--borde-boton); border-radius: var(--radius-sm);
  transition: border-color .15s, background-color .15s; }
.form-input, .form-select, .filter-sel { min-height: 36px; padding: 7px 12px; line-height: 20px; font-size: var(--t-texto); }
.filter-sel { font-size: var(--t-pequeno); }
.form-input:hover, .form-select:hover, .filter-sel:hover, .input-tabla:hover { border-color: #2a2723; }
.form-input:focus, .form-select:focus, .filter-sel:focus, .input-tabla:focus { outline: none; border-color: rgb(219 72 45 / .55); background: #121110; }
.year-sel { background: transparent; border-color: transparent; }
.form-group { margin-bottom: var(--e-4); }
.form-row { gap: var(--e-3); }
.toolbar { gap: var(--e-3); }
/* Interruptor ingreso / gasto: discreto, el elegido con su color */
.type-btn, .import-tipo-btn { background: transparent; border: 1px solid var(--borde-boton); }

/* Menú de arriba: igual que antes, con la línea y el fondo del CRM */
.nav { background: rgb(8 7 6 / .85); border-bottom: 1px solid var(--linea); padding: 0 var(--e-7); gap: var(--e-4); }
.nav-tab { font-size: .875rem; padding: var(--e-2) var(--e-3); color: var(--text2); }
.nav-tab:hover:not(.active) { background: var(--hundido); color: var(--text); }
.nav-tab.active { background: var(--hundido); color: #fff; box-shadow: inset 0 0 0 1px var(--borde-boton); }
.libro-switch { background: var(--hundido); border: 1px solid var(--borde-boton); }
.libro-switch a.activo { font-weight: var(--p-medio); box-shadow: none; }

/* Tooltip */
#tooltip-global { background: var(--panel); border: 1px solid var(--borde-boton); font-size: var(--t-pequeno); }

/* Estado vacío */
.empty-state, .vacio { font-size: var(--t-texto); color: var(--text2); }

/* Móvil y tableta */
@media (max-width: 960px) {
  .nav { padding: var(--e-2) var(--e-4); }
  main { padding: var(--e-5) var(--e-4) var(--e-6); }
}
@media (max-width: 700px) {
  main { padding: var(--e-4) var(--e-4) var(--e-6); }
  .view, .grid2, .grid3, .kpi-grid, .tarjetas { gap: var(--e-4); }
  .card, .kpi, .insight, .fiscal-bloque, .import-card, .fiscal-box { padding: var(--e-4); }
  .tile { padding: var(--e-3); }
  .kpi-val, .insight-val, .tile-val, .import-card-importe { font-size: 1.4rem; }
  .hucha-cifra { font-size: 1.75rem; }
  .tx-item { padding: var(--e-3) var(--e-2); }
  .modal { border-radius: 16px 16px 0 0; padding: var(--e-5) var(--e-4); }
  .form-input, .form-select, .filter-sel { font-size: 16px; } /* así el iPhone no hace zoom al escribir */
}