:root {
    --theme-bg: hsl(from var(--primary) h 10% 92%);

    --sheet: #fff;
    --sheet-handle: var(--primary);

    --text: hsl(from var(--primary) h 2% 20%);
    --text-muted: hsl(from var(--primary) h 5% 50%);
    --border: hsl(from var(--primary) h 10% 85%);

    --theme-bg-light: hsl(from var(--primary) h 10% 96%);
    --color-highlight: hsl(from var(--primary) h s l / 0.1);
    --transition: all 0.3s ease;

    --hamburger-bg: #fff;
    --hamburger-color: var(--primary);
    --hamburger-bg-invert: var(--primary);
    --hamburger-color-invert: #fff;

    --container-padding: 16px;
    --wrap-width: 420px;
}

[data-theme="dark"] {
    --theme-bg: hsl(from var(--primary) h 8% 13%);
    --sheet: hsl(from var(--primary) h 10% 15%);
    --sheet-handle: #fff;

    --text: hsl(from var(--primary) h 10% 95%);
    --text-muted: hsl(from var(--primary) h 5% 75%);
    --border: hsl(from var(--primary) h 15% 25%);

    --color-highlight: rgba(255, 255, 255, 0.1);
    --theme-bg-light: hsl(from var(--primary) h 25% 10%);

    --hamburger-bg: #000;
    --hamburger-color: #fff;
    --hamburger-bg-invert: #fff;
    --hamburger-color-invert: #000;


}

/* --- RESET & BASE --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html,
body {
    height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

body {
    font-family: var(--font-body), system-ui, -apple-system, sans-serif;
    background-color: var(--theme-bg);
    color: var(--text);
    line-height: 1.5;
    overscroll-behavior-y: contain;
    width: 100%;
    min-height: 100vh;
}

/* --- LAYOUT PRINCIPAL --- */
#app-wrap {
    position: relative;
    width: 100%;
    max-width: var(--wrap-width);
    min-width: var(--wrap-width);
    height: 90vh;
    max-height: 800px;
    background: var(--sheet);
    border-radius: 14px;
    box-shadow: 0 10px 25px -12px rgba(0, 0, 0, 0.2), 0 15px 30px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s;
}

[data-theme="dark"] #app-wrap {
    background: #000;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
}

.app-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.bottom-sheet::-webkit-scrollbar,
.app-content::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera: oculta la barra */
}

/* --- HEADER / HERO --- */
.hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    position: relative;
}

.portada {
    position: relative;
    width: 100%;
    z-index: 1;
    overflow: hidden;
}

.portada-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.hero.has-gradient .portada::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent, var(--sheet));
    z-index: 2;
}

[data-theme="dark"] .hero.has-gradient .portada::after {
    background: linear-gradient(180deg, transparent, #000);
}

/* Logo & Identidad */
.logo-container {
    position: relative;
    z-index: 10;
    text-align: center;
    width: 100%;
    padding: 0 var(--container-padding);
}

.hero.has-portada .portada {
    aspect-ratio: 16 / 9;
}

.hero.has-portada.has-logo .logo-container {
    margin-top: calc(var(--logo-size, 140px) / -1.2);
}

.hero.no-portada.has-logo .logo-container {
    margin-top: 12px;
}

.hero.has-portada.no-logo .logo-container {
    /* margin-top: -60px; */
    text-align: left;
    padding-top: calc(var(--container-padding)/2);
}

.hero.no-portada.no-logo .logo-container {
    min-height: 74px;
}

/*.hero.has-portada.no-logo .portada { aspect-ratio: unset; height: 140px; }*/

.app-logo {
    width: var(--logo-size, 140px);
    height: var(--logo-size, 140px);
    /*object-fit: contain;*/
    background: #fff;
    /*box-shadow: 0 8px 20px rgba(0,0,0,0.12);*/
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    /*border: 4px solid #fff;*/
    transition: var(--transition);
}

[data-theme="dark"] .app-logo {
    box-shadow: 0 4px 8px 3px rgba(0, 0, 0, 0.15);
}

.logo-format-circulo {
    border-radius: 50%;
}

.logo-format-redondeado {
    border-radius: 20%;
}

.logo-format-cuadrado {
    border-radius: 6px;
}

.business-name {
    margin: 10px 0 5px;
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.5px;
    font-family: var(--font-titles);
    line-height: 1.1;
}

.business-intro {
    font-size: 1.1rem;
    color: var(--text);
    line-height: 1.4;
    padding: calc(var(--container-padding)/2) 0 calc(var(--container-padding) * 1.5);
    opacity: 0.9;
}

.card-espaciado-compacto .business-intro {
    padding: calc(var(--container-padding)/1.5) 0 calc(var(--container-padding)/1.5);
}

.hero.no-portada.no-logo .business-name {
    min-height: 42px;
    margin-top: 16px;
    margin-right: 55px;
    text-align: left;
    display: flex;
    align-items: center;
}

.hero.no-portada.no-logo .business-intro {
    text-align: left;
}

/* --- STICKY BAR: Buscador & Categorías --- */
.sticky-bar-container {
    position: sticky;
    top: 0;
    z-index: 12;
    background: color-mix(in srgb, var(--sheet) 85%, transparent);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid var(--border);
    padding: 12px 0 0;
    transition: var(--transition);
}

[data-theme="dark"] .sticky-bar-container {
    background:
        /*color-mix(in srgb, var(--sheet) 10%, transparent)*/
        rgba(0, 0, 0, 0.6);
}

.search-container {
    padding: 0 var(--container-padding);
    transition: margin 0.3s;
}

.is-sticky .search-container {
    margin-right: 60px;
}

.search-box {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--theme-bg-light);
    padding: 10px var(--container-padding);
    border: 1px solid var(--border);
    transition: var(--transition);
    position: relative;
}

