/* VARIABLES Y RESET */
:root {
    /* MIDNIGHT LUXURY PALETTE */
    --bg-dark: #050505;
    /* Deepest Black */
    --bg-darker: #000000;
    /* Pure Black */
    --bg-card: #121212;
    /* Rich Charcoal */

    --text-main: #EAEAEA;
    /* Softened White */
    --text-muted: #999999;
    /* Elegant Grey */

    --accent: #D4AF37;
    /* Champagne Gold (Metallic) */
    --gold: #D4AF37;
    /* Alias for consistency */
    --accent-hover: #F6CF57;
    /* Lighter Gold */

    --border-subtle: rgba(212, 175, 55, 0.2);
    /* For premium borders */

    --font-heading: 'Oswald', sans-serif;
    --font-body: 'Roboto', sans-serif;

    /* Editor UI Colors */
    --edit-mode-border: rgba(212, 175, 55, 0.8);
    --danger: #ff4444;

    /* Badge Colors (Conserved) */
    --badge-gold: #D4AF37;
    --badge-red: #ff4444;
    --badge-green: #4CAF50;
    --badge-blue: #2196F3;
    --badge-black: #333;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-main);
    font-family: var(--font-body);
    line-height: 1.6;
    transition: opacity 0.3s ease;
}

body.loading {
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
}

/* --- PROTECCIÓN UI EDITOR (QA BRAND) --- */
.modal-overlay,
.dock-container,
.admin-bar,
#status-overlay,
.toast,
.branding-sheet {
    font-family: 'Syne', sans-serif !important;
}

.modal-overlay h1,
.modal-overlay h2,
.modal-overlay h3,
.modal-overlay h4,
.modal-overlay p,
.modal-overlay button:not(.font-theme-btn),
.dock-container h1,
.dock-container h2,
.dock-container h3,
.dock-container h4,
.dock-container p,
.dock-container button,
.admin-bar h1,
.admin-bar h2,
.admin-bar h3,
.admin-bar h4,
.admin-bar p,
.admin-bar button,
#status-overlay h1,
#status-overlay h2,
#status-overlay h3,
#status-overlay h4,
#status-overlay p,
#status-overlay button,
.toast h1,
.toast h2,
.toast h3,
.toast h4,
.toast p,
.toast button,
.login-box h1,
.login-box h2,
.login-box h3,
.login-box h4,
.login-box p,
.login-box button {
    font-family: 'Syne', sans-serif !important;
}

h1,
h2,
h3,
h4 {
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 1px;
}

img {
    max-width: 100%;
}

a {
    text-decoration: none;
    color: inherit;
    transition: 0.3s;
}

ul {
    list-style: none;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.highlight {
    color: var(--accent);
}

.section {
    padding: 80px 0;
}

.section-title {
    font-size: 3rem;
    text-align: center;
    margin-bottom: 60px;
    position: relative;
    display: inline-block;
    width: 100%;
}

.bg-darker {
    background-color: var(--bg-darker);
}

/* BOTONES */
.btn {
    display: inline-block;
    padding: 12px 30px;
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1.1rem;
    border: none;
    cursor: pointer;
    transition: 0.3s;
}

.btn-primary {
    background-color: var(--accent);
    color: var(--bg-dark);
}

.btn-primary:hover {
    background-color: var(--accent-hover);
    transform: translateY(-2px);
}

.full-width {
    width: 100%;
}

/* PREMIUM CTA BUTTON */
.gold-cta {
    background-color: #D4AF37;
    color: #000;
    border: none;
    padding: 12px 30px;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.gold-cta:hover {
    background-color: #f6cf57;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
}

/* NAVBAR */
.navbar {
    background-color: rgba(18, 18, 18, 0.95);
    height: 80px;
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;

    /* FÓRMULA DE ALINEACIÓN MAESTRA */
    /* Calcula el espacio sobrante a los lados de 1200px y lo usa de margen */
    box-sizing: border-box;
    padding-left: max(20px, calc((100% - 1200px) / 2 + 20px)) !important;
    padding-right: max(20px, calc((100% - 1200px) / 2 + 20px)) !important;
}

.logo-text {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 2px;
    line-height: 1.1;
    /* Tighter wrap */
}

.logo-img img {
    height: 50px;
    /* Ajustar según logo */
}

.nav-links {
    display: flex;
    gap: 30px;
}

.nav-links li a {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 500;
}

.nav-links li a:hover {
    color: var(--accent);
}

/* --- ACTIVE NAV LINK (SCROLL SPY) --- */
.nav-links li a.active {
    color: var(--accent) !important;
    text-shadow: 0 0 10px rgba(255, 202, 40, 0.4);
    /* Brillo dorado sutil */
    position: relative;
}

/* Línea inferior animada para el activo */
.nav-links li a.active::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--accent);
    box-shadow: 0 0 8px var(--accent);
    animation: expandWidth 0.3s ease;
}

@keyframes expandWidth {
    from {
        width: 0;
        opacity: 0;
    }

    to {
        width: 100%;
        opacity: 1;
    }
}

.hamburger {
    display: none;
    font-size: 1.5rem;
    cursor: pointer;
}

/* =========================================
   HERO SECTION CON DUAL FOCUS
   ========================================= */

.hero {
    /* --- Lógica de Variables (Dual Focus) --- */
    /* 1. Definimos variables por defecto (PC) */
    --hero-pos-x: 50%;
    --hero-pos-y: 50%;
    --hero-scale: 1;

    /* 2. Definimos variables por defecto (MÓVIL) */
    --hero-pos-x-mobile: 50%;
    --hero-pos-y-mobile: 50%;
    --hero-scale-mobile: 1;

    /* --- Propiedades Estructurales Originales --- */
    height: 100vh;
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));
    background-color: #111;
    /* Fallback */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-top: -80px;
    /* Counteract nav height */
    padding-top: 80px;
    position: relative;
    overflow: hidden;
    /* Evita desbordes por el escalado de imagen */

    /* --- Aplicación del Dual Focus (PC) --- */
    /* Usamos !important para asegurar que las variables dinámicas ganen a estilos previos */
    background-position: var(--hero-pos-x) var(--hero-pos-y) !important;
    background-size: calc(100% * var(--hero-scale)) auto !important;
    background-repeat: no-repeat !important;

    /* Transiciones suaves para cambios entre dispositivos o edición */
    transition: background-position 0.1s linear, background-size 0.1s linear;
}

/* --- Ajustes para Móvil --- */
@media (max-width: 768px) {
    .hero {
        /* 4. CAMBIO AUTOMÁTICO A VARIABLES MÓVILES */
        background-position: var(--hero-pos-x-mobile) var(--hero-pos-y-mobile) !important;

        /* Fórmula de Zoom para Móvil (Auto width) */
        background-size: auto calc(100% * var(--hero-scale-mobile)) !important;
    }
}

/* --- Contenido del Hero (Sin cambios) --- */
.hero-content h1 {
    font-size: 5rem;
    line-height: 1.1;
    margin-bottom: 20px;
}

.hero-content p {
    font-size: 1.5rem;
    margin-bottom: 40px;
    color: #ddd;
}

/* MENU CATEGORIES */
.menu-category {
    margin-bottom: 60px;
    position: relative;
    padding: 20px;
    border-radius: 8px;
    transition: 0.3s;
}

/* --- COLLAPSE ANIMATION LOGIC --- */
.menu-grid {
    /* Base State: Open */
    max-height: 3000px;
    /* Enough for large menus */
    opacity: 1;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
    /* Smooth acceleration */
    transform-origin: top;
}

.menu-category.collapsed .menu-grid {
    /* Collapsed State */
    max-height: 0;
    opacity: 0;
    margin: 0;
    pointer-events: none;
}

/* Ensure padding doesn't break collapse if applied to grid */
.menu-category.collapsed {
    padding-bottom: 0;
    /* Remove bottom padding when closed */
}

/* EXPANDED (EDIT MODE): Dashed "Work Zone" */
/* EXPANDED (EDIT MODE): Dashed "Work Zone" - REMOVED BORDER TO AVOID DOUBLE FRAMES */
.mode-editing .menu-category {
    background-color: #1e1e1e;
}

/* COLLAPSED (EDIT MODE): Solid "Closed Folder" */
.mode-editing .menu-category.collapsed {
    border: 1px solid #333;
    border-left: 4px solid var(--accent);
    /* Solid Spine */
}

.category-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
    margin-bottom: 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    /* Matches Item Footer Line */
    padding-bottom: 10px;
    padding-bottom: 10px;
}

.category-title {
    font-size: 2.2rem;
    color: var(--accent);
    margin: 0;
    line-height: 1.1;
    flex-grow: 1;
    /* Pushes controls to the right */
    /* Tighter wrap */
}

.category-controls {
    display: none;
    gap: 10px;
}

.mode-editing .category-controls {
    display: flex;
}

.cat-btn {
    background: #333;
    color: #fff;
    border: none;
    border: none;
    width: 30px;
    /* Smaller */
    height: 30px;
    /* Smaller */
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cat-btn:hover {
    background: var(--accent);
    color: var(--bg-dark);
}

.cat-btn.delete {
    background: var(--danger);
    color: white;
}

.cat-btn.delete:hover {
    background: #d32f2f;
}

/* MENU GRID */
.menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
}

/* ================================================= */
/* 🚀 OPTIMIZACIÓN CARTA DIGITAL (CPO AUDIT FIX) */
/* ================================================= */

/* 1. TARJETA DE PRODUCTO: Ritmo Vertical Perfecto */
.menu-item {
    background-color: #1e1e1e;
    /* Reservamos 1px de borde por todos lados (transparente) para evitar saltos */
    border: 1px solid transparent;
    /* Mantenemos tu borde izquierdo de acento (sobrescribe al border general en ese lado) */
    border-left: 4px solid var(--accent);

    border-radius: 8px;
    padding: 25px;
    /* Padding interno */
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 15px;
    height: 100%;

    /* Transición suave para el color de fondo y borde */
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

/* --- PASO 2: ESTILO DE TARJETA EN MODO EDICIÓN --- */
.mode-editing .menu-item {
    /* Fondo un poco más claro para distinguir modo edición */
    background-color: #252525 !important;

    /* Borde discontinuo amarillo (Work Zone) */
    border: 1px dashed rgba(255, 202, 40, 0.5);

    /* IMPORTANTE: Mantenemos la línea gruesa a la izquierda */
    border-left: 4px solid var(--accent);

    /* Anulamos efectos de hover del modo vista (efecto plano técnico) */
    transform: none !important;
    box-shadow: none !important;
}

/* Feedback visual al pasar el ratón en modo edición */
.mode-editing .menu-item:hover {
    border-color: var(--accent);
    /* El borde dashed se ilumina */
    background-color: #2a2a2a !important;
}

.menu-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
    background-color: #232323;
    /* Feedback sutil al hover */
}

/* 2. TIPOGRAFÍA Y JERARQUÍA */
.item-header {
    margin-bottom: 0;
    /* El gap del padre se encarga */
}

.item-name {
    font-size: 1.8rem;
    /* Ajustado para móviles */
    line-height: 1.1;
    margin: 0;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.item-desc {
    color: #aaa;
    /* Un poco más claro para legibilidad */
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
    flex-grow: 1;
    /* Empuja el precio y footer hacia abajo */
}

/* 3. PRECIO: Visible pero no agresivo */
.item-price {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    /* Reducido de 1.8rem */
    color: var(--accent);
    font-weight: 700;
    text-align: right;
    margin-top: auto;
    /* Se asegura de estar al final del contenido */
    padding-top: 10px;
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
    /* Separador sutil */
    width: 100%;
}

/* 4. ALÉRGENOS: Limpieza Visual */
.allergen-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    /* El gap del padre controla el espacio */
    min-height: 32px;
    /* Evita saltos si está vacío */
}

/* Iconos más limpios */
.allergen-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;


    /* DISEÑO "GHOST": Sin borde, fondo sutil */
    background: rgba(255, 255, 255, 0.05);


    cursor: pointer;
    transition: all 0.2s ease;
}

.allergen-icon img {
    width: 20px;
    /* Icono interior equilibrado */
    height: 20px;
    object-fit: contain;
    filter: grayscale(0.5);
    /* Sutilmente apagado por defecto */
    transition: filter 0.2s;
}

.allergen-icon:hover {

    border-color: var(--accent);
    transform: scale(1.1);
}

.allergen-icon:hover img {
    filter: grayscale(0);
    /* A todo color al pasar el mouse */
}

/* Botón de Añadir (+) Integrado */
.allergen-add-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px dashed #555;
    color: #555;
    display: flex;
    /* Flex para centrar */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.8rem;
}

.mode-editing .allergen-add-btn:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: rgba(255, 202, 40, 0.1);
}

/* BADGES */
/* Badge Wrapper for Positioning */
.badge-wrapper {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 5;
    display: inline-flex;
    /* Shrink to fit content */
    align-items: flex-start;
    /* Align top */
}

/* Badge inside wrapper */
.product-badge {
    position: relative;
    /* Reset absolute */
    top: auto;
    left: auto;
    z-index: 1;
    margin: 0;
    /* Reset margins */
    display: block;
    /* Ensure block behavior inside flex */
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    background-color: var(--badge-black);
    min-width: 10px;
    min-height: 20px;
    cursor: default;
}

/* Color classes for JS toggle */
.badge-gold {
    background-color: var(--badge-gold);
    color: #000;
}

.badge-red {
    background-color: var(--badge-red);
}

.badge-green {
    background-color: var(--badge-green);
}

.badge-blue {
    background-color: var(--badge-blue);
}

.badge-black {
    background-color: var(--badge-black);
}

/* Hide empty badges in view mode only */
body:not(.mode-editing) .product-badge:empty {
    display: none;
}

/* In edit mode, show empty badges as placeholder */
/* In edit mode, show empty badges as placeholder */
.mode-editing .product-badge:empty {
    display: inline-flex;
    /* Use Flex for centering */
    align-items: center;
    justify-content: center;
    background-color: #333;
    width: 30px;
    height: 30px;
    border: 0px dashed #666;
    border-radius: 50%;
    padding: 0 !important;
    /* Killer of centering */
    margin: 0;
}

/* OVERRIDES: If it has a color class, SHOW IT even if empty */
.mode-editing .product-badge.badge-gold:empty {
    background-color: var(--badge-gold);
    border-color: #fff;
}

.mode-editing .product-badge.badge-red:empty {
    background-color: var(--badge-red);
    border-color: #fff;
}

.mode-editing .product-badge.badge-green:empty {
    background-color: var(--badge-green);
    border-color: #fff;
}

.mode-editing .product-badge.badge-blue:empty {
    background-color: var(--badge-blue);
    border-color: #fff;
}

