/* TecnoFinanzas · base: reset, tipografía, enlaces y foco, formularios, botones, tablas, impresión.
   Tema de tarjetas (2026-09-12): fondo gris cálido, superficies blancas redondeadas. Sin colores literales (viven en tokens.css).
   Sin JavaScript: todo estado es HTML nativo o CSS. */

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; }
body {
  margin: 0;
  font-family: var(--tf-font-text);
  font-size: var(--tf-font-md);
  line-height: 1.5;
  color: var(--tf-ink);
  background: var(--tf-canvas);
}
h1, h2, h3 { margin: 0 0 var(--tf-space-3); letter-spacing: -0.015em; text-wrap: balance; text-align: left; }
h1 { font-family: var(--tf-font-display); font-weight: 650; font-size: var(--tf-font-display-size); line-height: 1.2; }
h2 { font-size: var(--tf-font-lg); font-weight: 650; }
h3 { font-size: var(--tf-font-md); font-weight: 650; }
/* Kicker: mayúsculas de 11 px con letter-spacing en rótulos de tabla, leyendas y grupos */
.tf-kicker, .tf-form legend, .tf-tabla th, .tf-nav .tf-nav-sub > span, .tf-etiqueta-campo, details.tf-filtros-plegables > summary, .tf-definiciones dt { font-size: var(--tf-font-kicker); font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; }
p { margin: 0 0 var(--tf-space-3); text-wrap: pretty; }
a { color: var(--tf-enlace); text-decoration: none; }
a:hover { color: var(--tf-enlace-hover); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--tf-amber-ink); outline-offset: 2px; }
code, .tf-mono { font-family: var(--tf-font-mono); font-size: 0.92em; }
.tf-num { font-variant-numeric: tabular-nums; text-align: right; }
.tf-negativo { color: var(--tf-red); }
.tf-fecha { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tf-oculto-visual { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tf-ayuda { font-size: var(--tf-font-xs); color: var(--tf-ink-2); }

/* Transición entre páginas (navegación multipágina, sin script). Mejora progresiva; se apaga con reduced-motion. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 140ms; }
a, button, .tf-btn, input, select, textarea, summary { transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Formularios: cada fieldset es una tarjeta con su leyenda arriba; etiqueta sobre el campo, ayuda debajo, error debajo de la ayuda. */
.tf-form fieldset { border: var(--tf-regla); border-radius: var(--tf-radius); background: var(--tf-card); box-shadow: var(--tf-sombra); padding: var(--tf-space-4) var(--tf-space-5) var(--tf-space-3); margin: 0 0 var(--tf-space-4); min-width: 0; }
.tf-form legend { float: left; width: 100%; padding: 0 0 var(--tf-space-3); margin: 0 0 var(--tf-space-4); border-bottom: var(--tf-filo); color: var(--tf-ink-2); }
/* La leyenda flota (para dibujarla dentro de la tarjeta): todo lo que sigue la limpia, no solo el primer hermano. Si el primero es un mensaje de
   validación en línea, la rejilla (que abre su propio contexto) quedaba junto a la leyenda con ancho 0 y los campos se salían de la tarjeta. */
.tf-form legend ~ * { clear: both; }
.tf-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--tf-space-2) var(--tf-space-5); }
.tf-campo { display: flex; flex-direction: column; gap: var(--tf-space-1); margin-bottom: var(--tf-space-3); min-width: 0; }
.tf-campo--ancho { grid-column: 1 / -1; }
.tf-campo label, .tf-etiqueta-campo { font-size: var(--tf-font-sm); font-weight: 600; color: var(--tf-ink); }
.tf-campo .tf-ayuda { font-size: var(--tf-font-xs); color: var(--tf-ink-2); }
.tf-campo input:not([type="checkbox"], [type="radio"], [type="file"]), .tf-campo select, .tf-campo textarea, .tf-acciones-fila input[type="text"] {
  font: inherit; padding: 0.35rem 0.65rem; min-height: var(--tf-control);
  border: 1px solid var(--tf-line-strong); border-radius: var(--tf-radius-control);
  background: var(--tf-card); color: var(--tf-ink);
}
.tf-campo input:focus-visible, .tf-campo select:focus-visible, .tf-campo textarea:focus-visible, .tf-acciones-fila input:focus-visible { outline: none; border-color: var(--tf-amber-ink); box-shadow: 0 0 0 3px var(--tf-amber-soft); }
.tf-campo input:user-invalid, .tf-campo select:user-invalid, .tf-campo input[aria-invalid="true"], .tf-campo select[aria-invalid="true"], .tf-campo .input-validation-error { border-color: var(--tf-red); }
.tf-campo input:disabled, .tf-campo select:disabled, .tf-campo textarea:disabled { background: var(--tf-paper-2); color: var(--tf-ink-2); }
.tf-campo .field-validation-error, .tf-renglones .field-validation-error { display: block; color: var(--tf-red); font-size: var(--tf-font-xs); }
.tf-campo .field-validation-error:empty { display: none; }
.tf-campo--marca { flex-direction: row; align-items: center; gap: var(--tf-space-2); }
.tf-campo--marca input, .tf-radios input, .tf-permisos input, .tf-lista-marcas input { width: 1.1rem; height: 1.1rem; accent-color: var(--tf-amber-ink); flex: none; }
.tf-campo input[type="file"] { font: inherit; }
.tf-radios { display: flex; gap: var(--tf-space-4); flex-wrap: wrap; min-height: var(--tf-control); align-items: center; }
.tf-radios label { display: inline-flex; align-items: center; gap: var(--tf-space-1); font-weight: 400; }
.tf-form fieldset:disabled { opacity: 0.9; }
.tf-form fieldset:disabled input, .tf-form fieldset:disabled select, .tf-form fieldset:disabled textarea { background: var(--tf-paper-2); }
.tf-acciones { display: flex; gap: var(--tf-space-3); align-items: center; flex-wrap: wrap; margin-top: var(--tf-space-4); }
.tf-acciones-fila { display: flex; gap: var(--tf-space-2); align-items: center; flex-wrap: wrap; }
.tf-acciones-fila form { display: inline; }
.tf-acciones-fila input[type="text"] { min-width: 16rem; }
.validation-summary-errors ul { margin: var(--tf-space-1) 0 0 var(--tf-space-4); padding: 0; }
.validation-summary-valid { display: none; }