.card-espaciado-compacto .search-box {
    padding: 6px 8px
}

.search-box:focus-within {
    border-color: var(--primary);
    background: var(--sheet);
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.1);
}

.search-box input {
    border: none;
    background: transparent;
    outline: none;
    width: 100%;
    font-size: 1.1rem;
    color: inherit;
    font-weight: 400;
    font-family: var(--font-body);
    padding-right: 25px;
}

.search-box input::placeholder {
    color: var(--text-muted);
}

#clearSearch {
    color: var(--text);
}

#clearSearch:hover {
    color: var(--primary);
}

/*
.search-box .clear-search { 
    position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
    color: var(--text-muted); font-size: 1.2rem; cursor: pointer; display: none;
}
.search-box .clear-search:hover { color: #ef4444; }*/

/* Navegación de Categorías */
.category-nav {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: var(--container-padding);
    scrollbar-width: none;
    -ms-overflow-style: none;
    transition: var(--transition);
}

.category-nav::-webkit-scrollbar {
    display: none;
}

/* Diseño 1: Pastillas */
.category-design-1 .nav-item {
    white-space: nowrap;
    font-size: 1.1rem;
    font-weight: 300;
    padding: 8px var(--container-padding);
    border-radius: 30px;
    transition: var(--transition);
    text-decoration: none;
    color: var(--text-muted);
    background: transparent;
    border: 1px solid var(--border);
}

.category-design-1 .nav-item.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3);
    font-weight: 600;
}

.card-espaciado-compacto .category-design-1 .nav-item {
    padding: 4px var(--container-padding)
}

/* Diseño 2: Pestañas */
.category-design-2 {
    gap: 0;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0;
}

.category-design-2 .nav-item {
    white-space: nowrap;
    font-size: 1.1rem;
    font-weight: 300;
    padding: 8px var(--container-padding);
    transition: var(--transition);
    text-decoration: none;
    color: var(--text-muted);
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
}

.category-design-2 .nav-item.active {
    color: color: var(--text);
    border-bottom-color: var(--primary);
    font-weight: 600;
}

.card-espaciado-compacto .category-design-2 .nav-item {
    padding: 8px var(--container-padding)
}

/* Diseño 3: Bloques */
.category-design-3 {
    gap: 10px;
    padding: var(--container-padding);
}

.category-design-3 .nav-item {
    white-space: nowrap;
    font-size: 1.1rem;
    font-weight: 300;
    padding: 6px var(--container-padding);
    border-radius: 2px;
    transition: var(--transition);
    text-decoration: none;
    color: var(--text);
    background: var(--theme-bg-light);
}

.category-design-3 .nav-item.active {
    background: var(--primary);
    color: #fff;
    font-weight: 600;
}

.card-redondeado-suave .category-design-3 .nav-item {
    border-radius: 6px;
}

.card-espaciado-compacto .category-design-3 .nav-item {
    border-radius: 3px;
    padding: 4px 12px
}

/* --- CATÁLOGO DE PRODUCTOS --- */
main.productos-section {
    flex: 1 0 auto;
    /*display: inline-flex;
	flex-direction: column;*/
    background: var(--theme-bg-light);
    padding: 20px 0 96px;
}

.category-block {
    scroll-margin-top: 130px;
    transition: padding 0.3s ease;
}

.category-content {
    line-height: 1.1;
    padding: var(--container-padding) var(--container-padding) calc(var(--container-padding) / 2);
    position: relative;
}

.card-espaciado-compacto .category-content {
    padding: calc(var(--container-padding) / 1.5) var(--container-padding) calc(var(--container-padding) / 3);
}

.category-content::after {
    content: "";
    position: absolute;
    top: 60%;
    left: -30%;
    transform: translateY(-50%);
    width: 80%;
    height: 60px;
    background: var(--primary);
    filter: blur(40px);
    opacity: 0.1;
    border-radius: 50%;
    z-index: 0;
}

[data-theme="dark"] .category-content::after {
    opacity: 0.15;
}