.mode-editing .product-badge.badge-black:empty {
    background-color: var(--badge-black);
    border-color: #fff;
}

.mode-editing .product-badge:empty::before {
    content: '+';
    color: #888;
    font-size: 1.4rem;
    /* Larger + */
    line-height: 1;
    font-weight: bold;
}

/* Contrast adjustment for the '+' on colored badges */
.mode-editing .product-badge.badge-gold:empty::before {
    color: #000;
}

.mode-editing .product-badge[class*="badge-"]:not(.badge-gold):empty::before {
    color: #fff;
    opacity: 0.8;
}

/* FIX: Ensure color persists when typing (Focus State Override) */
.mode-editing .product-badge.badge-gold:focus {
    background-color: var(--badge-gold) !important;
    color: #000;
}

.mode-editing .product-badge.badge-red:focus {
    background-color: var(--badge-red) !important;
    color: #fff;
}

.mode-editing .product-badge.badge-green:focus {
    background-color: var(--badge-green) !important;
    color: #fff;
}

.mode-editing .product-badge.badge-blue:focus {
    background-color: var(--badge-blue) !important;
    color: #fff;
}

.mode-editing .product-badge.badge-black:focus {
    background-color: var(--badge-black) !important;
    color: #fff;
}

/* Delete Badge Button */
.del-badge-btn {
    position: absolute;
    /* Absolute relative to WRAPPER */
    top: -8px;
    right: -8px;
    width: 20px;
    height: 20px;
    background: #D32F2F;
    opacity: 1 !important;
    color: white;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    border: 2px solid #fff;
    z-index: 10;
}

/* Logic: Show button by default (if not empty) */
.mode-editing .badge-wrapper .product-badge:not(:empty)+.del-badge-btn {
    display: flex;
}

/* Logic: If Badge is EMPTY, Default to HIDDEN (covers Black and No-Class) */
.mode-editing .badge-wrapper .product-badge:empty+.del-badge-btn {
    display: none;
}

/* Logic: BUT if Badge is empty AND has a special color, Show it (so you can remove the color) */
.mode-editing .badge-wrapper .product-badge.badge-gold:empty+.del-badge-btn,
.mode-editing .badge-wrapper .product-badge.badge-red:empty+.del-badge-btn,
.mode-editing .badge-wrapper .product-badge.badge-green:empty+.del-badge-btn,
.mode-editing .badge-wrapper .product-badge.badge-blue:empty+.del-badge-btn {
    display: flex;
}

/* Hover effect in edit mode */
.mode-editing .product-badge:hover {
    opacity: 0.8;
    cursor: pointer;
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}

/* RESERVATIONS */
.reservation-form-container {
    max-width: 600px;
    margin: 0 auto;
    background-color: var(--bg-card);
    padding: 40px;
    border-radius: 4px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-family: var(--font-heading);
    font-size: 1.1rem;
}

.form-group input {
    width: 100%;
    padding: 12px;
    background-color: #121212;
    border: 1px solid #333;
    color: #fff;
    font-family: var(--font-body);
}

.form-group input:focus {
    outline: none;
    border-color: var(--accent);
}

/* LOCATION */
.location-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

.hours-container {
    padding: 20px;
    background-color: var(--bg-card);
    height: 100%;
}

.hours-container h3 {
    font-size: 2rem;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--accent);
    padding-bottom: 10px;
    display: inline-block;
    line-height: 1.1;
    /* Tighter wrap */
}

.hours-table {
    width: 100%;
    margin-bottom: 30px;
    font-size: 1.2rem;
}

.hours-table td {
    padding: 10px 0;
    border-bottom: 1px solid #333;
}

.text-right {
    text-align: right;
    color: var(--accent);
    font-weight: 700;
    font-family: var(--font-heading);
}

.contact-info p {
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.contact-info i {
    color: var(--accent);
    margin-right: 10px;
    width: 20px;
    text-align: center;
}

/* FOOTER */
footer {
    background-color: #000;
    padding: 40px 0;
    text-align: center;
}

.social-links {
    margin-bottom: 20px;
}

.social-links a {
    font-size: 1.5rem;
    margin: 0 15px;
    color: #fff;
}

.social-links a:hover {
    color: var(--accent);
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .section-title {
        font-size: 2.5rem;
    }

    .hero-content h1 {
        font-size: 3rem;
    }

    .nav-links {
        display: none;
        flex-direction: column;

        /* CAMBIO CLAVE: 'fixed' escapa del 'overflow: hidden' del padre */
        position: fixed;
        top: 80px;
        left: 0;
        width: 100%;

        background-color: var(--bg-darker);
        padding: 20px;
        text-align: center;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        /* Detalle visual extra */
        z-index: 1001;
        /* Asegura estar encima de todo */
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
        /* Sombra potente */
    }

    .nav-links.active {
        display: flex;
    }

    .hamburger {
        display: block;
    }

    .location-grid {
        grid-template-columns: 1fr;
    }
}

/* --- EDITOR VISUAL STYLES --- */



/* PREMIUM CONFIG BUTTON */

/* REVIEW GLORY CTA (Premium Menu Style) */

/* REVIEW GLORY CTA (Editor Style) */
.review-glory-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Dark card background to match editor aesthetic */
    background-color: var(--bg-card);
    border: 1px solid var(--accent);
    color: var(--text-main);
    text-decoration: none;
    padding: 20px 30px;
    border-radius: 8px;
    margin: 0 auto 25px auto;
    max-width: 100%;
    width: 340px;
    text-align: center;
    position: relative;
    letter-spacing: 1px;
    /* Subtle Floating Animation */
    animation: float-gold 4s ease-in-out infinite;
    /* Base shadow */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
}

.review-glory-btn:hover {
    background-color: var(--bg-darker);
    border-color: #fff;
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(255, 202, 40, 0.2);
}

.review-glory-btn .stars {
    font-size: 1.4rem;
    margin-bottom: 8px;
    color: var(--accent);
    text-shadow: 0 0 5px rgba(255, 202, 40, 0.3);
}

.review-glory-btn span {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--accent);
    /* Headline in gold */
    margin-bottom: 4px;
    letter-spacing: 2px;
}

.review-glory-btn small {
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--text-muted);
    font-style: italic;
}

/* Floating Animation */
@keyframes float-gold {
    0% {
        transform: translateY(0px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
        border-color: rgba(255, 202, 40, 0.6);
    }

    50% {
        transform: translateY(-6px);
        box-shadow: 0 15px 25px rgba(0, 0, 0, 0.3), 0 0 10px rgba(255, 202, 40, 0.2);
        border-color: rgba(255, 202, 40, 1);
    }

    100% {
        transform: translateY(0px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
        border-color: rgba(255, 202, 40, 0.6);
    }
}




.mode-editing [contenteditable="true"]:focus {
    outline: 1px solid var(--accent);
    background-color: rgba(255, 255, 255, 0.05);
    /* Subtle highlight */
}

/* Delete Button on Items */
.delete-btn {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 30px;
    height: 30px;
    background-color: var(--danger);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 2px solid var(--bg-card);
    font-size: 0.9rem;
    display: none;
    /* Hidden by default */
    z-index: 10;
}

.mode-editing .delete-btn {
    display: flex;
    animation: popIn 0.3s ease;
}

.delete-btn:hover {
    background-color: #d32f2f;
    transform: scale(1.1);
}

/* Add Item Button */
.add-item-container {
    display: none;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

.mode-editing .add-item-container {
    display: flex;
}

.add-item-btn {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--accent);
    border: 2px dashed var(--accent);
    font-size: 2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}

.add-item-btn:hover {
    background-color: rgba(255, 202, 40, 0.1);
    transform: scale(1.1);
}

/* Badge Color Picker */
.badge-color-picker {
    position: absolute;
    background: #333;
    border: 1px solid var(--gold);
    padding: 5px;
    border-radius: 20px;
    display: flex;
    gap: 5px;
    z-index: 10000;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    animation: fadeIn 0.1s ease;
}

.color-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: transform 0.2s;
}

.color-dot:hover {
    transform: scale(1.2);
    border-color: #fff;
}

/* MODO EDICIÓN: Feedback Visual Global (Robustez para Móvil y PC) */
@keyframes editPulse {
    0% {
        border-color: var(--accent);
        background-color: rgba(212, 175, 55, 0.1);
    }

    50% {
        border-color: rgba(255, 255, 255, 0.5);
        background-color: rgba(212, 175, 55, 0.05);
    }

    100% {
        border-color: var(--accent);
        background-color: rgba(212, 175, 55, 0.1);
    }
}

.mode-editing .item-name,
.mode-editing .item-price,
.mode-editing .item-desc,
.mode-editing .category-title,
.mode-editing h2,
.mode-editing [contenteditable="true"] {
    /* ESTADO PASIVO: Marco dorado visible pero sutil */
    /* Usuario pide outline offset 4px */
    outline: 1px dashed rgba(212, 175, 55, 0.6) !important;
    outline-offset: 4px;
    border: none !important;
    /* Quitar border físico */

    transition: all 0.3s ease;
    cursor: text;
    padding: 2px;
    border-radius: 4px;
    position: relative;
    z-index: 10;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* FIX: Section Title hug text (avoid full width box) */
.mode-editing .section-title {
    /* IMPORTANTE: Quitamos borders/outlines del contenedor padre H2 */
    outline: none !important;
    border: none !important;
    display: block;
    /* Volver a block normal, ya que el outline va al hijo */
}

/* ESTADO ACTIVO (FOCUS/HOVER): Brillante, sólido y latiendo */
.mode-editing [contenteditable="true"]:hover,
.mode-editing [contenteditable="true"]:focus,
.mode-editing .item-name:hover,
.mode-editing .item-price:focus {
    border: 1px solid var(--accent) !important;
    /* Borde sólido al editar */
    background-color: rgba(212, 175, 55, 0.05);
    outline: none;
    animation: editPulse 2s infinite ease-in-out;
    /* LATIDO ACTIVADO */
    z-index: 20;
    /* Traer al frente */
}

/* Excepciones específicas */
.mode-editing .hero-text-1[contenteditable="true"],
.mode-editing h2[contenteditable="true"] {
    border: 1px dashed rgba(212, 175, 55, 0.3);
}

.color-dot.gold {
    background-color: var(--badge-gold);
}

.color-dot.red {
    background-color: var(--badge-red);
}

.color-dot.green {
    background-color: var(--badge-green);
}

.color-dot.grey {
    background-color: var(--badge-black);
}

.color-dot.blue {
    background-color: var(--badge-blue);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Image Editing Helper (Solo Fotos de Producto) */
.mode-editing .item-img img {
    cursor: pointer;
}

.mode-editing .item-img img:hover {
    opacity: 0.8;
    outline: 3px solid var(--accent);
}

/* BADGE COLOR PICKER */
.badge-color-picker {
    position: absolute;
    background-color: var(--bg-card);
    border: 1px solid var(--accent);
    padding: 8px;
    border-radius: 20px;
    display: flex;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    z-index: 10000;
    animation: fadeIn 0.2s ease;
}

.color-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform 0.2s;
}

.color-dot:hover {
    transform: scale(1.2);
    border-color: #fff;
}

.color-dot.gold {
    background-color: var(--badge-gold);
}

.color-dot.red {
    background-color: var(--badge-red);
}

.color-dot.green {
    background-color: var(--badge-green);
}

.color-dot.grey {
    background-color: #333;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Edit Mode Badge Cursor */
.mode-editing .product-badge {
    cursor: pointer !important;
}

/* ------------------------------------------------ */
/* IMAGES: STRICT 4:3 RATIO & PAN/SCAN SUPPORT      */
/* ------------------------------------------------ */

/* 1. El Contenedor (Marco) */
.menu-item .item-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    /* Fuerza la proporción rectangular */
    position: relative;
    /* Necesario para contener la imagen absoluta */
    overflow: hidden;
    border-radius: 4px;
    margin-bottom: 15px;
    background-color: var(--bg-darker);
}

/* 2. La Imagen (Relleno) */
/* 2. La Imagen (Relleno & Pan/Scan) */
.menu-item .item-img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;

    /* 🔥 CLAVE 1: Origen desde el centro (igual que en el editor V14) */
    transform-origin: center center !important;

    /* 🔥 CLAVE 2: Posición base al centro */
    object-position: 50% 50%;

    transition: transform 0.3s ease;
    user-select: none;
    -webkit-user-drag: none;
}

/* 3. Cursor de "Mano" en modo edición */
.mode-editing .menu-item .item-img img {
    cursor: move;
}

/* 4. Feedback visual al pasar el mouse en modo edición */
.mode-editing .menu-item .item-img:hover img {
    opacity: 0.9;
    transform: scale(1.02);
}

/* 5. Feedback al ARRASTRAR (Active) - Transparencia para encuadre */
.mode-editing .menu-item .item-img:active img {
    opacity: 0.6;
    /* Ver a través para ajustar mejor */
    transition: none;
    /* Respuesta instantánea */
    cursor: grabbing;
}

/* Efecto Hover (View Mode) */
body:not(.mode-editing) .menu-item:hover .item-img img {
    transform: scale(1.05);
    /* Zoom normal solo en vista cliente */
}

/* ------------------------------------------------ */
/* MOBILE SPECIFIC: FUN SOCIAL TITLE                */
/* ------------------------------------------------ */
@media (max-width: 768px) {
    #edit-social-btn {
        position: relative;
        /* Ensure containment */
        overflow: visible;
        /* Allow tooltip popup */
    }

    #edit-social-btn::after {
        content: attr(title);
        opacity: 1 !important;
        visibility: visible !important;

        /* Positioning */
        position: absolute;
        top: -35px;
        /* Floats above */
        left: 50%;
        right: auto !important;
        /* Override .admin-btn right:70px */

        /* Fun Style */
        transform: translateX(-50%) rotate(-6deg);
        background-color: var(--gold);
        color: #000;
        font-family: 'Syne', sans-serif;
        font-weight: 800;
        font-size: 0.8rem;
        padding: 4px 12px;
        border: 2px solid #000;
        box-shadow: 3px 3px 0px rgba(0, 0, 0, 1);
        border-radius: 4px;
        white-space: nowrap;
        pointer-events: none;
        z-index: 999;
    }
}

/* Protected Dynamic Date */
.mode-editing .protected-date {
    cursor: help !important;
    border-bottom: 1px dotted var(--accent);
    color: var(--accent);
    font-weight: bold;
}

/* ================================================= */
/* 📱 MOBILE & ADMIN STABILIZER (V3 - FIXED & CLEAN) */
/* ================================================= */

