From a31006be4ea9d6e090c9d8ccfbcd1b897c6a2750 Mon Sep 17 00:00:00 2001
From: Flatlogic Bot <support@flatlogic.com>
Date: Sat, 31 Jan 2026 02:40:55 +0000
Subject: [PATCH] Auto commit: 2026-01-31T02:40:55.158Z

---
 index.php | 558 +++++++++++++++++++++++-------------------------------
 1 file changed, 232 insertions(+), 326 deletions(-)

diff --git a/index.php b/index.php
index 3f1718b..0c5a689 100644
--- a/index.php
+++ b/index.php
@@ -61,13 +61,13 @@ try {
   <style>
     :root {
       --primary-color: #ff2d55;
-      --glass-bg: rgba(0, 0, 0, 0.2);
-      --glass-border: rgba(255, 255, 255, 0.2);
+      --glass-bg: rgba(0, 0, 0, 0.4);
+      --glass-border: rgba(255, 255, 255, 0.15);
     }
     
     body {
       font-family: 'Inter', sans-serif;
-      background: #0a0a0a;
+      background: #050505;
       color: #fff;
       min-height: 100vh;
       margin: 0;
@@ -86,7 +86,7 @@ try {
       width: 100%;
       height: 100%;
       background: url('<?= $promoImage ?>') center/cover no-repeat;
-      filter: brightness(0.4) blur(3px);
+      filter: brightness(0.3) blur(5px);
       z-index: -1;
     }
 
@@ -98,7 +98,7 @@ try {
       width: 100%;
       max-width: 1300px;
       padding: 2rem;
-      gap: 3rem;
+      gap: 2.5rem;
       z-index: 1;
     }
 
@@ -107,13 +107,13 @@ try {
         position: static;
         flex: none;
         width: 100%;
-        max-width: 400px;
+        max-width: 450px;
       }
       .main-wrapper {
         flex-direction: column;
         align-items: center;
         padding: 1rem;
-        gap: 2rem;
+        gap: 1.5rem;
       }
       body {
         overflow-y: auto;
@@ -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;
@@ -132,15 +132,16 @@ try {
 
     .player-container {
       background: var(--glass-bg);
-      backdrop-filter: blur(10px);
-      -webkit-backdrop-filter: blur(10px);
+      backdrop-filter: blur(15px);
+      -webkit-backdrop-filter: blur(15px);
       border: 1px solid var(--glass-border);
-      border-radius: 20px;
-      padding: 1.25rem;
+      border-radius: 28px;
+      padding: 1.5rem;
       width: 100%;
       text-align: center;
-      box-shadow: 0 10px 30px rgba(0,0,0,0.5);
+      box-shadow: 0 20px 40px rgba(0,0,0,0.6);
       transition: all 0.3s ease;
+      position: relative;
     }
 
     .right-content {
@@ -148,27 +149,27 @@ try {
       display: flex;
       flex-direction: column;
       gap: 2rem;
-      max-width: 600px;
+      max-width: 650px;
       width: 100%;
     }
 
     .promo-image {
       width: 100%;
       height: auto;
-      border-radius: 24px;
-      box-shadow: 0 20px 50px rgba(0,0,0,0.6);
+      border-radius: 30px;
+      box-shadow: 0 30px 60px rgba(0,0,0,0.7);
       border: 1px solid var(--glass-border);
       transition: transform 0.5s ease;
     }
 
     .comments-window {
       background: var(--glass-bg);
-      backdrop-filter: blur(10px);
-      -webkit-backdrop-filter: blur(10px);
+      backdrop-filter: blur(20px);
+      -webkit-backdrop-filter: blur(20px);
       border: 1px solid var(--glass-border);
-      border-radius: 24px;
-      padding: 1.5rem;
-      box-shadow: 0 20px 50px rgba(0,0,0,0.4);
+      border-radius: 30px;
+      padding: 1.8rem;
+      box-shadow: 0 30px 60px rgba(0,0,0,0.5);
       display: flex;
       flex-direction: column;
       max-height: 950px;
@@ -178,15 +179,15 @@ try {
       display: flex;
       align-items: center;
       justify-content: space-between;
-      margin-bottom: 1rem;
-      padding-bottom: 0.5rem;
+      margin-bottom: 1.2rem;
+      padding-bottom: 0.8rem;
       border-bottom: 1px solid var(--glass-border);
     }
 
     .comments-list {
       overflow-y: auto;
       flex: 1;
-      padding-right: 0.5rem;
+      padding-right: 0.8rem;
     }
 
     .comments-list::-webkit-scrollbar {
@@ -198,41 +199,45 @@ try {
     }
 
     .comment-item {
-      background: rgba(255,255,255,0.05);
-      border-radius: 12px;
-      padding: 1rem;
-      margin-bottom: 1rem;
-      font-size: 0.9rem;
+      background: rgba(255,255,255,0.04);
+      border: 1px solid rgba(255,255,255,0.05);
+      border-radius: 16px;
+      padding: 1.2rem;
+      margin-bottom: 1.2rem;
+      font-size: 0.95rem;
       position: relative;
       transition: all 0.3s ease;
     }
 
     .comment-item:hover {
       background: rgba(255,255,255,0.08);
+      transform: translateX(5px);
     }
 
     .comment-user {
       font-weight: 700;
       color: var(--primary-color);
-      margin-bottom: 0.2rem;
+      margin-bottom: 0.3rem;
       display: block;
+      font-size: 1rem;
     }
 
     .comment-text {
       opacity: 0.9;
+      line-height: 1.5;
     }
 
     .comment-date {
-      font-size: 0.7rem;
+      font-size: 0.75rem;
       opacity: 0.4;
       display: block;
-      margin-top: 0.4rem;
+      margin-top: 0.6rem;
     }
 
     .comment-actions {
         position: absolute;
-        top: 10px;
-        right: 10px;
+        top: 15px;
+        right: 15px;
     }
 
     .btn-wa-reply {
@@ -240,76 +245,72 @@ try {
         color: #fff;
         border: none;
         border-radius: 50%;
-        width: 32px;
-        height: 32px;
+        width: 36px;
+        height: 36px;
         display: flex;
         align-items: center;
         justify-content: center;
-        font-size: 0.9rem;
+        font-size: 1rem;
         transition: all 0.3s ease;
         text-decoration: none;
+        box-shadow: 0 4px 10px rgba(37, 211, 102, 0.3);
     }
 
     .btn-wa-reply:hover {
-        transform: scale(1.1);
+        transform: scale(1.15) rotate(10deg);
         color: #fff;
+        box-shadow: 0 6px 15px rgba(37, 211, 102, 0.5);
     }
 
     .request-form {
-      margin-top: 1rem;
+      margin-top: 1.5rem;
       display: flex;
       flex-direction: column;
-      gap: 0.75rem;
-    }
-
-    .form-control-glass::placeholder {
-      color: #666666;
-      opacity: 1;
+      gap: 1rem;
     }
 
     .form-control-glass {
-      caret-color: var(--primary-color);
       background: #ffffff;
-      border: 1px solid var(--glass-border);
-      color: #000000;
-      border-radius: 12px;
-      padding: 0.6rem 1rem;
+      border: 1px solid rgba(255,255,255,0.1);
+      color: #000;
+      border-radius: 16px;
+      padding: 0.8rem 1.2rem;
+      font-weight: 500;
     }
 
-    .form-control-glass:focus {
-      background: #ffffff;
-      border-color: #cccccc;
-      box-shadow: none;
-      color: #000000;
+    .form-control-glass::placeholder {
+      color: #777;
     }
 
     .btn-send-request {
-      background: var(--primary-color);
+      background: linear-gradient(45deg, var(--primary-color), #ff512f);
       border: none;
-      border-radius: 12px;
-      padding: 0.7rem;
-      font-weight: 600;
-      transition: all 0.3s ease;
+      border-radius: 16px;
+      padding: 0.8rem;
+      font-weight: 700;
+      text-transform: uppercase;
+      letter-spacing: 1px;
+      box-shadow: 0 10px 20px rgba(255, 45, 85, 0.3);
     }
 
     .btn-send-request:hover {
-      background: #ff512f;
-      transform: translateY(-2px);
+      transform: translateY(-3px);
+      box-shadow: 0 15px 25px rgba(255, 45, 85, 0.5);
     }
 
     .radio-logo {
-      width: 60px;
-      height: 60px;
+      width: 70px;
+      height: 70px;
       border-radius: 50%;
       background: linear-gradient(135deg, #ff2d55, #ff512f);
-      margin: 0 auto 0.75rem;
+      margin: 0 auto 1rem;
       display: flex;
       align-items: center;
       justify-content: center;
-      box-shadow: 0 0 20px rgba(255, 45, 85, 0.4);
-      animation: pulse 2s infinite;
+      box-shadow: 0 0 25px rgba(255, 45, 85, 0.5);
+      animation: pulse 2.5s infinite;
       overflow: hidden;
-      border: 2px solid rgba(255,255,255,0.2);
+      border: 3px solid rgba(255,255,255,0.2);
     }
 
     .radio-logo img {
@@ -320,245 +321,179 @@ try {
 
     @keyframes pulse {
       0% { transform: scale(1); box-shadow: 0 0 20px rgba(255, 45, 85, 0.4); }
-      50% { transform: scale(1.05); box-shadow: 0 0 35px rgba(255, 45, 85, 0.6); }
+      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-info {
-      margin-bottom: 1rem;
-    }
-
     .song-title {
-      font-size: 1rem;
-      font-weight: 700;
-      margin-bottom: 0.1rem;
+      font-size: 1.1rem;
+      font-weight: 800;
+      margin-bottom: 0.2rem;
       display: block;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
+      color: #fff;
     }
 
     .artist-name {
-      font-size: 0.8rem;
-      opacity: 0.7;
-    }
-
-    .player-controls-row {
-      display: flex;
-      align-items: center;
-      gap: 0.75rem;
-      margin-top: 0.5rem;
+      font-size: 0.9rem;
+      opacity: 0.6;
+      font-weight: 500;
     }
 
     .btn-play {
-      width: 44px;
-      height: 44px;
+      width: 50px;
+      height: 50px;
       border-radius: 50%;
       background: #fff;
       color: #000;
       border: none;
-      font-size: 1.1rem;
+      font-size: 1.2rem;
       display: flex;
       align-items: center;
       justify-content: center;
-      transition: all 0.3s ease;
+      transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
       cursor: pointer;
-      flex-shrink: 0;
     }
 
     .btn-play:hover {
-      transform: scale(1.05);
+      transform: scale(1.1);
       background: var(--primary-color);
       color: #fff;
     }
 
-    .volume-slider-container {
-      flex: 1;
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-    }
-
     .volume-slider {
       width: 100%;
-      height: 4px;
+      height: 6px;
       -webkit-appearance: none;
-      background: rgba(255,255,255,0.2);
-      border-radius: 2px;
+      background: rgba(255,255,255,0.1);
+      border-radius: 10px;
       outline: none;
     }
 
-    .btn-youtube-float {
-      position: fixed;
-      bottom: 105px;
-      left: 30px;
-      width: 60px;
-      height: 60px;
-      background: #ff0000;
-      color: #fff;
+    .volume-slider::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      width: 14px;
+      height: 14px;
+      background: #fff;
       border-radius: 50%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 1.8rem;
-      box-shadow: 0 10px 30px rgba(255, 0, 0, 0.4);
-      text-decoration: none;
-      transition: all 0.3s ease;
-      z-index: 100;
-      animation: bounce 2.2s infinite;
-    }
-
-    .btn-youtube-float:hover {
-      transform: translateY(-5px) scale(1.1);
-      color: #fff;
-      background: #e60000;
-      animation: none;
+      cursor: pointer;
+      box-shadow: 0 0 10px rgba(0,0,0,0.5);
     }
 
     .qr-mini-box {
       background: rgba(255,255,255,0.08);
-      padding: 6px;
-      border-radius: 12px;
+      padding: 8px;
+      border-radius: 16px;
       border: 1px solid var(--glass-border);
+      width: 85px;
       transition: all 0.3s ease;
-      width: 70px;
     }
     .qr-mini-box:hover {
         background: rgba(255,255,255,0.15);
         border-color: var(--primary-color);
-    }
-    .qr-image-mini {
-      width: 100%;
-      height: auto;
-      border-radius: 6px;
-      display: block;
+        transform: scale(1.05);
     }
     .qr-text-mini {
-      font-size: 0.6rem;
-      margin: 4px 0 0;
-      opacity: 0.9;
-      text-transform: uppercase;
-      font-weight: 700;
-      color: #fff;
+      font-size: 0.65rem;
+      margin-top: 5px;
+      font-weight: 800;
+      letter-spacing: 0.5px;
     }
 
     .admin-stats-box {
-        background: rgba(255,255,255,0.03);
+        background: var(--glass-bg);
+        backdrop-filter: blur(15px);
+        -webkit-backdrop-filter: blur(15px);
         border: 1px solid var(--glass-border);
-        border-radius: 16px;
-        padding: 10px;
+        border-radius: 28px;
+        padding: 1.2rem;
         overflow: hidden;
-        margin-bottom: 1rem;
-        box-shadow: inset 0 0 20px rgba(0,0,0,0.3);
+        box-shadow: 0 20px 40px rgba(0,0,0,0.6);
+        animation: fadeIn 0.8s ease;
     }
-    .admin-iframe {
-        width: 100%;
-        height: 300px;
-        border: none;
-        border-radius: 10px;
-        background: #000;
-        display: block;
+
+    @keyframes fadeIn {
+        from { opacity: 0; transform: translateY(20px); }
+        to { opacity: 1; transform: translateY(0); }
     }
 
+
+
     .whatsapp-btn {
       position: fixed;
       bottom: 30px;
       left: 30px;
-      width: 60px;
-      height: 60px;
+      width: 65px;
+      height: 65px;
       background: #25d366;
       color: #fff;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
-      font-size: 2rem;
-      box-shadow: 0 10px 30px rgba(37, 211, 102, 0.4);
+      font-size: 2.2rem;
+      box-shadow: 0 15px 35px rgba(37, 211, 102, 0.4);
       text-decoration: none;
-      transition: all 0.3s ease;
       z-index: 100;
-      animation: bounce 2s infinite;
+      animation: bounce 2.5s infinite;
+    }
+
+    .btn-youtube-float {
+      position: fixed;
+      bottom: 110px;
+      left: 30px;
+      width: 65px;
+      height: 65px;
+      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);
+      text-decoration: none;
+      z-index: 100;
+      animation: bounce 2.8s infinite;
     }
 
     @keyframes bounce {
       0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
-      40% {transform: translateY(-10px);}
-      60% {transform: translateY(-5px);}
-    }
-
-    .whatsapp-btn:hover {
-      transform: translateY(-5px) scale(1.1);
-      color: #fff;
-      animation: none;
+      40% {transform: translateY(-12px);}
+      60% {transform: translateY(-6px);}
     }
 
     .live-badge {
       position: absolute;
-      top: 10px;
-      left: 10px;
+      top: 15px;
+      left: 15px;
       background: var(--primary-color);
-      padding: 2px 8px;
+      padding: 4px 10px;
       border-radius: 20px;
-      font-size: 0.6rem;
-      font-weight: 700;
+      font-size: 0.65rem;
+      font-weight: 800;
       text-transform: uppercase;
-      letter-spacing: 1px;
+      letter-spacing: 1.5px;
+      box-shadow: 0 4px 10px rgba(255, 45, 85, 0.4);
     }
 
-    #visualizer {
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        width: 100%;
-        height: 40px;
-        opacity: 0.15;
-        z-index: -1;
-    }
-
-    /* Policy Modal Styles */
-    .modal-glass .modal-content {
-      background: rgba(15, 15, 15, 0.9);
-      backdrop-filter: blur(20px);
-      -webkit-backdrop-filter: blur(20px);
-      border: 1px solid var(--glass-border);
-      color: #fff;
-      border-radius: 24px;
-    }
-    .modal-glass .modal-header {
-      border-bottom: 1px solid var(--glass-border);
-    }
-    .modal-glass .modal-footer {
-      border-top: 1px solid var(--glass-border);
-    }
     .policy-link {
       color: #fff;
-      text-decoration: underline;
-      opacity: 0.6;
-      font-size: 0.75rem;
-      transition: opacity 0.3s ease;
-      cursor: pointer;
-      display: inline-block;
-      margin-top: 0.5rem;
+      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);
-    }
-    .policy-content-text {
-        font-size: 0.9rem;
-        line-height: 1.6;
-        opacity: 0.9;
-    }
-    .policy-content-text ul {
-        padding-left: 1.2rem;
-    }
-    .policy-content-text li {
-        margin-bottom: 0.75rem;
+      border-bottom-color: var(--primary-color);
     }
   </style>
 </head>
 <body>
-  <div class="bg-image" id="bgImage"></div>
+  <div class="bg-image"></div>
 
   <div class="main-wrapper">
     <!-- Left: Player & Admin Stats -->
@@ -570,35 +505,51 @@ try {
                 <img src="<?= $logoImage ?>" alt="Lili Records Logo">
             </div>
 
-            <div class="song-info">
+            <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>
 
-            <div class="player-controls-row">
+            <div class="player-controls-row d-flex align-items-center gap-3">
                 <button class="btn-play" id="playBtn">
                     <i class="fas fa-play" id="playIcon"></i>
                 </button>
-                <div class="volume-slider-container">
-                    <i class="fas fa-volume-low opacity-50 x-small" style="font-size: 0.7rem;"></i>
+                <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-high opacity-50 x-small" style="font-size: 0.7rem;"></i>
+                    <i class="fas fa-volume-up opacity-50" style="font-size: 0.8rem;"></i>
                 </div>
             </div>
 
-            <canvas id="visualizer"></canvas>
-
             <?php if ($isAdmin): ?>
-            <div class="mt-3">
-                <a href="?logout=1" class="btn btn-sm btn-outline-light opacity-50" style="font-size: 0.7rem;">Cerrar Admin</a>
+            <div class="mt-4 pt-3 border-top border-white border-opacity-10">
+                <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>
             <?php endif; ?>
         </aside>
 
         <?php if ($isAdmin): ?>
-        <div class="admin-stats-box" style="margin-bottom: 0;">
-            <h6 class="small mb-2 opacity-75"><i class="fas fa-globe-americas me-1"></i> Estadísticas en Tiempo Real</h6>
-            <iframe src="https://lili-records-radio-7109.dev.flatlogic.app/" class="admin-iframe" style="height: 350px;"></iframe>
+        <div class="admin-stats-box">
+            <h6 class="small mb-3 d-flex align-items-center font-weight-bold">
+                <i class="fas fa-globe-americas me-2 text-primary"></i> 
+                MAPA DE VISITANTES
+            </h6>
+            <div class="d-flex justify-content-center mb-4" style="background: rgba(255,255,255,0.03); border-radius: 20px; height: 280px; overflow: hidden;">
+                <iframe src="https://whos.amung.us/mapsview/lili-records/" width="100%" height="280" frameborder="0" scrolling="no" style="border-radius: 20px;"></iframe>
+            </div>
+
+            <h6 class="small mb-3 d-flex align-items-center font-weight-bold">
+                <i class="fas fa-users me-2 text-primary"></i> 
+                OYENTES ONLINE
+            </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="//whos.amung.us/classic.js"></script>
+            </div>
+            <div class="mt-3 text-center">
+                <p class="x-small opacity-50 mb-0" style="font-size: 0.65rem;">
+                    Estadísticas en tiempo real para administradores.
+                </p>
+            </div>
         </div>
         <?php endif; ?>
     </div>
@@ -609,32 +560,32 @@ try {
 
       <div class="comments-window">
         <?php if ($isAdmin): ?>
-            <div class="comments-header d-flex justify-content-between align-items-center">
+            <div class="comments-header">
               <div>
-                <h5 class="mb-0"><i class="fas fa-tachometer-alt me-2 text-primary"></i>Panel de Administración</h5>
-                <span class="badge bg-danger rounded-pill"><?= count($requests) ?> mensajes</span>
+                <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>
               </div>
-              <div class="qr-mini-box text-center" title="Apoya a la Radio">
-                <img src="<?= $qrImage ?>" alt="QR Pago" class="qr-image-mini">
-                <p class="qr-text-mini">Apoya</p>
+              <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>
             </div>
-<div class="comments-list" id="commentsList">
+            <div class="comments-list" id="commentsList">
               <?php if (empty($requests)): ?>
-                <div class="text-center py-5 opacity-50">
-                  <i class="fas fa-comment-dots fa-3x mb-3"></i>
-                  <p>No hay mensajes todavía.<br>¡Conéctate con Lili Records!</p>
+                <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>
               <?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, H:i', strtotime($req['created_at'])) ?></span>
+                    <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" title="Chatear por WhatsApp: <?= htmlspecialchars($req['phone']) ?>" target="_blank">
+                        <a href="https://wa.me/<?= preg_replace('/[^0-9]/', '', $req['phone']) ?>" class="btn-wa-reply" target="_blank">
                             <i class="fab fa-whatsapp"></i>
                         </a>
                     </div>
@@ -644,88 +595,84 @@ try {
               <?php endif; ?>
             </div>
         <?php else: ?>
-            <div class="comments-header border-0 mb-0 d-flex justify-content-between align-items-center">
+            <div class="comments-header border-0 mb-3">
               <div>
-                <h5 class="mb-0"><i class="fas fa-paper-plane me-2"></i>¡Envíanos tu mensaje!</h5>
-                <p class="small opacity-50 mb-0">Tus peticiones y saludos llegan directo a cabina.</p>
+                <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>
               </div>
-              <div class="qr-mini-box text-center" title="Apoya a la Radio">
-                <img src="<?= $qrImage ?>" alt="QR Pago" class="qr-image-mini">
-                <p class="qr-text-mini">Apoya</p>
+              <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>
             </div>
-            <div class="mb-3"></div>
             
-            <div class="comments-list" style="max-height: 200px;">
-                <!-- Listeners don't see the full list, or maybe they do? 
-                     Previous design showed it. Keeping it but limited for non-admins if preferred. 
-                -->
+            <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" style="opacity: 0.7;">
-                    <span class="comment-user" style="font-size: 0.8rem;"><?= htmlspecialchars($req['name']) ?></span>
-                    <p class="comment-text mb-0" style="font-size: 0.85rem;"><?= htmlspecialchars($req['message']) ?></p>
+                  <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; ?>
             </div>
         <?php endif; ?>
 
-        <form action="submit_request.php" method="POST" class="request-form">
+        <form action="submit_request.php" method="POST" class="request-form mt-auto">
           <div class="row g-2">
-            <div class="col-6">
-                <input type="text" name="name" class="form-control form-control-glass" placeholder="Tu nombre" required>
+            <div class="col-sm-6">
+                <input type="text" name="name" class="form-control form-control-glass" placeholder="Nombre completo" required>
             </div>
-            <div class="col-6">
-                <input type="text" name="phone" class="form-control form-control-glass" placeholder="WhatsApp (opcional)">
+            <div class="col-sm-6">
+                <input type="text" name="phone" class="form-control form-control-glass" placeholder="WhatsApp / Teléfono">
             </div>
           </div>
           <div class="input-group">
-            <textarea name="message" class="form-control form-control-glass" rows="1" placeholder="Tu mensaje aquí..." required></textarea>
-            <button type="submit" class="btn btn-send-request text-white">
+            <textarea name="message" class="form-control form-control-glass" rows="1" placeholder="Escribe aquí tu petición o saludo..." required></textarea>
+            <button type="submit" class="btn btn-send-request text-white px-4">
               <i class="fas fa-paper-plane"></i>
             </button>
           </div>
-          <small class="text-center opacity-50" style="font-size: 0.7rem;">Tu mensaje se enviará de forma privada a los administradores.</small>
+          <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>
         </form>
       </div>
       
-      <div class="mt-3 text-center">
-        <p class="small text-white opacity-75 mb-0">Lili Record´s Radio 2026, Todos los Derechos Reservados</p>
-        <span class="policy-link" data-bs-toggle="modal" data-bs-target="#policyModal">Política de Privacidad y contenido</span>
+      <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>
     </div>
   </div>
 
   <!-- Modal Política de Privacidad -->
-  <div class="modal fade modal-glass" id="policyModal" tabindex="-1" aria-labelledby="policyModalLabel" aria-hidden="true">
+  <div class="modal fade" id="policyModal" tabindex="-1" aria-hidden="true">
     <div class="modal-dialog modal-dialog-centered modal-lg">
-      <div class="modal-content">
-        <div class="modal-header">
-          <h5 class="modal-title" id="policyModalLabel">RADIO LILI RECORD´S POLÍTICA DE PRIVACIDAD Y CONTENIDO</h5>
+      <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>
           <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
         </div>
-        <div class="modal-body policy-content-text">
-          <ul>
-            <li>No comentarios indecentes, ofensivos o de discriminación de raza, sexo, credo o ideología.</li>
-            <li>No aceptamos comentarios, ni contenidos relacionados con política, nuestro objetivo es totalmente de carácter cultural con el fin de interactuar e intercambiar contenidos para crecer como humanos creativos.</li>
-            <li>La app no recoge ningún dato de carácter personal del usuario como, por ejemplo, nombre, fotografías o localización. Solo en caso de que lo solicite el cliente por intereses personales y con autorización de los administradores y dueño de la aplicación.</li>
-            <li>En consecuencia la app no comparte ningún dato personal con ninguna otra entidad o terceras personas.</li>
-            <li>Los contenidos introducidos dígase (canciones, poesías, letras u otra composición) relacionada con la música solo se promoverán, se divulgaran, se escucharan a través de la app a petición del usuario, son enviados al servidor de la app con estos fines y la app que no podrá compartirla si el permiso de su Dueño.</li>
-            <li>No Permitimos que terceras compañías publiquen anuncios y recopilen cierta información anónima cuando visite nuestra aplicación si no es del interés de ambas partes y sin dañar a nuestros clientes y radios oyentes. Ninguna empresa pueden utilizar información anónima, como su ID de publicidad de Google, el tipo y la versión de su dispositivo, la actividad de navegación, la ubicación y otros datos técnicos relacionados con su dispositivo, a fin de proporcionar anuncios.</li>
-            <li>Aclaramos nuestro principal objetivo es dar a conocer nuevos contenidos relacionados con la música ya sea creada en IA o interpretación personal. En caso de intereses hacia productos o contenido serviremos como viabilizadores siempre y cuando ambas partes estén de acuerdo.</li>
+        <div class="modal-body p-4" style="font-size: 0.95rem; line-height: 1.7; opacity: 0.9;">
+          <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>
           </ul>
         </div>
-        <div class="modal-footer">
-          <button type="button" class="btn btn-secondary rounded-pill" data-bs-dismiss="modal">Cerrar</button>
+        <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>
       </div>
     </div>
   </div>
 
-  <a href="<?= $youtubeUrl ?>" target="_blank" class="btn-youtube-float" title="Síguenos en YouTube">
+  <a href="<?= $youtubeUrl ?>" target="_blank" class="btn-youtube-float" title="YouTube">
     <i class="fab fa-youtube"></i>
   </a>
 
-  <a href="track_click.php?type=whatsapp_open&redirect=<?= urlencode($whatsappLink) ?>" class="whatsapp-btn" title="Contáctanos">
+  <a href="track_click.php?type=whatsapp_open&redirect=<?= urlencode($whatsappLink) ?>" class="whatsapp-btn" title="WhatsApp">
     <i class="fab fa-whatsapp"></i>
   </a>
 
@@ -757,12 +704,10 @@ try {
       audio.volume = e.target.value;
     });
 
-    // Fetch song metadata from RadioKing
     async function fetchMetadata() {
       try {
         const response = await fetch('https://api.radioking.io/widget/radio/lili-record-s-radio/track/current');
         const data = await response.json();
-        
         if (data && data.title) {
           songTitle.textContent = data.title;
           artistName.textContent = data.artist || 'Lili Records Radio';
@@ -774,45 +719,6 @@ try {
 
     setInterval(fetchMetadata, 10000);
     fetchMetadata();
-
-    // Simple visualizer effect
-    const canvas = document.getElementById('visualizer');
-    const ctx = canvas.getContext('2d');
-    
-    function resizeCanvas() {
-        canvas.width = canvas.offsetWidth;
-        canvas.height = canvas.offsetHeight;
-    }
-    window.addEventListener('resize', resizeCanvas);
-    resizeCanvas();
-
-    function drawVisualizer() {
-        if (!isPlaying) {
-            ctx.clearRect(0, 0, canvas.width, canvas.height);
-            requestAnimationFrame(drawVisualizer);
-            return;
-        }
-        
-        ctx.clearRect(0, 0, canvas.width, canvas.height);
-        ctx.fillStyle = '#ff2d55';
-        
-        const bars = 30;
-        const barWidth = canvas.width / bars;
-        
-        for (let i = 0; i < bars; i++) {
-            const barHeight = Math.random() * canvas.height;
-            ctx.fillRect(i * barWidth, canvas.height - barHeight, barWidth - 2, barHeight);
-        }
-        
-        setTimeout(() => requestAnimationFrame(drawVisualizer), 100);
-    }
-    drawVisualizer();
-
-    // Scroll to bottom of comments
-    const commentsList = document.getElementById('commentsList');
-    if (commentsList) {
-        commentsList.scrollTop = 0; // Show latest first
-    }
   </script>
 </body>
 </html>
\ No newline at end of file