.category-label {
    font-family: var(--font-titles);
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--text);
    position: relative;
    z-index: 1;
    line-height: 1;
}

[data-theme="dark"] .category-label {
    color: #fff;
}

.category-description {
    font-size: 0.9rem;
    color: var(--text-muted);
    font-weight: 300;
    line-height: 1.4;
    position: relative;
    z-index: 1;
    margin-top: 2px;
}

.product-card-wrapper {
    display: flex;
    flex-direction: column;
}

.product-card {
    display: flex;
    gap: 14px;
    background: var(--sheet);
    transition: var(--transition) cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    align-items: stretch;
    transition: all .1s ease;
}

[data-theme="dark"] .product-card {
    background: #000;
}

.product-card:active {
    transform: scale(0.98);
}

.product-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.featured-tag-content {
    margin-bottom: 4px;
    line-height: 1;
    margin-top: -4px;
    /*display: flex !important;gap:8px*/
}

.card-espaciado-compacto .featured-tag-content {
    margin-bottom: 2px;
    line-height: 1;
    margin-top: 2px;
}

.featured-tag {
    font-size: .6rem;
    text-transform: uppercase;
    padding: 3px 8px;
    border: 1px solid var(--border);
    border-radius: 10px;
    transform: translate(-4px, -2px);
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: var(--text);
    font-weight: 400;
}

.featured-tag[class*="icon-tag-"] {
    position: relative;
}

[data-theme="dark"] .featured-tag {
    color: var(--text-muted);
    background: hsl(from var(--primary) h 5% 12%);
}

.bottom-sheet .featured-tag {
    font-size: .75rem;
    padding: 4px 10px;
    margin-right: 4px;
    border: 1px solid var(--border);
    border-radius: 12px;
}

.bottom-sheet .featured-tag-content {
    margin: 0 0 8px;
}

.bottom-sheet .featured-tag {
    transform: translate(-4px, 0);
}


/* Icono para DESTACADO */
/*.featured-tag.icon-tag-destacado::before{content:'star';font-family:'Material Symbols Outlined';font-variation-settings:'FILL' 1;font-size:.7rem;font-weight:400;display:inline-block;vertical-align:middle}*/
/* Icono para RECOMENDADO */
/*.featured-tag.icon-tag-recomendado::before{content:'favorite';font-family:'Material Symbols Outlined';font-variation-settings:'FILL' 1;font-size:.7rem;font-weight:400;display:inline-block;vertical-align:middle}*/
/* Estilo específico para la etiqueta "nuevo" */
.featured-tag.icon-tag-nuevo {
    position: relative;
    padding-left: 16px
}

.featured-tag.icon-tag-nuevo::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background-color: var(--primary);
    border-radius: 50%;
    display: inline-block;
    animation: pulse-dot 1.5s ease-in-out infinite
}

@keyframes pulse-dot {
    0% {
        transform: translateY(-50%) scale(1);
        opacity: 1;
    }

    50% {
        transform: translateY(-50%) scale(1.3);
        opacity: 0.7;
        a
    }

    100% {
        transform: translateY(-50%) scale(1);
        opacity: 1;
    }
}

.product-title {
    font-family: var(--font-titles);
    font-weight: 600;
    color: var(--text);
    line-height: 1.25;
    font-size: 1.2rem
}

.product-desc {
    font-size: 1rem;
    color: var(--text-muted);
    margin-top: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.2;
    font-weight: 300
}

.product-desc:empty {
    display: none
}

.product-price {
    font-weight: 600;
    color: var(--primary);
    font-size: 1.1rem;
    margin-top: auto;
    padding-top: 12px;
    font-weight: 700;
    color: var(--primary);
    line-height: 1;
    margin-bottom: -4px
}

.tag-name {
    font-size: .75rem;
    line-height: 1.2
}

.item-price-sufix {
    font-size: .85rem;
    color: var(--text-muted);
    font-weight: 300
}

.item-tags-inline {
    display: inline-flex;
    gap: 4px
}

.item-tags-inline svg {
    width: 14px;
    height: 14px
}

.tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 20px;
    text-transform: uppercase
}

.tags-container svg {
    width: 18px;
    height: 18px
}

.icon-tag-vegano svg,
.icon-tag-vegetariano svg {
    fill: #10b981
}

.icon-tag-picante-1 svg,
.icon-tag-picante-2 svg,
.icon-tag-picante-3 svg {
    fill: #ef4444
}

.icon-tag-sin-gluten svg {
    fill: #dbbd14
}

.icon-tag-sin-lactosa svg {
    fill: #40b0ec
}

.item-tags-inline .icon-tag-picante-2 svg,
.item-tags-inline .icon-tag-picante-3 svg,
.tag-badge .icon-tag-picante-2 svg,
.tag-badge .icon-tag-picante-3 svg {
    width: unset
}

.tag-badge svg {
    vertical-align: middle
}

