/* =========================================================
   PIERO PASTOR — ADMINISTRACIÓN
   Estilos del panel administrativo
   ========================================================= */

:root {
    --admin-bg: #090a0b;
    --admin-bg-soft: #111315;
    --admin-panel: #15171a;
    --admin-panel-hover: #1a1c20;

    --admin-border: #30343a;

    --admin-gold: #ffcc00;
    --admin-gold-dark: #a78600;

    --admin-text: #f4f5f7;
    --admin-muted: #9ba3ad;

    --admin-danger: #ff6262;
    --admin-success: #48d597;

    --admin-sidebar: 278px;

    --admin-radius: 18px;
}

/* =========================================================
   BASE
   ========================================================= */

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;

    background:
        var(--admin-bg);
}

body {
    min-height: 100vh;

    margin: 0;

    background:
        radial-gradient(
            circle at 20% 10%,
            rgba(
                255,
                204,
                0,
                0.07
            ),
            transparent 28%
        ),

        radial-gradient(
            circle at 85% 20%,
            rgba(
                255,
                204,
                0,
                0.035
            ),
            transparent 25%
        ),

        var(--admin-bg);

    color:
        var(--admin-text);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    overflow-x: hidden;
}

/* =========================================================
   ELEMENTOS GENERALES
   ========================================================= */

button,
input,
select {
    font: inherit;
}

button {
    cursor: pointer;
}

button:disabled {
    cursor: wait;

    opacity: 0.6;
}

[hidden] {
    display: none !important;
}

/* =========================================================
   LOGIN
   ========================================================= */

.screen {
    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 30px;

    animation:
        login-enter
        0.55s
        ease
        both;
}

.login-card {
    width:
        min(
            100%,
            620px
        );

    padding: 52px;

    background:
        linear-gradient(
            145deg,
            #181a1e,
            #111214
        );

    border:
        1px solid
        rgba(
            255,
            204,
            0,
            0.45
        );

    border-radius:
        24px;

    box-shadow:
        0 35px 90px
        rgba(
            0,
            0,
            0,
            0.55
        ),

        0 0 45px
        rgba(
            255,
            204,
            0,
            0.04
        );

    position: relative;

    overflow: hidden;
}

.login-card::before {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            120deg,
            transparent 20%,
            rgba(
                255,
                255,
                255,
                0.035
            ),
            transparent 55%
        );

    transform:
        translateX(
            -100%
        );
}

.login-card:hover::before {
    animation:
        login-shine
        1.1s
        ease
        forwards;
}

.eyebrow {
    display: block;

    margin-bottom: 12px;

    color:
        var(--admin-gold);

    font-size: 15px;

    font-weight: 800;

    letter-spacing: 5px;
}

.login-card h1 {
    margin:
        0 0 18px;

    color:
        var(--admin-text);

    font-size:
        clamp(
            36px,
            5vw,
            50px
        );

    line-height: 1;

    letter-spacing: -1.5px;
}

.login-card > p {
    margin:
        0 0 34px;

    color:
        #aab0b8;

    font-size: 20px;

    line-height: 1.5;
}

#login-form {
    display: grid;

    gap: 24px;
}

#login-form label {
    display: grid;

    gap: 10px;

    color:
        var(--admin-text);

    font-size: 17px;

    font-weight: 700;
}

#login-form input {
    width: 100%;

    min-height: 56px;

    padding:
        0 18px;

    color:
        var(--admin-text);

    background:
        #0d0f12;

    border:
        1px solid
        var(--admin-border);

    border-radius:
        14px;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

#login-form input:focus {
    border-color:
        var(--admin-gold);

    box-shadow:
        0 0 0 4px
        rgba(
            255,
            204,
            0,
            0.09
        );

    transform:
        translateY(
            -1px
        );
}

#login-form input[type="email"] {
    color: #111;

    background:
        #e8eef9;
}

#login-form button {
    min-height: 58px;

    margin-top: 2px;

    border: 0;

    border-radius:
        14px;

    color:
        #08090a;

    background:
        linear-gradient(
            135deg,
            #ffdc24,
            var(--admin-gold)
        );

    font-size: 21px;

    font-weight: 900;

    letter-spacing: 0.3px;

    box-shadow:
        0 12px 30px
        rgba(
            255,
            204,
            0,
            0.14
        );

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        filter 0.2s ease;
}

