/* =============================================================================
   MEJORAS PARA VISTA MÓVIL - ÁREA DEL ESTUDIANTE
   Academia Virtual de Ajedrez
   ============================================================================= */

/* --- ESTILOS BASE MEJORADOS --- */
.wcp-app-container {
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: #333;
    background: #f4f6f9;
    display: flex;
    min-height: 700px;
    box-shadow: 0 0 20px rgba(0,0,0,0.05);
    border-radius: 8px;
    overflow: hidden;
}

/* --- SIDEBAR --- */
.wcp-sidebar {
    width: 260px;
    background: #2c3e50;
    color: white;
    padding: 25px;
    display: flex;
    flex-direction: column;
}

.wcp-user-profile { text-align: center; margin-bottom: 40px; }
.wcp-avatar { font-size: 50px; margin-bottom: 10px; }
.wcp-nav a {
    display: block; color: #bdc3c7; text-decoration: none; padding: 12px; margin-bottom: 5px; border-radius: 6px; font-size: 16px; transition: 0.3s;
}
.wcp-nav a:hover, .wcp-nav a.active { background: rgba(255,255,255,0.15); color: white; transform: translateX(5px); }
.wcp-nav a.logout { margin-top: auto; color: #e74c3c; border: 1px solid rgba(231, 76, 60, 0.3); text-align: center; }
.wcp-nav a.logout:hover { background: #e74c3c; color: white; }

/* --- CONTENIDO PRINCIPAL --- */
.wcp-main { flex: 1; padding: 40px; background: #ecf0f1; overflow-y: auto; }
h1, h2 { color: #2c3e50; margin-top: 0; }

/* --- TABLAS PROFESOR --- */
.wcp-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    margin-top: 20px;
}

.wcp-table thead { background: #34495e; color: white; }

.wcp-table th {
    padding: 18px;
    text-align: left;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.wcp-table td {
    padding: 20px 18px;
    border-bottom: 1px solid #eee;
    font-size: 17px;
    color: #555;
    vertical-align: middle;
}

.wcp-table tr:last-child td { border-bottom: none; }
.wcp-table tr:hover { background-color: #f8fbff; }

/* --- BOTONES DE ACCIÓN --- */
.wcp-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 20px;
    margin-right: 5px;
    transition: transform 0.2s, box-shadow 0.2s;
    border: none;
    cursor: pointer;
}
.wcp-btn-icon:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.15); }

/* Colores de botones */
.btn-view { background: #3498db; color: white; }
.btn-edit { background: #f1c40f; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,0.1); }
.btn-del  { background: #e74c3c; color: white; }

/* --- BADGES --- */
.status-badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
}
.status-pending { background: #ffeaa7; color: #d35400; }
.status-submitted { background: #74b9ff; color: #0984e3; }
.status-graded { background: #55efc4; color: #00b894; }

/* --- LISTA TAREAS --- */
.wcp-task-list { 
    list-style: none; 
    padding: 0; 
    margin: 0;
}

.wcp-task-item {
    background: white;
    padding: 20px;
    margin-bottom: 15px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-left: 5px solid #bdc3c7;
    transition: 0.2s;
    flex-wrap: wrap; /* Permite que los elementos se envuelvan en móviles */
}
.wcp-task-item:hover { transform: translateX(5px); }

.wcp-task-item.is-pending { border-left-color: #f1c40f; }
.wcp-task-item.is-submitted { border-left-color: #3498db; }
.wcp-task-item.is-graded { border-left-color: #2ecc71; }

.task-title { font-size: 18px; font-weight: bold; color: #2c3e50; }
.task-meta { font-size: 14px; color: #7f8c8d; margin-top: 5px; }

/* --- FORMULARIOS --- */
.wcp-form-card { background: white; padding: 30px; border-radius: 12px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.wcp-field { margin-bottom: 20px; }
.wcp-field label { display: block; font-weight: bold; margin-bottom: 8px; font-size: 15px; }
.wcp-field input, .wcp-field textarea { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 15px; }
.wcp-btn { padding: 12px 24px; background: #2c3e50; color: white; border: none; border-radius: 6px; font-size: 16px; cursor: pointer; }
.wcp-btn:hover { background: #34495e; }

/* --- ALERTAS --- */
.wcp-alert { padding: 15px; border-radius: 8px; margin-bottom: 20px; font-weight: bold; }
.wcp-alert.success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.wcp-alert.error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }

/* --- GRID 2 COLUMNAS --- */
.wcp-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

/* ============================================
   ARREGLO TABLERO - BLOQUEO DE WORDPRESS
   CRÍTICO: Estos estilos protegen el tablero
   ============================================ */

/* Aplicar a todos los tableros del plugin */
#wcp-board, 
#wcp-editor-board, 
#wcp-review-board { 
    width: 100% !important; 
    max-width: 450px !important; 
    box-sizing: content-box !important; 
    margin: 20px auto !important; 
    border: 5px solid #333 !important; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.3) !important; 
    background-color: #f0d9b5 !important;
    /* CRÍTICO: Prevenir que el tablero se arrastre */
    touch-action: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
}

/* Resetear todos los divs e imágenes dentro del tablero */
#wcp-board div:not(.spare-pieces-7492f):not(.spare-piece-7492f), 
#wcp-board img:not(.spare-pieces-7492f img):not(.spare-piece-7492f img),
#wcp-editor-board div:not(.spare-pieces-7492f):not(.spare-piece-7492f), 
#wcp-editor-board img:not(.spare-pieces-7492f img):not(.spare-piece-7492f img),
#wcp-review-board div:not(.spare-pieces-7492f):not(.spare-piece-7492f), 
#wcp-review-board img:not(.spare-pieces-7492f img):not(.spare-piece-7492f img) { 
    box-sizing: content-box !important; 
    margin: 0 !important; 
    padding: 0 !important; 
    border-radius: 0 !important; 
    box-shadow: none !important;
    touch-action: none !important;
}

/* Imágenes de las piezas EN EL TABLERO (no en el panel) */
#wcp-board .square-55d63 img,
#wcp-editor-board .square-55d63 img,
#wcp-review-board .square-55d63 img { 
    width: 100% !important; 
    height: auto !important; 
    max-width: none !important; 
    max-height: none !important; 
    display: block !important; 
    border: none !important; 
    background: transparent !important; 
    touch-action: none !important;
}

/* Casillas del tablero */
.square-55d63 { 
    float: left !important; 
    touch-action: none !important;
}

/* ============================================
   PANEL DE PIEZAS DE RESERVA (sparePieces)
   Usando FLEXBOX para forzar horizontal
   ============================================ */

/* Contenedor principal del panel - FLEXBOX */
.spare-pieces-7492f {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 15px !important;
    padding: 10px !important;
    width: 100% !important;
    max-width: 450px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: visible !important;
    clear: both !important;
    background: #ddd !important;
    border-radius: 8px !important;
}

/* TODOS los elementos dentro del panel - cancelar floats */
.spare-pieces-7492f * {
    float: none !important;
}

/* CRÍTICO: Cada pieza individual en el panel */
.spare-pieces-7492f > div,
.spare-pieces-7492f .spare-piece-7492f,
.spare-pieces-7492f [data-piece] {
    display: block !important;
    width: 45px !important;
    height: 45px !important;
    max-width: 45px !important;
    max-height: 45px !important;
    min-width: 45px !important;
    min-height: 45px !important;
    margin: 3px !important;
    padding: 0 !important;
    cursor: move !important;
    position: relative !important;
    box-sizing: border-box !important;
    float: none !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
}

/* Imágenes dentro del panel de piezas */
.spare-pieces-7492f img,
.spare-pieces-7492f .spare-piece-7492f img,
.spare-pieces-7492f > div img {
    width: 45px !important;
    height: 45px !important;
    max-width: 45px !important;
    max-height: 45px !important;
    min-width: 45px !important;
    min-height: 45px !important;
    display: block !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    float: none !important;
}

/* Cuando se arrastra una pieza */
.spare-piece-7492f.dragging-7492f,
img.dragging-7492f {
    width: 45px !important;
    height: 45px !important;
    max-width: 45px !important;
    max-height: 45px !important;
    opacity: 0.5 !important;
}

/* ============================================
   RESPONSIVE - MÓVILES
   ============================================ */

/* Tablets y móviles grandes (768px o menos) */
@media (max-width: 768px) {
    /* Grid a una columna */
    .wcp-grid-2 {
        grid-template-columns: 1fr !important;
    }
    
    /* Container en columna */
    .wcp-app-container {
        flex-direction: column;
    }
    
    /* Sidebar a ancho completo */
    .wcp-sidebar {
        width: 100%;
        padding: 20px;
    }
    
    /* Reducir padding del main */
    .wcp-main {
        padding: 20px;
    }
    
    /* Lista de tareas en columna simple */
    .wcp-task-item {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 15px;
    }
    
    /* Botones de acción debajo del contenido */
    .wcp-task-item > div:last-child {
        width: 100%;
        display: flex;
        justify-content: stretch;
    }
    
    .wcp-task-item > div:last-child a {
        flex: 1;
        text-align: center;
    }
    
    /* Tablero más pequeño en móviles */
    #wcp-board, 
    #wcp-editor-board, 
    #wcp-review-board { 
        max-width: 100% !important;
        margin: 15px auto !important;
        border: 3px solid #333 !important;
    }
    
    /* Panel de piezas más compacto */
    .spare-pieces-7492f {
        max-width: 100% !important;
        padding: 8px !important;
        margin-top: 10px !important;
    }
    
    .spare-pieces-7492f > div,
    .spare-pieces-7492f .spare-piece-7492f,
    .spare-pieces-7492f [data-piece] {
        width: 40px !important;
        height: 40px !important;
        max-width: 40px !important;
        max-height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        margin: 2px !important;
    }
    
    .spare-pieces-7492f img,
    .spare-pieces-7492f .spare-piece-7492f img,
    .spare-pieces-7492f > div img {
        width: 40px !important;
        height: 40px !important;
        max-width: 40px !important;
        max-height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }
    
    /* Tablas responsive */
    .wcp-table {
        font-size: 14px;
    }
    
    .wcp-table th,
    .wcp-table td {
        padding: 12px 10px;
    }
    
    /* Formularios */
    .wcp-form-card {
        padding: 20px;
    }
    
    /* Títulos más pequeños */
    h1 {
        font-size: 24px;
    }
    
    h2 {
        font-size: 20px;
    }
}

/* Móviles pequeños (480px o menos) */
@media (max-width: 480px) {
    .wcp-sidebar {
        padding: 15px;
    }
    
    .wcp-main {
        padding: 15px;
    }
    
    .wcp-user-profile {
        margin-bottom: 20px;
    }
    
    .wcp-avatar {
        font-size: 40px;
    }
    
    .wcp-nav a {
        padding: 10px;
        font-size: 14px;
    }
    
    .task-title {
        font-size: 16px;
    }
    
    .task-meta {
        font-size: 13px;
    }
    
    .status-badge {
        font-size: 11px;
        padding: 4px 8px;
    }
    
    .wcp-btn {
        padding: 10px 20px;
        font-size: 14px;
    }
    
    /* Tablero aún más pequeño */
    #wcp-board, 
    #wcp-editor-board, 
    #wcp-review-board { 
        margin: 10px auto !important;
        border: 2px solid #333 !important;
    }
    
    /* Panel de piezas extra compacto */
    .spare-pieces-7492f {
        padding: 5px !important;
        margin-top: 8px !important;
    }
    
    .spare-pieces-7492f > div,
    .spare-pieces-7492f .spare-piece-7492f,
    .spare-pieces-7492f [data-piece] {
        width: 35px !important;
        height: 35px !important;
        max-width: 35px !important;
        max-height: 35px !important;
        min-width: 35px !important;
        min-height: 35px !important;
        margin: 2px !important;
    }
    
    .spare-pieces-7492f img,
    .spare-pieces-7492f .spare-piece-7492f img,
    .spare-pieces-7492f > div img {
        width: 35px !important;
        height: 35px !important;
        max-width: 35px !important;
        max-height: 35px !important;
        min-width: 35px !important;
        min-height: 35px !important;
    }
    
    h1 {
        font-size: 20px;
    }
    
    h2 {
        font-size: 18px;
    }
}

/* ============================================
   ÁREA DE JUEGO - MEJORAS MÓVILES
   ============================================ */

/* Contenedor del área de juego */
.wcp-game-area {
    background: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    overflow-x: hidden !important; /* Prevenir scroll horizontal */
}

@media (max-width: 768px) {
    .wcp-game-area {
        padding: 15px;
    }
    
    /* Selector de ejercicios más legible */
    #exercise_selector {
        font-size: 14px !important;
        padding: 8px !important;
    }
    
    /* Info de ejercicio actual */
    #current_exercise_info {
        padding: 12px !important;
        font-size: 14px;
    }
    
    /* Navegación PGN más compacta */
    #pgn_navigation {
        padding: 10px !important;
    }
    
    #pgn_navigation button {
        padding: 6px 10px !important;
        font-size: 12px !important;
    }
    
    #move_display {
        font-size: 13px !important;
    }
    
    /* Área de respuesta */
    #answer_area textarea {
        font-size: 14px !important;
        min-height: 100px !important;
    }
    
    /* Lista de ejercicios completados */
    .completed-exercises {
        max-height: 300px !important;
    }
}

@media (max-width: 480px) {
    #exercise_selector {
        font-size: 13px !important;
        padding: 6px !important;
    }
    
    #current_exercise_info {
        padding: 10px !important;
        font-size: 13px;
    }
    
    #pgn_navigation button {
        padding: 5px 8px !important;
        font-size: 11px !important;
        margin: 2px !important;
    }
    
    #answer_area textarea {
        font-size: 13px !important;
        min-height: 80px !important;
    }
}

