@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;600;700;800;900&display=swap');

:root{
    --dark:#05080b;
    --nav:#111927;
    --yellow:#ffd400;
    --green:#43c51c;
    --line:rgba(255,255,255,.13);
    --muted:#cfd4df;
    --white:#fff;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background:#05080b;
    color:#fff;
    font-family:Inter,Arial,sans-serif;
}

a{
    text-decoration:none;
    color:inherit;
}

.login-body{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background:
    radial-gradient(circle at 20% 20%, rgba(255,212,0,.12), transparent 30%),
    radial-gradient(circle at 80% 30%, rgba(67,197,28,.14), transparent 32%),
    linear-gradient(135deg,#05080b,#071509 60%,#030504);
    padding:24px;
}

.login-box{
    width:100%;
    max-width:430px;
    padding:38px;
    border-radius:28px;
    background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.04));
    border:1px solid rgba(255,255,255,.12);
    backdrop-filter:blur(16px);
    box-shadow:0 25px 80px rgba(0,0,0,.45);
}

.login-box h1{
    font-family:Anton,Impact,sans-serif;
    font-size:46px;
    line-height:1;
    text-transform:uppercase;
    color:#fff;
    margin-bottom:10px;
}

.login-box p{
    color:#dce2ec;
    margin-bottom:28px;
}

.login-box label{
    display:block;
    margin-top:16px;
    margin-bottom:8px;
    font-weight:800;
    color:#fff;
}

.login-box input{
    width:100%;
    padding:15px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(0,0,0,.32);
    color:#fff;
    outline:none;
}

.login-box input:focus{
    border-color:var(--yellow);
    box-shadow:0 0 0 4px rgba(255,212,0,.12);
}

.login-box button{
    width:100%;
    margin-top:26px;
    min-height:56px;
    border:0;
    border-radius:14px;
    background:linear-gradient(135deg,#ffe600,#d2a500);
    color:#111;
    font-weight:900;
    font-size:16px;
    cursor:pointer;
    box-shadow:0 18px 44px rgba(255,212,0,.22);
}

.login-box button:hover{
    transform:translateY(-2px);
}

.error{
    background:rgba(255,0,0,.13);
    border:1px solid rgba(255,0,0,.28);
    color:#fecaca;
    padding:13px;
    border-radius:14px;
    margin-bottom:18px;
    font-weight:700;
}

/* PANEL GENERAL */

.panel-body{
    min-height:100vh;
    background:#f5f6f8;
    color:#111827;
}

.panel-header{
    background:#05080b;
    border-bottom:1px solid rgba(255,255,255,.10);
    color:#fff;
}

.panel-nav{
    width:min(1420px,92vw);
    margin:auto;
    min-height:74px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
}

.panel-logo{
    font-family:Anton,Impact,sans-serif;
    font-size:30px;
    color:#fff;
    text-transform:uppercase;
}

.panel-logo span{
    color:var(--yellow);
}

.panel-menu{
    display:flex;
    align-items:center;
    gap:18px;
}

.panel-menu a{
    font-weight:800;
    color:#dce2ec;
}

.panel-menu a:hover{
    color:var(--yellow);
}

.panel-btn{
    padding:12px 20px;
    border-radius:999px;
    background:linear-gradient(135deg,#ffe600,#d2a500);
    color:#111 !important;
    font-weight:900;
}

.panel-main{
    width:min(1420px,92vw);
    margin:34px auto;
}

.panel-title{
    margin-bottom:28px;
}

.panel-title h1{
    font-size:34px;
    color:#111827;
}

.panel-title p{
    color:#667085;
}

.panel-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}

.panel-card{
    background:#fff;
    border:1px solid #e4e6eb;
    border-radius:24px;
    padding:26px;
    box-shadow:0 18px 50px rgba(0,0,0,.07);
}

.panel-card h3{
    margin-bottom:10px;
}

.panel-card p{
    color:#667085;
}

@media(max-width:900px){
    .panel-nav{
        flex-direction:column;
        align-items:flex-start;
        padding:18px 0;
    }

    .panel-menu{
        flex-wrap:wrap;
    }

    .panel-grid{
        grid-template-columns:1fr;
    }

    .login-box{
        padding:28px;
    }

    .login-box h1{
        font-size:38px;
    }
}
.auth-layout{
    width:min(980px,95vw);
    display:grid;
    grid-template-columns:1fr 1fr;
    background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.04));
    border:1px solid rgba(255,255,255,.12);
    border-radius:30px;
    overflow:hidden;
    backdrop-filter:blur(16px);
    box-shadow:0 25px 80px rgba(0,0,0,.45);
}

