/*
 * css/css_vitrina.css — Estilos de la VITRINA (sección antes del catálogo en index.php)
 * ---------------------------------------------------------------------
 * Fondo oscuro con la misma estética del hero (variables y clases .grid-overlay / .glow-orb /
 * .badge-hero / .grad vienen de assets/css/culturapop-estilos.css).
 * Las TARJETAS copian las del catálogo: fondo blanco, borde #e2e8f0, radio 12px,
 * zona de foto #f8fafc con borde punteado de 260px de alto.
 * ÍNDICE: sección › cabecera › marco y flechas › tarjeta › sin ver / ya vista › botones › admin (editar / quitar) › editor de fotos › móvil
 */

/* ---------- sección ---------- */
.vit-seccion {
    position: relative;
    z-index: 2;   /* queda sobre el canvas/brillos del .hero-wrapper */
    padding: 1rem 0 3.5rem;
}
.vit-contenido { position: relative; z-index: 2; max-width: 1280px; margin: 0 auto; padding: 0 1rem; }

/* ---------- cabecera ---------- */
.vit-cabecera { text-align: center; margin-bottom: 1.5rem; }
.vit-cabecera h2 { font-size: 2.6rem; font-weight: 900; line-height: 1.05; letter-spacing: -1px; color: #fff; margin-bottom: 1rem; }
.vit-cabecera h2 .grad {
    background: linear-gradient(90deg, var(--neon-pink, #ff2e88), var(--gold, #ffd166), var(--neon-cyan, #00e5ff));
    background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: shine 4s linear infinite;
}
.vit-aviso { color: #f1f5f9; font-size: 1rem; font-weight: 500; line-height: 1.55; max-width: 640px; margin: 0 auto 1rem; }
.vit-cifras { color: #f1f5f9; font-size: 1rem; font-weight: 600; margin-bottom: 0.8rem; }
.vit-cifras b { color: var(--rosa-chicle, #ff4785); }
.vit-fila-contador { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; }
.vit-ir {
    padding: 8px 16px; border-radius: 50px; cursor: pointer; white-space: nowrap;
    background: #0f172a; border: 1px solid rgba(255, 255, 255, 0.25); color: #fff;
    font-size: 0.8rem; font-weight: 700; transition: all 0.2s;
}
.vit-ir:hover:not(:disabled) { border-color: var(--rosa-chicle, #ff4785); color: var(--rosa-chicle, #ff4785); }
.vit-ir:disabled { opacity: 0.45; cursor: default; }
.vit-ir-sinver { display: block; margin: 0.8rem auto 0; }
.vit-contador {
    display: inline-block; padding: 6px 16px; border-radius: 50px;
    background: #0f172a; border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.3px;
}
.vit-contador b { color: var(--rosa-chicle, #ff4785); }

/* ---------- marco, pista y flechas ---------- */
.vit-marco { position: relative; }
.vit-track {
    display: flex; gap: 1.25rem; padding: 14px 4px 18px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 4px;
    scrollbar-width: thin; scrollbar-color: #334155 transparent;
    outline: none;
}
.vit-track::-webkit-scrollbar { height: 8px; }
.vit-track::-webkit-scrollbar-thumb { background: #334155; border-radius: 8px; }
.vit-flecha {
    position: absolute; top: 45%; transform: translateY(-50%); z-index: 5;
    width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
    background: rgba(255, 71, 133, 0.92); color: #fff; font-size: 1rem; font-weight: 700;
    box-shadow: 0 6px 18px rgba(255, 71, 133, 0.4); transition: transform 0.2s, background-color 0.2s;
}
.vit-flecha:hover { transform: translateY(-50%) scale(1.1); background: #e12d6e; }
.vit-izq { left: -6px; }
.vit-der { right: -6px; }

/* ---------- tarjeta (misma estética que el catálogo) ---------- */
.vit-card {
    flex: 0 0 250px; scroll-snap-align: start;
    background-color: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 1rem;
    display: flex; flex-direction: column; gap: 0.75rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02); position: relative;
    transition: opacity 0.2s;
}
.vit-foto {
    background-color: #f8fafc; height: 260px; display: flex; justify-content: center; align-items: center;
    border-radius: 8px; overflow: hidden; border: 1px dashed #cbd5e1; position: relative; cursor: zoom-in;
}
.vit-foto .carousel-img { max-width: 90%; max-height: 90%; object-fit: contain; }
.vit-nueva {
    position: absolute; top: 8px; left: 8px; z-index: 3;
    background-color: #22c55e; color: #fff; font-size: 0.65rem; font-weight: 800;
    padding: 3px 9px; border-radius: 20px; text-transform: uppercase; box-shadow: 0 3px 8px rgba(34, 197, 94, 0.35);
}

/* ---------- sin ver / ya vista (tarjetas con colores ligeramente distintos) ---------- */
.vit-card.vit-sin-ver { border-color: #ffc2d9; box-shadow: 0 0 0 1px rgba(255, 71, 133, 0.18), 0 6px 18px rgba(255, 71, 133, 0.14); }
.vit-card.vit-ya-vista { background-color: #eef2f7; border-color: #dbe3ee; }
.vit-card.vit-ya-vista .vit-foto { background-color: #e6ecf4; border-color: #c3cfdf; }
.vit-sinver { margin-left: 6px; color: #e2e8f0; font-weight: 600; }

/* ---------- botones ---------- */
.vit-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.vit-btn {
    flex: 1 1 auto; border: 1px solid #cbd5e1; background: #f1f5f9; color: #475569;
    padding: 9px 10px; border-radius: 50px; cursor: pointer; white-space: nowrap;
    font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px;
    transition: all 0.2s;
}
.vit-btn:hover { border-color: #ff4785; color: #ff4785; }
.vit-btn.activo { background: #ff4785; border-color: #ff4785; color: #fff; box-shadow: 0 4px 10px rgba(255, 71, 133, 0.25); }
.vit-btn.vit-lq.activo { background: #0f172a; border-color: #0f172a; color: #ffd166; }

/* ---------- pieza quitada (solo la ve el admin) ---------- */
.vit-card.vit-oculta { opacity: 0.4; }
.vit-btn.vit-quitar { flex-basis: 100%; background: #fff; border-color: #fca5a5; color: #b91c1c; }
.vit-btn.vit-quitar.activo { background: #b91c1c; border-color: #b91c1c; color: #fff; box-shadow: none; }

/* ---------- admin: Editar y Quitar en la misma fila ---------- */
.vit-fila-admin { flex-basis: 100%; display: flex; gap: 8px; }
.vit-fila-admin .vit-btn { flex: 1 1 0; }
.vit-btn.vit-editar { background: #fff; border-color: #93c5fd; color: #1d4ed8; }

/* ---------- editor de fotos (ventana modal, solo admin) ---------- */
.ved-modal { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.8); z-index: 99999; align-items: center; justify-content: center; }
.ved-modal[style*="flex"] { display: flex; }
.ved-caja { background: #fff; padding: 20px; border-radius: 16px; max-width: 900px; width: 95%; max-height: 92vh; overflow-y: auto; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); display: flex; flex-direction: column; }
.ved-caja h3 { margin: 0 0 12px; color: #0f172a; text-align: center; }
.ved-cuerpo { display: flex; gap: 20px; flex: 1; min-height: 360px; }
.ved-lienzo { flex: 1; min-width: 0; background: #1e293b; border-radius: 8px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ved-lienzo img { max-width: 100%; max-height: 60vh; display: block; }
.ved-panel { flex: 0 0 270px; background: #f5f5f5; padding: 15px; border-radius: 10px; max-height: 60vh; overflow-y: auto; color: #0f172a; }
.ved-panel h4 { margin: 14px 0 8px; font-size: 12px; }
.ved-slider { margin-bottom: 12px; }
.ved-etiqueta { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; margin-bottom: 5px; }
.ved-etiqueta span:last-child { color: #ff4785; font-weight: 800; }
.ved-panel input[type="range"] { width: 100%; accent-color: #ff4785; }
.ved-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.ved-efecto, .ved-herramienta { padding: 8px 4px; border: 1px solid #cbd5e1; background: #fff; border-radius: 8px; cursor: pointer; font-size: 11px; font-weight: 700; color: #0f172a; word-break: break-word; }
.ved-efecto { opacity: 0.6; }
.ved-efecto.activo { opacity: 1; border-color: #ff4785; box-shadow: 0 0 0 2px rgba(255, 71, 133, 0.25); }
.ved-efecto:hover, .ved-herramienta:hover { border-color: #ff4785; opacity: 1; }
.ved-ancho { grid-column: span 2; }
.ved-pie { display: flex; gap: 10px; align-items: center; justify-content: flex-end; margin-top: 15px; padding-top: 15px; border-top: 1px solid #e2e8f0; }
.ved-estado { margin-right: auto; font-size: 0.85rem; font-weight: 700; color: #b91c1c; }
.ved-cancelar { padding: 12px 20px; border-radius: 50px; border: 1px solid #cbd5e1; background: #fff; cursor: pointer; font-weight: 700; }
.ved-guardar { padding: 12px 25px; border-radius: 50px; border: none; background: #ff4785; color: #fff; cursor: pointer; font-weight: 700; }
.ved-guardar:disabled { opacity: 0.6; cursor: wait; }

/* ---------- móvil ---------- */
@media (max-width: 650px) {
    .vit-cabecera h2 { font-size: 2rem; }
    .vit-card { flex-basis: 78vw; max-width: 300px; }
    .vit-izq { left: 2px; }
    .vit-der { right: 2px; }
    .vit-flecha { width: 38px; height: 38px; }
    .ved-cuerpo { flex-direction: column; }
    .ved-panel { flex-basis: auto; max-height: none; }
}