/* SYL Intranet — overrides sutiles */
html, body { -webkit-font-smoothing: antialiased; }

/* Scrollbars suaves */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #cbd5e1; }
::-webkit-scrollbar-track { background: transparent; }

/* Selects con flecha propia */
select { -webkit-appearance: none; appearance: none; }

/* Transiciones base */
a, button, .role-tab { transition: background-color .15s ease, border-color .15s ease,
                                   color .15s ease, box-shadow .15s ease, transform .15s ease; }

/* Focus ring visible pero discreto */
:focus-visible { outline: 2px solid #10b981; outline-offset: 2px; border-radius: 8px; }

/* Chart tooltips */
canvas { max-width: 100%; }

/* Tabla: primera columna con padding izquierdo más natural */
table thead th:first-child, table tbody td:first-child { padding-left: 1.25rem; }

/* Modal show */
#modal.flex { display: flex; }

/* Animación sutil para las tarjetas del dashboard */
@media (prefers-reduced-motion: no-preference) {
  main > * { animation: fade-up .3s ease both; }
  main > *:nth-child(2) { animation-delay: .04s; }
  main > *:nth-child(3) { animation-delay: .08s; }
  main > *:nth-child(4) { animation-delay: .12s; }
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}