/* Pulido visual 0.33.0 — se carga después de styles.css y solo refina.
   Nada de aquí cambia datos ni lógica: son medidas, foco y un tema oscuro. */

/* 1. Importes alineados: los dígitos ocupan lo mismo y la columna no baila. */
.num, .hero-v, .hero-t, .hero-fila strong, .contador strong, .dato strong,
.prestamo-plata, .prestamo-plata strong, .kpi-v, .saldo, .monto {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* 2. Filtros en una sola línea deslizable, con difuminado en los bordes. */
.chips {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  padding: 2px 2px 8px;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 18px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 18px), transparent 100%);
}
.chips::-webkit-scrollbar { display: none; }
.chips .chip {
  flex: 0 0 auto;
  min-height: 42px;
  padding: 0 15px;
  display: inline-flex;
  align-items: center;
  scroll-snap-align: start;
}

/* 3. Barra inferior: seis pestañas sin apretar; en pantallas muy angostas,
      solo la activa conserva el texto. */
.tabbar a { padding: 7px 0 8px; font-size: 10px; gap: 2px; }
.tabbar svg { width: 22px; height: 22px; }
@media (max-width: 352px) {
  .tabbar a span { display: none; }
  .tabbar a.activo span { display: block; font-size: 9.5px; }
}

/* 4. Jerarquía: las tarjetas pesan menos y los separadores ordenan. */
.card { box-shadow: 0 1px 0 rgba(14, 26, 38, .035); }
.seccion-t { padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.titulo-chico { letter-spacing: -.01em; }

/* 5. Toque cómodo y foco visible también con teclado. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--brand-2);
  outline-offset: 2px;
  border-radius: 10px;
}
.btn, .chip, .tabbar a { -webkit-tap-highlight-color: transparent; }

/* 6. La hoja modal deja aire abajo y el botón de guardar queda a la vista. */
dialog form.hoja-in { padding-bottom: max(18px, env(safe-area-inset-bottom)); }
dialog form.hoja-in > button[type="submit"] {
  position: sticky;
  bottom: -1px;
  z-index: 2;
  margin-top: 12px;
  box-shadow: 0 -10px 18px var(--bg);
}

/* 7. Cambio de vista suave, sin marear a quien pidió menos movimiento. */
#vista > * { animation: entra .16s ease-out both; }
@keyframes entra { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* 8. Modo noche: mismos componentes, otra luz. */
[data-tema="noche"] {
  color-scheme: dark;
  --bg: #0d1418;
  --surface: #161f24;
  --ink: #e8eef2;
  --muted: #9fb0bb;
  --line: #26343c;
  --brand: #4ea3c8;
  --brand-2: #6db9d8;
  --brand-soft: #122730;
  --hero-1: #1b4a5e;
  --hero-2: #123a4a;
  --hero-3: #0d2a36;
  --hero-soft: #12242c;
  --track: #1d2b33;
  --top-bg: rgba(13, 20, 24, .88);
  --top-line: rgba(38, 52, 60, .85);
  --focus: rgba(78, 163, 200, .25);
  --logo-glow: rgba(78, 163, 200, .35);
}
[data-tema="noche"] .card,
[data-tema="noche"] .fila { box-shadow: none; }
[data-tema="noche"] .tabbar { background: rgba(13, 20, 24, .94); }
[data-tema="noche"] .hero { color: #f2f8fb; }
[data-tema="noche"] .pill { filter: brightness(.92); }
[data-tema="noche"] img.miniatura { filter: brightness(.9); }

/* 12. Lupa de búsqueda en la barra superior, junto al ojo. */
.top .derecha .ojo {
  display: grid;
  place-items: center;
  text-decoration: none;
}
.top .derecha .ojo svg { width: 19px; height: 19px; }

/* 11. Pares de campos: la etiqueta ocupa el alto disponible y el control queda
   siempre pegado abajo, así el texto y las cajas coinciden aunque una etiqueta
   ocupe dos líneas. */
form.card .grid2 { align-items: stretch; }
form.card .grid2 > label:not(.check) {
  display: grid;
  grid-template-rows: 1fr auto;
  align-content: stretch;
  row-gap: 7px;
  height: 100%;
  margin-top: 0;
}
/* El plazo lleva input + select: se fija la altura de la fila para que no
   quede 5 px más alta que el campo de al lado. */
form.card .plazo-fila { height: 48px; align-items: stretch; }
form.card .plazo-fila > * { height: 100%; min-height: 0; }

/* 10. Campos en dos columnas perfectamente nivelados.
   Las etiquetas pueden ocupar una o dos líneas: el campo se ancla abajo y
   todos los controles de la fila quedan a la misma altura. */
form.card .grid2 { align-items: end; }
form.card .grid2 > label:not(.check) { justify-content: flex-end; margin-top: 0; }
form.card .grid2 > label > input,
form.card .grid2 > label > select,
form.card .grid2 .plazo-fila,
form.card .grid2 .plazo-fila > * { width: 100%; }
form.card input:not([type="checkbox"]):not([type="file"]),
form.card select { height: 48px; }
form.card .plazo-fila { align-items: stretch; }
form.card .plazo-fila > select { flex: 3 1 0; }
form.card .plazo-fila > input { flex: 2 1 0; }


/* 9. Formularios y subpantallas: campos cómodos, ayudas legibles y guardar
      siempre a la vista. */
.volver {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 2px 0 10px; font-size: 13px; font-weight: 620;
  color: var(--muted); text-decoration: none;
}
.volver:hover { color: var(--brand); }
.titulo-pagina { margin-bottom: 14px; letter-spacing: -.02em; }

form.card { display: flex; flex-direction: column; gap: 14px; padding: 18px 16px 16px; }
form.card label:not(.check) {
  display: flex; flex-direction: column; gap: 7px;
  font-size: 12.5px; font-weight: 650; color: var(--muted); letter-spacing: .01em;
}
form.card input:not([type="checkbox"]):not([type="file"]),
form.card select,
form.card textarea {
  min-height: 48px;
  font-size: 16px; /* evita el zoom automático de iOS */
  border-radius: 12px;
  background: var(--surface);
}
form.card textarea { min-height: 84px; padding-top: 12px; }
form.card .grid2 { gap: 12px; align-items: start; }
form.card .nota { margin: -6px 0 0; font-size: 12px; }
form.card label.check {
  flex-direction: row; align-items: center; gap: 10px;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--bg); color: var(--ink); font-size: 13.5px; font-weight: 600;
}
form.card label.check input { width: 20px; height: 20px; accent-color: var(--brand); }

form.card .preview {
  padding: 13px 14px;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--brand-soft); font-size: 13.5px;
}
form.card .preview strong { font-variant-numeric: tabular-nums; }

form.card > button[type="submit"],
form.card > .btn[type="submit"] {
  position: sticky; bottom: 8px; z-index: 3;
  margin-top: 4px;
  box-shadow: 0 10px 24px rgba(14, 26, 38, .18);
}

#camposPrenda {
  display: flex; flex-direction: column; gap: 14px;
  padding: 14px; border: 1px dashed var(--line); border-radius: 14px;
}
input[type="file"] { font-size: 12.5px; color: var(--muted); }
input[type="file"]::file-selector-button {
  margin-right: 10px; padding: 9px 12px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); font: inherit; font-weight: 600; color: var(--brand);
}
[data-tema="noche"] form.card label.check { background: var(--surface); }