/* === UI/UX Pro Max fixes — accesibilidad, focus, motion, touch === */

/* === 1. Focus states visibles (WCAG 2.4.7) === */
*:focus { outline: none; }
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--brand, #01466D);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Botones del nav y tabs — focus específico */
nav.nav a:focus-visible,
nav.nav button:focus-visible,
.tabs a:focus-visible {
  outline: 2px solid var(--brand, #01466D);
  outline-offset: -1px;
  border-radius: 6px;
}

/* === 2. Reduced motion (WCAG 2.3.3) === */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* === 3. Touch targets ≥ 44×44 (WCAG 2.5.5) === */
.btn.sm,
.btn-mini,
button.btn.sm {
  min-height: 32px;        /* admite densidad alta para tablas, pero target táctil expandido vía padding */
  padding: 6px 12px !important;
}
@media (pointer: coarse) {
  .btn.sm,
  .btn-mini,
  table.std a.btn.sm {
    min-height: 44px;
    padding: 10px 14px !important;
  }
  /* Filas de tabla con onclick → touch target completo */
  table.std tbody tr[onclick],
  table.std tbody tr.clickable { min-height: 44px; }
}

/* === 4. Skip link (a11y) === */
.skip-link {
  position: fixed;
  top: -40px;
  left: 8px;
  background: var(--brand, #01466D);
  color: white;
  padding: 9px 16px;
  border-radius: 6px;
  z-index: 9999;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: top 200ms ease;
}
.skip-link:focus {
  top: 8px;
  outline: 2px solid #fbbf24;
  outline-offset: 2px;
}

/* === 5. Color contrast — promote weak greys === */
.muted-tx,
.lead {
  color: #475569; /* slate-600 — 7:1 sobre blanco */
}
/* Si algún componente usa #94a3b8 (slate-400, ratio 3.5:1 contra blanco — falla WCAG AA), corregir */
.search-meta,
.empty {
  color: #475569 !important;
}

/* === 6. Cursor pointer en interactivos no-button === */
table.std tbody tr[onclick],
table.std tbody tr.clickable,
.hub-card,
.proj-card,
.exec-card[onclick],
.year-card,
.tenant-tile[onclick],
.health-card[onclick],
.alert-row[onclick] {
  cursor: pointer;
}

/* === 7. Hover feedback consistente === */
.hub-card,
.proj-card,
table.std tbody tr {
  transition: background-color 150ms ease, border-color 150ms ease, box-shadow 200ms ease;
}

/* === 8. Animation easing — usar ease-out, no linear === */
* {
  transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1); /* ease-out por defecto */
}

/* === 9. Mobile: font-size ≥ 16px en body para iOS no zoom === */
@media (max-width: 640px) {
  input, select, textarea { font-size: 16px !important; }
}

/* === 10. Print: estilos limpios === */
@media print {
  nav.nav,
  .sidebar-toggle,
  .sidebar-backdrop,
  .tenant-dropdown,
  .skip-link,
  .actions { display: none !important; }
  body { padding-left: 0 !important; background: white !important; }
}

/* === 11. High contrast mode (Windows) === */
@media (forced-colors: active) {
  .btn,
  .hub-card,
  .exec-card,
  table.std,
  .tenant-pill,
  .estado-pill,
  .role,
  .status {
    border: 1px solid CanvasText;
  }
}

/* === 12. Stable hover (no layout shift por scale) === */
.hub-card:hover,
.proj-card:hover {
  transform: translateY(-1px); /* OK: 1px no causa shift sustancial */
  box-shadow: 0 4px 14px rgba(1, 70, 109, 0.08);
}