:root {
    --canvas-width: 768px;
    --price-color: #635C49;
    --menu-scale: 1;
}

* {
    box-sizing: border-box;
}

body {
    font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    margin: 16px;
    color: #222;
}

html,
body {
    overflow-x: hidden;
}

.app-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.app-header .logo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.app-title {
    font-size: 18px;
    margin: 0;
}

.page {
    display: grid;
    gap: 16px;
}

.controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
}

/* Grupo de plantilla (Delivery) */
.template-group {
    width: 100%;
}

.template-toggle .btn-group .btn {
    padding: 2px 10px;
}

.delivery-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Tarjeta de opciones adicionales */
.extra-options {
    margin-top: 8px;
    padding: 12px;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    background: #fafafa;
}

.extra-options .extra-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
}

.extra-options .extra-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.controls>* {
    min-width: 0;
}

.controls input {
    padding: 6px 8px;
    min-width: 160px;
}

.controls button {
    padding: 6px 10px;
    cursor: pointer;
}

.controls .color-row {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 8px;
}

.app-footer {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    align-items: center;
    color: #666;
    font-size: 10px;
}

.app-footer .help {
    margin: 0;
    padding-left: 18px;
}

.app-footer .help li {
    margin-bottom: 4px;
}

.hint {
    color: #0b5;
}

.coords {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 8px;
    font-size: 14px;
}

/* Ocultar herramientas dev cuando no esté activo dev-mode */
.dev-tools[hidden] {
    display: none !important;
}

#menu-container {
    position: relative;
    width: var(--canvas-width);
    max-width: 100%;
    height: auto;
}

.right-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#menu-image {
    display: block;
    width: 100%;
    height: auto;
}

#price-span {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-weight: 500;
    font-size: calc(24px * var(--menu-scale));
    color: var(--price-color, #222);
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
    user-select: none;
    pointer-events: none;
}

.placing #price-span {
    outline: 2px dashed rgba(0, 0, 0, 0.3);
    outline-offset: 2px;
}

body.placing #menu-container {
    cursor: crosshair;
}

#grid-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.12) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.12) 1px, transparent 1px);
    background-size: 10% 100%, 100% 10%;
    z-index: 1;
}

#tags-layer {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
}

#tags-layer span.tag {
    position: absolute;
    transform: translate(-50%, -50%) translateZ(0);
    /* evita subpixel jitter en algunos navegadores desktop */
    font-weight: 500;
    font-size: calc(20px * var(--menu-scale));
    color: var(--price-color, #222);
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7);
    pointer-events: none;
}

/* Evitar saltos de layout durante renderizado */
#tags-layer,
#grid-overlay {
    contain: size layout paint;
}

#admin-panel {
    margin-top: 16px;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
}

.admin-hint {
    margin: 6px 0 12px;
    color: #666;
    font-size: 12px;
}

.admin-status {
    min-height: 20px;
    font-size: 12px;
    margin: 6px 0 10px;
}

.admin-status.error {
    color: #b00020;
}

.admin-status.success {
    color: #0a7a0a;
}

.admin-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 8px;
    align-items: center;
    margin-bottom: 10px;
}

#admin-load-btn {
    white-space: nowrap;
}

/* Colapsar editor hasta cargar */
body.admin-collapsed #admin-list {
    display: none;
}

body.admin-collapsed .admin-actions {
    display: none;
}

#admin-list {
    display: grid;
    gap: 8px 12px;
    max-width: 1100px;
}

#admin-list input[type="number"] {
    width: 120px;
}

/* Mejor layout en móvil para admin */
@media (max-width: 640px) {
    #admin-list {
        grid-template-columns: 1fr;
    }

    #admin-list input[type="number"] {
        width: 100%;
    }

    .admin-multi {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    /* Evitar overflow horizontal */
    .admin-row {
        grid-template-columns: 1fr;
    }

    #admin-load-btn {
        width: 100%;
    }

    #admin-panel {
        width: 100%;
        overflow-x: hidden;
    }
}

/* Espaciado para el botón final en móvil y desktop */
.admin-actions {
    margin-top: 12px;
}

/* Responsive mobile first */
@media (max-width: 640px) {
    :root {
        --canvas-width: 100%;
    }

    .controls {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .controls>label {
        grid-column: 1 / -1;
    }

    #rate-input {
        grid-column: 1 / -1;
    }

    #fetch-rate-btn {
        grid-column: 1 / -1;
    }

    .delivery-inline {
        display: none;
        /* En móvil, ocultar el toggle superior */
    }

    #update-prices-btn,
    #update-prices-usd-btn,
    #download-btn {
        grid-column: 1 / -1;
    }

    .controls label {
        align-self: center;
    }

    .controls input[type="number"],
    .controls button,
    .controls .color-row {
        width: 100%;
    }

    /* En móvil: opciones en tarjeta al final */
    .extra-options {
        grid-column: 1 / -1;
    }

    /* Dev tools fuera en móvil */
    .dev-tools {
        display: none;
    }

    .right-col {
        order: 1;
    }

    #menu-container {
        order: 2;
    }

    .app-footer {
        order: 2;
    }
}

@media (min-width: 641px) {
    .page {
        grid-template-columns: auto 1fr;
        align-items: start;
    }

    /* Escritorio: tres elementos en una sola fila dentro de Opciones Adicionales */
    .extra-options .extra-grid {
        grid-template-columns: auto 1fr auto;
        align-items: center;
    }

    .extra-options .color-row {
        grid-column: 2 / 3;
    }

    .extra-options .delivery-row {
        grid-column: 3 / 4;
        justify-self: start;
        display: none;
        /* Ocultar Delivery dentro de opciones en escritorio */
    }
}

/* Desktop ancho: panel en dos columnas para menor scroll */
@media (min-width: 1200px) {
    .right-col {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        align-items: start;
    }

    .controls {
        grid-column: 1 / -1;
    }

    #admin-panel {
        grid-column: 1 / -1;
    }

    /* Dos columnas de items (nombre + input) */
    #admin-list {
        grid-template-columns: repeat(2, 1fr);
    }

    #admin-list .admin-item {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 8px 12px;
    }

    .admin-multi {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
}