.item-tags-detail {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--border)
}

.tag-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--border);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: .9rem;
    font-weight: 400
}

.tag-badge span {
    white-space: nowrap;
    display: flex;
    align-items: center
}

.item-media {
    width: 96px;
    height: 96px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.item-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- Estilo Tarjetas (Normal) --- */
.card-espaciado-normal .category-block {
    padding: 0 var(--container-padding) var(--container-padding);
}

.card-espaciado-normal .product-card-wrapper {
    gap: calc(var(--container-padding)/2);
}

.card-espaciado-normal .product-card {
    padding: var(--container-padding);
    border: 1px solid var(--border);
    box-shadow: 0 4px 15px -2px rgba(0, 0, 0, 0.05);
}

.grid .product-card {
    calc(var(--container-padding) / 1.5)
}

.card-espaciado-normal .item-media {
    border-radius: 6px !important;
}

.card-espaciado-compacto .item-media {
    border-radius: 3px !important;
}

/* --- Estilo Compacto (Edge-to-edge) --- */
.card-espaciado-compacto .category-block {
    padding: 0 0 var(--container-padding);
}

.card-espaciado-compacto .product-card-wrapper {
    gap: 0;
}

.card-espaciado-compacto .product-card {
    padding: calc(var(--container-padding) / 2) var(--container-padding);
    border: none;
    border-bottom: 1px solid var(--border);
    border-radius: 0 !important;
    /* Forzado a recto en compacto */
}

/*.card-espaciado-compacto .product-card:last-child { border-bottom: none; }*/
.card-espaciado-compacto .product-card:first-child {
    border-top: 1px solid var(--border);
}

.card-espaciado-normal.card-redondeado-recto .item-media {
    border-radius: 3px !important;
}

.card-espaciado-normal.card-redondeado-suave .item-media {
    border-radius: 8px !important;
}

/* Variantes de Redondeado (solo aplican si no es compacto o se fuerzan) */
.card-redondeado-recto .product-card,
.card-redondeado-recto .search-box {
    border-radius: 2px;
}

.card-redondeado-suave .product-card,
.card-redondeado-suave .search-box {
    border-radius: 12px;
}

.card-espaciado-compacto .search-box {
    border-radius: 4px;
}

.card-img-pos-izquierda .product-card {
    flex-direction: row-reverse;
}

/* --- SHEETS & MODALS --- */
body.modal-open {
    overflow: hidden !important;
}

.bottom-sheet {
    position: absolute;
    bottom: -30px;
    left: 0;
    width: 100%;
    height: 85%;
    background: var(--sheet);
    border-radius: 16px 16px 0 0;
    z-index: 500;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    box-shadow: 0 -15px 50px rgba(0, 0, 0, 0.1);
    overflow-y: auto;
    padding-bottom: 30px;
    /* Filtro de desenfoque de fondo */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

[data-theme="dark"] .bottom-sheet {
    border: 1px solid var(--border);
    /*background: radial-gradient(
        circle at 50% -20%, 
        color-mix(in srgb, var(--primary), transparent 100%) 0%, 
        color-mix(in srgb, var(--primary), var(--sheet) 80%) 30%,       
        var(--sheet) 100%
    );*/
}

.bottom-sheet.open {
    transform: translateY(0);
}

.drag-handle {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 14px 0;
    cursor: grab;
    position: sticky;
    top: 0;
    z-index: 1001;
    border-bottom: 1px solid transparent;
    transition: var(--transition);
    background: var(--sheet);
}

.drag-dots {
    height: 5px;
    width: 40px;
    background: var(--sheet-handle);
    border-radius: 10px;
}

.drag-handle.scrolled {
    border-bottom: 1px solid var(--border);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1)
}

.inner-sheet {
    background: var(--theme-bg-light);
    border-radius: var(--container-padding) var(--container-padding) 0 0;
    padding: var(--container-padding);
    border: 1px solid var(--border);
    border-bottom: 0;
}

.card-redondeado-recto .inner-sheet {
    border-radius: 8px;
}

.card-espaciado-compacto #menuSheet .inner-sheet {
    padding: 0;
}

#productSheet .inner-sheet {
    background: var(--sheet);
    border: none;
    padding-top: 0;
}

[data-theme="dark"] .inner-sheet {
    background: #000
}

.sheet-img {
    width: 100%;
    height: auto;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 20px;
    background-color: var(--border);
}

.sheet-title {
    font-family: var(--font-titles);
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.2;
}

.sheet-price {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 15px;
}

.sheet-price .item-price-sufix {
    font-size: 1.1rem;
}

.sheet-description {
    font-size: 1.1rem;
    color: var(--text-muted);
    line-height: 1.5;
    font-weight: 300;
}

.content-sheet {
    padding: var(--container-padding);
    border-bottom: 1px solid var(--border);
}

.content-sheet h4 {
    margin: 0 0 12px 0;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--primary);
}

