:root{
    --bg:#030711;--panel:#0b1728;--panel2:#10233b;--gold:#f6d365;--green:#22c55e;--red:#ef4444;--cyan:#38bdf8;--muted:rgba(255,255,255,.68);--border:rgba(246,211,101,.25);
}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(700px 500px at 10% 0%,rgba(246,211,101,.14),transparent 60%),radial-gradient(700px 500px at 100% 10%,rgba(56,189,248,.12),transparent 55%),linear-gradient(180deg,#030711,#07111f 60%,#030711);color:#fff;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;min-height:100vh}
a{color:var(--gold);text-decoration:none;font-weight:900}
.login-body{display:flex;align-items:center;justify-content:center;padding:18px}
.login-card{width:min(440px,100%);background:linear-gradient(180deg,rgba(16,35,59,.96),rgba(3,7,17,.98));border:1px solid var(--border);border-radius:32px;padding:24px;box-shadow:0 30px 80px rgba(0,0,0,.55);text-align:center}
.main-logo{width:190px;max-width:80%;border-radius:24px;margin-bottom:12px;box-shadow:0 0 40px rgba(246,211,101,.12)}
.kicker{color:var(--gold);text-transform:uppercase;font-size:12px;font-weight:1000;letter-spacing:.5px}
h1{font-size:clamp(30px,5vw,48px);margin:8px 0;font-weight:1000;letter-spacing:-1px}
h2{margin:20px 0 10px} h3{margin:8px 0}
p{color:var(--muted);font-weight:750}
label{display:block;text-align:left;color:var(--gold);font-weight:1000;font-size:12px;margin:12px 0 6px;text-transform:uppercase}
input,textarea,select{width:100%;border:1px solid rgba(246,211,101,.18);background:rgba(15,23,42,.96);color:white;border-radius:15px;padding:13px;font-weight:850;outline:none}
textarea{resize:vertical}
button,.btn,.link-btn{border:none;border-radius:17px;padding:13px 16px;background:linear-gradient(135deg,var(--gold),#8c6b1f);color:#070707!important;font-weight:1000;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;margin-top:10px}
.link-btn{width:100%;background:rgba(255,255,255,.06);color:white!important;border:1px solid rgba(255,255,255,.1)}
.danger{background:linear-gradient(135deg,#ff3154,#991b1b)!important;color:white!important}
.ghost{background:rgba(255,255,255,.07)!important;color:white!important;border:1px solid rgba(255,255,255,.12)}
.alert{padding:12px;border-radius:15px;margin:12px 0;font-weight:900}
.ok{background:rgba(34,197,94,.14);color:#bbf7d0;border:1px solid rgba(34,197,94,.35)}
.error{background:rgba(239,68,68,.14);color:#fecaca;border:1px solid rgba(239,68,68,.35)}
.topbar{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:14px 18px;background:rgba(5,10,20,.88);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.wrap{max-width:1180px;margin:auto;padding:18px}
.hero,.card,.table-card{background:linear-gradient(180deg,rgba(16,35,59,.95),rgba(7,17,31,.98));border:1px solid var(--border);border-radius:28px;padding:18px;margin:14px 0;box-shadow:0 18px 38px rgba(0,0,0,.34)}
.hero{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.center{text-align:center;justify-content:center}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap}
.mega-link{font-size:18px;padding:16px 20px}
.stats,.roulette-status{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:14px 0}
.roulette-status{grid-template-columns:repeat(3,1fr)}
.stats div,.roulette-status div{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:16px;text-align:center}
.stats b,.roulette-status b{display:block;font-size:34px}
.stats span,.roulette-status span{color:var(--muted);font-weight:900;font-size:12px;text-transform:uppercase}
.list{display:grid;gap:10px}
.list-item{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:12px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.list-item small{display:block;color:var(--muted);font-weight:800;margin-top:4px}
.row-actions{display:flex;gap:8px;flex-wrap:wrap}.row-actions form{margin:0}.row-actions button{margin:0}
.add-team-form{display:grid;grid-template-columns:120px 1fr 180px;gap:10px;align-items:center}
.team-admin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:14px 0}
.team-admin-card{position:relative;overflow:hidden;text-align:center;background:linear-gradient(180deg,rgba(16,35,59,.96),rgba(5,13,27,.98));border:1px solid var(--border);border-radius:28px;padding:18px;box-shadow:0 18px 35px rgba(0,0,0,.28)}
.team-admin-card:before{content:"";position:absolute;inset:0;background:radial-gradient(220px 130px at 50% 0%,rgba(246,211,101,.13),transparent 65%);pointer-events:none}
.team-admin-card.inactive{opacity:.45;filter:grayscale(.7)}
.team-admin-card.eliminado{border-color:rgba(239,68,68,.42)}
.team-admin-card.campeon{border-color:rgba(246,211,101,.70);box-shadow:0 0 38px rgba(246,211,101,.18)}
.flag-big{font-size:76px;line-height:1;margin:8px 0 6px;filter:drop-shadow(0 8px 16px rgba(0,0,0,.35))}
.team-state{display:inline-flex;border-radius:999px;background:rgba(255,255,255,.08);padding:8px 12px;font-weight:1000;margin:8px 0 12px}
.mini-form{display:grid;grid-template-columns:70px 1fr;gap:8px}.mini-form button{grid-column:1/-1;width:100%}
.status-buttons{display:grid;grid-template-columns:1fr;gap:7px;margin-top:10px}.status-buttons form{margin:0}.status-buttons button{width:100%;margin:0}
.small-btn.live{background:linear-gradient(135deg,#22c55e,#15803d)!important;color:white!important}
.small-btn.dead-btn{background:linear-gradient(135deg,#ef4444,#991b1b)!important;color:white!important}
.small-btn.champ-btn{background:linear-gradient(135deg,#f6d365,#8c6b1f)!important;color:#090909!important}
.full-btn{width:100%;margin-top:10px}
table{width:100%;border-collapse:collapse}th,td{padding:12px;border-bottom:1px solid rgba(255,255,255,.08);text-align:left}th{color:var(--gold);font-size:12px;text-transform:uppercase}
.roulette-area{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:18px 0}
.wheel-card{text-align:center;background:linear-gradient(180deg,rgba(16,35,59,.95),rgba(7,17,31,.98));border:1px solid var(--border);border-radius:32px;padding:18px;overflow:hidden}
.wheel{width:min(290px,75vw);height:min(290px,75vw);margin:18px auto;border-radius:50%;background:conic-gradient(#f6d365 0deg 30deg,#38bdf8 30deg 60deg,#22c55e 60deg 90deg,#ef4444 90deg 120deg,#a855f7 120deg 150deg,#f97316 150deg 180deg,#f6d365 180deg 210deg,#38bdf8 210deg 240deg,#22c55e 240deg 270deg,#ef4444 270deg 300deg,#a855f7 300deg 330deg,#f97316 330deg 360deg);border:10px solid rgba(255,255,255,.08);box-shadow:0 0 40px rgba(246,211,101,.20),inset 0 0 30px rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;position:relative}
.wheel:after{content:"";position:absolute;top:-18px;border-left:18px solid transparent;border-right:18px solid transparent;border-top:30px solid white;filter:drop-shadow(0 0 8px rgba(0,0,0,.5))}
.wheel-inner{width:45%;height:45%;border-radius:50%;background:#07111f;display:flex;align-items:center;justify-content:center;font-size:54px;border:4px solid rgba(255,255,255,.16)}
.spin{animation:spin 5s cubic-bezier(.12,.8,.18,1) forwards}.spin2{animation:spin2 5s cubic-bezier(.12,.8,.18,1) forwards}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(2700deg)}}@keyframes spin2{from{transform:rotate(0)}to{transform:rotate(3120deg)}}
.winner{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);border-radius:18px;padding:13px;font-size:20px;font-weight:1000}
.mega-btn{font-size:20px;padding:18px 26px;box-shadow:0 0 40px rgba(246,211,101,.18)}
@media(max-width:780px){.roulette-area{grid-template-columns:1fr}.stats,.roulette-status{grid-template-columns:1fr 1fr}.list-item{display:block}.row-actions{margin-top:10px}.add-team-form{grid-template-columns:1fr}.team-admin-grid{grid-template-columns:1fr}.hero-actions,.hero-actions .btn{width:100%}.hero-actions .btn{display:flex}}


/* ===== SELECTOR DE BANDERAS ===== */
.flag-field{
    display:grid;
    grid-template-columns:1fr 92px;
    gap:8px;
    align-items:center;
}
.flag-field input{
    text-align:center;
    font-size:24px;
    padding:10px;
}
.flag-picker-btn{
    margin:0!important;
    padding:10px!important;
    min-height:44px!important;
}
.mini-form{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
}
.mini-flag-field{
    grid-template-columns:1fr 60px;
}
.flag-modal{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.78);
    z-index:9999;
    align-items:center;
    justify-content:center;
    padding:14px;
}
.flag-box{
    width:min(820px,100%);
    max-height:90vh;
    overflow:auto;
    background:linear-gradient(180deg,rgba(16,35,59,.98),rgba(3,7,17,.99));
    border:1px solid var(--border);
    border-radius:28px;
    padding:18px;
    box-shadow:0 30px 90px rgba(0,0,0,.65);
}
.flag-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:12px;
}
.flag-head h2{
    margin:0;
}
.close-flag{
    width:auto!important;
    margin:0!important;
}
.flag-search{
    margin-bottom:14px;
    font-size:16px;
}
.flag-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(145px,1fr));
    gap:10px;
}
.flag-option{
    background:rgba(255,255,255,.06)!important;
    color:white!important;
    border:1px solid rgba(255,255,255,.12)!important;
    border-radius:18px!important;
    padding:12px!important;
    min-height:94px!important;
    margin:0!important;
    display:flex;
    flex-direction:column;
    gap:6px;
}
.flag-option span{
    font-size:42px;
    line-height:1;
}
.flag-option b{
    font-size:13px;
}
.flag-option:hover{
    transform:translateY(-2px);
    border-color:rgba(246,211,101,.5)!important;
    box-shadow:0 0 24px rgba(246,211,101,.12);
}
@media(max-width:780px){
    .flag-field{
        grid-template-columns:1fr;
    }
    .add-team-form{
        grid-template-columns:1fr!important;
    }
}


/* ===== PARTICIPANTE MANUAL ===== */
.manual-participant-form{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:10px;
}
.manual-participant-form label{
    margin:0 0 6px;
}
.manual-participant-form button{
    grid-column:1/-1;
}
.check-line{
    grid-column:1/-1;
    display:flex!important;
    align-items:center;
    gap:10px;
    background:rgba(34,197,94,.10);
    border:1px solid rgba(34,197,94,.22);
    border-radius:16px;
    padding:12px;
    color:#bbf7d0!important;
    font-size:14px!important;
    text-transform:none!important;
}
.check-line input{
    width:auto!important;
    transform:scale(1.25);
}
@media(max-width:780px){
    .manual-participant-form{
        grid-template-columns:1fr;
    }
}