/* ═══════════════════════════════════════════════════════════════
 * refinements.css — Pulido visual ERP (SOLO estética) · v1 · 2026-06-27
 * Cargar DESPUÉS de design-tokens.css y de los estilos de index.html.
 * No toca lógica ni estructura: solo afina tipografía, espaciado,
 * estados (hover/focus/active), bordes, sombras y microinteracciones.
 * Apoyado en los tokens existentes para respetar la marca y el tema.
 * ═══════════════════════════════════════════════════════════════ */

/* ─── Microinteracciones suaves y consistentes ─────────────────── */
.btn,
.nav-item,
.project-card,
.kpi, .kpi-card, .stat-card,
[class*="card"] {
  transition: background-color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}

/* ─── Botones · jerarquía y feedback ───────────────────────────── */
.btn { font-weight: var(--weight-medium); letter-spacing: .1px; border-radius: var(--radius-md); }
.btn:active { transform: translateY(1px); }
.btn-primary { box-shadow: var(--shadow-xs); }
.btn-primary:hover { box-shadow: var(--shadow-sm); }
/* El acento se reserva: los ghost quedan neutros hasta el hover */
.btn-ghost:hover { background: var(--surface2); }

/* ─── Navegación lateral · estado activo claro, íconos alineados ─ */
.nav-item {
  border-radius: var(--radius-md);
  gap: 9px;
}
.nav-item:hover { background: var(--surface2); }
.nav-item.active,
.nav-item[aria-current="page"] {
  background: var(--color-warning-bg);
  color: var(--text);
  box-shadow: inset 2px 0 0 var(--accent);
}
.nav-item i, .nav-item .ti { opacity: .9; }
/* Encabezados de sección del sidebar más tenues y espaciados */
.nav-section, .nav-group-title, .sidebar .nav-heading {
  color: var(--text3);
  letter-spacing: .4px;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}

/* ─── Topbar · separación y respiración ────────────────────────── */
.topbar { gap: 8px; }
#topbar-actions > * { transition: opacity var(--duration-fast) var(--ease-out); }

/* ─── Tarjetas / tiles · feedback sutil al pasar el mouse ───────── */
.project-card:hover { border-color: var(--border2); box-shadow: var(--shadow-md); transform: translateY(-1px); }

/* ─── Cifras técnicas en monoespaciada (donde haya clase) ───────── */
.mono, .num, .figure, [data-mono], .kpi-value, .stat-value, .amount, .money {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ─── Tablas · encabezado tenue, filas legibles, números alineados ─ */
.data-table thead th,
.db-table thead th,
table.tbl thead th {
  font-weight: var(--weight-medium);
  color: var(--text3);
  font-size: var(--text-xs);
  letter-spacing: .3px;
  text-transform: none;
}
.data-table tbody tr:hover,
.db-table tbody tr:hover,
table.tbl tbody tr:hover { background: var(--surface2); }
.data-table td.num, .db-table td.num, table.tbl td.num,
.data-table th.num, .db-table th.num {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ─── Inputs · borde y foco consistentes ───────────────────────── */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select, textarea {
  border-radius: var(--radius-md);
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--shadow-focus);
}

/* ─── Modales / paneles · encabezado y cierre uniformes ────────── */
.modal { border-radius: var(--radius-lg); }
/* Botón de cierre (✕) de los overlays propios: área de toque + hover */
[id$="-close"], .modal-close {
  border-radius: var(--radius-sm);
  transition: background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}
[id$="-close"]:hover, .modal-close:hover {
  background: var(--surface2);
  color: var(--text);
}

/* ─── Editor de presupuesto y tablas · cifras en mono tabular ──────
   Consistente con el refinamiento de dashboards. Solo afecta celdas/
   inputs numéricos (columnas alineadas a la derecha, totales, precios),
   no el texto. Bajo riesgo: scoping por clases numéricas existentes. */
.b-total,
.apu-opt-price,
.u-text-right input,
.u-text-right .b-edit {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.2px;
}
/* Totales/subtotales y montos con clase semántica en cualquier tabla */
td.num, td.money, td.price, .cell-num, .col-total, .total-cell {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ─── Detalles finos ───────────────────────────────────────────── */
hr { border: none; border-top: 1px solid var(--border); }
[data-theme="light"] ::selection { background: var(--brand-gold-light); color: var(--text); }

/* ═══════════════════════════════════════════════════════════════
   A11Y-OLA3 · 2026-07-02 · Accesibilidad Vercel Design + WCAG 2.1 AA
   ─────────────────────────────────────────────────────────────── */

/* Skip link · invisible salvo con focus */
.a11y-skip-link {
  position: absolute;
  top: -100px;
  left: 8px;
  z-index: 100000;
  padding: 10px 18px;
  background: var(--accent, #f0a500);
  color: #0a0a0f;
  font-weight: 700;
  font-size: 14px;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(0,0,0,.24);
  transition: top .2s ease;
}
.a11y-skip-link:focus,
.a11y-skip-link:focus-visible {
  top: 12px;
  outline: 3px solid #0a0a0f;
  outline-offset: 2px;
}

/* Focus visible universal · solo Tab (no aparece con clic mouse) */
*:focus-visible {
  outline: 2px solid var(--accent, #f0a500);
  outline-offset: 2px;
  border-radius: 4px;
}
button:focus-visible,
[role="button"]:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent, #f0a500);
  outline-offset: 3px;
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--accent, #f0a500);
  outline-offset: 0;
}

/* Prefers-reduced-motion · respetar preferencia del sistema */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .a11y-skip-link { transition: none !important; }
}

/* Screen reader only · visible solo para lectores de pantalla */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}