/* ============================================================
   1. FUENTES TROPICALES (Google Fonts)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,700;0,800;1,600&family=Quicksand:wght@600;700&display=swap');

/* ============================================================
   2. PALETA VERDE TROPICAL (Mantiene exactamente los mismos nombres)
   ============================================================ */
:root {
    /* ==========================================
       PALETA DE COLORES INSPIRADA EN EL LOGO
       ========================================== */
    --color-fresa: #d94e5d; /* Rojo Fresa Principal */
    --color-menta: #e08e9b; /* Rosa Empolvado / Acento Suave */
    --color-vainilla: #faf5ef; /* Crema Vainilla Suave */
    --color-chocolate: #3d2b23; /* Chocolate Cálido (Títulos) */
    --color-mango: #f4c2c1; /* Melocotón / Mango Cálido */
    --color-texto: #4a3e3d; /* Café Pizarra para lectura */
    --color-fondo: #fffdf9; /* Fondo general cálido y limpio */
    --color-tarjeta: #ffffff; /* Blanco puro para paneles y tarjetas */
    --color-borde: #f2d5da; /* Borde rosa crema suave */
    --color-exito: #a2eb69; /* Verde de confirmación */
    --color-peligro: #e53e3e; /* Rojo de advertencia/eliminar */
    --color-aviso: #f59e0b; /* Naranja cálido */
    --radio: 16px;
    --sombra: 0 6px 18px rgba(217, 78, 93, 0.12); /* Sombra con matiz cálido */
}
* {
        box-sizing: border-box;
    }

    body {
        margin: 0;
        font-family: 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
        background: linear-gradient(180deg, #e0f2fe 0%, var(--color-fondo) 200px);
        color: var(--color-texto);
        min-height: 100vh;
        padding-bottom: 40px;
    }
    /* Aplica la tipografía tropical a todos los títulos del sistema */
h1, h2, h3, .titulo-panel {
    font-family: 'Playfair Display', cursive, sans-serif !important;
    letter-spacing: 0.5px;
    color: var(--color-chocolate);
}
    /* ============================================================
   4. LOGO MÁS GRANDE Y MARCA CON ESTILO TROPICAL
   ============================================================ */
    .barra-superior {
        background: linear-gradient(135deg, #0f766e 0%, #06d6a0 100%);
        padding: 10px 24px;
        box-shadow: 0 4px 12px rgba(15, 118, 110, 0.2);
    }

    .marca-header {
        display: flex;
        align-items: center;
        gap: 14px;
    }
    /* Logo ampliado con efecto flotante */
    .logo-header {
        height: 85px; /* Tamaño más grande (antes ~35px) */
        width: auto;
        object-fit: contain;
        filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
        transition: transform 0.25s ease-in-out;
    }

        .logo-header:hover {
            transform: scale(1.08) rotate(-2deg);
        }
    /* Letras "HAWAIANAS" estilizadas */
.marca-header span {
    font-family: 'Playfair Display', cursive, sans-serif;
    font-size: 1.7rem;
    font-weight: 800;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2), 0 0 10px rgba(255, 255, 255, 0.3);
}
    /* ---------- Barra superior ---------- */
    .barra-superior {
        background: linear-gradient(135deg, var(--color-fresa), var(--color-mango));
        color: #fff;
        padding: 18px 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 12px;
        box-shadow: var(--sombra);
    }

        .barra-superior h1 {
            margin: 0;
            font-size: 1.4rem;
            display: flex;
            align-items: center;
            gap: 10px;
        }

    .navegacion {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

        .navegacion a {
            color: #fff;
            text-decoration: none;
            background: rgba(255,255,255,0.2);
            padding: 8px 14px;
            border-radius: 999px;
            font-size: 0.9rem;
            transition: background 0.2s;
            white-space: nowrap;
        }

            .navegacion a:hover, .navegacion a.activo {
                background: rgba(255,255,255,0.45);
            }
    /* ---------- Contenedor general ---------- */
    .contenedor {
        max-width: 1200px;
        margin: 24px auto;
        padding: 0 20px;
    }

    .panel {
        background: var(--color-tarjeta);
        border-radius: var(--radio);
        box-shadow: var(--sombra);
        padding: 20px;
        margin-bottom: 24px;
    }

        .panel h2 {
            margin-top: 0;
            color: var(--color-chocolate);
            border-bottom: 3px solid var(--color-borde);
            padding-bottom: 10px;
        }
    /* ---------- Formularios ---------- */
    .form-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 14px;
    }

    label {
        font-weight: 600;
        font-size: 0.85rem;
        color: var(--color-chocolate);
        display: block;
        margin-bottom: 4px;
    }

    input, select, textarea {
        width: 100%;
        padding: 10px 12px;
        border: 2px solid var(--color-borde);
        border-radius: 10px;
        font-size: 0.95rem;
        background: #fff;
        color: var(--color-texto);
    }

        input:focus, select:focus, textarea:focus {
            outline: none;
            border-color: var(--color-fresa);
        }

    .campo {
        display: flex;
        flex-direction: column;
    }
    /* ---------- Botones ---------- */
    .boton {
        border: none;
        border-radius: 999px;
        padding: 10px 20px;
        font-size: 0.9rem;
        font-weight: 600;
        cursor: pointer;
        transition: transform 0.15s, box-shadow 0.15s;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

        .boton:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 14px rgba(0,0,0,0.15);
        }

        .boton:active {
            transform: translateY(0);
        }

    .boton-primario {
        background: var(--color-fresa);
        color: #fff;
    }

    .boton-secundario {
        background: var(--color-menta);
        color: #fff;
    }

    .boton-exito {
        background: var(--color-exito);
        color: #fff;
    }

    .boton-peligro {
        background: var(--color-peligro);
        color: #fff;
    }

    .boton-aviso {
        background: var(--color-aviso);
        color: #fff;
    }

    .boton-neutro {
        background: #e2e8f0;
        color: var(--color-texto);
    }

    .boton-pequeno {
        padding: 6px 12px;
        font-size: 0.8rem;
    }
    /* ---------- Tablas ---------- */
    .tabla-contenedor {
        overflow-x: auto;
    }

    table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.9rem;
    }

    thead th {
        background: var(--color-chocolate);
        color: #fff;
        padding: 10px 12px;
        text-align: left;
        position: sticky;
        top: 0;
    }

    tbody td {
        padding: 10px 12px;
        border-bottom: 1px solid var(--color-borde);
    }

    tbody tr:hover {
        background: #f0f9ff;
    }

    .badge {
        padding: 4px 10px;
        border-radius: 999px;
        font-size: 0.75rem;
        font-weight: 700;
        color: #fff;
        white-space: nowrap;
    }

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

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

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

    .badge-batido {
        background: var(--color-fresa);
    }
    /* ---------- Cuadrícula de tarjetas (catálogo) ---------- */
    .grilla-productos {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
        gap: 18px;
    }

    .tarjeta-producto {
        background: var(--color-tarjeta);
        border-radius: var(--radio);
        overflow: hidden;
        box-shadow: var(--sombra);
        display: flex;
        flex-direction: column;
    }

        .tarjeta-producto img {
            width: 100%;
            height: 160px;
            object-fit: cover;
            background: var(--color-borde);
        }

        .tarjeta-producto .contenido {
            padding: 14px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            flex-grow: 1;
        }

        .tarjeta-producto h3 {
            margin: 0;
            font-size: 1.05rem;
        }

        .tarjeta-producto .descripcion {
            font-size: 0.82rem;
            color: #64748b;
            flex-grow: 1;
        }

        .tarjeta-producto .precio {
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--color-fresa);
        }
    /* ---------- Carrito lateral ---------- */
    .panel-carrito {
        position: sticky;
        top: 20px;
    }

    .item-carrito {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0;
        border-bottom: 1px dashed var(--color-borde);
        gap: 8px;
        flex-wrap: wrap;
    }

    .total-carrito {
        font-size: 1.3rem;
        font-weight: 800;
        color: var(--color-chocolate);
        text-align: right;
        margin-top: 10px;
    }
    /* ---------- Mensajes / avisos ---------- */
    .mensaje {
        padding: 12px 16px;
        border-radius: 10px;
        margin-bottom: 16px;
        font-weight: 600;
        display: none;
    }

        .mensaje.mostrar {
            display: block;
        }

        .mensaje.exito {
            background: #ecfdf5;
            color: var(--color-exito);
            border: 1px solid var(--color-exito);
        }

        .mensaje.error {
            background: #fef2f2;
            color: var(--color-peligro);
            border: 1px solid var(--color-peligro);
        }
    /* ---------- Layout de 2 columnas (catálogo + carrito) ---------- */
    .layout-venta {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 20px;
        align-items: start;
    }
    /* ---------- Responsivo: tablets y pantallas verticales grandes ---------- */
    @media (max-width: 1024px) {
        .layout-venta {
            grid-template-columns: 1fr;
        }

        .panel-carrito {
            position: static;
        }
    }

    @media (max-width: 768px) {
        .barra-superior {
            flex-direction: column;
            align-items: flex-start;
        }

        .grilla-productos {
            grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        }

        .contenedor {
            padding: 0 12px;
        }

        thead th, tbody td {
            padding: 8px 6px;
            font-size: 0.8rem;
        }
    }

    @media (min-width: 900px) and (orientation: portrait) {
        .grilla-productos {
            grid-template-columns: repeat(3, 1fr);
        }
    }
    /* ---------- Botón de pantalla completa (solo PC/tablet) ---------- */
    .boton-pantalla-completa {
        display: none;
        align-items: center;
        gap: 6px;
        background: rgba(255,255,255,0.22);
        color: #fff;
        border: none;
        padding: 8px 14px;
        border-radius: 999px;
        font-size: 0.9rem;
        font-weight: 600;
        cursor: pointer;
        transition: background 0.2s;
    }

        .boton-pantalla-completa:hover {
            background: rgba(255,255,255,0.35);
        }

    @media (min-width: 600px) {
        .boton-pantalla-completa {
            display: inline-flex;
        }
    }

    body.modo-pantalla-completa .barra-superior {
        display: none;
    }

    body.modo-pantalla-completa .contenedor {
        padding-top: 16px;
    }

    .boton-salir-pantalla-completa {
        display: none;
        position: fixed;
        top: 14px;
        right: 14px;
        z-index: 500;
        background: linear-gradient(135deg, var(--color-fresa), var(--color-mango));
        color: #fff;
        border: none;
        padding: 8px 14px;
        border-radius: 999px;
        font-size: 0.85rem;
        font-weight: 700;
        cursor: pointer;
        box-shadow: var(--sombra);
    }

    body.modo-pantalla-completa .boton-salir-pantalla-completa {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }
    /* ---------- Vista previa de imagen en formularios ---------- */
    .vista-previa-imagen {
        width: 100%;
        max-width: 200px;
        height: 140px;
        object-fit: cover;
        border-radius: 10px;
        border: 2px solid var(--color-borde);
        margin-top: 8px;
        display: none;
    }

        .vista-previa-imagen.mostrar {
            display: block;
        }

    .pestanas-imagen {
        display: flex;
        gap: 8px;
        margin-bottom: 8px;
    }

    .pestana-imagen {
        padding: 6px 14px;
        border-radius: 999px;
        background: #e2e8f0;
        cursor: pointer;
        font-size: 0.8rem;
        font-weight: 600;
    }

        .pestana-imagen.activa {
            background: var(--color-fresa);
            color: #fff;
        }
    /* ============================================================
   ESTILOS DE PROMOCIONES
   ============================================================ */
    /* Banner de Happy Hour */
    .banner-happy-hour {
        background: linear-gradient(135deg, #0284c7, #38bdf8);
        color: #fff;
        padding: 14px 18px;
        border-radius: var(--radio);
        margin-bottom: 16px;
        font-weight: 700;
        display: none;
        align-items: center;
        gap: 10px;
        box-shadow: var(--sombra);
    }

        .banner-happy-hour.mostrar {
            display: flex;
        }
    /* Banner de cliente estrella */
    .panel-fidelidad {
        background: linear-gradient(135deg, #bae6fd, #e0f2fe);
        border-radius: 12px;
        padding: 12px 16px;
        margin-top: 10px;
        display: none;
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--color-chocolate);
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 8px;
    }

        .panel-fidelidad.mostrar {
            display: flex;
        }
    /* Aviso informativo de combos */
    .aviso-combo {
        background: #f0f9ff;
        border: 1px dashed var(--color-fresa);
        color: #0369a1;
        border-radius: 10px;
        padding: 10px 14px;
        font-size: 0.85rem;
        margin-bottom: 14px;
        font-weight: 600;
    }
    /* Precio tachado cuando aplica un descuento */
    .precio-tachado {
        text-decoration: line-through;
        color: #94a3b8;
        font-size: 0.85rem;
        font-weight: 400;
        margin-right: 6px;
    }

    .precio-happy-hour {
        color: var(--color-fresa);
    }
    /* Etiqueta "GRATIS" sobre un renglón del carrito */
    .badge-gratis {
        background: linear-gradient(135deg, #38bdf8, #0284c7);
        color: #ffffff;
    }

    .badge-happyhour {
        background: linear-gradient(135deg, #0284c7, #06b6d4);
    }

    .badge-combo {
        background: var(--color-exito);
    }
    /* Resumen de totales del carrito con desglose de descuentos */
    .desglose-total {
        font-size: 0.85rem;
        color: #64748b;
        display: flex;
        justify-content: space-between;
        padding: 2px 0;
    }

        .desglose-total.descuento {
            color: var(--color-exito);
            font-weight: 700;
        }
    /* ============================================================
   MODAL MODERNO
   ============================================================ */
    .overlay-modal {
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.6);
        backdrop-filter: blur(3px);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1000;
        padding: 16px;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s ease, visibility 0.2s ease;
    }

        .overlay-modal.mostrar {
            opacity: 1;
            visibility: visible;
        }

    .caja-modal {
        background: var(--color-tarjeta);
        border-radius: 22px;
        width: 100%;
        max-width: 440px;
        max-height: 90vh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        box-shadow: 0 30px 80px rgba(15, 23, 42, 0.4);
        transform: scale(0.88) translateY(18px);
        opacity: 0;
        transition: transform 0.28s cubic-bezier(.34,1.56,.64,1), opacity 0.22s ease;
    }

    .overlay-modal.mostrar .caja-modal {
        transform: scale(1) translateY(0);
        opacity: 1;
    }

    .modal-encabezado {
        padding: 28px 24px 22px;
        text-align: center;
        color: #fff;
        position: relative;
        flex-shrink: 0;
    }

        .modal-encabezado.grad-peligro {
            background: linear-gradient(135deg, #ef4444, #f43f5e 70%);
        }

        .modal-encabezado.grad-exito {
            background: linear-gradient(135deg, #059669, #06b6d4 70%);
        }

        .modal-encabezado.grad-aviso {
            background: linear-gradient(135deg, #d97706, #38bdf8 70%);
        }

        .modal-encabezado.grad-info {
            background: linear-gradient(135deg, #0284c7, #38bdf8 75%);
        }

        .modal-encabezado.grad-editar {
            background: linear-gradient(135deg, #0284c7, #06b6d4 70%);
        }

    .modal-icono {
        width: 62px;
        height: 62px;
        border-radius: 50%;
        background: rgba(255,255,255,0.25);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 30px;
        margin: 0 auto 12px;
        box-shadow: 0 6px 16px rgba(0,0,0,0.15);
    }

    .modal-titulo {
        margin: 0;
        font-size: 1.15rem;
        font-weight: 800;
    }

    .modal-cuerpo {
        padding: 22px 24px;
        color: var(--color-texto);
        font-size: 0.92rem;
        line-height: 1.55;
        overflow-y: auto;
    }

        .modal-cuerpo p {
            margin: 0;
        }

    .modal-pie {
        padding: 16px 24px 24px;
        display: flex;
        gap: 10px;
        justify-content: flex-end;
        flex-wrap: wrap;
        flex-shrink: 0;
    }
    /* ============================================================
   FILAS ANULADAS (Historial de ventas)
   ============================================================ */
    .fila-anulada td {
        color: var(--color-peligro) !important;
        text-decoration: line-through;
        background: #fef2f2 !important;
    }

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