/* --- MENU GRID DESIGN --- */


.menu-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--container-padding) 8px;
}

.menu-card {
    overflow: hidden;
    position: relative;
    background: var(--sheet);
    ;
    padding: var(--container-padding);
    border-radius: 12px;
    box-shadow: 0 6px 10px -4px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
}

[data-theme="dark"] .menu-card {
    background: var(--sheet);
}

.card-espaciado-compacto .menu-card {
    border-radius: 0;
    border-bottom: 1px solid var(--border);
}

.card-espaciado-compacto .menu-card:first-child {
    border-top: 1px solid var(--border);
}

.card-espaciado-compacto .menu-grid {
    gap: 0;
}

.card-redondeado-recto .menu-card {
    border-radius: 2px;
}

.menu-card.no-padding {
    padding: 0;
    border: 1px solid var(--border)
}

.menu-card.full-width {
    grid-column: 1 / -1;
}

.vcard-promo-card {
    background: color-mix(in srgb, var(--primary), white 95%);
    border: 1px dashed var(--primary);
}

.card-espaciado-compacto .vcard-promo-card {
    border-top: 0;
    border-left: 0;
    border-right: 0;
    padding: 24px
}

.card-espaciado-compacto .share-card {
    border-right: 1px solid var(--border)
}

.promo-content {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
}

.promo-icon {
    font-size: 2.4rem !important;
    color: var(--primary);
}

.promo-text {
    flex-grow: 1;
    text-align: left;
}

/*
.promo-text p {
    margin: 0;
    font-size: 1rem;
    color: var(--text-muted);
}*/

.promo-text strong {
    display: block;
    font-size: 1.1rem;
    line-height: 1.2;
}


.btn-promo-action:active {
    transform: scale(0.95);
}



.btn-sheet {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 2px 6px;
    color: var(--primary);
    border-radius: 4px;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    font-family: var(--font-body);
    border: 0;
}

.card-redondeado-recto .btn-sheet {
    border-radius: 2px;
}

.btn-sheet:hover {
    filter: brightness(1.03);
}

.btn-promo-action {
    background: var(--primary);
    color: white;
    padding: 6px 8px;
    font-size: .9rem;
}

.btn-promo-action:hover {
    filter: brightness(1.2);
}

/*.menu-card:not(.menu-card.full-width) {
	padding:8px;
}*/

/*.share-card .btn-promo-action, .wifi-card .btn-promo-action {
	margin-top:auto;
}*/

.btn-sheet span {
    font-size: 1.2rem
}



.btn-share,
.btn-savevcard {
    padding: 6px;
    border: 1px solid transparent;
    font-size: 0.9rem;
    margin-top: 16px
}


.admin-links-content {
    grid-column: 1 / -1;
    justify-self: center;
    display: flex;
    gap: 5px 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.btn-ghost {
    color: var(--primary);
    border-radius: 4px;
    font-weight: 600;
    text-transform: uppercase;
    display: flex;
    text-decoration: none;
    border: 2px solid var(--primary);
    align-items: center;
    padding: 6px 12px;
    gap: 5px;
    position: relative;
    transition: var(--transition);
    opacity: .6;
    font-size: .8rem;
}

.btn-ghost:hover {
    opacity: 1;
}

[data-theme="dark"] .btn-ghost:hover {
    filter: brightness(1.3);
    opacity: 1;
}

.btn-ghost span {
    font-size: 1.4rem;
}

.btn-danger {
    border-color: #ef4444;
    color: #ef4444;
}

/* Estados del botón */
.btn-wifi-password:active {
    transform: scale(0.97);
    background: color-mix(in srgb, var(--primary), white 85%);
}

.btn-sheet:active {
    transform: scale(0.97);
}

.btn-wifi-password.copied {
    background: #25D366;
    color: #fff;
    border-color: transparent;
}


.btn-share:hover {
    filter: brightness(1.2);
}

.quick-actions-row {
    display: flex;
    gap: 8px;
    width: 100%;
    margin: 16px 0 32px;
    justify-content: center;
    flex-wrap: wrap;
}

.card-espaciado-compacto .quick-actions-row {
    margin-bottom: 16px;
}

.btn-quick {
    max-width: 22%;
    display: flex;
    flex-direction: column;
    /* Icono arriba, texto abajo */
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 4px;
    text-decoration: none;
    transition: var(--transition);
    box-shadow: 0 12px 10px -10px rgba(0, 0, 0, 0.2);
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
    border-radius: 12px;
    flex: 1;
}

.card-redondeado-recto .btn-quick {
    border-radius: 4px;
}

.btn-quick .material-symbols-outlined,
.btn-quick svg {
    font-size: 32px;
    width: 32px;
    height: 32px;
}

.btn-quick .btn-text {
    font-size: 0.85rem;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: -1px;
    line-height: 1.1
}

/* Colores específicos para reforzar la acción */
.btn-call {
    background: var(--primary);
    background: #37474F;
    background: #EA4335
}

.btn-quick .material-symbols-outlined {
    color: #fff
}



.wifi-card span {
    z-index: 1;
    position: relative;
}

.menu-card .watermark-icon {
    position: absolute;
    top: -22px;
    right: -24px;
    font-size: 7rem !important;
    opacity: 0.12;
    transform: rotate(-7deg);
    pointer-events: none;
    z-index: 0;
    color: var(--primary);
}

[data-theme="dark"] .menu-card .watermark-icon {
    color: var(--text-);
    opacity: 0.06;
}

.vcard-promo-card .watermark-icon {
    right: unset;
    left: 0;
}

.menu-card h4 {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    font-family: var(--font-titles);
    /*border-bottom:1px solid var(--border);*/
    margin-bottom: 8px;
    color: var(--primary);
    line-height: 1.3;
}

[data-theme="dark"] .menu-card h4 {
    color: var(--text);
}

.wifi-ssid {
    font-size: 0.9rem;
    font-weight: 300;
    border: 1px dashed var(--border);
    width: 100%;
    text-align: center;
    padding: 6px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .4);
    backdrop-filter: blur(3px);
    margin-top: auto;
    word-wrap: break-word;
    white-space: normal;
    line-height: 1;
    margin-bottom: 8px;
}