#login-form button:hover {
    transform:
        translateY(
            -2px
        );

    box-shadow:
        0 16px 36px
        rgba(
            255,
            204,
            0,
            0.22
        );

    filter:
        brightness(
            1.04
        );
}

#login-form button:active {
    transform:
        translateY(1px)
        scale(
            0.99
        );
}

.error {
    min-height: 22px;

    margin: 0;

    color:
        var(--admin-danger)
        !important;

    font-size:
        15px
        !important;
}

/* =========================================================
   PANEL PRINCIPAL
   ========================================================= */

.admin-app {
    min-height: 100vh;

    display: grid;

    grid-template-columns:
        var(--admin-sidebar)
        minmax(
            0,
            1fr
        );

    background:
        var(--admin-bg);

    animation:
        admin-open
        0.55s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        )
        both;
}

.admin-app.admin-opening {
    animation:
        admin-open
        0.65s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        )
        both;
}

/* =========================================================
   SIDEBAR
   ========================================================= */

.sidebar {
    position: sticky;

    top: 0;

    height: 100vh;

    padding:
        26px 20px;

    display: flex;

    flex-direction: column;

    gap: 12px;

    background:
        linear-gradient(
            180deg,
            #08090a,
            #0b0c0e
        );

    border-right:
        1px solid
        var(--admin-border);

    animation:
        sidebar-open
        0.7s
        0.08s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        )
        both;
}

.brand {
    margin-bottom: 8px;

    color:
        var(--admin-text);

    font-size: 31px;

    font-weight: 900;

    line-height: 0.85;

    letter-spacing: -1px;
}

.brand span {
    color:
        var(--admin-gold);
}

.admin-label {
    margin:
        14px 0
        8px;

    color:
        #737b85;

    font-size: 12px;

    letter-spacing: 2px;
}

.side-link,
.logout {
    width: 100%;

    min-height: 58px;

    padding:
        0 14px;

    border:
        1px solid
        transparent;

    border-radius:
        12px;

    color:
        #cdd2d8;

    background:
        transparent;

    text-align:
        left;

    font-size: 17px;

    font-weight: 900;

    letter-spacing: 0.4px;

    transition:
        color 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.side-link:hover {
    color:
        #fff;

    background:
        rgba(
            255,
            255,
            255,
            0.045
        );

    border-color:
        rgba(
            255,
            255,
            255,
            0.06
        );

    transform:
        translateX(
            3px
        );
}

.side-link.active {
    color:
        var(--admin-gold);

    background:
        linear-gradient(
            90deg,
            rgba(
                255,
                204,
                0,
                0.12
            ),
            rgba(
                255,
                204,
                0,
                0.035
            )
        );

    border-color:
        rgba(
            255,
            204,
            0,
            0.24
        );

    box-shadow:
        inset 3px 0 0
        var(--admin-gold);
}

.side-link:active,
.logout:active {
    transform:
        scale(
            0.98
        );
}

.logout {
    margin-top: auto;

    color:
        #d9dde2;

    border-color:
        #2d3136;

    background:
        rgba(
            255,
            255,
            255,
            0.015
        );
}

.logout:hover {
    color:
        #fff;

    border-color:
        rgba(
            255,
            204,
            0,
            0.3
        );

    background:
        rgba(
            255,
            204,
            0,
            0.05
        );
}

/* =========================================================
   CONTENIDO
   ========================================================= */

.content {
    min-width: 0;

    padding:
        30px 36px
        70px;

    animation:
        content-open
        0.7s
        0.1s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        )
        both;
}

.top {
    min-height: 88px;

    margin-bottom: 28px;

    display: flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap: 24px;
}

.top h1 {
    margin: 0;

    color:
        #f7f8fa;

    font-size:
        clamp(
            38px,
            4vw,
            48px
        );

    line-height: 1;

    letter-spacing: -1px;
}

.user-pill {
    margin-top: 12px;

    padding:
        11px 17px;

    border:
        1px solid
        #30343a;

    border-radius:
        999px;

    color:
        #cbd1d8;

    background:
        rgba(
            255,
            255,
            255,
            0.015
        );

    font-size: 14px;

    white-space:
        nowrap;
}

/* =========================================================
   SECCIONES
   ========================================================= */