/* 1. ASEGURAR QUE LOS BOTONES FLOTAN SIEMPRE (GLOBAL) */
#admin-controls {
    position: fixed !important;
    /* Fuerza bruta para que flote */
    bottom: 30px;
    right: 30px;
    z-index: 2147483647;
    /* Encima de todo */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    /* FIX: Alinea todos a la derecha */
    gap: 15px;
    /* Importante: El propio botón no debe tener transforms que lo muevan raro */
    transform: none;
}

/* 2. LIMPIEZA DE BASE */
html,
body {
    max-width: 100vw;
    overflow-x: hidden;
    background-color: var(--bg-dark);
}

/* 3. MODO EDICIÓN: Limpio y sin efectos raros */
.mode-editing {
    /* CRÍTICO: Si el body tiene transform, los botones fixed dejan de funcionar. 
       Aquí lo desactivamos a la fuerza. */
    transform: none !important;
    padding-bottom: 150px;
    /* Espacio extra abajo */
}

/* 4. AJUSTES ESPECÍFICOS MÓVIL */
@media (max-width: 768px) {

    /* Reposicionar botones para móvil (Centro-Derecha) */
    /* Reposicionar botones para móvil (Centro-Derecha) */
    #admin-controls {
        top: 50% !important;
        bottom: auto !important;
        right: 15px !important;
        /* Escalado y centrado vertical */
        transform: translateY(-50%) scale(0.9) !important;
        transform-origin: center right !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        z-index: 2147483647 !important;
    }

    /* Fix anti-zoom para textos */
    /* Fix anti-zoom para textos (Badge removed to keep it small) */
    .mode-editing .item-desc,
    .mode-editing input,
    .mode-editing textarea {
        font-size: 16px !important;
    }

    /* Contenedor seguro */
    .mode-editing .container {
        width: 100%;
        overflow: visible;
    }

    /* Botones de borrar (X) */
    .delete-btn {
        right: -5px;
        top: -5px;
    }
}

/* GHOST CATEGORY BUTTON */
.ghost-category-btn {
    display: none;
    /* Oculto en modo normal */
    width: 100%;
    padding: 40px;
    border: 2px dashed var(--accent);
    background-color: rgba(255, 202, 40, 0.05);
    color: var(--accent);
    text-align: center;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    cursor: pointer;
    border-radius: 8px;
    margin-bottom: 60px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.mode-editing .ghost-category-btn {
    display: block;
    /* Visible solo en edición */
}

.ghost-category-btn:hover {
    background-color: rgba(255, 202, 40, 0.15);
    transform: scale(1.01);
    box-shadow: 0 0 20px rgba(255, 202, 40, 0.1);
}

/* --- MOVING FEEDBACK ANIMATION --- */
@keyframes flashGold {
    0% {
        background-color: rgba(255, 202, 40, 0.4);
        box-shadow: 0 0 20px var(--accent);
        z-index: 100;
    }

    50% {
        background-color: rgba(255, 202, 40, 0.2);
    }

    100% {
        background-color: transparent;
        box-shadow: none;
        z-index: auto;
    }
}

.just-moved {
    animation: flashGold 1.2s ease-out;
    scroll-margin-top: 150px;
    /* Offset para que el header no lo tape al hacer scroll */
    border: 2px solid var(--accent);
    /* Borde temporal extra */
}

/* Controles de movimiento en productos (Sobre la foto) */
.item-controls-move {
    display: none;
    /* Oculto por defecto */
    position: absolute;
    top: 10px;
    left: 10px;
    gap: 5px;
    z-index: 20;
    /* Por encima de la foto */
}

.mode-editing .item-controls-move {
    display: flex;
}

.move-btn {
    width: 32px;
    height: 32px;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    transition: 0.2s;
}

.move-btn:hover {
    background: var(--accent);
    color: #000;
    transform: scale(1.1);
}

/* HERO EDIT CONTROLS (PC & MOBILE UNIFIED) */
.hero-edit-btn {
    position: absolute;
    top: auto;
    /* Override previous top */
    right: auto;
    /* Override previous right */
    bottom: 20px;
    left: 20px;
    /* Bottom Left */

    /* ESTILO SINERGIA (Igual a Productos) */
    background: rgba(0, 0, 0, 0.6);
    color: var(--accent);
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(4px);
    font-weight: 700;

    padding: 10px 25px;
    min-height: 45px;
    /* Altura mínima para alineación */
    border-radius: 30px;
    cursor: pointer;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-heading);
    font-size: 1.2rem;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.hero-edit-btn:hover {
    background: #000;
    border-color: var(--accent);
    transform: scale(1.1);

    /* Invertir al hover para efecto premium */
}

/* HERO PANNING CONTROLS */
.hero-pan-btn {
    position: absolute;
    top: auto;
    /* Override previous */
    right: auto;
    /* Override previous */
    bottom: 20px;
    left: 260px;
    /* Separación calculada para Button Text */

    width: 45px;
    height: 45px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.3);
    font-size: 1.2rem;

    /* Estilo Glass (Sincronizado con Hero Edit) */
    background: rgba(0, 0, 0, 0.6);
    color: var(--accent);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.hero-pan-btn:hover {
    background: #000;
    border-color: var(--accent);
    transform: scale(1.1);
}

/* Estado ACTIVO del Hero (Borde dorado + Cursor) */
.hero.panning-mode {
    border: 4px solid var(--accent) !important;
    touch-action: none !important;
    cursor: grabbing;
    box-sizing: border-box;
}

.hero.panning-mode:active {
    cursor: grabbing;
}

/* MOBILE RESPONSIVENESS FOR HERO CONTROLS */
@media (max-width: 768px) {
    /* Simbiosis: En móvil mantenemos el estilo de Botón con Texto, solo ajustamos tamaño */

    /* Botón de Cámara */
    .hero-edit-btn {
        width: auto;
        height: 45px;
        padding: 0 15px;
        justify-content: center;
        border-radius: 30px;
        font-size: 0.8rem !important;
        /* Texto visible */

        left: 20px;
        right: auto;
        bottom: 20px;
        top: auto;

        display: flex;
        gap: 8px;
    }

    .hero-edit-btn i {
        font-size: 1rem !important;
        margin: 0;
    }

    /* Botón de Mano */
    .hero-pan-btn {
        width: 45px;
        height: 45px;

        left: 210px;
        /* Ajuste: ~170px width btn + 20px gap */
        right: auto;
        bottom: 20px;
        top: auto;
    }
}

/* FIX: Refined Editable Outlines (Sutil y Profesional) */
.mode-editing [contenteditable='true'] {
    /* Borde ya definido en reglas globales (~line 1160) */
    cursor: text;
    border-radius: 2px;
    transition: all 0.2s ease;
}

/* EXCEPTION: Badges must stay round/pill-shaped */
.mode-editing .product-badge[contenteditable='true'] {
    border-radius: 50px !important;
}

/* Feedback visual al pasar el ratón (Hover) */
.mode-editing [contenteditable='true']:hover {
    background-color: rgba(255, 255, 255, 0.05);
    outline-color: var(--accent);
}

/* Estado de Foco (Cuando estás escribiendo) */


/* FIX: Remove outline from Parent H1, keep on spans */
/* FIX: Remove outline from Parent H1/H2, keep on spans */




/* --- HYBRID REORDER CONTROLS --- */
.item-reorder-controls {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    pointer-events: none;
    /* Let clicks pass usually, buttons have auto */
    z-index: 15;
    display: none;
}

.mode-editing .item-reorder-controls {
    display: block;
}

/* PC: Drag Handle (Visible by default on PC, hidden on mobile) */
.pc-reorder-handle {
    position: absolute;
    top: -15px;
    /* Floating slightly above */
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-card);
    border: 1px solid var(--edit-mode-border);
    color: var(--text-muted);
    padding: 5px 15px;
    border-radius: 12px;
    cursor: grab;
    pointer-events: auto;
    display: flex;
    /* Flex for centering */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    transition: 0.2s;
}

.pc-reorder-handle:hover {
    color: var(--accent);
    border-color: var(--accent);
}

.pc-reorder-handle:active {
    cursor: grabbing;
}

/* Mobile: Arrows (Hidden by default on PC) */
.mobile-reorder-btns {
    display: none;
    /* PC default */
}

/* MOBILE OVERRIDES */
@media (max-width: 768px) {
    .pc-reorder-handle {
        display: none !important;
        /* Hide Drag on Mobile */
    }

    .mobile-reorder-btns {
        display: flex;
        /* Show Arrows on Mobile */
        position: absolute;
        top: -20px;
        /* Aligned with delete btn area */
        left: 50%;
        transform: translateX(-50%);
        gap: 10px;
        pointer-events: auto;
    }

    .move-btn {
        background: var(--bg-card);
        border: 1px solid var(--edit-mode-border);
        color: var(--accent);
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
        cursor: pointer;
    }
}


/* --- HYBRID REORDER CONTROLS --- */
.item-reorder-controls {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    pointer-events: none;
    /* Let clicks pass usually, buttons have auto */
    z-index: 15;
}

/* PC: Drag Handle (Visible by default on PC, hidden on mobile) */
.pc-reorder-handle {
    position: absolute;
    top: -15px;
    /* Floating slightly above */
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-card);
    border: 1px solid var(--edit-mode-border);
    color: var(--text-muted);
    padding: 5px 15px;
    border-radius: 12px;
    cursor: grab;
    pointer-events: auto;
    display: flex;
    /* Flex for centering */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    transition: 0.2s;
}

.pc-reorder-handle:hover {
    color: var(--accent);
    border-color: var(--accent);
}

.pc-reorder-handle:active {
    cursor: grabbing;
}

/* Mobile: Arrows (Hidden by default on PC) */
.mobile-reorder-btns {
    display: none;
    /* PC default */
}

/* REORDER PLACEHOLDER (Invisible but takes space for alignment) */
.move-placeholder {
    width: 32px;
    height: 32px;
    visibility: hidden;
}

/* MOBILE OVERRIDES */
@media (max-width: 768px) {
    .pc-reorder-handle {
        display: none !important;
        /* Hide Drag on Mobile */
    }

    .mobile-reorder-btns {
        display: flex;
        /* Show Arrows on Mobile */
        position: absolute;
        top: -20px;
        /* Aligned with delete btn area */
        left: 50%;
        transform: translateX(-50%);
        gap: 10px;
        pointer-events: auto;
        justify-content: center;
        align-items: center;
    }

    .move-btn {
        background: var(--bg-card);
        border: 1px solid var(--edit-mode-border);
        color: var(--accent);
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
        cursor: pointer;
        transition: 0.2s;
    }

    .move-btn:active {
        transform: scale(0.9);
    }
}

/* Ensure Parent CARD has relative positioning for absolute controls */
.menu-item {
    position: relative !important;
}


/* --- DRAG & DROP SORT STATE --- */
.menu-item.is-dragging-sort {
    opacity: 0.5;
    border: 2px dashed var(--accent);
    background: #000;
}

/* --- NUEVA ANIMACIÓN: RESPIRACIÓN DORADA (Foco de Edición) --- */
@keyframes breathingGold {
    0% {
        box-shadow: 0 0 5px rgba(255, 202, 40, 0.3);
        outline-color: rgba(255, 202, 40, 0.5);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 20px rgba(255, 202, 40, 0.6);
        outline-color: var(--accent);
        /* Dorado Intenso */
        transform: scale(1.02);
        /* Sutil latido */
    }

    100% {
        box-shadow: 0 0 5px rgba(255, 202, 40, 0.3);
        outline-color: rgba(255, 202, 40, 0.5);
        transform: scale(1);
    }
}

/* FIX: Generic Focus Breathing Gold (Override) */
.mode-editing [contenteditable="true"]:focus {
    outline: 2px dashed var(--accent) !important;
    outline-offset: 2px !important;
    background-color: rgba(255, 202, 40, 0.05) !important;
    animation: breathingGold 2s infinite ease-in-out !important;
    z-index: 20;
    border-radius: 4px;
    /* Default for text */
}

/* FIX: Override radius for badges again to be safe */
.mode-editing .product-badge[contenteditable="true"]:focus {
    border-radius: 50px !important;
}

/* FIX: Keep H1/H2 spans inline-block for editing, but use GENERIC outline style */
.mode-editing .hero-content h1 span[contenteditable='true'],
.mode-editing h2 span[contenteditable='true'] {
    display: inline-block;
    position: relative;
    /* No outline override here - inherited from generic rule */
}



/* FIX: Editable Buttons should keep their color and allow easier text selection */
.mode-editing button[contenteditable="true"]:focus,
.mode-editing .btn[contenteditable="true"]:focus {
    background-color: var(--accent) !important;
    /* Keep Gold Background */
    color: var(--bg-dark) !important;
    /* Keep Dark Text */
    outline: 1px dashed #fff !important;
    /* White dashed outline for contrast against gold */
    outline-offset: 4px !important;
    animation: breathingGold 2s infinite ease-in-out !important;
    /* Keep animation */
    cursor: text;
    min-width: 50px;
    /* Ensure click target size */
}

/* --- CATEGORY ACCORDION LOGIC --- */

/* 1. PUBLIC SHOWCASE MODE (Accordion DISABLED) */
body:not(.mode-editing) .toggle-icon {
    display: none !important;
}

body:not(.mode-editing) .menu-category.collapsed .menu-grid {
    display: block !important;
    /* Always open */
    max-height: none !important;
}

body:not(.mode-editing) .category-header {
    cursor: default;
    /* No pointer */
    padding-left: 0 !important;
}

body:not(.mode-editing) .category-title {
    margin-left: 0 !important;
}

/* Maintain gap between title and buttons in Edit Mode */
.mode-editing .category-title {
    margin-right: 15px;
    /* PREVENTS OVERLAP */
}

/* 2. EDIT MODE (Management Enabled) */
.mode-editing .menu-category {
    transition: all 0.3s ease;
}

.mode-editing .menu-category.collapsed .menu-grid {
    display: none;
}

.mode-editing .toggle-icon {
    display: flex;
    /* Flex specifically for icon centering */
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-right: 8px;
    /* REDUCED to pull title left */
    font-size: 0.8em;
    cursor: pointer;
    transition: transform 0.3s ease;
    color: var(--accent);
}

.mode-editing .menu-category.collapsed .toggle-icon {
    transform: rotate(-90deg);
}

/* Feedback visual al pasar el ratón por el header en edición */
/* Edit Mode: Restore Padding for Icon (Minimal) */
.mode-editing .category-header {
    padding-left: 0;
    /* USER REQUEST: Keep flush left like before */
    cursor: pointer;
    padding: 10px;
    border-radius: 8px;
    transition: background 0.2s;
}

.mode-editing .category-header:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* --- UNIFIED CATEGORY REORDER (Arrows Everywhere) --- */