.auth-brand{
    padding:42px;
    background:
    radial-gradient(circle at 20% 20%, rgba(255,212,0,.16), transparent 32%),
    linear-gradient(135deg,#05080b,#071509);
}

.auth-brand img{
    height:58px;
    margin-bottom:42px;
}

.auth-brand span{
    display:inline-block;
    color:var(--yellow);
    font-weight:900;
    text-transform:uppercase;
    margin-bottom:14px;
}

.auth-brand h1{
    font-family:Anton,Impact,sans-serif;
    font-size:48px;
    line-height:1;
    text-transform:uppercase;
    margin-bottom:18px;
}

.auth-brand p{
    color:#dce2ec;
    line-height:1.6;
}

.auth-form{
    background:#fff;
    color:#111827;
    padding:42px;
}

.auth-form h2{
    font-size:30px;
    margin-bottom:22px;
}

.auth-form label{
    display:block;
    margin-top:14px;
    margin-bottom:7px;
    font-weight:800;
}

.auth-form input{
    width:100%;
    padding:14px;
    border:1px solid #d0d5dd;
    border-radius:13px;
    outline:none;
}

.auth-form input:focus{
    border-color:var(--yellow);
    box-shadow:0 0 0 4px rgba(255,212,0,.14);
}

.auth-form button{
    width:100%;
    margin-top:24px;
    min-height:56px;
    border:0;
    border-radius:14px;
    background:linear-gradient(135deg,#ffe600,#d2a500);
    color:#111;
    font-weight:900;
    font-size:16px;
    cursor:pointer;
}

.auth-link{
    text-align:center;
    margin-top:18px;
    color:#667085;
}

.auth-link a{
    color:#111827;
    font-weight:900;
}

.alerta{
    padding:13px;
    border-radius:13px;
    margin-bottom:16px;
    font-weight:800;
}

.alerta.error{
    background:#fee2e2;
    color:#991b1b;
}

@media(max-width:800px){
    .auth-layout{
        grid-template-columns:1fr;
    }

    .auth-brand,
    .auth-form{
        padding:30px;
    }

    .auth-brand h1{
        font-size:38px;
    }
}
.panel-badge{
    display:inline-flex;
    background:rgba(255,212,0,.14);
    color:#8a6d00;
    border:1px solid rgba(255,212,0,.35);
    padding:8px 14px;
    border-radius:999px;
    font-weight:900;
    font-size:13px;
    margin-bottom:12px;
}

.panel-actions{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    margin-top:24px;
}

.panel-action-card{
    display:flex;
    flex-direction:column;
    gap:8px;
    background:#111927;
    color:#fff;
    border-radius:22px;
    padding:26px;
    font-weight:900;
    box-shadow:0 18px 50px rgba(0,0,0,.08);
    border:1px solid rgba(67,197,28,.25);
}

.panel-action-card span{
    color:#cfd4df;
    font-weight:600;
}

.alerta-panel{
    padding:14px 16px;
    border-radius:14px;
    margin-bottom:18px;
    font-weight:900;
}

.alerta-panel.ok{
    background:#dcfce7;
    color:#166534;
}

.alerta-panel.error{
    background:#fee2e2;
    color:#991b1b;
}

@media(max-width:900px){
    .panel-actions{
        grid-template-columns:1fr;
    }
}
.panel-filtros{
    display:grid;
    grid-template-columns:2fr 1fr 1fr auto auto;
    gap:14px;
    margin-bottom:24px;
    background:#fff;
    padding:18px;
    border-radius:20px;
    border:1px solid #e4e6eb;
    box-shadow:0 12px 35px rgba(0,0,0,.05);
}

.panel-filtros input,
.panel-filtros select{
    width:100%;
    padding:13px;
    border:1px solid #d0d5dd;
    border-radius:12px;
    outline:none;
}

.panel-filtros button,
.panel-filtros a{
    border:0;
    border-radius:12px;
    padding:13px 18px;
    font-weight:900;
    background:linear-gradient(135deg,#ffe600,#d2a500);
    color:#111;
    cursor:pointer;
    text-align:center;
}

.panel-filtros a{
    background:#111927;
    color:#fff;
}

.tabla-card{
    background:#fff;
    border-radius:24px;
    border:1px solid #e4e6eb;
    box-shadow:0 18px 50px rgba(0,0,0,.07);
    overflow:auto;
}

.tabla-panel{
    width:100%;
    border-collapse:collapse;
    min-width:1100px;
}

.tabla-panel th{
    background:#111927;
    color:#fff;
    text-align:left;
    padding:16px;
    font-size:13px;
    text-transform:uppercase;
}

.tabla-panel td{
    padding:16px;
    border-bottom:1px solid #edf0f4;
    vertical-align:top;
}

.tabla-panel strong{
    display:block;
    color:#111827;
}

.tabla-panel small{
    display:block;
    color:#667085;
    margin-top:4px;
}

.pill{
    display:inline-flex;
    padding:7px 11px;
    border-radius:999px;
    font-size:12px;
    font-weight:900;
}

.tipo-admin{
    background:#fef3c7;
    color:#92400e;
}

.tipo-equipo{
    background:#dcfce7;
    color:#166534;
}

.tipo-usuario{
    background:#e0f2fe;
    color:#075985;
}

.estado-activo{
    background:#dcfce7;
    color:#166534;
}

.estado-inactivo{
    background:#f3f4f6;
    color:#374151;
}

.estado-suspendido{
    background:#fee2e2;
    color:#991b1b;
}

.acciones-usuario summary{
    cursor:pointer;
    font-weight:900;
    color:#111827;
}

.acciones-usuario form{
    margin-top:14px;
    padding:14px;
    background:#f8fafc;
    border:1px solid #e4e6eb;
    border-radius:16px;
}

.acciones-usuario label{
    display:block;
    margin-bottom:7px;
    font-weight:800;
    color:#111827;
}

.acciones-usuario select{
    width:100%;
    padding:11px;
    border-radius:10px;
    border:1px solid #d0d5dd;
}

.acciones-usuario button{
    width:100%;
    margin-top:10px;
    border:0;
    border-radius:10px;
    padding:11px;
    background:#111927;
    color:#fff;
    font-weight:900;
    cursor:pointer;
}

@media(max-width:900px){
    .panel-filtros{
        grid-template-columns:1fr;
    }
}
.panel-form-card{
    background:#fff;
    border:1px solid #e4e6eb;
    border-radius:24px;
    padding:26px;
    margin-bottom:24px;
    box-shadow:0 18px 50px rgba(0,0,0,.07);
}

.panel-form-card h2{
    margin-bottom:18px;
}

.form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
}

.form-full{
    grid-column:1 / -1;
}

.form-grid label{
    display:block;
    margin-bottom:7px;
    font-weight:800;
}

.form-grid input,
.form-grid select,
.form-grid textarea,
.acciones-usuario input,
.acciones-usuario textarea{
    width:100%;
    padding:12px;
    border:1px solid #d0d5dd;
    border-radius:12px;
    outline:none;
}

.form-grid textarea,
.acciones-usuario textarea{
    min-height:90px;
    resize:vertical;
}

.form-grid button{
    border:0;
    border-radius:14px;
    padding:14px 22px;
    background:linear-gradient(135deg,#ffe600,#d2a500);
    color:#111;
    font-weight:900;
    cursor:pointer;
}

@media(max-width:900px){
    .form-grid{
        grid-template-columns:1fr;
    }
}
.inline-form{
    display:flex;
    gap:8px;
}

.inline-form select{
    padding:10px;
    border:1px solid #d0d5dd;
    border-radius:10px;
}

.inline-form button{
    border:0;
    border-radius:10px;
    padding:10px 14px;
    background:#111927;
    color:#fff;
    font-weight:900;
    cursor:pointer;
}

.estado-pendiente{
    background:#fef3c7;
    color:#92400e;
}

.estado-pagado{
    background:#dcfce7;
    color:#166534;
}

.estado-rechazado{
    background:#fee2e2;
    color:#991b1b;
}

.estado-cerrado,
.estado-cerrada,
.estado-finalizado{
    background:#e0e7ff;
    color:#3730a3;
}

.estado-abierto,
.estado-activa{
    background:#dcfce7;
    color:#166534;
}
.perfil-card{
    display:grid;
    grid-template-columns:300px 1fr;
    gap:28px;
}

.perfil-preview{
    background:#111927;
    color:#fff;
    border-radius:24px;
    padding:26px;
    text-align:center;
}

.perfil-preview img{
    width:130px;
    height:130px;
    object-fit:cover;
    border-radius:50%;
    border:4px solid #ffd400;
    margin-bottom:18px;
}

.perfil-preview h2{
    margin-bottom:8px;
}

.perfil-preview p{
    color:#cfd4df;
    margin-bottom:14px;
}

.perfil-puntos{
    display:block;
    margin-top:16px;
    color:#ffd400;
    font-size:22px;
}

.pronosticos-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
}

.pronostico-card{
    background:#fff;
    border:1px solid #e4e6eb;
    border-radius:24px;
    padding:26px;
    box-shadow:0 18px 50px rgba(0,0,0,.07);
}

.pronostico-card h2{
    font-size:24px;
    margin:16px 0 8px;
}

.pronostico-card p{
    color:#667085;
    margin-bottom:18px;
}

.pronostico-form{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    gap:12px;
    align-items:center;
}

.pronostico-form input{
    width:100%;
    padding:14px;
    border:1px solid #d0d5dd;
    border-radius:12px;
    text-align:center;
    font-size:20px;
    font-weight:900;
}

.pronostico-form button{
    grid-column:1 / -1;
    border:0;
    border-radius:14px;
    padding:14px;
    background:linear-gradient(135deg,#ffe600,#d2a500);
    color:#111;
    font-weight:900;
    cursor:pointer;
}

.resultado-box{
    background:#f8fafc;
    border:1px solid #e4e6eb;
    border-radius:16px;
    padding:16px;
    color:#111827;
}

@media(max-width:1100px){
    .pronosticos-grid{
        grid-template-columns:1fr 1fr;
    }

    .perfil-card{
        grid-template-columns:1fr;
    }
}

@media(max-width:700px){
    .pronosticos-grid{
        grid-template-columns:1fr;
    }
}
.pollas-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
}

.polla-card{
    background:#fff;
    border:1px solid #e4e6eb;
    border-radius:24px;
    padding:26px;
    box-shadow:0 18px 50px rgba(0,0,0,.07);
}

.polla-head{
    display:flex;
    justify-content:space-between;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:18px;
}

.polla-card h2{
    font-size:24px;
    margin-bottom:10px;
}

.polla-card p{
    color:#667085;
    line-height:1.55;
    margin-bottom:20px;
}

.polla-costo{
    background:#111927;
    color:#fff;
    border-radius:18px;
    padding:18px;
    margin-bottom:20px;
}

.polla-costo span{
    display:block;
    color:#cfd4df;
    font-size:13px;
    margin-bottom:4px;
}

.polla-costo strong{
    color:#ffd400;
    font-size:26px;
}

.polla-form{
    display:grid;
    gap:12px;
}

.polla-form label{
    font-weight:800;
}

.polla-form input{
    padding:12px;
    border:1px solid #d0d5dd;
    border-radius:12px;
    background:#f8fafc;
}

.polla-form button{
    border:0;
    border-radius:14px;
    padding:14px;
    background:linear-gradient(135deg,#ffe600,#d2a500);
    color:#111;
    font-weight:900;
    cursor:pointer;
}

@media(max-width:1100px){
    .pollas-grid{
        grid-template-columns:1fr 1fr;
    }
}

@media(max-width:700px){
    .pollas-grid{
        grid-template-columns:1fr;
    }
}

.login-register{
    margin-top:24px;
    text-align:center;
    border-top:1px solid rgba(255,255,255,.15);
    padding-top:20px;
}

.login-register p{
    margin-bottom:12px;
    color:#94a3b8;
    font-size:14px;
}

.btn-registro{
    display:inline-block;
    padding:12px 22px;
    border-radius:14px;
    background:transparent;
    border:2px solid #ffd400;
    color:#ffd400;
    font-weight:800;
    text-decoration:none;
    transition:.3s;
}

.btn-registro:hover{
    background:#ffd400;
    color:#000;
    transform:translateY(-2px);
}
.pais-option{
    display:flex;
    align-items:center;
    gap:10px;
}

.bandera-redonda{
    width:54px;
    height:54px;
    border-radius:50%;
    object-fit:cover;
    border:4px solid #fff;
    box-shadow:0 0 0 4px #ffd400, 0 10px 28px rgba(0,0,0,.18);
}

.partido-vista{
    display:flex;
    align-items:center;
    gap:18px;
}

.partido-equipo{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    text-align:center;
    min-width:90px;
}

.partido-equipo strong{
    font-size:13px;
}

.vs-pill{
    font-weight:900;
    color:#111927;
}
.partidos-admin-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:24px;
}

.match-card-admin{
    background:linear-gradient(135deg,#7a064f,#b10f7a);
    border-radius:28px;
    padding:26px;
    color:#fff;
    box-shadow:0 22px 60px rgba(0,0,0,.16);
    border:1px solid rgba(255,255,255,.16);
}

.match-status{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-bottom:20px;
}

.match-status small{
    color:#fff;
    font-weight:800;
}

.match-score{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:22px;
    margin-bottom:22px;
}

.match-team{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:12px;
}

.match-team strong{
    color:#fff;
    font-size:18px;
    text-transform:uppercase;
}

.bandera-redonda{
    width:82px;
    height:82px;
    border-radius:50%;
    object-fit:cover;
    border:6px solid #fff;
    box-shadow:0 0 0 5px #ff3bd5, 0 14px 34px rgba(0,0,0,.35);
    background:#fff;
}

.match-center{
    text-align:center;
}

.match-time{
    display:inline-block;
    background:#fff;
    color:#b10f7a;
    padding:8px 18px;
    border-radius:10px 10px 0 0;
    font-weight:900;
}

.score-box{
    background:#fff;
    color:#111;
    font-size:54px;
    font-weight:950;
    padding:12px 32px;
    border-radius:10px;
    line-height:1;
}

.vs-pill{
    display:inline-block;
    margin-top:10px;
    background:#ffd400;
    color:#111;
    padding:7px 18px;
    border-radius:999px;
    font-weight:950;
}

@media(max-width:1100px){
    .partidos-admin-grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:650px){
    .match-score{
        grid-template-columns:1fr;
    }

    .score-box{
        font-size:42px;
    }
}
.pronosticos-match-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:24px;
}

.match-card-user{
    background:linear-gradient(135deg,#7a064f,#b10f7a);
    border-radius:30px;
    padding:26px;
    color:#fff;
    box-shadow:0 22px 60px rgba(0,0,0,.18);
    border:1px solid rgba(255,255,255,.16);
}

.match-user-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-bottom:22px;
}

.match-user-top small{
    color:#fff;
    font-weight:900;
}

.match-user-scoreboard{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:22px;
}

.match-user-team{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:12px;
}

.match-user-team strong{
    color:#fff;
    text-transform:uppercase;
    font-size:18px;
}

.bandera-redonda-user{
    width:92px;
    height:92px;
    border-radius:50%;
    object-fit:cover;
    border:7px solid #fff;
    box-shadow:0 0 0 5px #ff3bd5, 0 14px 34px rgba(0,0,0,.35);
    background:#fff;
}

.match-user-center{
    text-align:center;
}

.match-user-time{
    display:inline-block;
    background:#fff;
    color:#b10f7a;
    padding:8px 20px;
    border-radius:12px 12px 0 0;
    font-weight:950;
}

.match-user-score{
    background:#fff;
    color:#111;
    font-size:58px;
    font-weight:950;
    padding:14px 34px;
    border-radius:12px;
    line-height:1;
}

.match-user-vs{
    display:inline-block;
    margin-top:12px;
    background:#ffd400;
    color:#111;
    padding:8px 22px;
    border-radius:999px;
    font-weight:950;
}

.pronostico-visual-form{
    margin-top:24px;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.18);
    border-radius:22px;
    padding:20px;
    display:grid;
    grid-template-columns:1fr auto 1fr;
    gap:14px;
    align-items:end;
}

.pronostico-input-group label{
    display:block;
    margin-bottom:8px;
    color:#fff;
    font-weight:900;
    text-align:center;
    font-size:13px;
    text-transform:uppercase;
}

.pronostico-input-group input{
    width:100%;
    padding:14px;
    border:0;
    border-radius:14px;
    text-align:center;
    font-size:26px;
    font-weight:950;
    outline:none;
}

.pronostico-separador{
    font-size:34px;
    padding-bottom:10px;
    color:#ffd400;
}

.pronostico-visual-form button{
    grid-column:1 / -1;
    border:0;
    border-radius:16px;
    padding:15px;
    background:linear-gradient(135deg,#ffe600,#d2a500);
    color:#111;
    font-weight:950;
    cursor:pointer;
}

.match-card-user .resultado-box{
    margin-top:24px;
    background:rgba(255,255,255,.14);
    color:#fff;
    border:1px solid rgba(255,255,255,.16);
}

@media(max-width:1100px){
    .pronosticos-match-grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:650px){
    .match-user-scoreboard{
        grid-template-columns:1fr;
    }

    .match-user-score{
        font-size:42px;
    }

    .pronostico-visual-form{
        grid-template-columns:1fr;
    }

    .pronostico-separador{
        text-align:center;
        padding:0;
    }
}
.eliminar-box{
    margin-top:14px;
}

.eliminar-box summary{
    color:#fee2e2 !important;
}

.eliminar-box form{
    background:rgba(127,29,29,.18) !important;
    border:1px solid rgba(248,113,113,.45) !important;
}

.eliminar-box p{
    color:#fee2e2;
    margin-bottom:12px;
    line-height:1.45;
}

.btn-eliminar{
    background:#dc2626 !important;
    color:#fff !important;
}
.reglas-polla{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
}

.reglas-polla div{
    background:#111927;
    color:#fff;
    border-radius:18px;
    padding:18px;
}

.reglas-polla strong{
    display:block;
    margin-bottom:8px;
}

.reglas-polla span{
    color:#ffd400;
    font-weight:900;
    font-size:22px;
}

@media(max-width:900px){
    .reglas-polla{
        grid-template-columns:1fr;
    }
}