/* Estilos Globales */
@media all {
    .speed-box, .modal-content, body { 
        font-family: 'Roboto', sans-serif !important; 
    }
}

body { background: #0a0124; }

/* Contenedor Principal */
.speed-box {
    background: radial-gradient(circle, #2a0a4a, #0a0124);
    color: white; padding: 40px; border-radius: 25px;
    max-width: 1000px; margin: auto;
    box-shadow: 0 0 50px rgba(255,0,150,0.25);
}

.speed-box h2 { text-align: center; margin-bottom: 20px; color: white; }

/* Círculo de Velocidad */
.circle { width: 200px; height: 200px; border-radius: 50%; background: conic-gradient(#ff4da6 0deg, #333 0deg); display: flex; align-items: center; justify-content: center; margin: auto; transition: background 0.3s; }
.inner-circle { width: 150px; height: 150px; background: #0a0124; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
#downCircle { font-size: 42px; font-weight: 700; color: #00ffcc; }

/* Cuadros de Resultados */
.results-section { display: flex; gap: 20px; margin-top: 30px; }
.result-box { flex: 1; background: #111; padding: 20px; border-radius: 15px; text-align: center; border: 1px solid #333; }
.download { color: #00ffcc; }
.upload { color: #ff4da6; }
.value { font-size: 34px; font-weight: 700; }

/* Botones Generales */
button { margin: 5px; padding: 12px 25px; border-radius: 25px; border: none; cursor: pointer; background: linear-gradient(90deg, #ff4da6, #6c4dff); color: white; font-weight: 700; transition: transform 0.2s, opacity 0.2s; }
button:hover { transform: scale(1.05); }
button:disabled { background: #555 !important; cursor: not-allowed; opacity: 0.6; transform: none; }

/* Info de Red (IP, ISP, Server) */
.ip { text-align: center; margin-top: 20px; color: #aaa; font-size: 13px; }
#targetServer { color: #ff4da6; font-weight: bold; }

/* Selector de Conexión */
.connection-selector { display: flex; justify-content: center; gap: 15px; margin-top: 10px; }
.conn-card input { display: none; }
.card-content { background: #111; border: 2px solid #333; border-radius: 15px; padding: 15px 25px; display: flex; flex-direction: column; align-items: center; cursor: pointer; transition: 0.3s; min-width: 120px; }
.card-content i { font-size: 22px; margin-bottom: 8px; color: #aaa; }
.card-content span { font-size: 13px; color: #ccc; }
.conn-card input:checked + .card-content { border: 2px solid #ff4da6; background: rgba(255, 77, 166, 0.1); }
.conn-card input:checked + .card-content i { color: #ff4da6; }
.conn-card input:checked + .card-content span { color: white; }

/* NOTA LEGAL - Debajo de conexión */
.legal-notice {
    margin: 20px auto;
    padding: 15px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    font-size: 11px;
    color: #999;
    text-align: center;
    max-width: 85%;
    border-left: 3px solid #6c4dff;
    line-height: 1.5;
}
.legal-notice i { color: #00ffcc; margin-right: 6px; }

/* Análisis y Dispositivo */
.analysis-container { background: rgba(0,0,0,0.3); margin-top: 10px; padding: 15px; border-radius: 15px; }
.analysis-item { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #222; font-size: 13px; }
.status-text.ok { color: #00ffcc; font-weight: bold; }
.status-text.warn { color: #ffcc00; font-weight: bold; }

/* Tabla de Reportes */
.report-row { display: grid; grid-template-columns: 1.2fr 1fr 0.8fr 0.8fr 1fr; padding: 15px; border-bottom: 1px solid #333; font-size: 12px; align-items: center; }
.report-header { font-weight: bold; color: #ff4da6; }
.row-actions { display: flex; gap: 5px; }
.btn-sm { padding: 5px 10px; font-size: 11px; border-radius: 5px; }
.btn-p { background: #2ecc71; }
.btn-d { background: #e74c3c; }

/* =========================================
   ESTILOS DEL MODAL (Restaurados y Corregidos)
   ========================================= */
.modal-overlay { 
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background: rgba(0,0,0,0.85); 
    display: none; /* Se cambia a flex en JS */
    align-items: center; justify-content: center; 
    z-index: 1000; 
}

.modal-content { 
    background: #1a1a1a; 
    padding: 30px; 
    border-radius: 20px; 
    max-width: 450px; 
    text-align: center; 
    border: 1px solid #ff4da6; 
    color: white;
    box-shadow: 0 0 30px rgba(255, 77, 166, 0.3);
}

/* Título dentro del modal */
.modal-content h3 { 
    color: #ff4da6; 
    margin-top: 0;
    margin-bottom: 15px; 
    font-size: 20px;
}

/* Párrafos dentro del modal */
.modal-content p { 
    font-size: 14px; 
    color: #ccc; 
    line-height: 1.5;
    margin-bottom: 20px;
}

/* Enlaces dentro del modal */
.modal-content a { 
    color: #00ffcc; 
    text-decoration: none; 
    font-weight: bold;
}
.modal-content a:hover {
    text-decoration: underline;
}

/* Contenedor del Checkbox y texto de aceptación */
.modal-content label { 
    display: block; 
    margin: 20px 0; 
    cursor: pointer; 
    font-size: 13px; 
    color: #aaa;
    line-height: 1.4;
}

/* El checkbox en sí */
.modal-content input[type="checkbox"] {
    margin-right: 8px;
    vertical-align: middle;
}
/* ── Modal: campo de correo y checks ────────────────────────────────────── */
.modal-email-section {
    margin: 16px 0 10px;
    text-align: left;
}

.modal-email-section input[type="email"] {
    width: 100%;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid #444;
    background: #2a2a2a;
    color: #fff;
    font-size: 13px;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.modal-email-section input[type="email"]:focus {
    outline: none;
    border-color: #ff4da6;
}

.modal-checks {
    margin: 14px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.modal-check-label {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px;
    text-align: left !important;
    margin: 0 !important;
    cursor: pointer;
    font-size: 12px !important;
    color: #bbb !important;
    line-height: 1.5;
    padding: 10px 12px;
    background: rgba(255,255,255,0.04);
    border-radius: 8px;
    border: 1px solid #333;
    transition: border-color 0.2s;
}

.modal-check-label:hover {
    border-color: #ff4da6;
}

.modal-check-label input[type="checkbox"] {
    margin: 2px 0 0 0 !important;
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    accent-color: #ff4da6;
}

.modal-check-label a {
    color: #00ffcc !important;
    text-decoration: none;
}

.modal-check-label a:hover {
    text-decoration: underline;
}