/* Wrapper */
.category-controls {
    display: none;
    /* DEFAULT HIDDEN */
    align-items: center;
    gap: 10px;
    position: relative;
    /* Context */
}

/* Show only in Edit Mode */
.mode-editing .category-controls {
    display: flex;
}

/* Reorder Group (Holds Up/Down Arrows) */
.cat-reorder-group {
    display: none;
    /* DEFAULT HIDDEN */
    align-items: center;
    gap: 5px;
    margin-right: 15px;
    /* Separation from Title/Toggle */
}


/* 5. VISIBILIDAD CONDICIONAL (Global Mode Only) */
/* Por defecto en edición: OCULTO (Expandido) */
.mode-editing .cat-reorder-group {
    display: none !important;
}

/* Solo Visible cuando está TODO PLEGADO (Global Mode) */
/* Selector corregido: Ambas clases están en el BODY */
body.mode-editing.global-collapsed .cat-reorder-group {
    display: flex !important;
}

/* Universal Arrow Button Styling (Matches Mobile Collapsed) */
.cat-btn.move-up,
.cat-btn.move-down {
    display: flex !important;
    width: 45px;
    height: 40px;
    border-radius: 10%;
    align-items: center;
    justify-content: center;
    background: #0e0e0e;
    border: 1px solid #444;
    color: #ccc;
    cursor: pointer;
    transition: 0.2s;
}

.cat-btn.move-up:hover,
.cat-btn.move-down:hover {
    transform: scale(1.05);
    background: #333;
    color: #fff;
    border-color: #666;
}

.cat-btn.move-up i,
.cat-btn.move-down i {
    font-size: 1rem;
}

/* Delete Button (Mobile Style) */
/* Delete Button (Unificado: Gris por defecto, Rojo al Hover) */
.cat-btn.delete {
    /* Reseteo agresivo para igualar al Item */
    width: 38px !important;
    /* Forzamos tamaño igual al Ojo */
    height: 38px !important;
    border-radius: 4px !important;
    /* Cuadrado redondeado sutil */

    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #666 !important;

    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* El icono un poco más grande */
.cat-btn.delete i {
    font-size: 1rem;
}

/* ALERTA ROJA SOLO AL HOVER */
.cat-btn.delete:hover {
    background: var(--danger) !important;
    border-color: var(--danger) !important;
    color: #fff !important;
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(255, 68, 68, 0.4);
}

/* 3. Positioning on Mobile (Centered Overlap) */
/* (Bloque movil obsoleto eliminado para limpieza) */

/* [CLEANUP] Merged into CATEGORY ACCORDION LOGIC above */

.cat-pc-handle:active {
    cursor: grabbing;
}

/* 2. FLECHAS (Mobile Buttons) */
/* Por defecto VISIBLES (incluso en PC para mover secciones desplegadas) */
.cat-mobile-btns {
    display: flex;
    /* <--- DEFAULT VISIBLE */
    gap: 5px;
}

/* --- LOGICA DE ESTADOS (Global Collapse) --- */

/* Cuando todo está plegado (Modo Índice): */
/* A) Aparece el botón ARRASTRA */
body.global-collapsed .cat-pc-handle {
    display: flex;
}

/* B) Desaparecen las flechas (para limpiar la vista) */
body.global-collapsed .cat-mobile-btns {
    display: none;
}

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

    /* En móvil NUNCA mostramos el drag handle de PC */
    .cat-pc-handle,
    body.global-collapsed .cat-pc-handle {
        display: none !important;
    }

    /* En móvil las flechas SIEMPRE visibles (incluso plegado) */
    .cat-mobile-btns,
    body.global-collapsed .cat-mobile-btns {
        display: flex !important;
    }
}

/* --- CENTERED DRAG HANDLE (When Collapsed) --- */
/* Makes the handle float at Top-Center of the card, implying the whole block is 'held' */

/* 1. Ensure the CARD is the anchor */
.menu-category {
    position: relative;
    /* transition: transform 0.2s; optional */
}

/* 2. Break containment of controls wrapper */
.menu-category.collapsed .category-controls {
    position: static !important;
    /* Allow absolute child to reference card */
}

/* 3. Position the Handle */
.menu-category.collapsed .cat-pc-handle {
    position: absolute;
    top: -15px;
    /* Floating on top edge */
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    z-index: 100 !important;
    background: var(--bg-card);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    /* Stronger shadow for floating feel */
    border: 1px solid var(--accent);
    /* Optional: Highlight in index mode */
}

/* --- MOBILE UX REDESIGN: ACCORDION & ANIMATION --- */
@media (max-width: 768px) {

    /* 1. EL CONTENEDOR (La Tarjeta) */
    .menu-category {
        background-color: transparent;
        border-radius: 8px;
        margin-bottom: 20px;
        border: 1px solid transparent;

        /* --- CORRECCIÓN CLAVE --- */
        overflow: visible !important;
        /* Antes era hidden. Visible permite que el tooltip salga */
        /* ----------------------- */

        padding: 5px;
        transition: all 0.3s ease;
    }

    /* Estilo cuando está PLEGADO (Tarjeta oscura compacta) */
    .menu-category.collapsed {
        background-color: #1a1a1a;
        border: 1px solid #333;
        border-left: 4px solid var(--accent);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    }

    /* 2. EL HEADER (Grid Inteligente - OPTIMIZADO UNA LÍNEA) */
    .category-header {
        display: grid !important;
        grid-template-columns: 30px 1fr auto !important;
        /* Icono | Título | Papelera */
        grid-template-rows: auto !important;
        padding: 15px !important;
        align-items: center !important;
        gap: 10px !important;
        background: transparent;
        cursor: pointer;
        position: relative;
        z-index: 10;
        margin-bottom: 11px !important;
    }

    /* SHOWCASE MODE MOBILE OVERRIDE: Flush Left Title */
    body:not(.mode-editing) .category-header {
        display: block !important;
        padding-left: 0 !important;
    }

    body:not(.mode-editing) .category-title {
        text-align: left !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* ICONO (Col 1 - Centrado Vertical) */
    .toggle-icon {
        grid-column: 1;
        grid-row: 1;
        font-size: 1rem;
        color: var(--accent);
        display: flex;
        justify-content: center;
        align-self: center !important;
        /* Centrado vertical perfecto */
        margin-top: 0 !important;
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Rotación: Abajo cuando abierto, Derecha cuando cerrado */
    .menu-category:not(.collapsed) .toggle-icon {
        transform: rotate(0deg);
    }

    .menu-category.collapsed .toggle-icon {
        transform: rotate(-90deg);
        color: var(--text-muted);
    }

    /* 1. TÍTULO DE CATEGORÍA (Col 2 - Sin márgenes extra) */
    .category-title {
        grid-column: 2 !important;
        grid-row: 1 !important;
        font-size: 1.6rem;
        /* Un pelín más pequeño para que quepa mejor */
        margin: 0 !important;
        padding: 0 !important;
        color: #fff;
        text-align: left;
        white-space: normal;
        overflow: visible;
        border-bottom: none !important;
        /* Quitamos líneas divisorias viejas */
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
        line-height: 1.1;
        word-wrap: break-word;
    }

    /* Destacar título al estar abierto (Mismo ajuste) */
    .menu-category:not(.collapsed) .category-title {
        color: var(--accent);
        font-size: 1.6rem;
    }

    /* 2. TÍTULO DEL ITEM */
    .item-name {
        font-size: 1.3rem;
        line-height: 1.2;
        font-weight: 700;
    }

    /* 3. PANEL DE CONTROLES (Col 3 - Derecha) */
    /* La papelera se queda en la misma línea */
    .category-controls {
        grid-column: 3 !important;
        grid-row: 1 !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        border-top: none !important;
        justify-self: end !important;
        /* display: flex injected by JS/Global CSS when editing */
    }

    /* Force Show in MOBILE EDIT MODE */
    /* Force Show in MOBILE EDIT MODE -> DISABLED to respect Global Collapse Logic */
    .mode-editing .category-controls {
        display: flex !important;
    }

    /* .mode-editing .cat-reorder-group -> Let global rules decide (REMOVED EMPTY RULE) */

    /* Grupo Flechas -> Izquierda (Ocupa col 1 y 2 para tener espacio si se quiere, o solo 2) */
    /* Grupo Flechas -> SI SE ACTIVAN (Todo plegado), bajan a segunda línea */
    .cat-reorder-group {
        grid-column: 1 / -1;
        /* Ocupa todo el ancho */
        grid-row: 2;
        /* SEGUNDA FILA solo si aparecen */
        width: 100%;
        justify-self: stretch;
        gap: 10px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        margin-top: 10px;
        padding-top: 10px;
    }

    /* Estilos Botones (Grandes para el dedo) */
    .cat-btn {
        width: 45px;
        height: 40px;
        border-radius: 8px;
        font-size: 1.1rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .cat-btn.move-up,
    .cat-btn.move-down {
        background: #0e0e0e;
        border: 1px solid #444;
        color: #ccc;
    }

    /* Estilos Botones CATEGORÍA (Dimensiones Específicas User) */
    .cat-btn {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .cat-btn.move-up,
    .cat-btn.move-down {
        background: #0e0e0e;
        border: 1px solid #444;
        color: #ccc;
        width: 38px;
        /* SMALLER */
        height: 34px;
        /* SMALLER */
        border-radius: 10%;
    }

    .cat-btn.delete {
        background: rgba(255, 68, 68, 0.15);
        border: 1px solid var(--danger);
        color: var(--danger);
        width: 42px;
        /* SMALLER */
        height: 38px;
        /* SMALLER */
        border-radius: 10%;
    }
}

/* --- ITEM TOOLBAR (Unificación con Categorías) --- */

/* 1. Ocultar el footer por defecto (Modo Vista) */
.item-controls-footer {
    display: none;
}

/* 2. Mostrar SOLO en Modo Edición */
.mode-editing .item-controls-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;

    /* FÓRMULA DE AJUSTE EXACTO */
    /* Anulamos el padding de 25px de la tarjeta en los lados y abajo */
    /* Añadimos 15px arriba para separarlo del contenido */
    margin: 15px -25px -25px -25px;

    /* Padding interno de la botonera */
    padding: 12px 20px;

    /* ESTÉTICA DE "BASE SÓLIDA" */
    background: #151515;
    /* Muy oscuro para anclar visualmente */
    border-top: 1px dashed rgba(255, 202, 40, 0.3);
    /* Línea de corte técnica */

    /* Redondear solo abajo para seguir la forma de la tarjeta */
    border-radius: 0 0 8px 8px;

    z-index: 10;
}

.mode-editing .item-reorder-group {
    display: flex;
    gap: 5px;
    align-items: center;
}

/* --- ESTILO DE BOTONES: Compacto y Táctil (Tu nuevo diseño) --- */
.mode-editing .item-controls-footer .item-btn,
.mode-editing .item-controls-footer .pc-reorder-handle {
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #888;
    border-radius: 6px;
    /* Cuadrado redondeado */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.2s;
    backdrop-filter: blur(4px);
}

/* Fix específico para que el asa de arrastre no flote fuera de sitio */
.mode-editing .item-controls-footer .pc-reorder-handle {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    cursor: grab;
}

.mode-editing .item-controls-footer .pc-reorder-handle:active {
    cursor: grabbing;
}

/* Efecto Hover General (Dorado) */
.mode-editing .item-controls-footer .item-btn:hover,
.mode-editing .item-controls-footer .pc-reorder-handle:hover {
    background: var(--accent);
    color: #000;
    border-color: var(--accent);
    box-shadow: 0 0 10px rgba(255, 202, 40, 0.4);
}

/* Efecto Hover Específico Borrar (Rojo) */
.mode-editing .item-controls-footer .item-btn.delete:hover {
    background: var(--danger);
    color: #fff;
    border-color: var(--danger);
    box-shadow: 0 0 10px rgba(255, 68, 68, 0.4);
}

/* --- LÓGICA DE VISIBILIDAD (PC vs MÓVIL) --- */

/* Por defecto (PC): Ocultar flechas, mostrar asa de arrastre */
.mode-editing .item-controls-footer .item-btn.move-up,
.mode-editing .item-controls-footer .item-btn.move-down {
    display: none;
}

.mode-editing .item-controls-footer .pc-reorder-handle {
    display: flex;
    /* En PC usamos el asa */
}

/* En Móvil: Mostrar flechas, ocultar asa (para dedos) */
@media (max-width: 768px) {

    .mode-editing .item-controls-footer .item-btn.move-up,
    .mode-editing .item-controls-footer .item-btn.move-down {
        display: flex;
    }

    .mode-editing .item-controls-footer .pc-reorder-handle {
        display: none;
    }
}

/* --- PRODUCT BADGE GLASS STYLE --- */
.product-badge {
    /* Glassmorphism Base */
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    color: #fff;

    padding: 5px 15px;
    border-radius: 50px;
    /* PILL SHAPE */
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
}

.product-badge:hover {
    background: #000;
    border-color: var(--accent);
    transform: scale(1.05);
    /* Subtle scale for text */
}

/* Specific Glass Badge Colors (Higher Opacity for Legibility) */
.product-badge.badge-gold {
    background: rgba(255, 202, 40, 0.85);
    /* Intermediate Intensity */
    border-color: rgba(255, 255, 255, 0.3);
    /* White Border */
    color: #fff;
}

.product-badge.badge-red {
    background: rgba(220, 20, 60, 0.85);
    /* Crimson */
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}

.product-badge.badge-green {
    background: rgba(34, 139, 34, 0.85);
    /* Forest Green */
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}

.product-badge.badge-black {
    background: rgba(0, 0, 0, 0.85);
    border-color: #666;
    color: #fff;
}

/* Delete Badge Button (Glass Red) - Small & Circular */
.del-badge-btn {
    display: none;
    /* DEFAULT HIDDEN (Showcase Mode) */
    background: rgba(255, 68, 68, 0.8);
    /* Red Background */
    border: 1px solid var(--danger);
    /* Red Border */
    color: #fff;
    /* White X */
    border-radius: 50%;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.2s;
    margin-left: 8px;
    /* Spacing from text */
}

/* Show Delete Badge Button ONLY in Edit Mode */
.mode-editing .del-badge-btn {
    display: flex;
}

.del-badge-btn:hover {
    background: var(--danger);
    /* High Intensity Red */
    border-color: var(--danger);
    color: #fff;
    /* Keep White Text */
    transform: scale(1.1);
}

/* --- IMAGE CONTROLS (Floating Buttons) --- */
.img-control-btn {
    position: absolute;
    bottom: 10px;
    width: 45px;
    height: 45px;
    /* Consistent Size */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    font-size: 1.2rem;
    transition: transform 0.2s, background 0.3s;
    border: 2px solid #fff;
}

.upload-btn {
    left: 10px;
    background: rgba(0, 0, 0, 0.6);
    color: var(--accent);
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(4px);
}

.upload-btn:hover {
    background: #000;
    border-color: var(--accent);
    transform: scale(1.1);
}

.pan-trigger-btn {
    left: 65px;
    /* Offset from upload btn */
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(4px);
}

.pan-trigger-btn:hover {
    background: #000;
    border-color: var(--accent);
    transform: scale(1.1);
}

.pan-trigger-btn.active {
    background: var(--accent);
    color: #000;
    border-color: #fff;
}

/* GHOST CATEGORY BUTTON (Matches Edit Mode Category) */
.ghost-category-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 1.2rem;
    color: var(--accent);
    cursor: pointer;

    /* Match Category Box Model */
    background-color: #1e1e1e;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 60px;

    /* Match Dashed Border Style with Solid Spine */
    border: 1px dashed var(--accent);
    border-left: 4px solid var(--accent);
    /* Solid Spine like Collapsed Category */

    transition: all 0.3s ease;
}

.ghost-category-btn:hover {
    background-color: #252525;
    transform: scale(1.02);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* 4. LIMPIEZA: Ocultar los controles antiguos flotantes */
.mode-editing .delete-btn,
/* La bolita roja flotante */
.mode-editing .item-reorder-controls

/* Las flechas flotantes */
/* NOTA: No ocultamos .pc-reorder-handle globalmente porque lo usamos en el footer */
    {
    display: none !important;
}





/* --- ALLERGEN ICONS --- */
.allergen-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 15px;
    min-height: 5px;
}

.mode-editing .allergen-row {
    min-height: 40px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

/* --- INLINE ALLERGEN ADD BUTTON --- */
/* UPDATE: Match .product-badge aesthetic */
.allergen-add-btn {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    background-color: var(--badge-black);

    border: 1px dashed var(--accent);
    /* Keep dashed border for edit feel */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-left: 5px;
    opacity: 0.7;
    transition: all 0.3s ease;
    min-width: 30px;
    /* Ensure clickability */
    height: auto;
    /* Allow text flow if needed */
}

.mode-editing .allergen-add-btn {
    display: inline-flex;
    /* Use inline-flex like badge */
    /* Visible en edición */
    border: 1px dashed rgba(212, 175, 55, 0.6) !important;
}

.allergen-add-btn:hover {
    background-color: var(--badge-gold);
    color: #000;
    transform: scale(1.05);
    /* Subtle scale */
    opacity: 1;
    border-color: transparent !important;
    /* Solid look on hover */
}

/* --- ALERGENOS: ICONOS (Estilo "Clean Drawing") --- */
.allergen-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    /* Reduced from 15px for tighter layout */
    min-height: 5px;
    /* Altura mínima para que no salte al cargar */
}

/* El Contenedor del Icono */
.allergen-icon {
    width: 36px;
    /* Zona táctil amplia */
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;

    /* EN REPOSO: Transparente total (Solo se ve la imagen) */
    background: transparent;
    border: 1px solid transparent;

    cursor: pointer;
    /* Mano siempre visible */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    /* Necesario para el tooltip */
}

/* La Imagen SVG */
.allergen-icon img {
    /* GRANDE Y ROBUSTO */
    width: 30px !important;
    /* Fuerza 30px sobre el JS */
    height: 30px !important;
    object-fit: contain;

    /* Filtro suave para que no brille tanto en reposo */
    filter: grayscale(0.2) brightness(0.9);
    transition: all 0.3s ease;

    /* SEGURIDAD: Evita que el ::before o flexbox lo aplaste */
    flex-shrink: 0;
    display: block;
}

/* --- ESTADO ACTIVO (Al pasar el ratón) --- */
.allergen-icon:hover {
    background: #000;
    /* Aparece el círculo negro */
    border-color: var(--accent);
    /* Aparece el borde dorado */
    transform: scale(1.15);
    /* Crece un poco */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    z-index: 100;
}

.allergen-icon:hover img {
    /* Se hace un pelín más pequeño para encajar en el círculo */
    width: 22px;
    height: 22px;
    filter: grayscale(0) brightness(1.1);
    /* Color vivo */
}

/* --- TOOLTIP PREMIUM (Cartelito Flotante) --- */
.allergen-icon[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 135%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);

    background: rgba(0, 0, 0, 0.95);
    border: 1px solid var(--accent);
    color: var(--accent);

    padding: 8px 12px;
    /* Un poco más de aire */
    border-radius: 6px;
    font-size: 0.75rem;
    /* Letra un pelín más pequeña para nombres largos */
    font-family: var(--font-body);
    font-weight: 700;
    text-transform: uppercase;

    /* --- CORRECCIÓN DE TEXTO --- */
    white-space: normal;
    /* Permite dos líneas */
    max-width: 140px;
    /* Ancho máximo antes de saltar de línea */
    text-align: center;
    /* Centrado bonito */
    line-height: 1.2;
    /* Espacio entre líneas */
    /* --------------------------- */

    pointer-events: none;
    opacity: 0;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);

    /* Asegurar que flote sobre todo */
    z-index: 1000;

    animation: tooltip-slide-up 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* El triangulito bajo el cartel */
.allergen-icon[data-tooltip]:hover::before {
    content: '';
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);

    border-width: 6px;
    border-style: solid;
    border-color: var(--accent) transparent transparent transparent;

    opacity: 0;
    pointer-events: none;
    animation: tooltip-slide-up 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes tooltip-slide-up {
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* MODAL STYLES (Restored) */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000000 !important;
    /* One million */
    backdrop-filter: blur(5px);
}

.modal-content {
    background: #1e1e1e;
    border-radius: 8px;
    padding: 2rem;
    max-width: 450px;
    width: 90%;
    text-align: center;
    border: 1px solid var(--gold, #ffca28);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.2);
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
}

/* BRANDING SHEET (Live Preview Modal) */
.branding-sheet-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.2);
    /* Much lighter to see the bg */
    z-index: 1000000;
    display: flex;
    justify-content: center;
    /* PC: Center aligned */
    align-items: flex-end;
    /* PC: Bottom aligned */
    pointer-events: none;
    /* Let clicks pass through overlay area */
}