[data-theme="dark"] .wifi-ssid {
    background: rgba(0, 0, 0, .3);
}

.schedule-list {
    backdrop-filter: blur(3px);
    color: var(--text-muted);
}

.schedule-list li {
    padding: 3px 4px
}

.btn-whatsapp {
    background: #25D366;
}

.btn-whatsapp svg {
    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.4));
    fill: #fff;
}

.btn-email {
    background: var(--text);
    background: #5c6168;
}

.btn-maps {
    background: #5086f3;
}

.btn-quick:hover {
    transform: scale(1.03);
    filter: brightness(1.1);
}

.btn-quick:active {
    transform: scale(0.96);
    filter: brightness(0.9);
}



.action-info {
    display: block;
    font-weight: 400;
}

.action-info p {
    font-size: .9rem;
    line-height: 1.2;
    margin-bottom: 8px;
    font-weight: 300;
    color: var(--text-muted);
}

.menu-card .action-icon {
    background: var(--primary);
    color: #fff;
}


/* --- REDES SOCIALES (NUEVO DISEÑO) --- */


.social-links-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-content: center;
    position: relative;
    padding: 8px 0 0;
}

.social-links-grid.centered {
    height: 100%;
    justify-content: center;
}

.social-link-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-decoration: none;
    transition: var(--transition);

    /* --- CLAVE PARA EL ANCHO IGUAL --- */
    flex: 0 0 18%;
    /* No crece, no se encoge, base de 80px */
}

.social-icon-wrapper {
    width: 48px;
    height: 48px;
    /*background: var(--theme-bg-light);*/
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    transition: var(--transition);
    background: var(--sheet);
}

[data-theme="dark"] .social-icon-wrapper {
    background: var(--theme-bg);
}

.card-redondeado-recto .social-icon-wrapper {
    border-radius: 3px;
}

.social-icon-wrapper svg {
    width: 32px;
    height: 32px;
    transition: var(--transition);
}

.social-link-item:hover .social-icon-wrapper {
    transform: translateY(-3px);
    background: var(--sheet);
    box-shadow: 0 8px 15px -3px var(--color-highlight);
}

.social-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-align: center;
}

.social-footer-hint {
    display: block;
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-style: italic;
    line-height: 1.2;
    text-align: center;
}



.contact-card {
    /*padding:calc(var(--container-padding) / 2);*/
    justify-content: center;
}

.contact-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

.contact-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    font-size: 1.1rem;
    color: var(--text-muted);
    border-bottom: 1px solid var(--theme-bg-light);
    line-height: 1.4;
}

/* Eliminamos la línea del último elemento */
.contact-list li:last-child {
    border-bottom: none;
}

/* Estilo para los iconos (Material y SVG) */
.contact-list li .contact-list-icon,
.contact-list li svg {
    font-size: 1.4rem;
    width: 1.2rem;
    height: 1.2rem;
    color: var(--text-muted);
    fill: var(--text-muted);
    opacity: 0.6;
    flex-shrink: 0;
}



.platform-instagram svg {
    fill: #E1306C;
}

.platform-facebook svg {
    fill: #1877F2;
}

.platform-tiktok svg {
    fill: #000;
}

[data-theme="dark"] .platform-tiktok svg {
    fill: #fff;
}

.platform-youtube svg {
    fill: #FF0000;
}

.platform-twitter svg {
    fill: #000;
}

[data-theme="dark"] .platform-twitter svg {
    fill: #fff;
}

.platform-linkedin svg {
    fill: #0A66C2;
}

.platform-whatsapp svg {
    fill: #25D366;
}