/* Botones: ámbar con texto en tinta en la acción primaria; blanco con borde suave en la secundaria; rojo en el peligro. */
.tf-btn { font: inherit; font-weight: 600; font-size: var(--tf-font-sm); padding: 0.4rem 0.95rem; min-height: var(--tf-control); border-radius: var(--tf-radius-control); border: 1px solid transparent; background: var(--tf-amber); color: var(--tf-ink); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: flex-start; text-align: left; gap: var(--tf-space-2); white-space: nowrap; }
.tf-btn:hover { background: var(--tf-amber-strong); color: var(--tf-ink); text-decoration: none; }
.tf-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.tf-btn--secundario { background: var(--tf-card); color: var(--tf-ink); border-color: var(--tf-line-strong); }
.tf-btn--secundario:hover { background: var(--tf-canvas); color: var(--tf-ink); border-color: var(--tf-line-strong); }
.tf-btn--peligro { background: var(--tf-red); border-color: var(--tf-red); color: var(--tf-card); }
.tf-btn--peligro:hover { background: color-mix(in srgb, var(--tf-red) 82%, var(--tf-ink)); border-color: color-mix(in srgb, var(--tf-red) 82%, var(--tf-ink)); color: var(--tf-card); }
.tf-btn--enlace { background: none; border-color: transparent; color: var(--tf-enlace); padding-left: 0; padding-right: 0; }
.tf-btn--enlace:hover { background: none; border-color: transparent; color: var(--tf-enlace-hover); text-decoration: underline; }

