/* ===================== */
/* APP RETAIL AISLADA */
/* ===================== */
#app-retail {
    font-family: Arial, sans-serif;
}

#app-retail * {
    box-sizing: border-box;
}

#app-retail img {
    width: 100%;
    display: block;
}

/* ------------------ */
/* CONTAINER */
/* ------------------ */
#app-retail .container {
    max-width:1200px;
    margin:auto;
    padding:0px;
}

/* ------------------ */
/* FILTROS */
/* ------------------ */
#app-retail .filtros {
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:20px;
}

#app-retail select {
    width: auto !important;   /* 🔥 evita que se estire full */
    padding:10px 14px;
    font-size:16px;
    border-radius:8px;
    border:1px solid #ccc;
    max-width: 300px;
    position: relative;
    z-index: 1;
}

/* badge */
#app-retail .badge-categorias {
    color:#00AEEF;
    font-size:13px;
    padding:6px 12px;
    border-radius:20px;
    animation:pulseBadge 1.8s infinite;
}

@keyframes pulseBadge {
    0%,100% { transform:scale(1); }
    50% { transform:scale(1.05); }
}

/* ------------------ */
/* GRID */
/* ------------------ */
#app-retail .grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
    gap:16px;
}

/* ------------------ */
/* CARD */
/* ------------------ */
#app-retail .card {
    background:#fff;
    box-shadow:0 2px 8px rgba(0,0,0,0.08);
    cursor:pointer;
    position:relative;
    overflow:hidden;
    transition:all 0.2s;
}

#app-retail .card:hover {
    transform:translateY(-4px);
    box-shadow:0 6px 18px rgba(0,0,0,0.12);
}

#app-retail .card img {
    height:200px;
    object-fit:cover;
}

#app-retail .card-body {
    padding:12px;
}

#app-retail .lote-numero {
    font-weight:bold;
    color:#27296F;
}

#app-retail .descripcion {
    font-size:14px;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

#app-retail .minimo {
    font-weight:bold;
    margin-top:6px;
}

/* overlay lupa */
#app-retail .card-overlay {
    position:absolute;
    inset:0;
    display:flex;
    justify-content:center;
    align-items:center;
    background:rgba(0,0,0,0.4);
    opacity:0;
    transition:0.2s;
}

#app-retail .card:hover .card-overlay {
    opacity:1;
}

#app-retail .lupa-btn {
    width:80px;
    height:80px;
    background:#00AEEF;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:32px;
    color:white;
}

/* badge */
#app-retail .badge {
    position:absolute;
    top:10px;
    left:10px;
    background:#27296F;
    color:white;
    font-size:12px;
    padding:4px 8px;
}

/* ------------------ */
/* PAGINACIÓN */
/* ------------------ */
#app-retail .paginacion {
    margin-top:30px;
    text-align:center;
}

#app-retail .paginacion button {
    padding:10px 16px;
    margin:5px;
    border:none;
    background:#eee;
    cursor:pointer;
}

#app-retail .paginacion button.active {
    background:#27296F;
    color:white;
}

/* ------------------ */
/* MODAL */
/* ------------------ */
#app-retail .modal {
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.85);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index: 999999 !important;
    opacity: 1;
    transition: opacity 0.2s ease;
}

#app-retail .hidden { display:none; }

#app-retail .modal-content {
    background:#fff;
    width:90%;
    max-width:680px;
    position:relative;
    transform: scale(0.95);
    opacity: 0;
    animation: modalFade 0.25s ease forwards;
}

@keyframes modalFade {
    to {
        transform: scale(1);
        opacity: 1;
    }
}

#app-retail .modal-body {
    padding:20px;
}

#app-retail .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px; /* 🔥 aire entre header y descripción */
}

#app-retail .modal-lote {
    font-size:26px;
    color:#27296F;
}

#app-retail .modal-min {
    background:#27296F;
    color:white;
    padding:6px 12px;
}

/* imagen */
#app-retail .modal-img-wrapper {
    position:relative;
    min-height:260px;
    background:#f5f5f5;
}

/* loader */
#app-retail .modal-loader {
    position: absolute;
    inset: 0;

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

    background: rgba(255,255,255,0.3);

    z-index: 10;
}

#app-retail .modal-spinner {
    width:30px;
    height:30px;
    border:4px solid #ddd;
    border-top:4px solid #27296F;
    border-radius:50%;
    animation:spin 1s linear infinite;
}

/* nav */
#app-retail .nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    width: 52px;
    height: 52px;

    background: rgba(39,41,111,0.9);
    color: white;

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

    font-size: 22px;

    border: none;
    border-radius: 8px;

    cursor: pointer;
    z-index: 40;

    transition: all 0.2s ease;
}

#app-retail .nav:hover {
    background: #00AEEF;
    transform: translateY(-50%) scale(1.1);
}

#app-retail .prev { left: 10px; }
#app-retail .next { right: 10px; }

#app-retail .nav:disabled {
    opacity: 0.2;
    cursor: not-allowed;
    transform: translateY(-50%);
}

/* cerrar */
#app-retail .modal-close {
    position: absolute;
    top: 12px;
    right: 12px;

    z-index: 50; /* 🔥 CLAVE */

    width: 40px;
    height: 40px;

    background: rgba(0,0,0,0.8);
    color: #fff;

    border: none;
    border-radius: 8px;

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

    font-size: 18px;
    cursor: pointer;

    transition: all 0.2s ease;
}

#app-retail .modal-close:hover {
    background: crimson;
    transform: scale(1.1);
}

/* animaciones */
@keyframes spin {
    to { transform:rotate(360deg); }
}