/* /nutri_menus/static/src/css/productos_page.css */
 .productos-nutri-container{font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background-color: #ffffff; min-height: 100vh;}.breadcrumbs-section{background-color: #f9fafb; border-bottom: 1px solid #e5e7eb; padding: 1rem 0;}.breadcrumbs-content{display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: #6b7280;}.breadcrumbs-content .active{font-weight: 600; color: var(--nutri-primary, #0054a6);}.hero-section{background-color: var(--nutri-primary, #0054a6); color: white; padding: 4rem 1rem; position: relative; overflow: hidden; transition: background-color 0.5s ease;}.hero-section::before{content: ''; position: absolute; top: 0; right: 0; width: 50%; height: 100%; background: rgba(255, 255, 255, 0.05); transform: skewX(-20deg) translateX(20%);}.hero-section::after{content: ''; position: absolute; bottom: -2.5rem; left: -2.5rem; width: 16rem; height: 16rem; background: rgba(0, 0, 0, 0.1); border-radius: 50%; filter: blur(60px);}.hero-content{position: relative; z-index: 10; max-width: 900px; margin: 0 auto;}.hero-title{font-size: 3rem; font-weight: 900; font-style: italic; letter-spacing: -0.025em; margin-bottom: 1.5rem; text-transform: uppercase;}.hero-description{font-size: 1.125rem; line-height: 1.75; opacity: 0.9; max-width: 700px; margin: 0 auto;}@media (max-width: 768px){.hero-title{font-size: 2rem;}.hero-description{font-size: 1rem;}}.productos-main-content{padding: 3rem 1rem 5rem;}.filters-toolbar{display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; margin-bottom: 3rem; background: white; padding: 1rem; border-radius: 0.75rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); border: 1px solid #f3f4f6;}.sticky-toolbar{position: sticky; top: 85px; z-index: 30;}.category-tabs{display: flex; flex-wrap: wrap; gap: 0.5rem; max-height: 150px; overflow-y: auto; padding-bottom: 0.5rem; scrollbar-width: thin;}.category-tabs::-webkit-scrollbar{width: 6px;}.category-tabs::-webkit-scrollbar-track{background: #f1f1f1; border-radius: 10px;}.category-tabs::-webkit-scrollbar-thumb{background: #888; border-radius: 10px;}.category-tabs::-webkit-scrollbar-thumb:hover{background: #555;}.category-btn{padding: 0.5rem 1.5rem; border-radius: 9999px; font-size: 0.875rem; font-weight: 700; white-space: nowrap; border: none; cursor: pointer; transition: all 0.3s ease; background-color: #f3f4f6; color: #6b7280;}.category-btn:hover{background-color: #e5e7eb; transform: translateY(-1px);}.category-btn.active{background-color: var(--nutri-secondary, #84bd00); color: white; box-shadow: 0 4px 6px rgba(var(--nutri-secondary-rgb, 132, 189, 0), 0.3);}.search-box{position: relative; width: 100%; max-width: 300px;}.search-box input{width: 100%; padding: 0.625rem 1rem 0.625rem 2.5rem; border-radius: 9999px; border: 1px solid #e5e7eb; background-color: #f9fafb; font-size: 0.875rem; transition: all 0.3s ease; outline: none;}.search-box input:focus{background-color: white; border-color: var(--nutri-primary, #0054a6); box-shadow: 0 0 0 3px rgba(var(--nutri-primary-rgb, 0, 84, 166), 0.1);}.search-icon{position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: #9ca3af; font-size: 1rem;}@media (max-width: 768px){.filters-toolbar{flex-direction: column; align-items: stretch;}.search-box{max-width: 100%;}}.productos-grid{display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2rem;}@media (max-width: 640px){.productos-grid{grid-template-columns: 1fr;}}.producto-card{background: white; border-radius: 1rem; border: 1px solid #f3f4f6; padding: 1.5rem; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; overflow: hidden; transition: all 0.3s ease; cursor: pointer;}.producto-card:hover{box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); transform: translateY(-2px);}.card-gradient-top{position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, transparent, var(--nutri-secondary, #84bd00), transparent); opacity: 0; transition: opacity 0.3s ease;}.producto-card:hover .card-gradient-top{opacity: 1;}.producto-image-container{width: 100%; height: 14rem; margin-bottom: 1.5rem; display: flex; align-items: center; justify-content: center; position: relative;}.hover-bg{position: absolute; inset: 0; background-color: #f9fafb; border-radius: 50%; transform: scale(0); transition: transform 0.5s ease; z-index: -1; opacity: 0.5;}.producto-card:hover .hover-bg{transform: scale(1);}.producto-image{max-height: 100%; max-width: 100%; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1)); transition: transform 0.3s ease;}.producto-card:hover .producto-image{transform: scale(1.1);}.producto-badge{display: inline-block; font-size: 0.75rem; font-weight: 700; color: var(--nutri-secondary, #84bd00); background-color: #ecfccb; padding: 0.25rem 0.75rem; border-radius: 9999px; margin-bottom: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em;}.producto-title{font-size: 1.25rem; font-weight: 700; color: #1e293b; margin-bottom: 0.5rem; transition: color 0.3s ease;}.producto-card:hover .producto-title{color: var(--nutri-primary, #0054a6);}.producto-description{font-size: 0.875rem; color: #6b7280; margin-bottom: 1.5rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}.btn-ver-detalles{width: 100%; background: white; border: 2px solid var(--nutri-primary, #0054a6); color: var(--nutri-primary, #0054a6); font-weight: 700; padding: 0.5rem 1rem; border-radius: 0.5rem; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: auto;}.btn-ver-detalles:hover{background: var(--nutri-primary, #0054a6); color: white;}.empty-state{text-align: center; padding: 5rem 1rem; background-color: #f9fafb; border-radius: 0.75rem; border: 2px dashed #e5e7eb;}.empty-icon{width: 4rem; height: 4rem; background-color: #e5e7eb; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; color: #9ca3af; font-size: 2rem;}.empty-state h3{font-size: 1.25rem; font-weight: 700; color: #374151; margin-bottom: 0.5rem;}.empty-state p{color: #6b7280; margin-bottom: 1.5rem;}.btn-reset{color: var(--nutri-primary, #0054a6); font-weight: 700; background: none; border: none; cursor: pointer; text-decoration: underline;}.btn-reset:hover{text-decoration: none;}.producto-modal{position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 1rem;}.modal-overlay{position: absolute; inset: 0; background-color: rgba(0, 0, 0, 0.7); backdrop-filter: blur(4px);}.modal-box{position: relative; width: 100%; max-width: 900px; max-height: 90vh; background: white; border-radius: 1rem; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); z-index: 10; overflow: hidden; animation: modalSlideIn 0.3s ease-out;}@keyframes modalSlideIn{from{opacity: 0; transform: translateY(-20px) scale(0.95);}to{opacity: 1; transform: translateY(0) scale(1);}}.btn-close-modal{position: absolute; top: 1rem; right: 1rem; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: white; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 20; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; color: #6b7280; font-size: 1.25rem;}.btn-close-modal:hover{background: var(--nutri-primary, #0054a6); color: white; transform: rotate(90deg);}.modal-content-scroll{max-height: 90vh; overflow-y: auto; padding: 2rem;}.modal-content-scroll::-webkit-scrollbar{width: 6px;}.modal-content-scroll::-webkit-scrollbar-track{background: #f3f4f6;}.modal-content-scroll::-webkit-scrollbar-thumb{background: var(--nutri-primary, #0054a6); border-radius: 3px;}.modal-product-image-container{width: 100%; display: flex; justify-content: center; align-items: center; padding: 2rem 0; background: linear-gradient(to bottom, #f9fafb, white); border-radius: 0.5rem; margin-bottom: 2rem;}.modal-product-image{max-width: 100%; max-height: 300px; object-fit: contain; filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.1));}.modal-product-info{text-align: center;}.modal-product-category{display: inline-block; font-size: 0.75rem; font-weight: 700; color: var(--nutri-secondary, #84bd00); background-color: #ecfccb; padding: 0.25rem 0.75rem; border-radius: 9999px; margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 0.05em;}.modal-product-title{font-size: 2rem; font-weight: 700; color: #1e293b; margin-bottom: 1.5rem;}.modal-product-description{color: #4b5563; font-size: 1rem; line-height: 1.75; margin-bottom: 2rem; text-align: left;}.modal-features{display: flex; justify-content: center; align-items: center; gap: 2rem; margin-bottom: 2rem; padding: 1.5rem 0; border-top: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb;}@media (max-width: 640px){.modal-box{max-width: 100%; max-height: 100vh; border-radius: 0;}.modal-content-scroll{padding: 1.5rem 1rem;}.modal-product-title{font-size: 1.5rem;}.modal-features{gap: 1rem;}}.btn-tabla-nutricional{background-color: #f4a261; color: white; font-weight: 700; padding: 0.75rem 2rem; border-radius: 9999px; border: none; cursor: pointer; box-shadow: 0 4px 6px rgba(244, 162, 97, 0.3); transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 0.5rem;}.btn-tabla-nutricional:hover{background-color: #e78c43; transform: translateY(-2px); box-shadow: 0 6px 8px rgba(244, 162, 97, 0.4);}.detail-features, .modal-features .feature-item{display: flex; flex-direction: column; align-items: center; gap: 0.5rem;}.feature-icon{width: 3rem; height: 3rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem;}.feature-icon-blue{background-color: #dbeafe; color: var(--nutri-primary, #0054a6);}.feature-icon-green{background-color: #dcfce7; color: var(--nutri-secondary, #84bd00);}.feature-icon-yellow{background-color: #fef3c7; color: #eab308;}.feature-item span{font-size: 0.75rem; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em;}.detail-image-container{flex: 1; display: flex; justify-content: center; align-items: center; position: relative;}.image-glow{position: absolute; inset: 0; background: linear-gradient(to bottom, transparent, rgba(243, 244, 246, 0.5)); border-radius: 50%; filter: blur(60px); z-index: -1;}.detail-image-container img{max-width: 100%; max-height: 32rem; object-fit: contain; filter: drop-shadow(0 20px 25px rgba(0, 0, 0, 0.15));}@keyframes fadeIn{from{opacity: 0; transform: translateY(10px);}to{opacity: 1; transform: translateY(0);}}.animate-fade-in{animation: fadeIn 0.5s ease-out;}.modal-container::-webkit-scrollbar{width: 8px;}.modal-container::-webkit-scrollbar-track{background: #f3f4f6;}.modal-container::-webkit-scrollbar-thumb{background: var(--nutri-primary, #0054a6); border-radius: 4px;}.modal-container::-webkit-scrollbar-thumb:hover{background: var(--nutri-primary, #003d7a);}