.branding-sheet {
    background: #000;
    padding: 1.5rem;
    width: 450px;
    /* Fixed width on PC */
    margin-right: 0;
    margin-bottom: 0;
    border-radius: 20px 20px 0 0;
    border: 1.5px solid #D4AF37;
    border-bottom: none;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.8);
    pointer-events: auto;
    /* Catch clicks in the modal */
    animation: slideUpBottom 0.3s ease-out;
    max-height: 90vh;
    overflow-y: auto;
}

@keyframes slideUpBottom {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@media (max-width: 768px) {
    .branding-sheet-overlay {
        align-items: flex-end;
        /* Mobile: Bottom aligned */
        justify-content: center;
    }

    .branding-sheet {
        width: 100%;
        margin-right: 0;
        border-radius: 20px 20px 0 0;
        /* Only top corners rounded */
        animation: slideUpBottom 0.3s ease-out;
        margin-bottom: 0;
        padding-bottom: 30px;
        /* Safe area */
    }
}



/* Allergen Row Container */
.allergen-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    align-items: center;
    min-height: 32px;
    /* Visual spacing even if empty */
}

/* Botón Añadir (+) - Solo visible en Edición */
.allergen-add-btn {
    display: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px dashed #666;
    color: #888;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
    background: rgba(255, 255, 255, 0.05);
}

.mode-editing .allergen-add-btn {
    display: flex;
    z-index: 100;
    pointer-events: auto;
    position: relative;
}

.allergen-add-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(255, 202, 40, 0.1);
    transform: scale(1.1);
}

/* =========================================
   iOS STYLE DYNAMIC HEADER (CORREGIDO)
   ========================================= */

/* 1. BARRA DE NAVEGACIÓN (Alineación Maestra) */
.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;

    /* FÓRMULA MÁGICA: Alineación perfecta en PC y Móvil */
    box-sizing: border-box;
    padding-left: max(20px, calc((100% - 1200px) / 2 + 40px)) !important;
    padding-right: max(20px, calc((100% - 1200px) / 2 + 40px)) !important;
}

/* 2. CONTENEDOR DEL TÍTULO DINÁMICO */
.dynamic-title-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;

    pointer-events: none;
    z-index: 5;

    /* APLICAMOS LA MISMA FÓRMULA EXACTA QUE ARRIBA */
    box-sizing: border-box;
    padding-left: max(20px, calc((100% - 1200px) / 2 + 40px)) !important;
    padding-right: max(20px, calc((100% - 1200px) / 2 + 40px)) !important;

    /* Animación de entrada */
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}

/* Estado ACTIVO (Cuando baja el logo y sube el título) */
.header-swapped .dynamic-title-container {
    transform: translateY(0);
    opacity: 1;
}

/* Estado del LOGO (Sale disparado hacia arriba) */
.header-swapped .logo-text {
    transform: translateY(-250%);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.1s ease;
}


/* ESTILO DEL TEXTO (Dorado y Brillante) */
#dynamicCategoryTitle {
    font-family: 'Oswald', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--accent) !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    /* NECESARIO para animar transform */
    text-shadow: 0 0 15px rgba(255, 202, 40, 0.3);
}

/* 3. FANTASMA (El título viejo que sale volando) */
.ghost-title {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Ocupar toda la altura para centrarse verticalmente igual */

    /* ALINEACIÓN MAESTRA: Copiamos la fórmula de padding del contenedor padre */
    box-sizing: border-box;
    padding-left: max(20px, calc((100% - 1200px) / 2 + 40px)) !important;
    padding-right: max(20px, calc((100% - 1200px) / 2 + 40px)) !important;

    /* Flexbox para asegurar que el texto esté centrado verticalmente como el original */
    display: flex;
    align-items: center;

    /* Estilos de fuente heredados */
    font-family: 'Oswald', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--accent) !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
    text-shadow: 0 0 15px rgba(255, 202, 40, 0.3);

    /* Animación de salida */
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform: translateY(0);
    opacity: 1;

    pointer-events: none;
    /* Para que no bloquee clicks mientras se anima */
}

.ghost-title.exit {
    transform: translateY(-200%);
    /* Sale disparado arriba */
    opacity: 0;
}

/* 4. BARRA DE PROGRESO */
.header-progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.05);
    z-index: 100;
    pointer-events: none;
}

#scrollProgressFill {
    height: 100%;
    width: 0%;
    background: var(--accent);
    box-shadow: 0 0 10px var(--accent), 0 0 20px var(--accent);
    transition: width 0.1s linear;
}

/* Edición: Apagar todo */
.mode-editing .dynamic-title-container,
.mode-editing .header-progress-bar {
    display: none !important;
}

.mode-editing .logo-text {
    transform: none !important;
    opacity: 1 !important;
}


/* --- GHOST TITLE FIX (Para que no se vea doble tras el cristal) --- */
.category-title {
    transition: opacity 0.2s ease;
    /* Desvanecimiento rápido */
}

.category-title.is-hidden-behind {
    opacity: 0 !important;
    /* Desaparece completamente */
    pointer-events: none;
    /* No molesta */
}


/* ================================================= */
/* 🏁 MOBILE FINAL FIX (V4 - GOLDEN MASTER)          */
/* ================================================= */

/* 1. CORRECCIÓN DE LA CABECERA (El culpable del ancho) */
.navbar,
.nav-container {
    width: 100%;
    max-width: 100vw;
    /* LÍMITE ESTRICTO: No más ancho que la pantalla */
    overflow-x: hidden;
    /* Cortar cualquier cosa que sobresalga internamente */
    box-sizing: border-box;
}

/* 2. CUERPO DE LA PÁGINA (Sin transformaciones raras) */
html,
body {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden !important;
    /* CORTAFUEGOS: Nada sale por los lados */
    background-color: var(--bg-dark);
    position: relative;
}

/* 3. MODO EDICIÓN (Limpio y Estable) */
.mode-editing {
    transform: none !important;
    /* CRÍTICO para que los botones floten bien */
    padding-bottom: 150px;
    /* Espacio para hacer scroll hasta el final */
}



/* 5. AJUSTES ESPECÍFICOS MÓVIL */
@media (max-width: 768px) {

    /* Ajuste de botones para dedos */
    /* Duplicate #admin-controls removed from line 3148 to unify at line 1396 */

    /* Reducir un poco el Logo si es muy largo para evitar desbordes */
    .logo-text {
        font-size: 1.6rem;
        /* Un poco más pequeño en móvil */
    }

    /* Contenedor seguro */
    .mode-editing .container {
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
        overflow: visible;
    }

    /* Fix anti-zoom al escribir */
    .mode-editing input,
    .mode-editing textarea,
    .mode-editing .item-desc,
    .mode-editing .product-badge {
        font-size: 16px !important;
    }
}


/* ================================================= */
/* 🚑 MOBILE PERFORMANCE SAVER (VERSIÓN FIX SEPARACIÓN) */
/* ================================================= */

@media (max-width: 768px) {

    /* 1. APAGADO TOTAL DE EFECTOS Y ANIMACIONES */
    .mode-editing *:not(.just-moved) {
        box-shadow: none !important;
        backdrop-filter: none !important;
        text-shadow: none !important;
        filter: none !important;

        /* Matamos el movimiento */
        transition: none !important;
        animation: none !important;
    }

    /* 2. SOLUCIÓN AL CORTE Y RECUPERACIÓN DE ESPACIO */
    .menu-grid,
    .mode-editing .menu-grid {
        max-height: none !important;
        height: auto !important;
        overflow: visible !important;
        padding-bottom: 50px !important;
        opacity: 1 !important;

        /* 🔥 AQUÍ ESTÁ EL ARREGLO: Mantenemos GRID para respetar el hueco */
        display: grid !important;
        gap: 30px !important;
        /* Forzamos la separación original */
    }

    /* ESTADO ABIERTO (Visible) */
    .menu-category:not(.collapsed) .menu-grid {
        display: grid !important;
        /* Grid en lugar de block */
    }

    /* ESTADO CERRADO (Oculto) */
    .menu-category.collapsed .menu-grid {
        display: none !important;
    }

    /* 3. ESTÉTICA MODO EDICIÓN */
    .mode-editing .menu-category:not(.just-moved) {
        background-color: #1e1e1e !important;
        border-left: 4px solid var(--accent) !important;
        transform: none !important;
        will-change: auto !important;
        margin-bottom: 20px !important;
    }

    /* 4. OPTIMIZACIÓN DE INTERFAZ */
    .mode-editing .navbar {
        position: absolute !important;
        background: #000 !important;
    }

    .mode-editing * {
        -webkit-tap-highlight-color: transparent !important;
        outline: none !important;
    }
}


