/* Mi Cocina - estilos complementarios a Tailwind */

/* Alpine: oculta elementos hasta que el framework tome control */
[x-cloak] { display: none !important; }

/* ------------------------------------------------------------------
   Responsive: nada debe desbordar horizontalmente.
   clip (y no hidden) para no convertir el body en contenedor de scroll,
   lo que rompería los elementos sticky (barra de navegación, buscador).
------------------------------------------------------------------- */
html, body { overflow-x: clip; }

/* En pantallas táctiles, iOS/Android hacen ZOOM automático al enfocar
   campos con fuente menor a 16px y la página se queda ampliada (el
   usuario tiene que alejar el zoom a mano). Se fuerza 16px en los
   campos de formulario solo en dispositivos táctiles. */
@media (pointer: coarse) {
    input, select, textarea { font-size: 16px !important; }
}

/* Animación de los avisos (toasts) */
@keyframes entrada-aviso {
    from { opacity: 0; transform: translateX(1rem); }
    to { opacity: 1; transform: translateX(0); }
}
.animate-aviso { animation: entrada-aviso .25s ease-out; }

/* Scrollbar discreto acorde a la paleta */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #d6c3a1; border-radius: 8px; }
.dark ::-webkit-scrollbar-thumb { background: #44403c; }
::-webkit-scrollbar-track { background: transparent; }

/* Selects nativos legibles en modo oscuro */
.dark select option { background-color: #1c1917; color: #f5f5f4; }