/* --- public/css/global.css (CORREGIDO v4.1) --- */

/* 🔥 FUENTE GLOBAL */
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

body {
    margin: 0;
    padding: 0;
    background-color: #050505; 
    font-family: 'Segoe UI', sans-serif;
    color: white;
}

/* --- CABECERA DASHBOARD --- */
#admin-header {
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    padding: 10px 25px; 
    background: #050505; 
    border-bottom: 1px solid #222;
    z-index: 1000;
}

#admin-header img {
    height: 45px; 
    transition: transform 0.3s;
    filter: drop-shadow(0 0 5px #00ff00);
}

#admin-header img:hover { transform: scale(1.1) rotate(-5deg); }

/* GRID 2 COLUMNAS (IGUALDAD FORZADA) */
.dashboard-grid { 
    display: grid; 
    /* 🔥 EL CAMBIO CLAVE: minmax(0, 1fr) obliga a que sean idénticas */
    grid-template-columns: repeat(2, minmax(0, 1fr)); 
    gap: 15px; 
    padding: 20px; 
}

/* --- PANELES --- */
.panel { background: #1e1e1e; padding: 15px; border-radius: 10px; border: 1px solid #333; display: flex; flex-direction: column; }
.panel-header { font-size: 1.1em; font-weight: bold; color: #aaa; margin-bottom: 10px; border-bottom: 1px solid #333; padding-bottom: 5px; display: flex; justify-content: space-between; align-items: center; }

/* --- INPUTS GENERALES (BASE) --- */
input[type="text"], input[type="number"] { 
    padding: 10px; 
    background: #111; 
    border: 1px solid #444; 
    color: white; 
    border-radius: 5px; 
    box-sizing: border-box; 
    /* 🔥 QUITADO EL WIDTH: 100% GENÉRICO QUE ROMPÍA TODO */
}

/* 🔥 ARREGLO PUNTO 2: INPUT ROW FLEXIBLE */
/* Esto hace que el título se estire y el timer se quede quieto */
.input-row { 
    display: flex; 
    gap: 10px; 
    margin-bottom: 10px; 
    width: 100%;
}

/* El input de texto dentro de una fila ocupa todo el espacio sobrante */
.input-row input[type="text"] { 
    flex-grow: 1; 
}

/* El input de tiempo se queda fijo (clase time-input) */
.time-input {
    width: 80px !important; 
    text-align: center;
    font-weight: bold;
    color: #00ff00;
}

/* 🔥 ARREGLO PUNTO 3: MI VOTO (TAMAÑO FIJO) */
.live-vote-input { 
    width: 100px !important; /* Forzamos tamaño pequeño */
    height: 40px; 
    font-size: 1.5em; 
    background: #222; 
    border: 2px solid #00ff00 !important; 
    color: #00ff00; 
    text-align: center; 
    font-weight: bold; 
    border-radius: 6px; 
}

/* --- BOTONES DE CONFIGURACIÓN --- */
.config-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-top: 10px; }
.btn-conf { padding: 10px; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; font-size: 0.85em; color: white; display: flex; align-items: center; justify-content: center; gap: 5px; transition: transform 0.1s; text-transform: uppercase; }
.btn-conf:active { transform: scale(0.98); }
.btn-orange { background: #e67e22; } 
.btn-blue { background: #2980b9; } 
.btn-red { background: #c0392b; }
.btn-toggle-off { background: #444; color: #aaa; border: 1px solid #555; }
.btn-yellow-on { background: #f1c40f; color: black; box-shadow: 0 0 10px rgba(241, 196, 15, 0.4); border: 1px solid white; }
.btn-purple-on { background: #8e44ad; color: white; box-shadow: 0 0 10px rgba(142, 68, 173, 0.4); border: 1px solid white; }
.btn-conf.full-width { grid-column: span 2; } /* Ajustado para grid de 2 */

/* --- BOTONES DE ACCIÓN (PLAY/STOP) --- */
.control-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.btn { padding: 12px; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; color: white; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.btn-play { background: #6441a5; } 
.btn-stop { background: #e91e63; } 
.btn-clean { background: #ff9800; color: black; }

/* --- LOG SYSTEM --- */
.monitor-panel { background: #000 !important; border: 2px solid #333 !important; border-radius: 10px; padding: 15px; height: 450px; display: flex; flex-direction: column; box-shadow: inset 0 0 20px rgba(0,0,0,0.8); margin: 15px 20px; }
.monitor-title { color: #ffd700; font-weight: bold; border-bottom: 1px solid #333; padding-bottom: 5px; margin-bottom: 10px; font-family: monospace; letter-spacing: 1px; font-size: 1.1em; }
.log-line { border-bottom: 1px solid #111; padding: 2px 0; font-family: 'Consolas', monospace; font-size: 0.9em; }
.log-time { color: #666; margin-right: 10px; font-size: 0.8em; }

/* --- ESTILOS APP MÓVIL --- */
#top-bar { position: fixed; top: 15px; right: 15px; z-index: 2000; display:flex; align-items:center; }
#on-air-logo { position: fixed; top: 15px; left: 15px; height: 50px; z-index: 2000; display: none; filter: drop-shadow(0 0 5px rgba(0,255,0,0.5)); }
#main-zone { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; padding-top: 90px; z-index: 100; pointer-events: none; }
#app { width: 100%; display: none; justify-content: center; pointer-events: auto; } 
#layer-waiting { position: fixed; top:0; left:0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #111; z-index: 200; pointer-events: none; transition: opacity 0.3s; }
#layer-waiting.active { pointer-events: auto; background: #111; }
.big-logo { width: 300px; opacity: 0.5; animation: pulse 3s infinite; margin-bottom: 20px; }
@keyframes pulse { 0% { opacity: 0.4; transform: scale(1); } 50% { opacity: 0.8; transform: scale(1.05); } 100% { opacity: 0.4; transform: scale(1); } }
.btn-mini-login { background: #6441a5; color: white; padding: 8px 20px; border-radius: 30px; text-decoration: none; font-size: 1.1rem; display: flex; align-items: center; gap: 8px; border: 2px solid white; cursor: pointer; font-weight: bold; box-shadow: 0 4px 10px black; }
.user-avatar { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #00ff00; }
.login-arrow { position: absolute; right: 30px; top: 80px; color: #00ff00; font-size: 1.5rem; font-weight: bold; text-align: right; animation: bounce 1s infinite; text-shadow: 0 0 10px #00ff00; pointer-events: none; z-index: 3000; }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
#heart-container { width: 100%; display: none; justify-content: center; align-items: center; transition: all 0.4s ease; z-index: 300; padding-bottom: 20px; pointer-events: none; }
#heart-container.heart-centered { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#heart-container.heart-docked { position: relative; margin-top: 20px; flex-shrink: 0; }
#heart-btn { pointer-events: auto !important; cursor: pointer !important; width: 120px; height: 120px; font-size: 60px; background: rgba(255,255,255,0.05); border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 6px solid rgba(255,255,255,0.1); transition: all 0.1s; backdrop-filter: blur(5px); box-shadow: 0 0 40px rgba(0,255,0,0.2); -webkit-tap-highlight-color: transparent; user-select: none; }
#heart-btn:active { transform: scale(0.9); border-color: #00ff00; background: rgba(0, 255, 0, 0.1); }