/* =========================================
   ✨ ANIMACIÓN FÍSICA (REBOTE PESADO)
   ========================================= */

@keyframes landHeavy {
    0% {
        /* INICIO: Flashazo Blanco/Dorado */
        border-color: #fff !important;
        background-color: rgba(255, 202, 40, 0.3) !important;
        box-shadow: 0 0 20px rgba(255, 202, 40, 0.8) !important;
        /* Sombra forzada */
        transform: translateY(0) scale(1.02);
    }

    35% {
        /* IMPACTO: Baja y se aplasta */
        transform: translateY(8px) scale(0.98);
    }

    70% {
        /* REBOTE: Sube un poco */
        transform: translateY(-3px) scale(1);
    }

    100% {
        /* FIN: Quieto */
        border-color: var(--accent) !important;
        background-color: #1e1e1e !important;
        transform: translateY(0) scale(1);
        box-shadow: none !important;
    }
}

/* Clase inyectada por JS */
.just-moved {
    /* El !important aquí es la CLAVE para que funcione en móvil */
    animation: landHeavy 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important;

    z-index: 100 !important;
    /* Asegura que pase por encima de todo */
    position: relative;
    will-change: transform, box-shadow;
    /* Avisa a la GPU */
}

/* =========================================
   🧪 MODO DEBUG (CÁMARA LENTA 1s)
   ========================================= */

/* Forzamos que la animación de plegado se vea sí o sí */
.mode-editing .menu-category {
    transition: max-height 1s ease, margin 1s ease, opacity 1s ease !important;
}

/* Forzamos que el rebote también sea lento */
.just-moved {
    animation-duration: 1s !important;
}

/* =========================================
   🐢 MODO DEBUG (CÁMARA LENTA 1.5s)
   ========================================= */
.mode-editing .menu-category {
    /* Transición forzada muy lenta */
    transition: all 1.5s ease !important;
    scroll-margin-top: 100px;
    /* Margen de seguridad para el scroll */
}


/* =========================================
   🦅 MODO ORGANIZACIÓN (CLON EXACTO DE PRODUCTOS)
   ========================================= */

/* 1. EL OVERLAY (FONDO NEGRO) */
#organization-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #000;
    z-index: 99999;
    display: none;
    flex-direction: column;
    padding: 20px;
    overflow-y: auto;
}

/* Ocultar controles normales */
body.org-mode-active #admin-controls,
body.org-mode-active #saveBtn {
    display: none !important;
}

#organization-overlay.active {
    display: flex;
    animation: fadeIn 0.3s ease;
}

/* 2. CABECERA */
.org-header {
    text-align: center;
    margin-bottom: 30px;
    margin-top: 20px;
    color: var(--accent);
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.org-header h2 {
    font-size: 1.8rem;
    margin-bottom: 5px;
}

.org-header p {
    color: #888;
    font-size: 0.9rem;
    font-family: var(--font-body);
}

/* 3. LISTA */
.org-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    /* Un poco más de aire para el efecto hover */
    padding-bottom: 80px;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

/* --- AQUÍ ESTÁ LA MAGIA (ESTILO CLONADO DE .menu-item) --- */
/* 3. LA TARJETA (Sólida y Separada) */
.org-item {
    background: #1e1e1e;
    border: 1px solid #333;
    /* Borde sutil base */
    border-left: 4px solid var(--accent);
    /* Tu borde sólido izquierdo */
    padding: 15px 20px;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    /* ANIMACIÓN SUAVE */
    transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.2s ease, background 0.2s;

    user-select: none;
    cursor: grab;

    .trial-badge {
        background: #D4AF37;
        color: #000;
        font-size: 0.7rem;
        font-weight: 900;
        padding: 4px 10px;
        border-radius: 20px;
        display: inline-block;
        margin-top: 5px;
        letter-spacing: 0.5px;
    }

    .current-slug-display {
        color: #D4AF37;
        font-weight: 700;
        font-size: 1.1rem;
        display: block;
        margin-top: 5px;
    }

    /* 🔥 CORRECCIÓN MÓVIL: */
    /* Quitamos 'touch-action: none' para permitir hacer scroll en la lista con el dedo. */
    /* SortableJS gestionará el arrastre tras la pequeña pausa (delay). */
    position: relative;
}

/* 1. EFECTO HOVER (SOLO PARA PC/RATÓN) */
/* 🔥 CORRECCIÓN MÓVIL: Usamos @media (hover: hover) para que en el móvil 
   al tocar NO se quede la tarjeta levantada ni cambie de color "pegajoso". */
@media (hover: hover) {
    .org-item:hover {
        transform: translateY(-5px);
        /* Se levanta solo con ratón */
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
        background-color: #232323;
        z-index: 10;
    }

    /* Iluminar asa solo con ratón */
    .org-item:hover .org-item-handle {
        border-color: var(--accent);
        color: var(--accent);
    }
}

/* Estado ACTIVO (Cuando realmente estás pulsando/arrastrando) */
.org-item:active,
.org-item-handle:active {
    background-color: #232323;
    cursor: grabbing;
}

/* 2. TEXTO */
.org-item span {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 20px;
    flex-grow: 1;
    text-align: left;
}

/* 3. ASA (Grip) */
.org-item-handle {
    width: 40px;
    height: 40px;
    background: #000;
    border: 1px solid #444;
    color: #666;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.org-item:hover .org-item-handle {
    border-color: var(--accent);
    color: var(--accent);
}

/* --- ESTADOS DRAG & DROP (LA CLAVE) --- */

/* 4. EL FANTASMA (El hueco donde va a caer) */
.sortable-ghost {
    opacity: 0.4 !important;
    /* Semitransparente (Se ve el contenido suave) */
    background: rgba(30, 30, 30, 0.5) !important;
    /* Fondo oscuro pero no negro total */
    border: 2px dashed var(--accent) !important;
    /* Borde discontinuo dorado */
    border-left: 2px dashed var(--accent) !important;
    box-shadow: none !important;
    transform: scale(0.98);

    /* CLAVE: Permitimos que se vea el texto fantasma */
    color: #fff !important;
}

/* IMPORTANTE: Aseguramos que los hijos (texto e iconos) SE VEAN */
.sortable-ghost * {
    opacity: 1 !important;
    /* Antes estaba en 0, por eso se veía negro */
    visibility: visible !important;
}

/* 5. EL ELEMENTO EN LA MANO (Dragging) */
.sortable-drag {
    opacity: 0.95 !important;
    background: #1e1e1e !important;
    border: 1px solid var(--accent);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8);
    transform: scale(1.02);
    z-index: 100000 !important;
    cursor: grabbing;

    /* 🔥 EL ARREGLO ESTÁ AQUÍ: */
    /* Eliminamos la transición para que siga al dedo INSTANTÁNEAMENTE */
    transition: none !important;
    animation: none !important;
}

/* BARRA DE GUARDAR */
.org-save-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #111;
    padding: 20px;
    display: flex;
    justify-content: center;
    gap: 15px;
    border-top: 1px solid #333;
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.5);
    z-index: 200000;
}

/* =========================================
   ➕ SEPARADORES DE CATEGORÍA (Visible y Sin Solapamientos)
   ========================================= */

/* 1. CATEGORÍA EN MODO EDICIÓN */
.mode-editing .menu-category {
    /* IMPORTANTE: Quitamos el margen inferior de la tarjeta */
    /* El separador se encargará de dar el aire necesario */
    margin-bottom: 0 !important;
    transition: margin 0.3s ease;
}

/* 2. EL SEPARADOR (Bloque real en el flujo) */
.category-separator {
    height: 60px;
    /* Altura generosa para el dedo */
    margin: 10px 0;
    /* Un poco de aire arriba y abajo */
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    /* Centrado vertical */
    justify-content: center;
    /* Centrado horizontal */

    /* VISIBILIDAD TOTAL */
    opacity: 1;
    /* Siempre visible (nada de ocultarse) */
    z-index: 5;
    transition: opacity 0.2s, transform 0.2s, background-color 0.2s, box-shadow 0.2s;

}

/* Asegurar display en edición */
.mode-editing .category-separator {
    display: flex;
}

/* 3. LA LÍNEA (Guía visual sutil) */
.category-separator::before {
    content: '';
    position: absolute;
    left: 20px;
    /* Margen lateral */
    right: 20px;
    top: 50%;
    height: 1px;
    /* Línea discontinua dorada suave */
    border-top: 1px dashed var(--accent);
    opacity: 0.4;

}

/* Al pasar el ratón se ilumina un poco más la línea */
.category-separator:hover::before {
    opacity: 0.8;
}

/* 4. EL BOTÓN MÁS (+) */
.separator-btn {
    width: 32px;
    /* Tamaño cómodo */
    height: 32px;
    background: #121212;
    /* Fondo oscuro para tapar la línea */
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    z-index: 2;
    /* Por encima de la línea */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    /* Sombra para dar relieve */

}

/* Efecto al tocar o pasar el ratón */
.category-separator:hover .separator-btn,
.category-separator:active .separator-btn {
    transform: scale(1.15);
    background: var(--accent);
    color: #000;
    box-shadow: 0 0 15px rgba(255, 202, 40, 0.5);
    /* Resplandor dorado */
}

/* =========================================
   👁️ VISIBILIDAD DE ITEMS (OJO DE SAURON)
   ========================================= */

/* Estilo del Botón Ojo */
.item-btn.visibility {
    color: #555;
    /* Apagado por defecto (si estuviera oculto) */
    transition: all 0.3s ease;
}

/* Estado ACTIVO (Visible/Brillando) */
.item-btn.visibility.active {
    color: var(--accent);
    /* Dorado */
    border-color: var(--accent);
    background: rgba(255, 202, 40, 0.05);
    box-shadow: 0 0 8px rgba(255, 202, 40, 0.2);
}

.item-btn.visibility.active:hover {
    box-shadow: 0 0 15px rgba(255, 202, 40, 0.4);
    transform: scale(1.05);
}



/* LÓGICA DE OCULTACIÓN REAL (La Magia) */

/* 1. MODO EDICIÓN: Lo oculto se ve (pero fantasma) para poder reactivarlo */
body.mode-editing .menu-item[data-visible="false"] {
    display: flex !important;
}

/* 2. MODO CLIENTE (Escaparate): Lo oculto DESAPARECE por completo */
body:not(.mode-editing) .menu-item[data-visible="false"] {
    display: none !important;
}


/* =========================================
   👁️ ALINEACIÓN CONTROLES DE ITEM
   ========================================= */

/* Grupo derecha: Ojo + Papelera en línea */
.item-delete-group {
    display: flex;
    align-items: center;
    gap: 10px;
    /* Separación entre el Ojo y la Papelera */
}

/* Estilo del Botón Ojo (Visibilidad) */
.item-btn.visibility {
    color: #666;
    /* Gris por defecto */
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Estado ACTIVO (Visible/Brillando) */
.item-btn.visibility.active {
    color: var(--accent);
    /* Dorado */
    border-color: var(--accent);
    background: rgba(255, 202, 40, 0.05);
    box-shadow: 0 0 8px rgba(255, 202, 40, 0.2);
}

.item-btn.visibility:hover {
    transform: scale(1.1);
    color: #fff;
    border-color: #fff;
}



/* LÓGICA DE VISIBILIDAD FINAL */
/* Edición: Se ve semitransparente */
body.mode-editing .menu-item[data-visible="false"] {
    display: flex !important;
}

/* Cliente: Desaparece */
body:not(.mode-editing) .menu-item[data-visible="false"] {
    display: none !important;
}


/* =========================================
   👁️ VISIBILIDAD DE CATEGORÍAS
   ========================================= */

/* Estilo del Botón Ojo (Igual que Items) */
.cat-btn.visibility {
    color: #666;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Estado ACTIVO (Dorado) */
.cat-btn.visibility.active {
    color: var(--accent);
    border-color: var(--accent);
    background: rgba(255, 202, 40, 0.05);
    box-shadow: 0 0 8px rgba(255, 202, 40, 0.2);
}

.cat-btn.visibility.active:hover {
    transform: scale(1.1);
    color: #fff;
    border-color: #fff;
}



/* LÓGICA DE OCULTACIÓN REAL */
/* Edición: Se ve semitransparente */
body.mode-editing .menu-category[data-visible="false"] {
    display: block !important;
}

/* Cliente: Desaparece por completo */
body:not(.mode-editing) .menu-category[data-visible="false"] {
    display: none !important;
}

/* =========================================
   📏 IGUALAR TAMAÑO BOTONES (OJO Y PAPELERA)
   ========================================= */

/* 1. Contenedor de la derecha (Categorías) */
.category-controls {
    align-items: center;
    gap: 10px;
    /* Separación exacta entre ellos */
    height: 100%;
}

/* 2. Forzar dimensiones idénticas para TODOS los botones de categoría */
.category-controls .cat-btn {
    width: 38px !important;
    /* Ancho fijo para ambos */
    height: 38px !important;
    /* Alto fijo para ambos */
    min-width: 38px !important;
    /* Evita que se aplasten */

    display: flex !important;
    align-items: center;
    justify-content: center;

    padding: 0 !important;
    font-size: 1rem;
    /* Tamaño del icono */
    line-height: 1;
    border-radius: 4px;
    /* Opcional: hazlo 50% si los quieres redondos */
}

/* Ajuste específico para el icono del ojo para que quede centrado matemáticamente */
.cat-btn.visibility i {
    margin-top: 1px;
}


/* =========================================
   👻 EFECTO FANTASMA MAESTRO (PLATO Y CATEGORÍA)
   ========================================= */

/* 1. APAGAR EL CONTENEDOR DEL PLATO */
/* Aplica si el plato está oculto O si su categoría padre está oculta */
.menu-item[data-visible="false"],
.menu-category[data-visible="false"] .menu-item {
    border: 1px dashed #444;
    background: rgba(20, 20, 20, 0.6);
    /* Fondo oscurecido */
    transition: all 0.3s ease;
}

/* 2. APAGAR LA FOTO */
.menu-item[data-visible="false"] .item-img img,
.menu-category[data-visible="false"] .menu-item .item-img img {
    filter: grayscale(100%) opacity(0.5);
}

/* 3. APAGAR TEXTOS, PRECIOS Y BADGES */
.menu-item[data-visible="false"] .item-name,
.menu-item[data-visible="false"] .item-desc,
.menu-item[data-visible="false"] .item-price,
.menu-item[data-visible="false"] .product-badge,
.menu-category[data-visible="false"] .menu-item .item-name,
.menu-category[data-visible="false"] .menu-item .item-desc,
.menu-category[data-visible="false"] .menu-item .item-price,
.menu-category[data-visible="false"] .menu-item .product-badge {
    color: #555 !important;
    filter: grayscale(100%);
}

/* 4. APAGAR CONTROLES (CÁMARA, MANO, ALÉRGENOS, X BADGE) - ¡ESTO FALTABA! */
.menu-item[data-visible="false"] .img-control-btn,
.menu-item[data-visible="false"] .allergen-row,
.menu-item[data-visible="false"] .del-badge-btn,
.menu-category[data-visible="false"] .menu-item .img-control-btn,
.menu-category[data-visible="false"] .menu-item .allergen-row,
.menu-category[data-visible="false"] .menu-item .del-badge-btn {
    filter: grayscale(100%) !important;
    opacity: 0.3 !important;
    border-color: #444 !important;
    color: #555 !important;
    background: rgba(0, 0, 0, 0.8) !important;
    box-shadow: none !important;
    pointer-events: none;
    /* Evita que pulses sin querer cuando está oculto */
}

/* 5. EXCEPCIÓN VITAL: EL BOTÓN DE ELIMINAR (PAPELERA GRANDE) */
/* Debe encenderse en ROJO al pasar el ratón, esté como esté el plato */

/* Caso A: Plato oculto individualmente */
.menu-item[data-visible="false"] .item-btn.delete {
    pointer-events: auto !important;
    /* Reactivamos el clic solo para la papelera */
}

.menu-item[data-visible="false"] .item-btn.delete:hover {
    background-color: #ff0000 !important;
    border-color: #ff0000 !important;
    color: #fff !important;
    filter: none !important;
    opacity: 1 !important;
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.8);
    transform: scale(1.1);
}

/* Caso B: Categoría oculta */
.menu-category[data-visible="false"] .menu-item .item-btn.delete {
    pointer-events: auto !important;
}

.menu-category[data-visible="false"] .menu-item .item-btn.delete:hover {
    background-color: #ff0000 !important;
    border-color: #ff0000 !important;
    color: #fff !important;
    filter: none !important;
    opacity: 1 !important;
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.8);
    transform: scale(1.1);
}

