/* Estilos personalizados para el Planificador de Menús Semanales */

@keyframes pulse-subtle {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.95; transform: scale(0.99); }
}

.animate-pulse-subtle {
    animation: pulse-subtle 2s infinite ease-in-out;
}

/* Transición suave al actualizar tarjetas con HTMX */
.htmx-swapping {
    opacity: 0;
    transition: opacity 200ms ease-out;
}

.htmx-settling {
    opacity: 1;
    transition: opacity 300ms ease-in;
}

/* Scrollbar estilizada */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #f5f2eb;
}

::-webkit-scrollbar-thumb {
    background: #d9d1c3;
    border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
    background: #aba191;
}

/* Soporte táctil optimizado para modales en móviles */
.modal-scrollable {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
}

/* Evitar scroll del fondo cuando hay un modal o drawer abierto */
body.modal-open {
    overflow: hidden !important;
    touch-action: none;
}

body.modal-open .modal-scrollable {
    touch-action: pan-y !important;
}

/* Prevención estricta de desborde y scroll horizontal en móviles */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Margen dinámico inteligente y adaptable para todas las pantallas */
.contenedor-dinamico-pantalla {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    max-width: 98%;
}

@media (min-width: 640px) {
    .contenedor-dinamico-pantalla {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        max-width: 96%;
    }
}

@media (min-width: 768px) {
    .contenedor-dinamico-pantalla {
        padding-left: 1rem;
        padding-right: 1rem;
        max-width: 94%;
    }
}

@media (min-width: 1024px) {
    .contenedor-dinamico-pantalla {
        padding-left: 1rem;
        padding-right: 1rem;
        max-width: 92%;
    }
}

@media (min-width: 1280px) {
    /* En el salto a 7 columnas en portátiles (1280px - 1535px, ej. 13", 14"):
       ancho del 96% (~2% de margen por lado) para que los 7 días tengan espacio suficiente sin solaparse */
    .contenedor-dinamico-pantalla {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        max-width: 96%;
    }
}

@media (min-width: 1536px) {
    /* En pantallas medianas y escritorios (>= 1536px):
       margen suave del 4% por lado (ancho del 92%) */
    .contenedor-dinamico-pantalla {
        padding-left: 1rem;
        padding-right: 1rem;
        max-width: 92%;
    }
}

@media (min-width: 1700px) {
    /* En monitores amplios (1920x1080 Full HD, 2K, etc.):
       margen elegante del 5-6% por lado (ancho del 89%, tope en 2560px) */
    .contenedor-dinamico-pantalla {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
        max-width: min(89%, 2560px);
    }
}

/* ==========================================================================
   SISTEMA DE TEMAS Y PALETA UNIFICADA (CÁLIDO OCRE / NOCHE ÁMBAR)
   ========================================================================== */

/* Popovers y paneles flotantes */
#popover-perfil-usuario.abierto {
    display: block !important;
}

/* Transición suave al alternar temas */
html {
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Modo Claro: Base cálida ocre / piedra mediterránea */
html:not(.dark) {
    background-color: #f5f2eb;
}

html:not(.dark) body {
    background-color: #f5f2eb;
}

/* --------------------------------------------------------------------------
   MODO OSCURO: Noche Ámbar Cálida
   -------------------------------------------------------------------------- */
html.dark {
    color-scheme: dark;
    background-color: #141311 !important;
}

html.dark body {
    background-color: #141311 !important;
    color: #f5efe6 !important;
}

/* Barra de navegación superior */
html.dark header {
    background-color: rgba(22, 20, 18, 0.94) !important;
    border-color: #332e27 !important;
}

/* Superficies principales (tarjetas blancas) */
html.dark .bg-white {
    background-color: #1e1b18 !important;
    border-color: #353028 !important;
    color: #f5efe6 !important;
}

/* Superficies secundarias y fondos suaves */
html.dark .bg-slate-50,
html.dark .bg-slate-50\/80,
html.dark .bg-slate-50\/70 {
    background-color: #272420 !important;
    border-color: #3a342c !important;
}

html.dark .bg-slate-100 {
    background-color: #2b2722 !important;
    border-color: #3d372f !important;
    color: #e5ded3 !important;
}

html.dark .bg-slate-200,
html.dark .bg-slate-200\/60,
html.dark .bg-slate-200\/70,
html.dark .bg-slate-200\/80 {
    background-color: #36312a !important;
    border-color: #443d34 !important;
    color: #ded6c9 !important;
}

/* Textos adaptados al modo oscuro */
html.dark .text-slate-900,
html.dark .text-slate-800 {
    color: #f7f2ea !important;
}

html.dark .text-slate-700,
html.dark .text-slate-600 {
    color: #ded6c9 !important;
}

html.dark .text-slate-500,
html.dark .text-slate-400 {
    color: #a89f91 !important;
}

/* Bordes en modo oscuro */
html.dark .border-slate-100,
html.dark .border-slate-200,
html.dark .border-slate-200\/50,
html.dark .border-slate-200\/60,
html.dark .border-slate-200\/70,
html.dark .border-slate-200\/80,
html.dark .border-slate-300 {
    border-color: #353028 !important;
}

/* Tarjetas de comidas en el tablero semanal */
html.dark .bg-amber-50,
html.dark .bg-amber-50\/50,
html.dark .hover\:bg-amber-50:hover {
    background-color: rgba(69, 48, 20, 0.42) !important;
    border-color: rgba(180, 83, 9, 0.45) !important;
}

html.dark .bg-sky-50,
html.dark .bg-sky-50\/40,
html.dark .hover\:bg-sky-50:hover {
    background-color: rgba(22, 36, 52, 0.42) !important;
    border-color: rgba(56, 114, 168, 0.45) !important;
}

html.dark .bg-rose-50,
html.dark .bg-rose-50\/40,
html.dark .hover\:bg-rose-50:hover {
    background-color: rgba(64, 25, 34, 0.42) !important;
    border-color: rgba(190, 48, 70, 0.45) !important;
}

/* Modales, Drawers y Popovers flotantes */
html.dark #modal-receta-backdrop > div,
html.dark #modal-generar-backdrop > div,
html.dark #modal-nueva-receta-backdrop > div,
html.dark #drawer-catalogo,
html.dark #popover-reglas-menu,
html.dark #popover-perfil-usuario {
    background-color: #1e1b18 !important;
    border-color: #3a342c !important;
    color: #f5efe6 !important;
}

/* Inputs, Selects y Textareas */
html.dark input,
html.dark select,
html.dark textarea {
    background-color: #272420 !important;
    border-color: #423b31 !important;
    color: #f7f2ea !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
    color: #8c8273 !important;
}

/* Botones y hover en modo oscuro */
html.dark .hover\:bg-slate-200:hover,
html.dark .hover\:bg-slate-100:hover,
html.dark .hover\:bg-white\/80:hover {
    background-color: #36312a !important;
}

/* Insignia y Logo en modo oscuro */
html.dark .bg-amber-100 {
    background-color: rgba(217, 119, 6, 0.22) !important;
    color: #fbbf24 !important;
}

/* Scrollbars en modo oscuro */
html.dark ::-webkit-scrollbar-track {
    background: #181715;
}

html.dark ::-webkit-scrollbar-thumb {
    background: #3e382f;
}

html.dark ::-webkit-scrollbar-thumb:hover {
    background: #554d40;
}