/* ============================================
   PREVENIR ARRASTRE DE PÁGINA EN TABLERO
   ============================================ */

/* Contenedor que previene el scroll cuando se interactúa con el tablero */
body.dragging-piece {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
}

/* Prevenir eventos táctiles que causen scroll */
#wcp-board *,
#wcp-editor-board *,
#wcp-review-board * {
    -webkit-user-drag: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* Optimización para dispositivos táctiles */
@media (hover: none) and (pointer: coarse) {
    /* Aumentar área táctil de piezas */
    .spare-pieces-7492f > div,
    .spare-pieces-7492f .spare-piece-7492f,
    .spare-pieces-7492f [data-piece] {
        padding: 2px !important;
    }
    
    /* Hacer más evidente cuando una pieza es arrastrable */
    .spare-pieces-7492f img {
        cursor: grab !important;
    }
    
    .spare-pieces-7492f img:active {
        cursor: grabbing !important;
    }
}
/* ============================================
   TABLEROS DE EXÁMENES — Protección completa
   Misma lógica que #wcp-board
   ============================================ */

[id^="fen_board_"],
[id^="exam_cb_"],
[id^="res_cb_"] {
    display: block !important;
    overflow: hidden !important;
    position: relative !important;
    box-sizing: content-box !important;
    background-color: #f0d9b5 !important;
    touch-action: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

/* Casillas — float y tamaño controlado por ChessboardJS */
[id^="fen_board_"] .square-55d63,
[id^="exam_cb_"] .square-55d63,
[id^="res_cb_"] .square-55d63 {
    float: left !important;
    box-sizing: content-box !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    touch-action: none !important;
}

/* Piezas — forzar 100% del casilla, anular max-width del tema WordPress */
[id^="fen_board_"] .square-55d63 img,
[id^="exam_cb_"] .square-55d63 img,
[id^="res_cb_"] .square-55d63 img {
    width: 100% !important;
    height: auto !important;
    max-width: none !important;   /* anular tema WP que hace img{max-width:100%} */
    min-width: 0 !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    touch-action: none !important;
}

/* Todos los divs internos */
[id^="fen_board_"] div,
[id^="exam_cb_"] div,
[id^="res_cb_"] div {
    box-sizing: content-box !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    touch-action: none !important;
}

/* ============================================
   ADMIN MODE — Frost Silver
   ============================================ */

.wcp-app-container.admin-mode {
    background: #ffffff;
}
.admin-mode .wcp-main {
    background: #ffffff;
    padding: 32px 36px;
}
.admin-mode .wcp-sidebar {
    background: #111827 !important;
    border-right: 1px solid rgba(148,163,184,0.1) !important;
}

/* SIDEBAR PROFILE */
.admin-mode .wcp-user-profile {
    border-bottom: 1px solid rgba(148,163,184,0.1);
    padding-bottom: 24px;
    margin-bottom: 24px;
}
.admin-mode .wcp-user-profile h3 {
    color: #e2e8f0;
    font-size: 15px;
    font-weight: 600;
    margin: 10px 0 0;
    letter-spacing: 0.3px;
}
.admin-mode .wcp-avatar {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #475569 0%, #64748b 60%, #94a3b8 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin: 0 auto 10px;
    box-shadow: 0 0 0 3px rgba(148,163,184,0.15), 0 6px 16px rgba(0,0,0,0.3);
}

/* NAV LINKS */
.admin-mode .wcp-nav a {
    color: rgba(203,213,225,0.35);
    font-size: 13px;
    padding: 9px 12px;
    border-radius: 6px;
    border-left: 2px solid transparent;
    transition: all 0.2s;
    letter-spacing: 0.2px;
}
.admin-mode .wcp-nav a:hover {
    color: rgba(203,213,225,0.8);
    background: rgba(148,163,184,0.07);
    transform: translateX(3px);
}
.admin-mode .wcp-nav a.active {
    color: #e2e8f0;
    background: rgba(148,163,184,0.1);
    border-left: 2px solid #94a3b8;
    transform: translateX(3px);
    font-weight: 600;
}
.admin-mode .wcp-nav a.logout {
    color: rgba(252,165,165,0.5);
    border: 1px solid rgba(239,68,68,0.15);
    border-left: 1px solid rgba(239,68,68,0.15);
    margin-top: 8px;
    text-align: center;
}
.admin-mode .wcp-nav a.logout:hover {
    background: rgba(239,68,68,0.1);
    color: #FCA5A5;
}
.admin-mode .wcp-nav hr {
    border-color: rgba(148,163,184,0.1);
    margin: 12px 0;
}

/* TÍTULOS */
.admin-mode h1 {
    font-size: 21px;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.3px;
    border-bottom: 2px solid #334155;
    padding-bottom: 8px;
    display: inline-block;
    margin-bottom: 20px;
}
.admin-mode h2 { color: #1e293b; font-size: 17px; font-weight: 700; }
.admin-mode h3 { color: #334155; font-size: 15px; }
.admin-mode p { color: #64748b; }
.admin-mode label { color: #475569; }

/* TABLAS */
.admin-mode .wcp-table {
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}
.admin-mode .wcp-table thead {
    background: #f8fafc;
}
.admin-mode .wcp-table th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.3px;
    padding: 14px 16px;
    color: #475569;
    font-weight: 600;
    border-bottom: 1px solid #e2e8f0;
}
.admin-mode .wcp-table td {
    font-size: 13px;
    padding: 13px 16px;
    color: #334155;
    border-bottom: 1px solid #f1f5f9;
}
.admin-mode .wcp-table tr:hover td { background: #f8fafc; }

/* INPUTS */
.admin-mode input[type="text"],
.admin-mode input[type="number"],
.admin-mode input[type="email"],
.admin-mode input[type="password"],
.admin-mode input[type="search"],
.admin-mode select,
.admin-mode textarea {
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    color: #1e293b !important;
    border-radius: 8px !important;
    padding: 9px 12px !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}
.admin-mode input:focus,
.admin-mode select:focus,
.admin-mode textarea:focus {
    border-color: #94a3b8 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(148,163,184,0.12) !important;
}
.admin-mode select option { background: #fff; color: #1e293b; }

/* BOTÓN PRIMARIO */
.admin-mode .wcp-btn {
    background: #0f172a;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.4px;
    border-radius: 8px;
    padding: 9px 18px;
    transition: all 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    border: none;
}
.admin-mode .wcp-btn:hover {
    background: #1e293b;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15,23,42,0.2);
    color: #fff;
}

/* BOTONES ICONO */
.admin-mode .btn-edit { background: #f1f5f9; color: #475569; }
.admin-mode .btn-edit:hover { background: #e2e8f0; }
.admin-mode .btn-view { background: #eef2ff; color: #4338ca; }
.admin-mode .btn-del  { background: #fef2f2; color: #dc2626; }

/* ACORDEONES */
.admin-mode button[onclick*="toggleAdminBlock"] {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #1e293b !important;
}
.admin-mode button[onclick*="toggleAdminBlock"]:hover {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
}

/* ALERTS */
.admin-mode .wcp-alert.success {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
}
.admin-mode .wcp-alert.error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

/* BADGES */
.admin-mode .wcp-badge {
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 20px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

/* LINKS */
.admin-mode .wcp-main a:not(.wcp-btn) { color: #475569; text-decoration: underline; text-underline-offset: 2px; }
.admin-mode .wcp-main a:not(.wcp-btn):hover { color: #0f172a; }

/* SCROLLBAR */
.admin-mode .wcp-sidebar::-webkit-scrollbar { width: 3px; }
.admin-mode .wcp-sidebar::-webkit-scrollbar-thumb {
    background: rgba(148,163,184,0.3);
    border-radius: 4px;
}