/* 6. MODO CLIENTE (LO OCULTO DESAPARECE) */
body:not(.mode-editing) .menu-category[data-visible="false"],
body:not(.mode-editing) .menu-item[data-visible="false"] {
    display: none !important;
}


/* =========================================
   🎛️ BOTONES ADMIN PREMIUM (ESTILO GHOST/GLASS)
   ========================================= */

/* #admin-controls duplicate at 3878 removed and merged into global at 1361 */

/* Base común del Botón */
.admin-btn {
    width: 55px;
    height: 55px;
    border-radius: 50%;

    /* BASE: Fondo muy sutil y borde sólido */
    backdrop-filter: blur(4px);
    /* Efecto cristal */
    border-width: 2px;
    border-style: solid;

    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);

    /* Sombra suave */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);

    pointer-events: auto;
    /* Reactiva clicks en el botón */
}

/* Efecto Hover Genérico: Se vuelven sólidos y brillantes */
.admin-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
    color: #fff;
}

/* --- COLORES ESPECÍFICOS --- */

/* 1. EDITAR / ORGANIZAR (Amarillo) */
.admin-btn.primary {
    background-color: rgba(255, 202, 40, 0.15);
    /* Fondo Amarillo Transparente */
    border-color: var(--accent);
    color: var(--accent);
}

.admin-btn.primary:hover {
    background-color: var(--accent);
    /* Se rellena */
    color: #000;
    /* Texto negro para contraste en amarillo */
    box-shadow: 0 0 20px rgba(255, 202, 40, 0.5);
}

/* 1.1 BOTÓN BRANDING (Morado - Diseño) Fijo */
#brandingBtn {
    background-color: rgba(156, 39, 176, 0.15) !important;
    border-color: #9C27B0 !important;
    color: #9C27B0 !important;
}

#brandingBtn:hover {
    background-color: #9C27B0 !important;
    color: #fff !important;
    box-shadow: 0 0 20px rgba(156, 39, 176, 0.5) !important;
}

body.mode-editing #brandingBtn.with-text:hover {
    background-color: #9C27B0 !important;
    color: #fff !important;
}

/* 1.2 BOTÓN ORGANIZAR (Azul - Estructura) Fijo */
#organizeBtn,
#mt-organize {
    background-color: rgba(30, 136, 229, 0.15) !important;
    border-color: #1E88E5 !important;
    color: #1E88E5 !important;
}

#organizeBtn:hover,
#mt-organize:hover {
    background-color: #1E88E5 !important;
    color: #fff !important;
    box-shadow: 0 0 20px rgba(30, 136, 229, 0.5) !important;
}

body.mode-editing #organizeBtn.with-text:hover,
body.mode-editing #mt-organize.with-text:hover {
    background-color: #1E88E5 !important;
    color: #fff !important;
}

/* 1.3 BOTÓN PREMIUM (Oro Absoluto) Fijo */
#premiumBanner {
    background-color: rgba(212, 175, 55, 0.15) !important;
    border-color: #D4AF37 !important;
    color: #D4AF37 !important;
}

#premiumBanner:hover {
    background-color: #D4AF37 !important;
    color: #fff !important;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.5) !important;
}

body.mode-editing #premiumBanner.with-text:hover {
    background-color: #D4AF37 !important;
    color: #fff !important;
}

/* 2. GUARDAR (Verde) */
.admin-btn.save {
    background-color: rgba(76, 175, 80, 0.15);
    /* Fondo Verde Transparente */
    border-color: #4CAF50;
    color: #4CAF50;
}

.admin-btn.save:hover {
    background-color: #4CAF50;
    /* Se rellena */
    color: #fff;
    box-shadow: 0 0 20px rgba(76, 175, 80, 0.5);
}

/* 3. SALIR (Rojo) */
.admin-btn.danger {
    background-color: rgba(255, 68, 68, 0.15);
    /* Fondo Rojo Transparente */
    border-color: var(--danger);
    color: var(--danger);
}

.admin-btn.danger:hover {
    background-color: var(--danger);
    /* Se rellena */
    color: #fff;
    box-shadow: 0 0 20px rgba(255, 68, 68, 0.5);
}


/* =========================================
   FIX FINAL COMBINADO: VISUALIZACIÓN, CONTROLES Y ANCHO
   ========================================= */

/* --- 1. CONTROLES DE FOTO (GLOBAL) --- */
.img-edit-overlays {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20 !important;
    pointer-events: none;
    background: transparent !important;
}

.img-control-btn {
    position: absolute !important;
    bottom: 10px !important;
    width: 45px !important;
    height: 45px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto !important;

    /* Estilo Alta Visibilidad */
    background: rgba(0, 0, 0, 0.7) !important;
    border: 2px solid #fff !important;
    color: var(--accent) !important;
    font-size: 1.2rem !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5) !important;
    z-index: 30 !important;
}

.upload-btn {
    left: 10px !important;
}

.pan-trigger-btn {
    left: 65px !important;
    color: #fff !important;
}

.pan-trigger-btn.active {
    background: var(--accent) !important;
    color: #000 !important;
}

.img-control-btn:hover {
    transform: scale(1.1);
    background: #000 !important;
    border-color: var(--accent) !important;
}

/* --- 2. AJUSTES MÓVIL (ADMIN + EFECTOS + ANCHO CORREGIDO) --- */
@media (max-width: 768px) {

    /* A. Botones Admin */
    /* Duplicate #admin-controls removed from line 4042 to unify at line 1396 */

    .admin-btn {
        width: 42px;
        height: 42px;
        font-size: 1.1rem;
    }

    .admin-btn::after {
        display: none !important;
    }

    .admin-btn .btn-label {
        display: none !important;
    }

    .admin-btn.with-text .btn-icons {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* B. EFECTO "APAGADO" (ITEM O CATEGORÍA) - Mantenemos esto que ya funciona */
    .mode-editing .menu-item[data-visible="false"] .item-img::after,
    .mode-editing .menu-category[data-visible="false"] .menu-item .item-img::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(20, 20, 20, 0.75) !important;
        z-index: 5 !important;
        pointer-events: none;
    }

    .mode-editing .menu-item[data-visible="false"] .item-img img,
    .mode-editing .menu-category[data-visible="false"] .menu-item .item-img img {
        filter: grayscale(100%) saturate(0%) !important;
        -webkit-filter: grayscale(100%) saturate(0%) !important;
    }

    .mode-editing .menu-item[data-visible="false"] .product-badge,
    .mode-editing .menu-category[data-visible="false"] .menu-item .product-badge {
        background-color: #333 !important;
        color: #777 !important;
        border-color: #444 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
    }

    .mode-editing .menu-item[data-visible="false"] .item-img,
    .mode-editing .menu-category[data-visible="false"] .menu-item .item-img {
        display: block !important;
        position: relative !important;
        opacity: 1 !important;
    }

    /* C. ALINEACIÓN DE BOTONERA - ¡AQUÍ ESTÁ EL ARREGLO! */
    .mode-editing .menu-item .item-controls-footer {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 10px !important;

        /* 🔥 FIX MATEMÁTICO: 100% + 50px (los 25px de padding izquierdo + 25px derecho) */
        width: calc(100% + 50px) !important;

        /* Aseguramos que se expanda hacia los lados */
        margin: 15px -25px -25px -25px !important;

        padding: 12px 20px !important;
    }

    /* D. ESTILOS DE BOTONES */
    .mode-editing .cat-btn.visibility.active,
    .mode-editing .item-btn.visibility.active {
        color: var(--accent) !important;
        border: 1px solid var(--accent) !important;
        background: rgba(255, 202, 40, 0.1) !important;
        box-shadow: 0 0 8px rgba(255, 202, 40, 0.2) !important;
        opacity: 1 !important;
    }

    .mode-editing .cat-btn.visibility,
    .mode-editing .item-btn.visibility {
        color: #666 !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        background: transparent !important;
    }
}

/* =========================================
   HERO INTELIGENTE (DUAL FOCUS - CORREGIDO VFINAL)
   ========================================= */

.hero {
    /* 1. Definimos variables por defecto (PC) */
    --hero-pos-x: 50%;
    --hero-pos-y: 50%;
    --hero-scale: 1;

    /* 2. Definimos variables por defecto (MÓVIL) */
    --hero-pos-x-mobile: 50%;
    --hero-pos-y-mobile: 50%;
    --hero-scale-mobile: 1;

    /* 3. APLICACIÓN POR DEFECTO (PC) */
    /* Usamos las variables separadas que genera el JS */
    background-position: var(--hero-pos-x) var(--hero-pos-y) !important;

    /* Fórmula de Zoom para PC */
    background-size: calc(100% * var(--hero-scale)) auto !important;

    background-repeat: no-repeat !important;
    transition: background-position 0.1s linear, background-size 0.1s linear;
}

@media (max-width: 768px) {
    .hero {
        /* 4. CAMBIO AUTOMÁTICO A VARIABLES MÓVILES */
        background-position: var(--hero-pos-x-mobile) var(--hero-pos-y-mobile) !important;

        /* Fórmula de Zoom para Móvil (Auto width) */
        background-size: auto calc(100% * var(--hero-scale-mobile)) !important;
    }
}

/* --- LIMPIEZA MODO ESCAPARATE (CLIENTE) --- */

/* Ocultar botones de la foto Hero */
body:not(.mode-editing) .hero-edit-btn,
body:not(.mode-editing) .hero-pan-btn {
    display: none !important;
}

/* Quitar el borde dorado del Hero */
body:not(.mode-editing) .hero.panning-mode {
    border: none !important;
}

/* Ocultar los controles de las fotos de los platos */
body:not(.mode-editing) .img-edit-overlays {
    display: none !important;
}

/* Asegurar que el footer de los platos no se vea */
body:not(.mode-editing) .item-controls-footer {
    display: none !important;
}

/* =========================================
   EDITOR V14: VISUALIZACIÓN DE ESTUDIO
   ========================================= */

