/* 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.375rem;
    padding-right: 0.375rem;
    max-width: 100%;
}

@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;
}

#popover-perfil-usuario,
#panel-filtros-catalogo {
    background-color: #ffffff !important;
    opacity: 1 !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.25), 0 10px 10px -5px rgba(0, 0, 0, 0.1) !important;
}

#modal-perfil > div {
    background-color: #ffffff !important;
    opacity: 1 !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 #panel-filtros-catalogo,
html.dark #popover-perfil-usuario,
html.dark #modal-perfil > div {
    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;
}

/* ==============================================================================
   ANIMACIONES Y UTILIDADES DE MICROINTERACCIÓN UX (FASE A & C)
   ============================================================================== */

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.animate-shimmer {
    background: linear-gradient(90deg, rgba(254, 243, 199, 0.4) 25%, rgba(253, 230, 138, 0.8) 50%, rgba(254, 243, 199, 0.4) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

@keyframes highlight-pulse {
    0% { transform: scale(0.98); box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.6); }
    50% { transform: scale(1.02); box-shadow: 0 0 0 6px rgba(217, 119, 6, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(217, 119, 6, 0); }
}

.animate-card-assigned {
    animation: highlight-pulse 0.9s ease-out;
}

@keyframes slide-up-fade {
    0% { opacity: 0; transform: translateY(16px) scale(0.96); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

.animate-toast-in {
    animation: slide-up-fade 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ==============================================================================
   EXPERIENCIA MÓVIL AVANZADA (FASE B)
   ============================================================================== */

/* Ocultar barra de scroll en contenedores táctiles horizontales manteniendo el scroll funcional */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Animación de entrada Bottom Sheet deslizante para móviles */
@keyframes sheet-slide-up {
    0% { transform: translateY(100%); }
    100% { transform: translateY(0); }
}

@media (max-width: 639px) {
    .modal-bottom-sheet {
        animation: sheet-slide-up 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
}

/* Cápsulas de día en el carrusel táctil móvil (Fase B) */
.capsula-dia {
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.capsula-dia.activa {
    background-color: #d97706 !important;
    border-color: #d97706 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

.capsula-dia.activa:hover,
.capsula-dia.activa:focus,
.capsula-dia.activa:active {
    background-color: #b45309 !important;
    border-color: #b45309 !important;
    color: #ffffff !important;
}

.capsula-dia.inactiva {
    background-color: #f8fafc !important;
    border-color: rgba(226, 232, 240, 0.9) !important;
    color: #334155 !important;
    font-weight: 500 !important;
}

.capsula-dia.inactiva:hover,
.capsula-dia.inactiva:focus {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}

/* Soporte Tema Oscuro para cápsulas móviles */
html.dark .capsula-dia.activa {
    background-color: #d97706 !important;
    border-color: #d97706 !important;
    color: #ffffff !important;
}

html.dark .capsula-dia.activa:hover,
html.dark .capsula-dia.activa:focus,
html.dark .capsula-dia.activa:active {
    background-color: #b45309 !important;
    border-color: #b45309 !important;
    color: #ffffff !important;
}

html.dark .capsula-dia.inactiva {
    background-color: #272420 !important;
    border-color: #3a342c !important;
    color: #cbd5e1 !important;
}

html.dark .capsula-dia.inactiva:hover,
html.dark .capsula-dia.inactiva:focus {
    background-color: #332e29 !important;
    color: #f1f5f9 !important;
}

/* Transiciones suaves de deslizamiento lateral para cambio de día en móvil */
@keyframes slideInFromRight {
    from {
        opacity: 0.35;
        transform: translateX(28px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInFromLeft {
    from {
        opacity: 0.35;
        transform: translateX(-28px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.anim-slide-siguiente {
    animation: slideInFromRight 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.anim-slide-anterior {
    animation: slideInFromLeft 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
}