/* Contenedor Principal en Modo Oscuro Integrado */
.ctb-meta-wrapper, .ctb-bracket-wrapper {
    background-color: #121214;
    color: #e2e8f0;
    padding: 25px;
    border-radius: 8px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Formulario de Adición de Participantes */
.ctb-form-section h4, .ctb-admin-columns h4 {
    color: #00ffcc;
    margin-top: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ctb-input-grid {
    display: block;
    margin-bottom: 15px;
}

.ctb-input-grid input {
    width: 18%;
    display: inline-block;
    margin-right: 1%;
    background: #1a1a1e !important;
    border: 1px solid #333 !important;
    color: #fff !important;
    padding: 8px !important;
    border-radius: 4px;
}

/* Distribución de Paneles en el Admin */
.ctb-admin-columns {
    display: block;
}

.ctb-column-participants {
    width: 25%;
    float: left;
    background: #18181c;
    padding: 15px;
    border-radius: 6px;
    min-height: 400px;
    border: 1px solid #2d2d34;
}

.ctb-column-bracket {
    width: 72%;
    float: right;
    overflow-x: auto;
}

/* Limpieza de floats */
.ctb-admin-columns::after {
    content: "";
    clear: both;
    display: table;
}

/* Tarjetas de los Participantes (Bolsa e Interior del Bracket) */
.ctb-participant-card {
    background-color: #22222a;
    border: 1px solid #444;
    padding: 10px;
    margin: 8px 0;
    border-radius: 4px;
    cursor: grab;
    position: relative;
    font-size: 13px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.ctb-participant-card:hover {
    border-color: #00ffcc;
    background-color: #2a2a35;
}

.ctb-participant-card .remove-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    background: #ff3366;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    font-size: 10px;
    cursor: pointer;
    line-height: 14px;
    text-align: center;
}

/* Estructura Flexible del Bracket */
.ctb-bracket-render {
    display: table;
    width: 100%;
    white-space: nowrap;
    padding: 20px 0;
}

.ctb-round {
    display: table-cell;
    vertical-align: middle;
    padding: 0 20px;
    min-width: 220px;
}

.ctb-round-title {
    text-align: center;
    color: #00ffcc;
    font-weight: bold;
    font-size: 12px;
    text-transform: uppercase;
    margin-bottom: 20px;
    border-bottom: 2px solid #00ffcc;
    padding-bottom: 5px;
}

/* Estructura de los Enfrentamientos (Matchups) */
.ctb-matchup {
    background: #1a1a1e;
    border: 2px dashed #444;
    border-radius: 6px;
    margin: 30px 0;
    padding: 8px;
    min-height: 90px;
    box-sizing: border-box;
}

/* Cajas Destino para Soltar Jugadores */
.ctb-drop-slot {
    background: #26262b;
    border: 1px solid #3a3a42;
    min-height: 35px;
    margin: 4px 0;
    border-radius: 4px;
    padding: 4px;
    color: #888;
    font-size: 12px;
    text-align: center;
    line-height: 25px;
    transition: all 0.2s ease;
}

.ctb-drop-slot.ui-droppable-hover {
    background: #2a443b;
    border-color: #00ffcc;
    color: #fff;
}

.ctb-drop-slot .ctb-participant-card {
    margin: 0;
    cursor: move;
}

/* Estilos Frontend */
.frontend-mode .ctb-matchup {
    border-style: solid;
    border-color: #333;
}

.frontend-mode .ctb-drop-slot {
    text-align: left;
    padding-left: 10px;
    color: #555;
}