.platform-telegram svg {
    fill: #2AABEE;
}

.platform-web svg {
    fill: var(--primary);
}



.schedule-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.schedule-list li {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    border-bottom: 1px dashed var(--border);
    /*font-size: .9rem;*/
}

/* --- MAPA --- */

.map-container {
    border-radius: 16px;
    overflow: hidden;
    height: 220px;
    width: 100%;
    background: #eef2f5;
}

#businessMap {
    height: 100%;
    width: 100%;
}


/* FADE SCROLL */
.scroll-fade {
    position: sticky;
    bottom: -30px;
    left: 0;
    width: calc(100% + 32px);
    margin: 0 calc(var(--container-padding) * -1) calc(var(--container-padding) * -1);
    padding: 70px;
    background: #ffffff;
    background: linear-gradient(180deg,
            color-mix(in srgb, var(--sheet), transparent 100%) 0%, var(--sheet) 100%);
    pointer-events: none;
    z-index: 401;
}

/* --- OTROS COMPONENTES --- */
.menu-toggle-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 12;
    background: var(--hamburger-bg);
    color: var(--hamburger-color);
    border: none;
    width: 42px;
    height: 42px;
    border-radius: 4px;
    cursor: pointer;
    transition: 0.2s;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-toggle-btn svg {
    width: 22px;
    height: auto;
    fill: currentColor;
}

body.modal-open .menu-toggle-btn {
    right: -60px;
}


/* ################################## IDIOMAS ################################## */
/*.lang-selector {
    position: absolute; top: 16px; left: -100%; z-index: 100; transition: var(--transition);z-index:501;
}
.modal-open .lang-selector {left: 16px;}
.custom-dropdown { position: absolute; user-select: none;font-family: var(--font-titles); }
.dropdown-selected {
    background: var(--hamburger-bg); color: var(--text);
    height: 42px; padding: 0 12px; border-radius: 4px;
    display: flex; align-items: center; gap: 6px;
    cursor: pointer; font-size: 0.95rem; font-weight: 500;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); transition: var(--transition);
}
.dropdown-selected svg { width: 14px; height: 14px; transition: transform 0.3s; stroke: var(--text); }
.custom-dropdown.open .dropdown-selected svg { transform: rotate(180deg); }

.dropdown-options {
    position: absolute; top: calc(100% + 8px); left: 0;
    background: var(--sheet); border-radius: 6px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15); overflow: hidden; width: max-content;
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: all 0.2s ease; border: 1px solid var(--border);
}
.custom-dropdown.open .dropdown-options {
    opacity: 1; visibility: visible; transform: translateY(0);
}
.dropdown-option {
    padding: 10px 16px; cursor: pointer; transition: background 0.2s;
    font-size: 0.95rem; font-weight: 500; color: var(--text);
}
.dropdown-option:hover { background: var(--theme-bg-light); color: var(--primary); }*/

/* Hide Google Translate Banner completely */
/*.goog-te-banner-frame { display: none !important; }
.goog-te-banner-frame.skiptranslate { display: none !important; }
.skiptranslate iframe { display: none !important; visibility: hidden !important; }
body { top: 0 !important; position: static !important; }
.goog-text-highlight { background-color: transparent !important; box-shadow: none !important; }*/
/* ################## FIN IDIOMAS ################## */

.whatsapp-float {
    position: absolute;
    bottom: 30px;
    right: 20px;
    background-color: #25D366;
    color: #fff;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    z-index: 100;
    transition: transform 0.3s ease;
}

.whatsapp-float:hover {
    transform: scale(1.1);
}

.whatsapp-float svg {
    fill: #fff;
    width: 34px;
    height: 34px;
}

#noResultsMsg {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 40px;
    color: var(--text-muted);
}

#noResultsMsg span {
    font-size: 3rem;
    opacity: 0.2;
    margin-bottom: 10px;
}

.global-overlay {
    position: absolute;
    inset: 0;
    /*background: rgba(0, 0, 0, 0.5);*/
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    z-index: 12;
    border-radius: inherit;
    background: hsl(from var(--primary) h 30% 6% / 0.8);
}

.global-overlay.active {
    opacity: 1;
    visibility: visible;
    cursor: pointer;
}

/* Animaciones */
@keyframes categoryHighlight {

    0%,
    100% {
        background: transparent;
    }

    50% {
        background: var(--color-highlight);
    }
}

.category-block.highlight {
    animation: categoryHighlight 1s ease;
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {

    html,
    body {
        height: auto;
        overflow: visible;
        display: block;
    }

    #app-wrap {
        max-width: 100%;
        min-width: 100%;
        height: auto;
        max-height: none;
        border-radius: 0;
        box-shadow: none;
        overflow: visible;
        display: block;
    }

    .app-content {
        overflow-y: visible;
        display: block;
    }

    body {
        padding: 0;
        background: var(--sheet);
    }

    /* Adaptar elementos flotantes al viewport nativo */
    .bottom-sheet {
        position: fixed;
        bottom: 0;
        max-width: 100vw;
    }

    .global-overlay {
        position: fixed;
    }

    .whatsapp-float {
        position: fixed;
        bottom: 20px;
        right: 20px;
    }
}