/* Tablas: dentro de una tarjeta, densas, encabezado fijo en su envoltura, importes a la derecha con cifras tabulares. */
.tf-tabla-envoltura { overflow: auto; max-height: min(78vh, 60rem); margin-bottom: var(--tf-space-4); border: var(--tf-regla); border-radius: var(--tf-radius); background: var(--tf-card); box-shadow: var(--tf-sombra); }
.tf-tabla { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--tf-card); font-size: var(--tf-font-sm); }
.tf-tabla caption { text-align: left; font-weight: 650; font-size: var(--tf-font-md); padding: var(--tf-space-3) var(--tf-space-3) var(--tf-space-2); }
.tf-tabla th { text-align: left; color: var(--tf-ink-2); background: var(--tf-card); border-bottom: 1px solid var(--tf-line); padding: var(--tf-space-2) var(--tf-space-3); white-space: nowrap; }
.tf-tabla thead th { position: sticky; top: 0; z-index: 2; }
.tf-tabla td { border-bottom: var(--tf-filo); padding: 0.4rem var(--tf-space-3); vertical-align: top; }
.tf-tabla tbody tr:last-child > td, .tf-tabla tbody tr:last-child > th { border-bottom: 0; }
.tf-tabla tbody tr:hover > td { background: var(--tf-canvas); }
.tf-tabla tbody th { text-align: left; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: inherit; color: inherit; background: var(--tf-card); border-bottom: var(--tf-filo); }
.tf-tabla .tf-num, .tf-tabla th.tf-num { text-align: right; }
.tf-tabla tfoot td, .tf-tabla .tf-fila-total th, .tf-tabla .tf-fila-total td { font-weight: 700; border-top: 1px solid var(--tf-line-strong); background: var(--tf-card); }
.tf-tabla .tf-fila-grupo th { background: var(--tf-canvas); font-weight: 650; text-transform: none; letter-spacing: 0; font-size: var(--tf-font-sm); color: var(--tf-ink); }
.tf-tabla--compacta th, .tf-tabla--compacta td { padding: var(--tf-space-1) var(--tf-space-2); font-size: var(--tf-font-xs); }
.tf-tabla--compacta tbody th { white-space: nowrap; }
/* Primera columna fija al desplazar en horizontal: la comparación entre filas se conserva, nunca se apilan en tarjetas. */
.tf-tabla--fija td:first-child, .tf-tabla--fija th:first-child { position: sticky; left: 0; z-index: 1; background: inherit; box-shadow: 1px 0 0 var(--tf-line); }
.tf-tabla--fija thead th:first-child { z-index: 3; }
.tf-tabla--fija tbody tr > td:first-child { background: var(--tf-card); }
.tf-tabla--fija tbody tr:hover > td:first-child { background: var(--tf-canvas); }
/* Estados financieros: el formato de Tecnofin (sección, grupo en negritas, detalle con sangría, totales y resultado final con doble peso). */
.tf-estado tbody th { font-weight: 400; white-space: nowrap; }
.tf-estado .tf-estado__seccion th { font-weight: 700; text-transform: uppercase; letter-spacing: .02em; background: var(--tf-canvas); }
.tf-estado .tf-estado__grupo th { font-weight: 700; }
.tf-estado .tf-estado__detalle th, .tf-estado .tf-estado__subtotal th { padding-left: var(--tf-space-5); }
.tf-estado .tf-estado__subtotal th, .tf-estado .tf-estado__subtotal td { font-style: italic; }
.tf-estado .tf-estado__total th, .tf-estado .tf-estado__total td { font-weight: 700; border-top: 1px solid var(--tf-line-strong); }
.tf-estado .tf-estado__final th, .tf-estado .tf-estado__final td { font-weight: 700; border-top: 2px solid var(--tf-ink); background: var(--tf-canvas); }
.tf-estado .tf-estado__promedio { color: var(--tf-ink-2); }
.tf-estado thead th.tf-estado__promedio { white-space: normal; }
.tf-vacio { padding: var(--tf-space-5); text-align: left; color: var(--tf-ink-2); border: var(--tf-regla); border-radius: var(--tf-radius); background: var(--tf-card); box-shadow: var(--tf-sombra); margin-bottom: var(--tf-space-4); }
.tf-vacio strong { display: block; color: var(--tf-ink); font-size: var(--tf-font-lg); margin-bottom: var(--tf-space-1); }

/* Impresión: los reportes se imprimen y se mandan al contador. Tinta sobre blanco, sin cascarón ni sombras, encabezado repetido. */
@media print {
  @page { margin: 14mm; }
  body { background: var(--tf-card); color: var(--tf-ink); font-size: 11pt; }
  .tf-lateral, .tf-barra, .tf-acciones, .tf-instrucciones, .tf-filtros, .tf-paginacion, .tf-pie, .tf-saltar, .tf-btn, form.tf-filtros, .tf-periodo { display: none !important; }
  .tf-app { display: block; }
  .tf-principal { padding: 0; max-width: none; }
  .tf-tabla-envoltura { overflow: visible; max-height: none; border: 0; box-shadow: none; border-radius: 0; }
  .tf-tabla thead { display: table-header-group; }
  .tf-tabla thead th { position: static; }
  .tf-tabla tr, .tf-tarjeta, .tf-resumen-dato { break-inside: avoid; }
  .tf-tarjeta, .tf-resumen-dato, .tf-form fieldset, .tf-vacio { box-shadow: none; border-color: var(--tf-line-strong); }
  a { color: inherit; text-decoration: none; }
  .tf-pie-impresion { display: flex; justify-content: space-between; margin-top: var(--tf-space-5); padding-top: var(--tf-space-2); border-top: 1px solid var(--tf-line-strong); font-size: 9pt; color: var(--tf-ink-2); }
}