admin/38018-vm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Auto commit: 2026-01-31T04:18:35.987Z

Browse Source
This commit is contained in:
Flatlogic Bot 2026-01-31 04:18:35 +00:00
parent d79034aa07
commit 997b7d4c83
1 changed files with 178 additions and 280 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

458
index.php
View File

@ -61,7 +61,7 @@ try {
<style>
:root {
--primary-color: #ff2d55;
--glass-bg: rgba(0, 0, 0, 0.6);
--glass-bg: rgba(0, 0, 0, 0.7);
--glass-border: rgba(255, 255, 255, 0.15);
}
@ -86,7 +86,7 @@ try {
width: 100%;
height: 100%;
background: url('<?= $promoImage ?>') center/cover no-repeat;
filter: brightness(0.3) blur(5px);
filter: brightness(0.25) blur(8px);
z-index: -1;
}
@ -124,7 +124,7 @@ try {
.left-column {
position: sticky;
top: 2rem;
flex: 0 0 300px;
flex: 0 0 320px;
display: flex;
flex-direction: column;
gap: 1.5rem;
@ -133,7 +133,7 @@ try {
.admin-column {
position: sticky;
top: 2rem;
flex: 0 0 300px;
flex: 0 0 320px;
display: flex;
flex-direction: column;
gap: 1.5rem;
@ -141,15 +141,14 @@ try {
.player-container {
background: var(--glass-bg);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid var(--glass-border);
border-radius: 28px;
padding: 1.5rem;
border-radius: 30px;
padding: 2rem;
width: 100%;
text-align: center;
box-shadow: 0 20px 40px rgba(0,0,0,0.6);
transition: all 0.3s ease;
box-shadow: 0 25px 50px rgba(0,0,0,0.8);
position: relative;
}
@ -166,89 +165,60 @@ try {
.promo-image {
width: 100%;
height: auto;
border-radius: 30px;
box-shadow: 0 30px 60px rgba(0,0,0,0.7);
border-radius: 35px;
box-shadow: 0 35px 70px rgba(0,0,0,0.8);
border: 1px solid var(--glass-border);
transition: transform 0.5s ease;
}
.comments-window {
background: var(--glass-bg);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(25px);
-webkit-backdrop-filter: blur(25px);
border: 1px solid var(--glass-border);
border-radius: 30px;
padding: 1.8rem;
box-shadow: 0 30px 60px rgba(0,0,0,0.5);
border-radius: 35px;
padding: 2rem;
box-shadow: 0 35px 70px rgba(0,0,0,0.6);
display: flex;
flex-direction: column;
min-height: 400px;
min-height: 450px;
}
.comments-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1.2rem;
padding-bottom: 0.8rem;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--glass-border);
}
.comments-list {
overflow-y: auto;
flex: 1;
padding-right: 0.8rem;
max-height: 500px;
}
.comments-list::-webkit-scrollbar {
width: 4px;
}
.comments-list::-webkit-scrollbar-thumb {
background: var(--glass-border);
border-radius: 10px;
padding-right: 10px;
max-height: 550px;
}
.comment-item {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 16px;
padding: 1.2rem;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 20px;
padding: 1.5rem;
margin-bottom: 1.2rem;
font-size: 0.95rem;
position: relative;
transition: all 0.3s ease;
position: relative;
}
.comment-item:hover {
background: rgba(255,255,255,0.08);
transform: translateX(5px);
background: rgba(255,255,255,0.1);
transform: scale(1.02);
}
.comment-user {
font-weight: 700;
color: var(--primary-color);
margin-bottom: 0.3rem;
display: block;
font-size: 1rem;
}
.comment-text {
opacity: 0.9;
line-height: 1.5;
}
.comment-date {
font-size: 0.75rem;
opacity: 0.4;
display: block;
margin-top: 0.6rem;
}
.comment-actions {
position: absolute;
top: 15px;
right: 15px;
margin-bottom: 0.4rem;
}
.btn-wa-reply {
@ -256,72 +226,47 @@ try {
color: #fff;
border: none;
border-radius: 50%;
width: 36px;
height: 36px;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(37, 211, 102, 0.4);
text-decoration: none;
box-shadow: 0 4px 10px rgba(37, 211, 102, 0.3);
}
.btn-wa-reply:hover {
transform: scale(1.15) rotate(10deg);
transform: scale(1.2) rotate(15deg);
color: #fff;
box-shadow: 0 6px 15px rgba(37, 211, 102, 0.5);
}
.request-form {
margin-top: 1.5rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.form-control-glass {
background: #ffffff;
border: 1px solid rgba(255,255,255,0.1);
border: none;
color: #000;
border-radius: 16px;
padding: 0.8rem 1.2rem;
border-radius: 18px;
padding: 0.9rem 1.4rem;
font-weight: 500;
}
.form-control-glass::placeholder {
color: #777;
}
.btn-send-request {
background: linear-gradient(45deg, var(--primary-color), #ff512f);
border: none;
border-radius: 16px;
padding: 0.8rem;
border-radius: 18px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
box-shadow: 0 10px 20px rgba(255, 45, 85, 0.3);
}
.btn-send-request:hover {
transform: translateY(-3px);
box-shadow: 0 15px 25px rgba(255, 45, 85, 0.5);
box-shadow: 0 10px 25px rgba(255, 45, 85, 0.4);
}
.radio-logo {
width: 70px;
height: 70px;
width: 85px;
height: 85px;
border-radius: 50%;
background: linear-gradient(135deg, #ff2d55, #ff512f);
margin: 0 auto 1rem;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 25px rgba(255, 45, 85, 0.5);
animation: pulse 2.5s infinite;
margin: 0 auto 1.2rem;
box-shadow: 0 0 30px rgba(255, 45, 85, 0.6);
animation: pulse 3s infinite;
overflow: hidden;
border: 3px solid rgba(255,255,255,0.2);
border: 4px solid rgba(255,255,255,0.25);
}
.radio-logo img {
@ -331,176 +276,124 @@ try {
}
@keyframes pulse {
0% { transform: scale(1); box-shadow: 0 0 20px rgba(255, 45, 85, 0.4); }
50% { transform: scale(1.08); box-shadow: 0 0 40px rgba(255, 45, 85, 0.7); }
100% { transform: scale(1); box-shadow: 0 0 20px rgba(255, 45, 85, 0.4); }
}
.song-title {
font-size: 1.1rem;
font-weight: 800;
margin-bottom: 0.2rem;
display: block;
color: #fff;
}
.artist-name {
font-size: 0.9rem;
opacity: 0.6;
font-weight: 500;
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
.btn-play {
width: 50px;
height: 50px;
width: 60px;
height: 60px;
border-radius: 50%;
background: #fff;
color: #000;
border: none;
font-size: 1.2rem;
font-size: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
cursor: pointer;
transition: all 0.3s ease;
}
.btn-play:hover {
transform: scale(1.1);
background: var(--primary-color);
color: #fff;
}
.volume-slider {
width: 100%;
height: 6px;
-webkit-appearance: none;
background: rgba(255,255,255,0.1);
border-radius: 10px;
outline: none;
}
.volume-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 14px;
height: 14px;
background: #fff;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.qr-mini-box {
background: rgba(255,255,255,0.08);
padding: 8px;
border-radius: 16px;
border: 1px solid var(--glass-border);
width: 85px;
transition: all 0.3s ease;
}
.qr-mini-box:hover {
background: rgba(255,255,255,0.15);
border-color: var(--primary-color);
transform: scale(1.05);
}
.qr-text-mini {
font-size: 0.65rem;
margin-top: 5px;
font-weight: 800;
letter-spacing: 0.5px;
transform: scale(1.15);
}
.admin-stats-box {
background: var(--glass-bg);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid var(--glass-border);
border-radius: 28px;
padding: 1.5rem;
overflow: hidden;
box-shadow: 0 20px 40px rgba(0,0,0,0.6);
animation: fadeIn 0.8s ease;
border-radius: 30px;
padding: 2rem;
text-align: center;
box-shadow: 0 25px 50px rgba(0,0,0,0.8);
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
.stat-widget-container {
background: rgba(255,255,255,0.04);
border-radius: 20px;
padding: 1rem;
margin-bottom: 1.5rem;
border: 1px solid rgba(255,255,255,0.05);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 150px;
}
.stat-widget-container img {
max-width: 100%;
height: auto;
border-radius: 10px;
}
.whatsapp-btn {
position: fixed;
bottom: 30px;
left: 30px;
width: 65px;
height: 65px;
width: 70px;
height: 70px;
background: #25d366;
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.2rem;
box-shadow: 0 15px 35px rgba(37, 211, 102, 0.4);
font-size: 2.5rem;
box-shadow: 0 15px 35px rgba(37, 211, 102, 0.5);
text-decoration: none;
z-index: 100;
z-index: 1000;
animation: bounce 2.5s infinite;
}
.btn-youtube-float {
position: fixed;
bottom: 110px;
bottom: 115px;
left: 30px;
width: 65px;
height: 65px;
width: 70px;
height: 70px;
background: #ff0000;
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
box-shadow: 0 15px 35px rgba(255, 0, 0, 0.4);
font-size: 2.2rem;
box-shadow: 0 15px 35px rgba(255, 0, 0, 0.5);
text-decoration: none;
z-index: 100;
z-index: 1000;
animation: bounce 2.8s infinite;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
40% {transform: translateY(-12px);}
60% {transform: translateY(-6px);}
40% {transform: translateY(-15px);}
60% {transform: translateY(-8px);}
}
.live-badge {
position: absolute;
top: 15px;
left: 15px;
top: 20px;
left: 20px;
background: var(--primary-color);
padding: 4px 10px;
padding: 5px 12px;
border-radius: 20px;
font-size: 0.65rem;
font-size: 0.7rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1.5px;
box-shadow: 0 4px 10px rgba(255, 45, 85, 0.4);
letter-spacing: 2px;
box-shadow: 0 5px 15px rgba(255, 45, 85, 0.5);
}
.policy-link {
color: #fff;
opacity: 0.5;
font-size: 0.8rem;
text-decoration: none;
border-bottom: 1px dashed rgba(255,255,255,0.3);
padding-bottom: 2px;
transition: all 0.3s ease;
}
.policy-link:hover {
opacity: 1;
color: var(--primary-color);
border-bottom-color: var(--primary-color);
.troubleshoot-note {
font-size: 0.75rem;
opacity: 0.6;
margin-top: 1rem;
line-height: 1.4;
}
</style>
</head>
@ -517,26 +410,25 @@ try {
<img src="<?= $logoImage ?>" alt="Lili Records Logo">
</div>
<div class="song-info mb-3">
<span class="song-title" id="songTitle">Conectando...</span>
<span class="artist-name" id="artistName">Lili Records Radio</span>
<div class="song-info mb-4">
<span class="d-block fw-bold fs-5" id="songTitle">Conectando...</span>
<span class="d-block opacity-50 small" id="artistName">Lili Records Radio</span>
</div>
<div class="player-controls-row d-flex align-items-center gap-3">
<div class="player-controls-row d-flex align-items-center gap-3 justify-content-center">
<button class="btn-play" id="playBtn">
<i class="fas fa-play" id="playIcon"></i>
</button>
<div class="flex-grow-1 d-flex align-items-center gap-2">
<i class="fas fa-volume-off opacity-50" style="font-size: 0.8rem;"></i>
<input type="range" class="volume-slider" id="volumeSlider" min="0" max="1" step="0.01" value="0.8">
<i class="fas fa-volume-up opacity-50" style="font-size: 0.8rem;"></i>
<div class="d-flex align-items-center gap-2" style="width: 120px;">
<i class="fas fa-volume-up opacity-50"></i>
<input type="range" class="form-range" id="volumeSlider" min="0" max="1" step="0.01" value="0.8">
</div>
</div>
<?php if ($isAdmin): ?>
<div class="mt-4 pt-3 border-top border-white border-opacity-10">
<div class="mb-2 small text-primary"><i class="fas fa-shield-alt me-1"></i> MODO ADMIN</div>
<a href="?logout=1" class="btn btn-sm btn-outline-danger px-3 rounded-pill" style="font-size: 0.75rem;">Cerrar Administración</a>
<div class="mt-4 pt-4 border-top border-white border-opacity-10">
<div class="mb-2 small text-primary fw-bold"><i class="fas fa-user-shield me-1"></i> PANEL ADMINISTRADOR</div>
<a href="?logout=1" class="btn btn-sm btn-outline-danger px-4 rounded-pill mt-2">Cerrar Sesión</a>
</div>
<?php endif; ?>
</aside>
@ -550,34 +442,33 @@ try {
<?php if ($isAdmin): ?>
<div class="comments-header">
<div>
<h5 class="mb-1"><i class="fas fa-user-shield me-2 text-primary"></i>Panel de Control</h5>
<p class="small opacity-50 mb-0">Gestiona los mensajes de tus oyentes</p>
<h5 class="mb-1"><i class="fas fa-comments me-2 text-primary"></i>Mensajes de Oyentes</h5>
<p class="small opacity-50 mb-0">Gestiona las peticiones en tiempo real</p>
</div>
<div class="qr-mini-box text-center">
<img src="<?= $qrImage ?>" alt="QR Pago" class="w-100 rounded-2">
<p class="qr-text-mini text-white mb-0">APOYAR</p>
<div class="text-center" style="width: 90px;">
<img src="<?= $qrImage ?>" alt="QR Pago" class="w-100 rounded-3 mb-1">
<p class="small fw-bold mb-0">APOYAR</p>
</div>
</div>
<div class="comments-list" id="commentsList">
<?php if (empty($requests)): ?>
<div class="text-center py-5 opacity-40">
<i class="fas fa-comment-slash fa-3x mb-3"></i>
<p>Aún no hay mensajes recibidos.</p>
<div class="text-center py-5 opacity-30">
<i class="fas fa-comment-slash fa-4x mb-3"></i>
<p>No hay mensajes todavía.</p>
</div>
<?php else: ?>
<?php foreach ($requests as $req): ?>
<div class="comment-item">
<span class="comment-user"><?= htmlspecialchars($req['name']) ?></span>
<p class="comment-text mb-0"><?= htmlspecialchars($req['message']) ?></p>
<span class="comment-date"><?= date('d M Y, H:i', strtotime($req['created_at'])) ?></span>
<?php if (!empty($req['phone'])): ?>
<div class="comment-actions">
<a href="https://wa.me/<?= preg_replace('/[^0-9]/', '', $req['phone']) ?>" class="btn-wa-reply" target="_blank">
<i class="fab fa-whatsapp"></i>
</a>
<p class="mb-2"><?= htmlspecialchars($req['message']) ?></p>
<div class="d-flex justify-content-between align-items-center">
<span class="small opacity-40"><?= date('d M, H:i', strtotime($req['created_at'])) ?></span>
<?php if (!empty($req['phone'])): ?>
<a href="https://wa.me/<?= preg_replace('/[^0-9]/', '', $req['phone']) ?>" class="btn-wa-reply" target="_blank">
<i class="fab fa-whatsapp"></i>
</a>
<?php endif; ?>
</div>
<?php endif; ?>
</div>
<?php endforeach; ?>
<?php endif; ?>
@ -585,48 +476,52 @@ try {
<?php else: ?>
<div class="comments-header border-0 mb-3">
<div>
<h5 class="mb-1"><i class="fas fa-microphone-alt me-2 text-primary"></i>¡Envíanos tu mensaje!</h5>
<p class="small opacity-60 mb-0">Pide tu canción favorita o envía un saludo.</p>
<h5 class="mb-1"><i class="fas fa-paper-plane me-2 text-primary"></i>¡Envía tu mensaje!</h5>
<p class="small opacity-60 mb-0">Pide una canción o envía un saludo al aire.</p>
</div>
<div class="qr-mini-box text-center">
<img src="<?= $qrImage ?>" alt="QR Pago" class="w-100 rounded-2">
<p class="qr-text-mini text-white mb-0">APOYAR</p>
<div class="text-center" style="width: 90px;">
<img src="<?= $qrImage ?>" alt="QR Pago" class="w-100 rounded-3 mb-1">
<p class="small fw-bold mb-0">APOYAR</p>
</div>
</div>
<div class="comments-list" style="max-height: 250px;">
<?php foreach (array_slice($requests, 0, 5) as $req): ?>
<div class="comment-item py-2 px-3 mb-2 border-0 bg-white bg-opacity-5">
<span class="comment-user" style="font-size: 0.85rem;"><?= htmlspecialchars($req['name']) ?></span>
<p class="comment-text mb-0" style="font-size: 0.9rem;"><?= htmlspecialchars($req['message']) ?></p>
</div>
<?php endforeach; ?>
<?php if (empty($requests)): ?>
<p class="text-center py-4 opacity-40 italic">Sé el primero en escribir...</p>
<?php else: ?>
<?php foreach (array_slice($requests, 0, 8) as $req): ?>
<div class="comment-item py-2 px-3 mb-2 border-0 bg-white bg-opacity-5 rounded-4">
<span class="comment-user small"><?= htmlspecialchars($req['name']) ?></span>
<p class="mb-0 small"><?= htmlspecialchars($req['message']) ?></p>
</div>
<?php endforeach; ?>
<?php endif; ?>
</div>
<?php endif; ?>
<form action="submit_request.php" method="POST" class="request-form mt-auto">
<div class="row g-2">
<form action="submit_request.php" method="POST" class="request-form mt-auto pt-4">
<div class="row g-2 mb-2">
<div class="col-sm-6">
<input type="text" name="name" class="form-control form-control-glass" placeholder="Nombre completo" required>
<input type="text" name="name" class="form-control form-control-glass" placeholder="Tu nombre" required>
</div>
<div class="col-sm-6">
<input type="text" name="phone" class="form-control form-control-glass" placeholder="WhatsApp / Teléfono">
<input type="text" name="phone" class="form-control form-control-glass" placeholder="Tu WhatsApp">
</div>
</div>
<div class="input-group">
<textarea name="message" class="form-control form-control-glass" rows="1" placeholder="Escribe aquí tu petición o saludo..." required></textarea>
<textarea name="message" class="form-control form-control-glass" rows="1" placeholder="Mensaje o canción..." required></textarea>
<button type="submit" class="btn btn-send-request text-white px-4">
<i class="fas fa-paper-plane"></i>
</button>
</div>
<div class="text-center mt-2">
<span class="policy-link" data-bs-toggle="modal" data-bs-target="#policyModal">Ver Políticas de Privacidad</span>
<div class="text-center mt-3">
<a href="#" class="text-white opacity-40 small text-decoration-none" data-bs-toggle="modal" data-bs-target="#policyModal">Ver Políticas de Privacidad</a>
</div>
</form>
</div>
<div class="mt-4 text-center pb-4">
<p class="small text-white opacity-40 mb-0">&copy; 2026 Lili Record´s Radio. All rights reserved.</p>
<div class="mt-4 text-center pb-5">
<p class="small text-white opacity-30 mb-0">&copy; 2026 Lili Record´s Radio. Música que conecta.</p>
</div>
</div>
@ -634,30 +529,35 @@ try {
<?php if ($isAdmin): ?>
<div class="admin-column">
<div class="admin-stats-box">
<h6 class="small mb-3 d-flex align-items-center justify-content-center font-weight-bold">
<i class="fas fa-globe-americas me-2 text-primary"></i>
MAPA DE VISITANTES
<h6 class="small mb-3 fw-bold text-uppercase letter-spacing-1">
<i class="fas fa-map-marked-alt me-2 text-primary"></i>
Ubicación de Oyentes
</h6>
<div class="d-flex justify-content-center mb-4 py-2" style="background: rgba(255,255,255,0.03); border-radius: 20px; min-height: 160px;">
<!-- Widget Map Whos.amung.us -->
<script id="_waumap">var _wau = _wau || []; _wau.push(["map", "lili-records", "map", "260", "130", "cool", "star-red"]);</script>
<script src="https://whos.amung.us/map.js"></script>
<div class="stat-widget-container">
<!-- Usando Widget de Imagen para máxima compatibilidad con bloqueadores -->
<a href="https://whos.amung.us/stats/lili-records/" target="_blank">
<img src="https://whos.amung.us/mapwidget/lili-records.png" alt="Mapa de Visitantes" width="260" height="130" border="0">
</a>
<p class="small troubleshoot-note">Mapa generado en tiempo real. Haz clic para ver detalles.</p>
</div>
<h6 class="small mb-3 d-flex align-items-center justify-content-center font-weight-bold">
<h6 class="small mb-3 fw-bold text-uppercase letter-spacing-1">
<i class="fas fa-users me-2 text-primary"></i>
OYENTES ONLINE
Conexiones en Vivo
</h6>
<div class="d-flex justify-content-center py-3" style="background: rgba(255,255,255,0.03); border-radius: 20px;">
<script id="_wauq0z">var _wau = _wau || []; _wau.push(["classic", "lili-records", "q0z"]);</script>
<script src="https://whos.amung.us/classic.js"></script>
<div class="stat-widget-container" style="min-height: 100px;">
<a href="https://whos.amung.us/stats/lili-records/" target="_blank">
<img src="https://whos.amung.us/widget/lili-records.png" alt="Contador" border="0">
</a>
</div>
<div class="mt-4 pt-3 border-top border-white border-opacity-10 text-center">
<p class="small opacity-50 mb-0">
Estadísticas activas
<div class="mt-4 pt-3 border-top border-white border-opacity-10">
<a href="https://whos.amung.us/stats/lili-records/" target="_blank" class="btn btn-primary btn-sm w-100 rounded-pill py-2">
<i class="fas fa-external-link-alt me-2"></i> Abrir Estadísticas
</a>
<p class="troubleshoot-note text-center">
Si no visualizas el mapa, asegúrate de que tu navegador no esté bloqueando contenido de <b>whos.amung.us</b>.
</p>
<a href="https://whos.amung.us/stats/lili-records/" target="_blank" class="btn btn-link text-primary p-0 mt-1" style="font-size: 0.7rem; text-decoration: none;">Ver panel completo <i class="fas fa-external-link-alt ms-1"></i></a>
</div>
</div>
</div>
@ -667,23 +567,21 @@ try {
<!-- Modal Política de Privacidad -->
<div class="modal fade" id="policyModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content border-0" style="background: rgba(20,20,20,0.95); border-radius: 30px; backdrop-filter: blur(20px);">
<div class="modal-header border-white border-opacity-10 px-4 py-3">
<h5 class="modal-title font-weight-bold">POLÍTICA DE PRIVACIDAD Y CONTENIDO</h5>
<div class="modal-content border-0" style="background: rgba(15,15,15,0.98); border-radius: 35px; backdrop-filter: blur(30px);">
<div class="modal-header border-white border-opacity-10 px-5 py-4">
<h5 class="modal-title fw-bold">POLÍTICA DE PRIVACIDAD</h5>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body p-4" style="font-size: 0.95rem; line-height: 1.7; opacity: 0.9;">
<div class="modal-body px-5 py-4" style="font-size: 1rem; line-height: 1.8; opacity: 0.8;">
<ul class="list-unstyled">
<li class="mb-3 d-flex gap-3"><i class="fas fa-check-circle text-primary mt-1"></i> No se permiten comentarios indecentes, ofensivos o discriminatorios.</li>
<li class="mb-3 d-flex gap-3"><i class="fas fa-check-circle text-primary mt-1"></i> No aceptamos contenidos políticos; nuestro enfoque es puramente cultural y musical.</li>
<li class="mb-3 d-flex gap-3"><i class="fas fa-check-circle text-primary mt-1"></i> No recopilamos datos personales sensibles sin autorización previa y explícita.</li>
<li class="mb-3 d-flex gap-3"><i class="fas fa-check-circle text-primary mt-1"></i> No compartimos información con terceros sin consentimiento del propietario.</li>
<li class="mb-3 d-flex gap-3"><i class="fas fa-check-circle text-primary mt-1"></i> Los contenidos enviados son promovidos exclusivamente bajo petición y permiso del usuario.</li>
<li class="mb-3 d-flex gap-3"><i class="fas fa-check-circle text-primary mt-1"></i> Respetamos la privacidad del dispositivo y no utilizamos rastreadores invasivos de terceros.</li>
<li class="mb-3 d-flex gap-3"><i class="fas fa-check text-primary mt-1"></i> Respeto absoluto: No se permiten comentarios ofensivos o discriminatorios.</li>
<li class="mb-3 d-flex gap-3"><i class="fas fa-check text-primary mt-1"></i> Neutralidad: No aceptamos contenidos políticos ni religiosos.</li>
<li class="mb-3 d-flex gap-3"><i class="fas fa-check text-primary mt-1"></i> Privacidad: Tus datos (WhatsApp/Nombre) solo se usan para identificarte en el aire.</li>
<li class="mb-3 d-flex gap-3"><i class="fas fa-check text-primary mt-1"></i> Seguridad: No compartimos tu información con terceros.</li>
</ul>
</div>
<div class="modal-footer border-0 px-4 pb-4">
<button type="button" class="btn btn-primary px-5 rounded-pill" data-bs-dismiss="modal">Entendido</button>
<div class="modal-footer border-0 px-5 pb-5">
<button type="button" class="btn btn-primary px-5 py-2 rounded-pill fw-bold" data-bs-dismiss="modal">ACEPTAR</button>
</div>
</div>
</div>