/*
 * Accesos a Rastreo y CRM: botoncitos en la barra de arriba.
 *
 * CSS plano con prefijo `plat-`, igual que tablas.css y asistencia.css (el
 * VPS no corre el build de Tailwind). Colores de las variables de Filament
 * para respetar la paleta y el modo oscuro (`.dark` en el <html>).
 *
 * Ojo: Filament sirve una COPIA de este archivo. Después de tocarlo,
 * `php8.3 artisan filament:assets`.
 */

/* ---- Barra de arriba ----------------------------------------------------- */

.plat-barra { display: flex; align-items: center; gap: .375rem; }

.plat-barra-btn {
    display: inline-flex; align-items: center; gap: .375rem;
    height: 2.25rem; padding: 0 .7rem; border-radius: .5rem;
    border: 1px solid var(--gray-200); background: #fff;
    font-size: .8125rem; font-weight: 600; color: var(--gray-700);
    text-decoration: none; transition: background .15s, border-color .15s, color .15s;
}
.plat-barra-btn:hover { border-color: var(--primary-300); background: var(--primary-50); color: var(--primary-700); }
.plat-barra-icono { width: 1.1rem; height: 1.1rem; color: var(--primary-600); }

.dark .plat-barra-btn { background: transparent; border-color: rgb(255 255 255 / .12); color: var(--gray-200); }
.dark .plat-barra-btn:hover { background: rgb(255 255 255 / .05); border-color: var(--primary-500); color: #fff; }
.dark .plat-barra-icono { color: var(--primary-400); }

/* En el celular la barra no tiene espacio para el texto: solo el ícono. */
@media (max-width: 640px) {
    .plat-barra-btn span { display: none; }
    .plat-barra-btn { padding: 0 .55rem; }
}