/* ── Scrollbar personalizado ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* ── Sidebar scrollbar oscuro ── */
#sidebar ::-webkit-scrollbar-thumb { background: #374151; }
#sidebar ::-webkit-scrollbar-thumb:hover { background: #4b5563; }

/* ── Transiciones de vista ── */
.view-enter { animation: fadeSlideIn 0.2s ease forwards; }
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Skeleton loader ── */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.4s ease infinite;
  border-radius: 6px;
}
@keyframes skeleton-loading {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Sidebar nav active ── */
.nav-item-active {
  background-color: #4f46e5 !important;
  color: #fff !important;
}
.nav-item-active svg { color: #fff !important; }

/* ── Table hover ── */
.table-row:hover { background-color: #f9fafb; }

/* ── Badge estados ── */
.badge-activo   { background:#d1fae5; color:#065f46; }
.badge-inactivo { background:#fee2e2; color:#991b1b; }
.badge-pendiente{ background:#fef3c7; color:#92400e; }

/* ── Focus global ── */
*:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Prevent layout shift while loading ── */
#view-login, #view-app { transition: opacity 0.15s ease; }

/* ── Forzar formato 24h en inputs de hora (oculta AM/PM en Chrome/Safari) ── */
input[type="time"]::-webkit-datetime-edit-ampm-field { display: none; }
input[type="time"] { -webkit-text-fill-color: inherit; }

/* ── Responsive mobile ── */
@media (max-width: 767px) {
  /* Sidebar ocupa toda la altura cuando está abierto */
  #sidebar { height: 100vh; }

  /* Reducir padding del contenido principal en mobile */
  #content { padding: 12px; }

  /* Celdas del calendario más grandes para el dedo */
  .ag-dia-celda { min-height: 60px !important; touch-action: manipulation; }

  /* Pills de eventos más legibles */
  .ag-ev-pill { font-size: 10px !important; padding: 2px 4px !important; }

  /* Leyenda de colores más compacta */
  #agenda-root > div:nth-child(2) { display: none; }

  /* Modal ocupa más pantalla en mobile */
  #modal-backdrop > div { margin: 0 !important; max-width: 100% !important; width: 100% !important;
    border-radius: 16px 16px 0 0 !important; position: fixed !important;
    bottom: 0 !important; left: 0 !important; max-height: 92vh !important; }

  /* ── Tablas: scroll horizontal en vez de romper el ancho de la pantalla ──
     Cualquier contenedor que envuelva una tabla se vuelve desplazable, y la
     tabla conserva su ancho natural (sin comprimir columnas ni desalinear). */
  #content div:has(> table),
  #content .overflow-hidden:has(table) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  #content table { min-width: max-content; }

  /* ── Formularios/datos en modales: apilar columnas para que quepan ── */
  #modal-backdrop .grid.grid-cols-2,
  #modal-backdrop .grid.grid-cols-3 { grid-template-columns: 1fr !important; }

  /* Botoneras: que envuelvan en vez de salirse */
  #content .flex.items-center.justify-end,
  #modal-backdrop .flex.justify-end { flex-wrap: wrap; }

  /* Títulos de pantalla un poco más compactos */
  #content h1 { font-size: 1.25rem; line-height: 1.75rem; }
}