/*
 * modern.css — ElectroTrack
 * Refinamientos adicionales sobre el diseño base.
 * El diseño moderno está embebido en base.html (default).
 * Este archivo agrega pequeños toques finales.
 */

/* Transición suave al cambiar tema o diseño */
*, *::before, *::after {
  transition-property: background-color, border-color, color, opacity;
  transition-duration: .16s;
  transition-timing-function: ease;
}
/* Excluir propiedades que NO deben transicionar (evita lag) */
svg, img, .sb-item, .btn, a.btn, button, input, select, textarea,
.card, table, th, td {
  transition-property: background-color, border-color, color, box-shadow, opacity, filter;
  transition-duration: .13s;
}

/* Foco accesible consistente */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Botón cámara (fotos OS) — no sobreescribir el accent del CTA de tabla */
.btn-fotos {
  background: var(--btn-bg) !important;
  border-color: var(--btn-border) !important;
  color: var(--btn-text) !important;
}
.btn-fotos:hover {
  background: var(--accent-soft) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* Topbar: ocultar el centro vacío */
.top-center { display: none; }

/* Tablas: scroll horizontal en pantallas pequeñas */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Números tabulares en columnas de montos/fechas para alineación uniforme */
.col-num,
.com-kpi-val,
.res-kpi-val,
.pay-date-badge,
.pago-badge {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* Respetar preferencia del sistema de reducción de movimiento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}