.editor-content-pro {
    background: #1e1e1e;
    width: 95%;
    max-width: 500px;
    /* Un poco más ancho para dar margen */
    border-radius: 12px;
    border: 1px solid #333;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.95);
    /* Sombra muy profunda */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.editor-header {
    background: #151515;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #2a2a2a;
    z-index: 20;
}

.editor-header h3 {
    color: var(--accent);
    margin: 0;
    font-size: 0.95rem;
    letter-spacing: 1px;
    font-weight: 700;
    text-transform: uppercase;
}

.close-editor-btn {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 1.2rem;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.close-editor-btn:hover {
    opacity: 1;
}

/* ESCENARIO (NUEVO): Da aire alrededor de la foto */
.editor-stage {
    background: #050505;
    /* Fondo casi negro para contraste */
    padding: 30px;
    /* ESTO ES EL MARGEN QUE PEDÍAS */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    /* Patrón sutil para dar sensación técnica */
    background-image: radial-gradient(#222 1px, transparent 1px);
    background-size: 20px 20px;
}

/* ÁREA DE TRABAJO (El Recorte Real) */
.editor-workspace {
    width: 100%;
    aspect-ratio: 4 / 3;
    position: relative;
    background: #000;

    /* Efecto "Sombra Paralela" para resaltar sobre el fondo */
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 10px 30px rgba(0, 0, 0, 0.5);

    /* Borde de guía sutil */
    outline: 1px dashed rgba(255, 202, 40, 0.3);

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden !important;
    cursor: grab;
    touch-action: none;
    z-index: 10;
    flex-shrink: 0;
}

.editor-workspace:active {
    cursor: grabbing;
    outline-color: var(--accent);
}

/* LA IMAGEN */
#editorImage {
    display: block;
    width: auto;
    height: auto;
    max-width: none !important;
    max-height: none !important;
    min-width: 100%;
    min-height: 100%;
    flex-shrink: 0;

    /* PRECISIÓN MATEMÁTICA */
    transform-origin: center center !important;
    will-change: transform;
    pointer-events: none;
    user-select: none;
}

/* CONTROLES */
.editor-controls-pro {
    background: #1e1e1e;
    padding: 20px 30px;
    z-index: 20;
    border-top: 1px solid #2a2a2a;
}

.slider-group {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    color: #888;
}

input[type=range] {
    flex: 1;
    accent-color: var(--accent);
    height: 4px;
    background: #333;
    cursor: pointer;
}

.action-buttons {
    display: flex;
    gap: 10px;
}

.btn-apply,
.btn-reset {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    transition: transform 0.1s;
}

.btn-apply:active,
.btn-reset:active {
    transform: scale(0.98);
}

.btn-apply {
    background: var(--accent);
    color: #000;
    box-shadow: 0 4px 12px rgba(255, 202, 40, 0.2);
}

.btn-reset {
    background: #2a2a2a;
    color: #ccc;
}

.editor-hint {
    text-align: center;
    color: #555;
    font-size: 0.75rem;
    margin-top: 15px;
}



/* =========================================
   CONTROLES DE FOTO (ESTRATEGIA ABSOLUTA)
   ========================================= */

/* 1. El contenedor invisible (ocupa toda la foto) */
.img-edit-overlays {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* Deja pasar el click a la foto en las zonas vacías */
    z-index: 10;
}

/* 2. Estilo base de los botones (Redondos y bonitos) */
.img-control-btn {
    position: absolute;
    /* ¡Clave! Posición libre */
    bottom: 15px;
    pointer-events: auto;
    /* Reactivamos el click */

    width: 38px;
    height: 38px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);

    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 15px;

    transition: all 0.2s ease;
    backdrop-filter: blur(4px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

/* 3. POSICIONAMIENTO EXACTO (Uno a cada lado) */

/* Botón Izquierda (Cámara) */
.img-control-btn.btn-left {
    left: 15px;
    /* A 15px del borde izquierdo */
}

/* Botón Derecha (Ajustar) */
.img-control-btn.btn-right {
    right: 15px;
    /* A 15px del borde derecho */
}

/* Efecto Hover */
.img-control-btn:hover {
    background: var(--accent, #ffca28);
    color: #000;
    transform: translateY(-3px) scale(1.1);
    border-color: #fff;
}

/* --- MOBILE EDITOR FIXES (User requested smaller stage) --- */
@media (max-width: 768px) {
    .image-editor-modal {
        align-items: center !important;
        /* Center vertically again */
        padding-top: 10px;
        overflow-y: auto;
        /* allow scroll if really needed */
    }

    .editor-content-pro {
        width: 95% !important;
        max-width: 100% !important;
        max-height: 95vh !important;
        /* Relaxed constraint */
        padding: 10px !important;
        display: flex;
        flex-direction: column;
    }

    .editor-stage {
        /* User req: "10px more" -> bumping to 62vh approx helps */
        max-height: 62vh !important;
        min-height: 320px;
        margin-bottom: 5px;
        flex-shrink: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Ensure workspace maintains aspect ratio within the constrained stage */
    .editor-workspace {
        max-height: 100%;
        max-width: 100%;
    }

    .editor-header {
        margin-bottom: 5px;
        padding-bottom: 5px;
        flex-shrink: 0;
    }

    .editor-header h3 {
        font-size: 1.1rem;
        /* Restore bit of size */
        margin: 0;
    }

    .close-editor-btn {
        top: 5px;
        right: 5px;
    }

    .device-toggles {
        padding: 8px !important;
        /* Restore padding */
        margin-bottom: 5px !important;
        flex-shrink: 0;
    }

    .editor-controls-pro {
        padding-top: 5px;
        flex-shrink: 0;
    }

    .editor-hint {
        font-size: 0.8rem;
        margin-top: 5px;
    }
}

/* --- LOGIN MODAL UI REFINEMENTS --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
}

.login-box {
    position: relative;
    /* Anchor for close button */
    background: #111;
    border: 1px solid #D4AF37;
    padding: 2.5rem;
    border-radius: 12px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.3);
}

.login-box h3 {
    margin-top: 0;
    margin-bottom: 1.5rem;
    color: #D4AF37;
    text-align: center;
    font-family: 'Syne', sans-serif;
}

.close-modal-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: transparent;
    border: none;
    color: #D4AF37;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-modal-btn:hover {
    color: #D4AF37;
    transform: rotate(90deg);
}

.login-box .input-group {
    margin-bottom: 1.2rem;
    text-align: left;
}

.login-box .input-group label {
    display: block;
    margin-bottom: 5px;
    color: #888;
    font-size: 0.9rem;
}

.login-box .input-group input {
    width: 100%;
    background: #1e1e1e;
    border: 1px solid #333;
    padding: 12px;
    border-radius: 8px;
    color: #fff;
    transition: border-color 0.3s;
}

.login-box .input-group input:focus {
    border-color: #D4AF37;
    outline: none;
}

/* =========================================
   PREMIUM QR MODAL & DYNAMIC SAVE BTN
   ========================================= */

.premium-qr-box {
    background: #000;
    border: 1.5px solid #D4AF37;
    padding: 40px;
    border-radius: 28px;
    width: 95%;
    max-width: 750px;
    text-align: center;
    position: relative;
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.9), 0 0 20px rgba(212, 175, 55, 0.1);
}

.qr-header {
    margin-bottom: 20px;
}

.qr-cols-container {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    text-align: left;
    margin-top: 20px;
}

.qr-col-left,
.qr-col-right {
    flex: 1;
    min-width: 0;
}

.rescue-block {
    background: #000;
    border: 2px solid #ff4d4d;
    border-radius: 20px;
    padding: 24px;
    margin: 15px 0 20px;
    box-shadow: 0 0 30px rgba(255, 77, 77, 0.2), inset 0 0 15px rgba(255, 77, 77, 0.1);
    position: relative;
    overflow: hidden;
}

.urgency-banner {
    background: transparent;
    border: none;
    padding: 0;
    margin-bottom: 12px;
    text-align: center;
}

.urgency-label {
    color: var(--text-muted);
    font-size: 0.7rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 8px;
    font-weight: bold;
}

.urgency-timer {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.1rem;
    color: #D4AF37;
    font-weight: bold;
    letter-spacing: 1px;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.4);
    white-space: nowrap;
}

.urgency-timer.red {
    color: #ff4444 !important;
    text-shadow: 0 0 10px rgba(255, 68, 68, 0.4) !important;
}

.btn-save-forever {
    background: linear-gradient(135deg, #D4AF37, #f6cf57);
    color: #000;
    border: none;
    padding: 22px 30px;
    font-size: 1.25rem;
    font-weight: 800;
    border-radius: 12px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    width: 100%;
    margin-top: 10px;
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.3);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: 'Inter', 'Roboto', 'Open Sans', sans-serif;
}

.btn-save-forever i {
    font-size: 1.15rem;
    margin-top: -1px;
}

.btn-save-forever:hover {
    transform: scale(1.02) translateY(-2px);
    box-shadow: 0 12px 35px rgba(212, 175, 55, 0.5);
}

.rescue-block .guest-desc {
    color: #bbb;
    font-size: 0.85rem;
    /* Smaller to integrate better */
    line-height: 1.5;
    margin: 0 0 15px;
    padding: 0;
    background: transparent;
    border: none;
    text-align: center;
}

.qr-header h3 {
    color: #fff;
    font-size: 1.4rem;
    margin: 0;
    letter-spacing: 1px;
    font-family: var(--font-heading);
    text-transform: uppercase;
}

.qr-container-wrapper {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 15px auto;
    padding: 12px;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.qr-glow-container {
    width: 100%;
    height: 100%;
}

.premium-copy {
    color: #aaa;
    font-family: var(--font-body);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 15px;
}

.qr-magic-hint {
    font-size: 0.8rem;
    color: #888;
    margin-top: 10px;
    text-align: center;
}

.premium-copy span {
    display: inline-block;
    color: #D4AF37;
    font-weight: 700;
    font-size: 1.1rem;
    margin-top: 10px;
    background: rgba(255, 255, 255, 0.05);
    padding: 6px 15px;
    border-radius: 8px;
}

.qr-advantages {
    text-align: left;
    margin: 0 0 25px;
    background: rgba(255, 255, 255, 0.05);
    padding: 22px;
    border-radius: 16px;
}

.qr-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    width: 100%;
}

#personalizeLinkWrapper {
    width: 100%;
}

.advantages-title {
    color: #D4AF37;
    font-weight: 800;
    margin-bottom: 15px;
    font-size: 0.95rem;
    letter-spacing: 0.5px;
    text-align: center;
}

.advantages-list {
    list-style: none;
    padding: 0;
    margin: 0;
    color: #ddd;
    font-size: 0.88rem;
    line-height: 1.6;
}

.advantages-list li {
    margin-bottom: 12px;
    display: flex;
    align-items: flex-start;
}

.advantages-list li:last-child {
    margin-bottom: 0;
}

.advantages-list i {
    color: #D4AF37;
    margin-right: 12px;
    margin-top: 4px;
    font-size: 1rem;
}

/* Modal QR Responsive */
@media (max-width: 700px) {
    .premium-qr-box {
        padding: 30px 20px;
        max-width: 420px;
        border-radius: 20px;
    }

    .qr-cols-container {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }

    .qr-col-left,
    .qr-col-right {
        width: 100%;
    }

    .premium-copy {
        max-width: 280px;
        margin: 0 auto 15px;
    }

    .qr-header {
        margin-top: 25px;
        margin-bottom: 10px;
    }

    .qr-header h3 {
        font-size: 1.05rem;
        /* Reduced to avoid cut-off */
        white-space: normal;
        /* Allow wrap if very narrow */
        line-height: 1.4;
        letter-spacing: 0.5px;
    }

    .qr-advantages {
        padding: 18px;
        margin: 15px 0;
    }
}

.premium-close-btn {
    background: #D4AF37 !important;
    color: #000 !important;
    border: none;
    padding: 10px 18px;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.9rem;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.qr-text-link {
    background: none;
    border: none;
    color: #D4AF37;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    padding: 5px 10px;
    opacity: 0.8;
    transition: 0.2s;
    text-decoration: underline;
}

.qr-text-link:hover {
    opacity: 1;
    transform: translateX(3px);
}

.deletion-warning {
    color: #ff4444;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
}

/* DYNAMIC ADMIN BUTTONS TEXT ANIMATION (PC ONLY) */
@media (min-width: 769px) {
    body.mode-editing .admin-btn.with-text {
        width: 100px !important;
        /* Ancho base para iconos */
        height: 50px !important;
        padding: 0 !important;
        border-radius: 50px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0 !important;
        overflow: hidden;
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
        white-space: nowrap !important;
        background-color: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        color: #fff !important;
        outline: none !important;
        /* Evitar recuadros de edición */
        user-select: none !important;
    }

    /* Colores específicos manteniendo el estilo original */
    body.mode-editing .admin-btn.save.with-text {
        background-color: rgba(76, 175, 80, 0.15) !important;
        border-color: #4CAF50 !important;
        color: #4CAF50 !important;
        animation: pulse-green-btn 2s infinite !important;
        /* Width matches standard buttons (100px) */
    }

    body.mode-editing .admin-btn.primary.with-text {
        background-color: rgba(212, 175, 55, 0.15) !important;
        border-color: var(--accent) !important;
        color: var(--accent) !important;
    }

    body.mode-editing .admin-btn.danger.with-text {
        background-color: rgba(255, 68, 68, 0.15) !important;
        border-color: #ff4444 !important;
        color: #ff4444 !important;
    }

    body.mode-editing .admin-btn.with-text:hover {
        width: 260px !important;
        /* Un poco más de ancho para el nuevo gap */
        padding: 0 25px !important;
        background-color: currentColor !important;
        color: #fff !important;
        gap: 25px !important;
        /* Más separación icono-texto según pedido */
    }

    body.mode-editing .admin-btn.save.with-text:hover {
        background-color: #4CAF50 !important;
        box-shadow: 0 0 20px rgba(76, 175, 80, 0.4) !important;
    }

    body.mode-editing .admin-btn.danger.with-text:hover {
        background-color: #ff4444 !important;
        box-shadow: 0 0 20px rgba(255, 68, 68, 0.4) !important;
    }

    body.mode-editing .admin-btn.primary.with-text:hover {
        background-color: var(--accent) !important;
        box-shadow: 0 0 20px rgba(212, 175, 55, 0.4) !important;
    }

    .admin-btn.with-text .btn-icons {
        display: flex;
        gap: 12px;
        font-size: 1.1rem;
        transition: all 0.3s;
        flex-shrink: 0;
    }

    .admin-btn.with-text .btn-label {
        font-family: var(--font-heading);
        font-weight: 700;
        font-size: 0.85rem;
        letter-spacing: 1px;
        text-transform: uppercase;
        display: none;
        /* Oculto por defecto en PC */
        white-space: nowrap;
    }

    body.mode-editing .admin-btn.with-text:hover .btn-label {
        display: inline-block;
        color: #fff !important;
        margin-left: 10px;
        /* Separación extra icono-texto */
    }
}

/* REDUNDANT BLOCK REMOVED */

/* PC VERSION: Adjustment */
@media (min-width: 769px) {
    #saveBtn.with-text {
        height: 55px !important;
    }
}

/* ==========================================
   🚀 PLG PIVOT COMPONENTS
   ========================================== */


.deletion-warning {
    background: rgba(255, 68, 68, 0.1);
    border-left: 3px solid #ff4444;
    padding: 10px;
    border-radius: 4px;
    margin: 15px 0;
}

#registerModal .login-box,
#premiumModal .login-box {
    background: #0a0a0a;
    border: 1px solid #D4AF37;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
}

.input-group {
    margin-bottom: 15px;
    text-align: left;
}

.input-group label {
    display: block;
    color: #D4AF37;
    font-size: 0.75rem;
    text-transform: uppercase;
    margin-bottom: 5px;
    font-weight: bold;
}

.input-group input {
    width: 100%;
    background: #1a1a1a;
    border: 1px solid #333;
    padding: 10px;
    color: #fff;
    border-radius: 4px;
    font-family: var(--font-body);
}

.input-group input:focus {
    border-color: #D4AF37;
    outline: none;
}

/* --- BRANDING PREMIUM: PROGRESSIVE DISCLOSURE --- */

/* 1. Familias Principales */
.color-family-btn {
    opacity: 1;
    transform: scale(1);
}

.color-family-btn.dimmed {
    opacity: 0.4;
    transform: scale(0.9);
}

.color-family-btn.active {
    box-shadow: 0 0 12px #D4AF37 !important;
    border-color: white !important;
}

/* 2. Contenedor Dinámico Expansible */
.subc-wrapper {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out, margin-top 0.3s ease-in-out, opacity 0.3s ease-in-out;
    opacity: 0;
    margin-top: 0;
}

.subc-wrapper.expanded {
    max-height: 100px;
    /* Suficiente para la fila de sub-tonos */
    opacity: 1;
    margin-top: 15px;
}

.sub-colors-inner {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 12px 15px;
    display: flex;
    align-items: center;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5);
}

/* 3. Sub-tones Swatches */
.subc-swatch {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.subc-swatch:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

.subc-swatch.active {
    border-color: white !important;
    box-shadow: 0 0 15px #D4AF37;
}

.subc-swatch.active::after {
    content: '\f00c';
    /* FontAwesome check */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: white;
    font-size: 0.8rem;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}