* { margin:0; padding:0; box-sizing:border-box; }
body {
    background-color:#0b0b0d; color:#f0f0f0; font-family:'Inter',sans-serif;
    line-height:1.5; scroll-behavior:smooth;
}
h1,h2,h3,.nav-links a,.section-title { font-family:'Montserrat',sans-serif; text-transform:uppercase; }

.container { max-width:1200px; margin:0 auto; padding:0 28px; }
.hidden { display:none !important; }

/* Navbar */
.navbar { display:flex; justify-content:space-between; align-items:center; padding:24px 0; flex-wrap:wrap; gap:20px; border-bottom:2px solid #1a1a20; }
.logo-text { font-family:'Montserrat',sans-serif; font-weight:900; font-size:1.5rem; font-style:italic; color:#ffffff; letter-spacing:1px; }
.nav-links { display:flex; gap:34px; flex-wrap:wrap; justify-content:center; }
.nav-links a { text-decoration:none; font-weight:800; color:#ffffff; transition:all 0.2s ease; font-size:1rem; letter-spacing:1px; cursor:pointer; }
.nav-links a:hover { color:#0066ff; }

/* User bar */
.user-bar { display:flex; align-items:center; gap:15px; margin:30px 0; padding-bottom:20px; border-bottom:1px solid #1a1a20; }
.user-bar img { width:48px; height:48px; border-radius:50%; object-fit:cover; border:2px solid #0066ff; }
.user-bar strong { display:block; color:#fff; font-size:1rem; }
.user-bar span { font-size:0.8rem; color:#a0a0b0; }

/* Hero */
.hero { padding:100px 0 80px; text-align:center; }
.hero h1 {
    font-size:clamp(3rem,8vw,5rem); font-weight:900;
    letter-spacing:0; line-height:1.4; color:#ffffff; font-style:italic;
    padding: 0.2em 16px; overflow: visible !important;
}
.hero h1 span {
    background:linear-gradient(125deg,#0066ff,#00b3ff);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    display: inline-block; padding: 0 0.2em; overflow: visible !important;
}
.hero p { font-size:1.15rem; max-width:600px; margin:24px auto 0; color:#a0a0b0; }
.unique-line { width:120px; height:4px; background:#0066ff; margin:40px auto; border-radius:2px; }

/* Login methods */
.login-methods { display:flex; justify-content:center; gap:20px; margin-bottom:30px; }
.method-btn { background:transparent; border:2px solid #2a2a30; color:#a0a0b0; padding:10px 24px; font-weight:700; font-family:'Montserrat',sans-serif; text-transform:uppercase; cursor:pointer; transition:all 0.2s; font-size:0.9rem; }
.method-btn.active { border-color:#0066ff; color:#ffffff; background:rgba(0,102,255,0.1); }
.login-panel { display:none; animation:fadeIn 0.3s ease; }
.login-panel.active { display:block; }

@keyframes fadeIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }

/* Panel social */
#login-social { display: none !important; }
#login-social.active { display: flex !important; flex-direction: column; align-items: center; gap: 12px; }

/* Botones de redes sociales */
.google-btn, .twitter-btn {
    display:inline-flex; align-items:center; gap:10px; border:none; padding:14px 28px; font-size:1rem; font-weight:800;
    font-family:'Montserrat',sans-serif; text-transform:uppercase; cursor:pointer; transform:skewX(-10deg); transition:all 0.2s ease; margin-top:0;
    width: 100%; max-width: 360px; justify-content: center; white-space: nowrap;
}
.google-btn { background:#ffffff; color:#0b0b0d; }
.google-btn:hover { background:#e0e0e0; transform:skewX(-10deg) scale(0.98); }
.twitter-btn { background:#000000; color:#ffffff; border: 2px solid #2a2a30; }
.twitter-btn:hover { background:#1a1a20; transform:skewX(-10deg) scale(0.98); }

@media (max-width: 480px) {
    .google-btn, .twitter-btn { font-size: 0.85rem; padding: 12px 16px; max-width: 300px; white-space: normal; text-align: center; }
}

.email-form { max-width:400px; margin:0 auto; }
.input-group { margin-bottom:16px; position:relative; }
.input-group input { width:100%; padding:16px 20px; background:#0b0b0d; border:1px solid #2a2a30; color:#fff; font-family:'Inter',sans-serif; font-size:1rem; }
.input-group input:focus { outline:none; border-color:#0066ff; }
.password-group .toggle-password { position:absolute; right:16px; top:50%; transform:translateY(-50%); color:#6a6a80; cursor:pointer; }
.password-group .toggle-password:hover { color:#0066ff; }
.email-actions { display:flex; gap:12px; margin-top:8px; flex-wrap:wrap; }
.email-actions button { flex:1; }
.switch-text { margin-top:16px; font-size:0.85rem; color:#6a6a80; cursor:pointer; }
.switch-text:hover { color:#0066ff; }

/* Botones */
.btn-primary,.btn-outline { padding:14px 28px; font-weight:800; font-family:'Montserrat',sans-serif; text-transform:uppercase; letter-spacing:1px; cursor:pointer; border:none; transition:all 0.2s ease; font-size:0.9rem; display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.btn-primary { background:#0066ff; color:#fff; transform:skewX(-10deg); }
.btn-primary:hover { background:#0052cc; transform:skewX(-10deg) scale(0.98); }
.btn-outline { background:transparent; border:2px solid #0066ff; color:#ffffff; }
.btn-outline:hover { background:#0066ff; color:#fff; }
.btn-outline.danger { border-color:#ef476f; color:#ffffff; }
.btn-outline.danger:hover { background:#ef476f; color:#fff; }
.btn-primary.btn-saved { background: #1a3a4a; color: #8a9aaa; cursor: not-allowed; opacity: 0.8; transform: none; }
.btn-primary.btn-saved:hover { background: #1a3a4a; transform: none; }

/* Action bar */
.action-bar { display:flex; gap:20px; flex-wrap:wrap; align-items:center; margin:20px 0 30px; }
.join-box { display:flex; gap:10px; }
.join-box input { padding:14px 20px; background:#0b0b0d; border:1px solid #2a2a30; color:#fff; font-family:'Inter',sans-serif; font-size:1rem; width:180px; }
.join-box input:focus { outline:none; border-color:#0066ff; }

/* Rooms */
.rooms-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:24px; }
.room-card {
    background:#141418; padding:28px; border:1px solid #2a2a30; border-left:4px solid #0066ff;
    cursor:pointer; transition:all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation: fadeInUp 0.4s ease both;
}
.room-card:hover { transform:translateY(-5px); border-color:#0066ff; box-shadow:0 12px 24px rgba(0,102,255,0.08); }
.room-card strong { font-family:'Montserrat',sans-serif; font-size:1.2rem; display:block; margin-bottom:8px; }

@keyframes fadeInUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }

.room-actions { display:flex; gap:10px; margin:10px 0; }

.room-meta { display:flex; flex-wrap:wrap; align-items:center; gap:20px; margin:12px 0 20px; }
.room-code-wrapper { display:flex; align-items:center; gap:10px; }
.room-code-badge {
    background: #1a1a20; padding: 8px 20px; border: 1px solid #2a2a30; border-left: 3px solid #00b3ff;
    font-family: 'Montserrat', sans-serif; font-weight: 700; color: #ffffff; display: flex; align-items: center; gap: 8px; font-size: 1rem;
}
.room-code-badge i { color:#00b3ff; font-size:0.9rem; }
.room-code-badge span { font-family:monospace; letter-spacing:1px; color:#00b3ff; }
.btn-icon {
    background: #1e2c4a; border: 1px solid #2a3b5a; color: #a0a0b0; padding: 8px 12px; border-radius: 8px;
    cursor: pointer; transition: all 0.2s; font-size: 1rem; position: relative;
}
.btn-icon:hover { background: #253656; color: #ffffff; }

[data-tooltip] { position: relative; }
[data-tooltip]::after {
    content: attr(data-tooltip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
    background: #1e2c4a; color: #fff; font-size: 0.75rem; padding: 4px 10px; border-radius: 6px;
    white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.2s; font-family: 'Inter', sans-serif; font-weight: 500;
}
[data-tooltip]:hover::after { opacity: 1; }

/* Matches */
.matches-grid { display:grid; gap:24px; margin:20px 0; }
.match-item {
    background:#141418; padding:24px; border:1px solid #2a2a30; border-top:3px solid #0066ff;
    animation: fadeInUp 0.4s ease both; transition: border-color 0.2s, transform 0.2s;
}
.match-item:hover { border-color:#0066ff; transform:translateY(-2px); }
.match-teams { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:12px; }
.match-teams span { font-family:'Montserrat',sans-serif; font-weight:800; font-size:1.2rem; }
.match-time { font-family:'Inter',sans-serif !important; font-weight:400 !important; font-size:0.85rem !important; color:#a0a0b0; }
.prediction-inputs { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:10px 0; }
.prediction-inputs input { width:70px; padding:12px; text-align:center; background:#0b0b0d; border:1px solid #3a4b6b; color:white; font-family:'Inter',sans-serif; font-size:1.1rem; font-weight:700; }
.prediction-inputs input:focus { border-color:#0066ff; outline:none; }
input:disabled { opacity:0.4; cursor:not-allowed; }

/* Members */
.members-section { margin:20px 0; background:#141418; padding:20px; border:1px solid #2a2a30; border-left:4px solid #00b3ff; }
.members-section h3 { margin-bottom:15px; color:#fff; font-size:1.1rem; }
.members-grid { display:flex; flex-wrap:wrap; gap:15px; }
.member-chip {
    display:flex; align-items:center; gap:10px; background:#1e2c4a; padding:8px 15px; border-radius:30px; border:1px solid #2a3b5a;
    animation: fadeInUp 0.4s ease both; cursor:pointer; transition: background 0.2s;
}
.member-chip:hover { background:#253656; }
.member-chip img { width:35px; height:35px; border-radius:50%; object-fit:cover; }
.member-chip .member-info { line-height:1.2; }
.member-chip .member-name { font-weight:700; font-size:0.9rem; color:#fff; }
.member-chip .member-email { font-size:0.7rem; color:#a0a0b0; }

/* Leaderboard */
.leaderboard { margin-top:40px; background:#141418; padding:28px; border:1px solid #2a2a30; border-left:4px solid #ffaa00; }
.table-responsive { overflow-x:auto; }
.leaderboard table { width:100%; border-collapse:collapse; margin-top:20px; min-width:300px; }
.leaderboard th,.leaderboard td { padding:10px 15px; text-align:left; border-bottom:1px solid #2a2a30; white-space:nowrap; }
.leaderboard th { font-family:'Montserrat',sans-serif; color:#a0a0b0; font-size:0.8rem; }
.leaderboard td { font-weight:500; }
.points-badge { background:#ffaa00; color:#0b0b0d; padding:4px 14px; font-weight:800; font-family:'Montserrat',sans-serif; font-size:0.85rem; display:inline-block; }

/* ========== CHAT FLOTANTE (estilo WhatsApp) ========== */
.chat-floating-btn {
    position: fixed; bottom: 100px; right: 20px; width: 56px; height: 56px; border-radius: 50%;
    background: #0066ff; color: #fff; border: none; font-size: 1.5rem; cursor: pointer; z-index: 1700;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center;
    transition: transform 0.2s, background 0.2s;
}
.chat-floating-btn:hover { background: #0052cc; transform: scale(1.05); }

.chat-panel {
    position: fixed; bottom: 100px; right: 20px; width: 320px; max-height: 420px; background: #141418;
    border: 1px solid #2a2a30; border-radius: 16px; display: flex; flex-direction: column; z-index: 1700;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5); transition: opacity 0.3s ease, transform 0.3s ease;
    transform: translateY(0); opacity: 1;
}
.chat-panel.hidden { opacity: 0; transform: translateY(20px); pointer-events: none; }
.chat-panel-header {
    display: flex; justify-content: space-between; align-items: center; padding: 12px 16px;
    border-bottom: 1px solid #2a2a30; border-radius: 16px 16px 0 0; background: #1a1a20;
}
.chat-panel-header h3 { font-size: 1rem; color: #fff; margin: 0; }
.chat-panel .chat-messages {
    flex: 1; overflow-y: auto; padding: 12px 16px; max-height: 300px; display: flex;
    flex-direction: column; gap: 6px;
}
/* Burbujas de chat */
.chat-messages .msg { display: flex; align-items: flex-end; gap: 6px; max-width: 85%; }
.chat-messages .msg img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 1px solid #2a3b5a; }
.chat-messages .msg .msg-body {
    background: #1e2c4a; padding: 8px 12px; border-radius: 12px 12px 12px 4px; color: #e0e0e0;
    font-size: 0.9rem; word-break: break-word; position: relative;
}
.chat-messages .msg.own { align-self: flex-end; flex-direction: row-reverse; }
.chat-messages .msg.own .msg-body { background: #0066ff; color: #ffffff; border-radius: 12px 12px 4px 12px; }
.chat-messages .msg .msg-author { font-weight: 700; font-size: 0.7rem; color: #0066ff; margin-bottom: 2px; }
.chat-messages .msg.own .msg-author { color: #ffaa00; }
.chat-messages .msg .msg-time {
    font-size: 0.65rem; color: #9aa0b0; /* más claro */
    margin-top: 4px; text-align: right;
}
/* Botón de borrar mensaje (solo propio) */
.delete-msg-btn {
    background: transparent; border: none; color: #ef476f; font-size: 0.8rem; cursor: pointer;
    padding: 0 4px; transition: color 0.2s; margin-left: 6px;
}
.delete-msg-btn:hover { color: #ff6b6b; }

.chat-input-area {
    padding: 10px 12px; border-top: 1px solid #2a2a30; display: flex; gap: 8px;
    background: #1a1a20; border-radius: 0 0 16px 16px;
}
.chat-input-area input {
    flex: 1; padding: 10px 12px; background: #0b0b0d; border: 1px solid #2a2a30; color: #fff;
    font-family: 'Inter', sans-serif; font-size: 0.9rem; border-radius: 20px;
}
.chat-input-area input:focus { outline: none; border-color: #0066ff; }

/* Indicador de cooldown */
#cooldown-indicator {
    color: #ef476f; font-size: 0.8rem; text-align: center; padding: 4px;
}

@media (max-width: 768px) {
    .chat-floating-btn { bottom: 100px; right: 12px; }
    .chat-panel { right: 12px; width: 280px; max-height: 380px; }
}

/* ========== COLOR PICKER ========== */
.color-options { display:flex; gap:12px; justify-content:center; margin:25px 0; }
.color-swatch { width:45px; height:45px; border-radius:50%; border:3px solid transparent; cursor:pointer; transition:all 0.2s; }
.color-swatch:hover { transform:scale(1.15); border-color:#ffffff; }

/* ========== COMPARATIVA ========== */
#compare-modal .modal-card { text-align:left; }
.compare-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.compare-header span { font-weight:800; color:#fff; }
.compare-match { background:#0b0b0d; padding:12px; border-radius:8px; margin-bottom:10px; border-left:3px solid #0066ff; }
.compare-match .match-title { font-weight:700; color:#ffffff; margin-bottom:5px; }
.compare-match .pred-row { display:flex; justify-content:space-between; align-items:center; font-size:0.85rem; color:#a0a0b0; }
.compare-match .pred-row .you { color:#0066ff; font-weight:600; }
.compare-match .pred-row .them { color:#ffaa00; font-weight:600; }
.compare-result { margin-top:20px; text-align:center; font-size:1.2rem; font-weight:800; }

/* Configuración */
.settings-card { background:#141418; padding:40px; border:1px solid #2a2a30; border-left:4px solid #0066ff; display:flex; flex-wrap:wrap; gap:40px; margin-top:20px; margin-bottom:40px; }
.avatar-section,.name-section { flex:1; min-width:250px; }
.avatar-grid { display:flex; flex-wrap:wrap; gap:12px; margin:16px 0; }
.avatar-option { width:70px; height:70px; border-radius:50%; border:3px solid transparent; cursor:pointer; transition:all 0.2s; object-fit:cover; background:#0b0b0d; }
.avatar-option:hover { border-color:#0066ff; transform:scale(1.1); }
.avatar-option.selected { border-color:#ffaa00; box-shadow:0 0 12px rgba(255,170,0,0.4); }
.google-photo-btn { margin-top:8px; width:100%; }
.custom-input { width:100%; padding:14px 20px; background:#0b0b0d; border:1px solid #2a2a30; color:#fff; font-family:'Inter',sans-serif; font-size:1rem; margin:12px 0; }
.custom-input:focus { border-color:#0066ff; outline:none; }
.hint { color:#6a6a80; font-size:0.85rem; margin-top:8px; }

.donate-section { background: #141418; padding: 25px; border: 1px solid #2a2a30; border-left: 4px solid #ffaa00; margin-bottom: 40px; }
.donate-section h3 { font-family:'Montserrat',sans-serif; color:#fff; margin-bottom:10px; }
.donate-section p { color:#a0a0b0; margin-bottom:15px; }
.donate-btn { transform: none; background: #ffaa00; color: #0b0b0d; }
.donate-btn:hover { background: #e69900; transform: none; }

.legal-links-section { background: #0b0b0d; padding: 25px; border: 1px solid #2a2a30; border-left: 4px solid #0066ff; margin-top: 0; margin-bottom: 60px; }
.legal-links-section h3 { font-family:'Montserrat',sans-serif; color:#fff; margin-bottom:10px; }
.legal-links-section p { color:#a0a0b0; margin-bottom:15px; font-size:0.9rem; }
.legal-links { list-style:none; display:flex; flex-wrap:wrap; gap:20px; padding:0; }
.legal-links a { color:#0066ff; text-decoration:none; font-weight:600; display:flex; align-items:center; gap:8px; }
.legal-links a:hover { color:#00b3ff; text-decoration:underline; }

/* Overlays sin vidrio */
.fullscreen-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background: rgba(11,11,13,0.96); z-index:2000; display:flex; justify-content:center; align-items:center; }
.logout-message { text-align:center; color:#fff; }
.logout-spinner { width:50px; height:50px; border:4px solid rgba(255,255,255,0.2); border-top:4px solid #0066ff; border-radius:50%; animation:spin 0.8s linear infinite; margin:0 auto 24px; }
@keyframes spin { to { transform:rotate(360deg); } }

.modal-card { background:#141418; padding:40px; border:1px solid #2a2a30; border-left:4px solid #ef476f; max-width:450px; width:90%; text-align:center; }
.modal-card h3 { color:#fff; margin-bottom:20px; font-size:1.5rem; }
.modal-card p { color:#a0a0b0; margin-bottom:30px; }
.modal-buttons { display:flex; gap:15px; justify-content:center; }

/* Modal de selección de tema */
.theme-card { max-width: 500px; background: #141418; padding: 40px; border: 1px solid #2a2a30; border-left: 4px solid #0066ff; }
.theme-card h3 { color: #fff; margin-bottom: 30px; font-size: 1.5rem; }
.theme-options { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 30px; }
.theme-btn { background: #1e2c4a; border: 1px solid #2a3b5a; color: #ffffff; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 0.95rem; padding: 12px 20px; cursor: pointer; transition: all 0.2s; text-transform: uppercase; flex: 1 1 150px; max-width: 200px; position: relative; }
.theme-btn:hover { background: #253656; border-color: #0066ff; transform: scale(1.05); }
.theme-btn.unavailable { opacity: 0.4; cursor: not-allowed; }
.theme-btn.unavailable::after { content: "No disponible"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #0b0b0d; color: #ef476f; font-size: 0.8rem; font-weight: 800; padding: 2px 10px; border-radius: 4px; white-space: nowrap; pointer-events: none; }
.theme-btn.unavailable:hover { background: #1e2c4a; transform: none; border-color: #2a3b5a; }

.error-msg { color:#ef476f; background:#1a101a; padding:12px; border-left:3px solid #ef476f; margin:10px 0; font-size:0.9rem; }
.success-msg { color: #06d6a0; background: #0a1a1a; padding: 12px 20px; border-left: 3px solid #06d6a0; margin: 10px 0; font-size: 0.95rem; border-radius: 4px; animation: slideIn 0.3s ease; }
@keyframes slideIn { from { transform: translateY(-10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* Cookie banner sólido */
.cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; background: #141418; border-top: 2px solid #0066ff; z-index: 1600; padding: 15px 28px; display: flex; justify-content: center; align-items: center; transition: transform 0.3s ease; transform: translateY(0); }
.cookie-banner.hidden { transform: translateY(100%); }
.cookie-content { max-width:1200px; width:100%; display:flex; align-items:center; gap:20px; flex-wrap:wrap; justify-content:space-between; }
.cookie-content p { color:#a0a0b0; font-size:0.9rem; margin:0; line-height:1.4; }
.cookie-content a { color:#0066ff; text-decoration:none; font-weight:600; }
.cookie-content a:hover { text-decoration:underline; }
.cookie-buttons { display:flex; gap:10px; flex-wrap:wrap; }
.btn-sm { padding:8px 20px; font-size:0.8rem; }

/* Bottom nav sólido */
.bottom-nav { display:none; position:fixed; bottom:0; left:0; right:0; background:#141418; border-top:2px solid #1a1a20; justify-content:space-around; padding:10px 0 20px; z-index:1500; }
.bottom-nav.visible { display:flex; }
.bottom-tab { color:#a0a0b0; text-decoration:none; font-family:'Montserrat',sans-serif; font-weight:700; font-size:0.75rem; display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 12px; transition:color 0.2s; }
.bottom-tab i { font-size:1.3rem; }
.bottom-tab.active,.bottom-tab:hover { color:#0066ff; }

body.logged-in .cookie-banner { bottom: 80px; }
#btn-back-rooms { margin-bottom: 20px; }

/* ========== MÓVILES ========== */
@media (max-width:768px) {
    .container { padding:0 16px; }
    .navbar { flex-direction:column; padding:16px 0; }
    .desktop-only { display:none !important; }
    .hero { padding:60px 0 40px; }
    .hero h1 { font-size: 2.6rem; white-space: normal; line-height: 1.3; }
    .hero h1 br { display: none; }
    .hero h1 span { padding: 0 0.15em; }
    .room-meta { flex-direction:column; align-items:flex-start; }
    .action-bar { flex-direction:column; align-items:stretch; }
    .join-box { flex-direction:column; }
    .join-box input { width:100%; }
    .settings-card { flex-direction:column; padding:24px; }
    .matches-grid { gap:16px; }
    .match-item { padding:16px; }
    body { padding-bottom:0; }
    body.logged-in { padding-bottom:100px; } /* más espacio para que no se corten las salas */
}

@media (min-width:769px) {
    .bottom-nav { display:none !important; }
    body { padding-bottom:0; }
}
/* Botón de "Olvidé mi contraseña" */
.btn-link {
    background: none;
    border: none;
    color: #0066ff;
    text-decoration: underline;
    cursor: pointer;
    font-size: 0.85rem;
    margin-top: 16px;
    display: block;
    width: 100%;
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    padding: 8px 0;
}
.btn-link:hover { color: #00b3ff; }