.section {
    animation:
        section-enter
        0.4s
        ease
        both;
}

.section-enter {
    animation:
        section-enter
        0.35s
        ease
        both;
}

/* =========================================================
   ESTADÍSTICAS
   ========================================================= */

.stats {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

    gap: 20px;

    margin-bottom: 24px;
}

.stats article {
    min-height: 136px;

    padding:
        27px 28px;

    display: flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    background:
        linear-gradient(
            145deg,
            #17191c,
            #131518
        );

    border:
        1px solid
        var(--admin-border);

    border-radius:
        var(--admin-radius);

    box-shadow:
        0 15px 45px
        rgba(
            0,
            0,
            0,
            0.12
        );

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.stats article:hover {
    transform:
        translateY(
            -4px
        );

    border-color:
        rgba(
            255,
            204,
            0,
            0.24
        );

    box-shadow:
        0 20px 55px
        rgba(
            0,
            0,
            0,
            0.22
        ),

        0 0 25px
        rgba(
            255,
            204,
            0,
            0.035
        );
}

.stats article span {
    color:
        #8f98a3;

    font-size: 13px;

    letter-spacing:
        2.2px;
}

.stats article strong {
    color:
        var(--admin-gold);

    font-size: 45px;

    line-height: 1;

    font-weight: 900;
}

/* =========================================================
   PANEL
   ========================================================= */

.panel {
    padding: 30px;

    background:
        linear-gradient(
            145deg,
            #17191c,
            #131518
        );

    border:
        1px solid
        var(--admin-border);

    border-radius:
        var(--admin-radius);

    box-shadow:
        0 20px 55px
        rgba(
            0,
            0,
            0,
            0.13
        );
}

.panel h2 {
    margin:
        0 0 28px;

    font-size: 29px;

    letter-spacing:
        -0.5px;
}

.panel > p {
    color:
        #aab1ba;

    line-height: 1.6;
}

.big-number {
    margin-bottom: 25px;

    color:
        var(--admin-gold);

    font-size: 82px;

    line-height: 0.95;

    font-weight: 900;

    letter-spacing:
        -3px;
}

/* =========================================================
   TOOLBAR
   ========================================================= */

.toolbar {
    margin-bottom: 22px;

    display: flex;

    flex-wrap: wrap;

    gap: 12px;
}

.toolbar input {
    flex:
        1 1 280px;

    min-height: 50px;

    padding:
        0 16px;

    color:
        #fff;

    background:
        #111316;

    border:
        1px solid
        var(--admin-border);

    border-radius:
        11px;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.toolbar input:focus {
    border-color:
        rgba(
            255,
            204,
            0,
            0.65
        );

    box-shadow:
        0 0 0 4px
        rgba(
            255,
            204,
            0,
            0.07
        );
}

.toolbar button,
.save-status {
    min-height: 50px;

    padding:
        0 18px;

    border:
        1px solid
        rgba(
            255,
            204,
            0,
            0.2
        );

    border-radius:
        11px;

    color:
        #111;

    background:
        var(--admin-gold);

    font-weight: 900;

    transition:
        transform 0.2s ease,
        filter 0.2s ease,
        box-shadow 0.2s ease;
}

.toolbar button:hover,
.save-status:hover {
    transform:
        translateY(
            -2px
        );

    filter:
        brightness(
            1.04
        );

    box-shadow:
        0 10px 22px
        rgba(
            255,
            204,
            0,
            0.12
        );
}

.toolbar button:active,
.save-status:active {
    transform:
        translateY(
            1px
        );
}

.toolbar button.secondary {
    color:
        #e6e8eb;

    background:
        #17191c;

    border-color:
        var(--admin-border);
}

/* =========================================================
   TABLAS
   ========================================================= */

.table-wrap {
    width: 100%;

    overflow-x: auto;

    border:
        1px solid
        var(--admin-border);

    border-radius:
        var(--admin-radius);

    background:
        #111316;
}

table {
    width: 100%;

    min-width: 850px;

    border-collapse:
        collapse;
}

th,
td {
    padding:
        15px 16px;

    border-bottom:
        1px solid
        #292d32;

    text-align:
        left;

    vertical-align:
        middle;
}

th {
    color:
        #8e97a1;

    background:
        #15171a;

    font-size: 12px;

    font-weight: 800;

    letter-spacing:
        1.4px;

    white-space:
        nowrap;
}

td {
    color:
        #e3e6ea;

    font-size: 14px;
}

tbody tr {
    transition:
        background 0.18s ease;
}

tbody tr:hover {
    background:
        rgba(
            255,
            255,
            255,
            0.025
        );
}

tbody tr:last-child td {
    border-bottom: 0;
}

td small {
    color:
        #8e97a1;

    font-size: 12px;
}

.empty-state {
    padding:
        38px 20px;

    color:
        #8e97a1;

    text-align:
        center;
}

/* =========================================================
   ESTADOS DE PAGO
   ========================================================= */

.badge {
    display:
        inline-flex;

    align-items:
        center;

    min-height: 28px;

    padding:
        4px 10px;

    border:
        1px solid
        #3a3e44;

    border-radius:
        999px;

    color:
        #cdd2d8;

    background:
        #191b1e;

    font-size: 11px;

    font-weight: 800;

    text-transform:
        uppercase;

    letter-spacing:
        0.7px;
}

.payment-select {
    min-height: 40px;

    padding:
        0 10px;

    color:
        #e8eaed;

    background:
        #111316;

    border:
        1px solid
        var(--admin-border);

    border-radius:
        9px;

    outline: none;
}

.payment-select:focus {
    border-color:
        rgba(
            255,
            204,
            0,
            0.55
        );
}

/* =========================================================
   TOAST
   ========================================================= */

.toast {
    position: fixed;

    right: 28px;

    bottom: 28px;

    z-index: 1000;

    max-width:
        min(
            420px,
            calc(
                100vw - 40px
            )
        );

    padding:
        14px 18px;

    color:
        #111;

    background:
        var(--admin-gold);

    border-radius:
        12px;

    box-shadow:
        0 20px 45px
        rgba(
            0,
            0,
            0,
            0.35
        );

    font-size: 14px;

    font-weight: 800;

    opacity: 0;

    pointer-events:
        none;

    transform:
        translateY(
            15px
        )
        scale(
            0.98
        );

    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}

.toast.show {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);
}

/* =========================================================
   ANIMACIONES
   ========================================================= */

@keyframes login-enter {
    from {
        opacity: 0;

        transform:
            scale(
                0.96
            )
            translateY(
                15px
            );
    }

    to {
        opacity: 1;

        transform:
            scale(1)
            translateY(0);
    }
}

@keyframes login-shine {
    from {
        transform:
            translateX(
                -100%
            );
    }

    to {
        transform:
            translateX(
                100%
            );
    }
}

@keyframes admin-open {
    from {
        opacity: 0;

        transform:
            scale(
                0.985
            )
            translateY(
                18px
            );
    }

    to {
        opacity: 1;

        transform:
            scale(1)
            translateY(0);
    }
}

@keyframes sidebar-open {
    from {
        opacity: 0;

        transform:
            translateX(
                -28px
            );
    }

    to {
        opacity: 1;

        transform:
            translateX(0);
    }
}

@keyframes content-open {
    from {
        opacity: 0;

        transform:
            translateY(
                18px
            );
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}

@keyframes section-enter {
    from {
        opacity: 0;

        transform:
            translateY(
                10px
            );
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {
    :root {
        --admin-sidebar: 230px;
    }

    .content {
        padding:
            26px 24px
            60px;
    }

    .stats {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );
    }
}

/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width: 760px) {
    .screen {
        padding: 18px;
    }

    .login-card {
        padding:
            34px 24px;

        border-radius:
            20px;
    }

    .login-card h1 {
        font-size: 34px;
    }

    .login-card > p {
        font-size: 17px;
    }

    .admin-app {
        display: block;
    }

    .sidebar {
        position: relative;

        width: 100%;

        height: auto;

        padding:
            20px 16px;

        border-right: 0;

        border-bottom:
            1px solid
            var(--admin-border);
    }

    .brand {
        font-size: 27px;
    }

    .admin-label {
        margin-top: 8px;
    }

    .side-link {
        min-height: 50px;

        font-size: 15px;
    }

    .logout {
        margin-top: 12px;

        min-height: 50px;
    }

    .content {
        padding:
            24px 16px
            50px;
    }

    .top {
        display: block;

        margin-bottom: 24px;
    }

    .top h1 {
        font-size: 36px;
    }

    .user-pill {
        display: inline-flex;

        margin-top: 18px;

        max-width: 100%;

        overflow: hidden;

        text-overflow: ellipsis;
    }

    .stats {
        grid-template-columns:
            1fr;

        gap: 14px;
    }

    .stats article {
        min-height: 118px;

        padding: 22px;
    }

    .stats article strong {
        font-size: 38px;
    }

    .panel {
        padding: 22px;
    }

    .panel h2 {
        font-size: 24px;
    }

    .big-number {
        font-size: 64px;
    }

    .toolbar {
        display: grid;

        grid-template-columns:
            1fr;
    }

    .toolbar input,
    .toolbar button {
        width: 100%;
    }

    .toast {
        right: 18px;

        bottom: 18px;
    }
}

/* =========================================================
   PANTALLAS PEQUEÑAS
   ========================================================= */

@media (max-width: 420px) {
    .login-card {
        padding:
            30px 20px;
    }

    .login-card h1 {
        font-size: 31px;
    }

    .eyebrow {
        font-size: 12px;

        letter-spacing: 4px;
    }

    .content {
        padding:
            20px 12px
            40px;
    }
}

/* =========================================================
   REDUCIR MOVIMIENTO
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior:
            auto !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;
    }
}

/* =========================================================
   CONTROL ABSOLUTO DEL ATRIBUTO HIDDEN
   Evita que las reglas de display del diseño
   hagan visibles simultáneamente login y panel.
   ========================================================= */

[hidden] {
    display: none !important;
}

#login-view[hidden],
#admin-view[hidden] {
    display: none !important;
}

/* PARTICIPANTES — CONTROLES PREMIUM */
.participantes-toolbar { display:grid; grid-template-columns:minmax(260px,1fr) 110px auto auto auto; gap:12px; align-items:center; }
.participantes-toolbar select { min-height:52px; padding:0 14px; border:1px solid #2d3138; border-radius:12px; background:#111316; color:#eee; font-weight:800; }
.participantes-toolbar .danger { min-height:52px; border:1px solid rgba(255,80,80,.45); border-radius:12px; background:#171012; color:#ff9a9a; font-weight:900; cursor:pointer; transition:.25s ease; }
.participantes-toolbar .danger:hover:not(:disabled) { transform:translateY(-2px); border-color:#ff5c5c; box-shadow:0 10px 28px rgba(255,60,60,.12); }
.participantes-toolbar .danger:disabled { opacity:.4; cursor:not-allowed; }
#tabla-participantes input[type="checkbox"], #seleccionar-todos-participantes { width:18px; height:18px; accent-color:#ffd000; cursor:pointer; }
#tabla-participantes tr { transition:background .2s ease; }
#tabla-participantes tr:hover { background:rgba(255,208,0,.035); }
@media (max-width: 1050px) { .participantes-toolbar { grid-template-columns:1fr 100px auto; } .participantes-toolbar .danger, .participantes-toolbar .secondary { grid-column:auto; } }
@media (max-width: 700px) { .participantes-toolbar { grid-template-columns:1fr 90px; } .participantes-toolbar button { width:100%; } .participantes-toolbar .danger, .participantes-toolbar .secondary { grid-column:span 1; } }


/* =========================================================
   ADMIN — INTERFAZ PREMIUM 2026.09
========================================================= */
:root { --admin-gold:#ffd400; --admin-bg:#08090a; }
body { background:radial-gradient(circle at 78% 0%,rgba(255,212,0,.07),transparent 28%),#08090a; }
.sidebar { box-shadow:18px 0 50px rgba(0,0,0,.28); }
.content { min-width:0; }
.top { position:sticky; top:0; z-index:50; backdrop-filter:blur(16px); background:rgba(8,9,10,.86); border-bottom:1px solid rgba(255,255,255,.06); padding-top:18px; padding-bottom:18px; }
.stats article, .panel, .toolbar, .table-wrap { transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.stats article:hover { transform:translateY(-4px); border-color:rgba(255,212,0,.35); box-shadow:0 18px 45px rgba(0,0,0,.24),0 0 24px rgba(255,212,0,.07); }
.panel { box-shadow:0 18px 55px rgba(0,0,0,.18); }
.panel:hover { border-color:rgba(255,212,0,.24); }
.toolbar { border:1px solid rgba(255,255,255,.07); border-radius:18px; padding:12px; background:rgba(17,19,22,.72); box-shadow:0 16px 42px rgba(0,0,0,.20); }
.toolbar input,.toolbar select { transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease; }
.toolbar input:focus,.toolbar select:focus { border-color:rgba(255,212,0,.65); box-shadow:0 0 0 3px rgba(255,212,0,.08); outline:none; }
.table-wrap { border-radius:18px; box-shadow:0 20px 60px rgba(0,0,0,.24); }
table thead th { position:sticky; top:0; z-index:4; backdrop-filter:blur(12px); }
table tbody tr { transition:background .2s ease,transform .2s ease; }
table tbody tr:hover { background:rgba(255,212,0,.035); }
.danger { transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease; }
.danger:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 12px 30px rgba(255,70,70,.13); }
@media (max-width:900px) {
    .content { padding:22px 18px; }
    .top { position:relative; }
    .participantes-toolbar { grid-template-columns:1fr 110px; }
    .participantes-toolbar button { min-height:50px; }
    .participantes-toolbar .danger,.participantes-toolbar .secondary { grid-column:auto; }
}
@media (max-width:650px) {
    .content { padding:16px 12px; }
    .toolbar.participantes-toolbar { grid-template-columns:1fr; }
    .participantes-toolbar select,.participantes-toolbar button { width:100%; }
    .table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
    table { min-width:920px; }
    .top h1 { font-size:clamp(30px,9vw,46px); }
}

/* =========================================================
   ADMIN V4 — INTERFAZ DE CONTROL
========================================================= */
.content > .top {
    position: sticky;
    top: 0;
    z-index: 30;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    background: rgba(5,6,7,.82);
    border-bottom: 1px solid rgba(255,212,0,.10);
}
.participantes-toolbar {
    padding: 14px;
    border: 1px solid rgba(255,212,0,.12);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(20,20,22,.95), rgba(10,11,13,.92));
    box-shadow: 0 16px 42px rgba(0,0,0,.20);
}
.participantes-toolbar input,
.participantes-toolbar select,
.participantes-toolbar button {
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.participantes-toolbar input:focus,
.participantes-toolbar select:focus {
    border-color: rgba(255,212,0,.65);
    box-shadow: 0 0 0 3px rgba(255,212,0,.08), 0 0 24px rgba(255,212,0,.06);
    outline: none;
}
.participantes-toolbar button:hover:not(:disabled) {
    transform: translateY(-2px);
}
.table-wrap {
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
    box-shadow: 0 18px 55px rgba(0,0,0,.22);
}
.table-wrap table tbody tr {
    transition: background .22s ease, transform .22s ease;
}
.table-wrap table tbody tr:hover {
    background: rgba(255,212,0,.035);
}
.table-wrap input[type="checkbox"] {
    accent-color: #ffd400;
    width: 17px;
    height: 17px;
}

@media (max-width: 700px) {
    .content > .top {
        position: relative;
    }
    .participantes-toolbar {
        padding: 12px;
        border-radius: 15px;
    }
}

/* =========================================================
   ADMIN — V7 CONTROL PROFESIONAL
========================================================= */
.participantes-toolbar {
    display: grid !important;
    grid-template-columns: minmax(260px, 1fr) 115px auto auto auto;
    gap: 12px;
    align-items: center;
}
.participantes-toolbar input,
.participantes-toolbar select,
.participantes-toolbar button { min-height: 52px; }
#btn-eliminar-participantes:disabled { opacity: .42; cursor: not-allowed; }
#tabla-participantes tr { transition: background .2s ease, transform .2s ease; }
#tabla-participantes tr:hover { background: rgba(255,212,0,.035); }
#tabla-participantes input[type="checkbox"],
#seleccionar-todos-participantes { accent-color: #ffd400; width: 18px; height: 18px; cursor: pointer; }

@media (max-width: 1050px) {
    .participantes-toolbar { grid-template-columns: 1fr 110px 1fr 1fr; }
    .participantes-toolbar input { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
    .participantes-toolbar { grid-template-columns: 1fr 1fr; }
    .participantes-toolbar input { grid-column: 1 / -1; }
    .participantes-toolbar select { grid-column: 1 / -1; }
    .participantes-toolbar button { width: 100%; }
}