@media (min-width: 601px) and (max-width: 768px) {
    .hero.has-portada .portada {
        aspect-ratio: 16 / 5;
    }

    .product-card-wrapper {
        grid-template-columns: 1fr 1fr;
        gap: 15px;
        display: grid;
        padding: 0 var(--container-padding);
    }
}

@media (max-width: 600px) {

    /*.social-links-grid { justify-content: space-around; }*/
    #dev-tool-panel {
        display: none;
    }
}

/* --- EXPERIMENTAL: Grid Layout (2 columnas) --- 
   Para activar: añadir class "grid" a .product-card-wrapper
------------------------------------------------- */
.grid .product-card-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--container-padding) / 2);
}

.grid .product-card-wrapper .product-card {
    flex-direction: column-reverse;
    /* Imagen arriba, info abajo */
    align-items: stretch;
    gap: 10px;
    height: 100%;
}

.grid .product-card-wrapper .item-media {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
}

.card-redondeado-recto .grid .product-card-wrapper {
    border-radius: 3px
}

/*.grid .product-card-wrapper .item-img {
    border-radius: 12px;
}*/

.grid .product-card-wrapper .product-title {
    font-size: 1.1rem;
    line-height: 1.1;
}

.grid .product-card-wrapper .product-desc {
    -webkit-line-clamp: 2;
    font-size: 0.9rem;
}

/* Ajustes específicos para el modo compacto cuando es GRID */
.card-espaciado-compacto .grid .product-card-wrapper {
    padding: 0;
    gap: 0;
}

.card-espaciado-compacto .grid .product-card-wrapper .product-card {
    border: none;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    border-radius: 0 !important;
    padding: 12px;
}

/* Bordes superiores para la primera fila del grid */
.card-espaciado-compacto .grid .product-card-wrapper .product-card:nth-child(1),
.card-espaciado-compacto .grid .product-card-wrapper .product-card:nth-child(2) {
    border-top: 1px solid var(--border);
}

/* Bordes izquierdos para la primera columna del grid */
.card-espaciado-compacto .grid .product-card-wrapper .product-card:nth-child(2n-1) {
    border-left: 1px solid var(--border);
}

.card-espaciado-compacto .grid .product-card-wrapper .item-img {
    border-radius: 2px;
}

[data-theme="dark"] .card-espaciado-compacto .grid .product-card-wrapper,
[data-theme="dark"] .card-espaciado-compacto .grid .product-card-wrapper .product-card,
[data-theme="dark"] .card-espaciado-compacto .grid .product-card-wrapper .product-card:nth-child(2n-1),
[data-theme="dark"] .card-espaciado-compacto .grid .product-card-wrapper .product-card:nth-child(2),
[data-theme="dark"] .card-espaciado-compacto .product-card-wrapper,
[data-theme="dark"] .card-espaciado-compacto .product-card-wrapper .product-card:nth-child(2n-1),
[data-theme="dark"] .card-espaciado-compacto .product-card-wrapper .product-card:nth-child(2),
[data-theme="dark"] .card-espaciado-compacto .grid .product-card-wrapper .product-card {
    border-color: var(--theme-bg-light) !important;
    border-width: 2px !important;
}

.grid .featured-tag-content {
    width: 100%;
}

/*.grid .product-title {display: block !important;}*/

/* --- Sección de Alérgenos en Detalle --- */
.allergens-container {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.allergens-title {
    font-size: 0.8rem;
    text-transform: uppercase;
    color: var(--text-muted);
    /*letter-spacing: 0.05em;*/
    font-weight: 300;
    font-family: var(--font-titles);
}

.allergens-text {
    font-size: 0.95rem;
    color: var(--text);
    line-height: 1.5;
    font-weight: 300;
}

/*
.powered-by img {
	width: 220px;
	height: auto;
	margin-top: 6px;
}
*/
.powered-by {
    color: var(--text-muted);
    font-size: 0.75rem;
    gap: 5px;
    display: flex;
    flex-direction: column;
}


footer.footer {
    margin-top: auto;
    padding: 20px 40px;
    font-size: 0.875rem;
    color: var(--text-muted);
    border-top: 1px solid var(--border-color);
    text-align: center;
}

footer.footer a svg {
    opacity: .8;
    transition: var(--transition)
}

footer.footer a:hover svg {
    opacity: 1;
    transform: scale(1.05);
}

footer.footer svg {
    width: 220px;
    margin-top: 4px;
    max-width: 100%;
}

[data-theme="dark"] footer.footer svg {
    fill: #fff;
}

footer.footer svg path:first-child {
    fill: var(--primary);
}