/* =============================================================================
   WP Chess Portal — Tema OSCURO + glassmorphism (v4.8.1)
   Movimiento Maestro
   Alcance de esta fase:
     1) Menú del profesor convertido a TOPBAR (6 principales + "Más").
     2) Fondo oscuro tipo tablero SOLO en la vista "Clase en Vivo".
   Las demás vistas conservan su fondo claro hasta que se rediseñen.
   ============================================================================= */

:root{
    --wcp-bg-body:#0d1115;
    --wcp-gold:#df9e38;
    --wcp-gold-hover:#c4872c;
    --wcp-blue:#4169e1;
    --wcp-blue-dark:#3154b3;
    --wcp-text:#ffffff;
    --wcp-text-muted:#d0d7de;
    --wcp-text-dim:#9aa4ad;
    --wcp-glass:rgba(255,255,255,0.12);
    --wcp-glass-border:rgba(255,255,255,0.18);
}

/* ---------------------------------------------------------------------------
   1) LAYOUT: el modo topbar apila barra + contenido en columna
   --------------------------------------------------------------------------- */
.wcp-app-container.wcp-topbar-mode{
    flex-direction:column;
    background:#0d1115;                 /* se ve en los bordes redondeados */
}
.wcp-topbar-mode .wcp-main{
    padding:28px 32px;                  /* gana a .teacher-mode .wcp-main por orden de carga */
}

/* ---------------------------------------------------------------------------
   2) TOPBAR
   --------------------------------------------------------------------------- */
.wcp-topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:10px 22px;
    background:var(--wcp-bg-body);
    border-bottom:1px solid rgba(255,255,255,0.10);
    box-shadow:0 2px 14px rgba(0,0,0,0.35);
    font-family:'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

/* Navegación principal (icono arriba, etiqueta abajo) */
.wcp-topbar-nav{
    display:flex; align-items:stretch; gap:4px;
    flex:1; justify-content:center; min-width:0;
}
.wcp-topbar-link{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
    min-width:64px; padding:8px 12px 6px;
    color:var(--wcp-text-muted); text-decoration:none;
    font-size:12px; font-weight:500; white-space:nowrap;
    border:none; background:none; cursor:pointer;
    border-bottom:2px solid transparent;
    transition:color .15s, border-color .15s, background .15s;
    font-family:inherit;
}
.wcp-topbar-link .nav-ico{
    font-size:22px; line-height:1;
    display:flex; align-items:center; justify-content:center; height:28px;
}
.wcp-topbar-link .nav-ico img{ display:block; }
/* ⭐ v4.8.6: iconos SVG del menú (heredan el color del texto vía currentColor) */
.wcp-topbar-link .nav-ico svg{ width:24px; height:24px; display:block; }
.wcp-caret{ width:11px; height:11px; vertical-align:middle; margin-left:1px; }
/* ⭐ v4.8.5: forzamos el color del texto por encima del tema/Elementor
   (el <button> "Más" tomaba el color de acento del sitio, p.ej. rosa) */
.wcp-topbar .wcp-topbar-link,
.wcp-topbar .wcp-topbar-link:visited,
.wcp-topbar .wcp-topbar-more-btn{ color:var(--wcp-text-muted) !important; }
.wcp-topbar .wcp-topbar-link:hover,
.wcp-topbar .wcp-topbar-more-btn:hover{ color:var(--wcp-text) !important; }
.wcp-topbar .wcp-topbar-link.active,
.wcp-topbar .wcp-topbar-more-btn.active{ color:var(--wcp-gold) !important; border-bottom-color:var(--wcp-gold); }
.wcp-topbar .wcp-topbar-link .nav-txt{ color:inherit !important; }
/* Los iconos principales siguen el color; el chevron y el hamburguesa también */
.wcp-topbar .wcp-topbar-link .nav-ico svg,
.wcp-topbar .wcp-topbar-more-btn .nav-ico svg,
.wcp-topbar .wcp-caret{ stroke:currentColor !important; }

/* Menú "Más" */
.wcp-topbar-more{ position:relative; display:flex; }
.wcp-topbar-dropdown{
    position:absolute; top:100%; right:0; margin-top:8px;
    min-width:230px; padding:8px;
    background:rgba(19,25,33,0.97);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,0.16); border-radius:12px;
    box-shadow:0 16px 44px rgba(0,0,0,0.5);
    display:none; flex-direction:column; gap:2px; z-index:300;
}
.wcp-topbar-more.open .wcp-topbar-dropdown{ display:flex; }
.wcp-topbar-drop-link{
    display:flex; align-items:center; gap:10px;
    padding:9px 12px; border-radius:8px;
    color:var(--wcp-text-muted); text-decoration:none;
    font-size:13px; font-weight:500; white-space:nowrap;
    transition:background .15s, color .15s;
}
.wcp-topbar-drop-link .nav-ico{
    font-size:16px; width:22px; text-align:center;
    display:inline-flex; align-items:center; justify-content:center;
}
.wcp-topbar-drop-link .nav-ico img{ width:18px; height:18px; object-fit:contain; }
.wcp-topbar-drop-link .nav-ico svg{ width:19px; height:19px; display:block; }
.wcp-topbar-drop-link:hover{ background:rgba(255,255,255,0.10); color:var(--wcp-text); }
.wcp-topbar-drop-link.active{ background:rgba(223,158,56,0.16); color:var(--wcp-gold); }

/* Zona de usuario */
.wcp-topbar-user{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.wcp-topbar-admin{
    display:flex; align-items:center; gap:6px;
    padding:7px 13px; border-radius:20px;
    background:linear-gradient(135deg,#CCA800 0%,#FFD700 100%); color:#0d0d1a;
    text-decoration:none; font-weight:700; font-size:12px; letter-spacing:.2px;
}
.wcp-topbar-admin .nav-ico{ font-size:14px; }
.wcp-topbar-profile{ display:flex; align-items:center; gap:9px; }
.wcp-topbar-avatar{
    width:38px; height:38px; border-radius:50%;
    background:linear-gradient(135deg,var(--wcp-blue),var(--wcp-blue-dark));
    display:flex; align-items:center; justify-content:center; font-size:19px;
    border:1px solid rgba(255,255,255,0.2); flex-shrink:0;
}
.wcp-topbar-name{ color:var(--wcp-text); font-size:13px; font-weight:600; line-height:1.15; }
.wcp-topbar-role{ color:var(--wcp-text-dim); font-size:11px; line-height:1.1; }
.wcp-topbar-logout{
    color:var(--wcp-text-dim); text-decoration:none; font-size:18px;
    padding:6px 8px; border-radius:8px; transition:background .15s;
}
.wcp-topbar-logout:hover{ background:rgba(255,90,90,0.16); }

/* ---------------------------------------------------------------------------
   3) FONDO OSCURO tipo tablero — SOLO en la vista "Clase en Vivo"
   --------------------------------------------------------------------------- */
.wcp-app-container.wcp-view-classroom,
.wcp-app-container.wcp-view-list,
.wcp-app-container.wcp-view-grading,
.wcp-app-container.wcp-view-exams,
.wcp-app-container.wcp-editor-mode,
.wcp-app-container.wcp-groups-mode,
.wcp-app-container.student-mode{ background:var(--wcp-bg-body); }
.wcp-view-classroom .wcp-main,
.wcp-view-list .wcp-main,
.wcp-view-grading .wcp-main,
.wcp-view-exams .wcp-main,
.wcp-editor-mode .wcp-main,
.wcp-groups-mode .wcp-main,
.student-mode .wcp-main{
    color:var(--wcp-text);
    background-color:var(--wcp-bg-body);
    background-image:
        linear-gradient(45deg,#121820 25%,transparent 25%),
        linear-gradient(-45deg,#121820 25%,transparent 25%),
        linear-gradient(45deg,transparent 75%,#121820 75%),
        linear-gradient(-45deg,transparent 75%,#121820 75%);
    background-size:60px 60px;
    background-position:0 0, 0 30px, 30px -30px, -30px 0;
    background-attachment:fixed;   /* el patrón queda estático al hacer scroll */
}

/* ---------------------------------------------------------------------------
   Vista "Mis Tareas" (list) — tema oscuro
   --------------------------------------------------------------------------- */
.wcp-view-list .wcp-main h1,
.wcp-view-list .wcp-main h3,
.wcp-view-list .wcp-main strong{ color:#fff; }
/* Banner de Mis Tareas */
.wcp-page-banner{
    position:relative; border-radius:16px; overflow:hidden; margin-bottom:24px;
    border:1px solid rgba(223,158,56,.5); box-shadow:0 14px 44px rgba(0,0,0,.45);
}
.wcp-page-banner-img{ display:block; width:100%; aspect-ratio:1600 / 400; height:auto; object-fit:cover; object-position:center; }
.wcp-page-banner::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(90deg,rgba(6,9,13,.85) 0%,rgba(6,9,13,.45) 45%,transparent 72%);
}
.wcp-page-banner-txt{ position:absolute; left:28px; bottom:22px; z-index:2; }
.wcp-page-banner-txt h1{ margin:0; font-size:26px; color:#fff !important; text-shadow:0 2px 12px rgba(0,0,0,.7); }
.wcp-page-banner-txt p{ margin:5px 0 0; font-size:13px; color:#e6ebf0; text-shadow:0 1px 8px rgba(0,0,0,.7); }
.wcp-page-banner-btn{
    position:absolute; top:18px; right:20px; z-index:2;
    display:inline-flex; align-items:center; gap:6px;
    background:linear-gradient(135deg,#4169e1,#3154b3); color:#fff; text-decoration:none;
    padding:10px 18px; border-radius:10px; font-size:13px; font-weight:600;
    box-shadow:0 6px 18px rgba(0,0,0,.4); transition:transform .15s, box-shadow .15s;
}
.wcp-page-banner-btn:hover{ transform:translateY(-1px); box-shadow:0 8px 22px rgba(65,105,225,.5); color:#fff; }
/* Botones de icono (editar/eliminar) sobre fondo oscuro */
.wcp-view-list .wcp-btn-icon{ background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.18); color:#fff; border-radius:8px; }
.wcp-view-list .wcp-btn-icon:hover{ background:rgba(255,255,255,0.16); }
.wcp-view-list ::-webkit-scrollbar{ width:8px; height:8px; }
.wcp-view-list ::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.18); border-radius:8px; }
@media (max-width:600px){
    .wcp-page-banner-txt{ left:16px; bottom:14px; }
    .wcp-page-banner-txt h1{ font-size:20px; }
    .wcp-page-banner-btn{ top:12px; right:12px; padding:8px 12px; font-size:12px; }
}

/* ---------------------------------------------------------------------------
   Vista "Calificar" (grading) — tema oscuro
   Muchos paneles usan estilos inline claros; los sobreescribimos por atributo.
   --------------------------------------------------------------------------- */
.wcp-view-grading .wcp-main,
.wcp-view-grading h1,.wcp-view-grading h2,.wcp-view-grading h3,.wcp-view-grading h4,
.wcp-view-grading strong,.wcp-view-grading label,.wcp-view-grading p{ color:#fff; }
/* Clases de portal.css re-tematizadas */
.wcp-view-grading .wcp-grading-panel,
.wcp-view-grading .wcp-task-item,
.wcp-view-grading .wcp-alert{
    background:rgba(255,255,255,0.035); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
    border:1px solid rgba(255,255,255,0.18); color:#fff;
}
.wcp-view-grading .wcp-field input,
.wcp-view-grading .wcp-field textarea,
.wcp-view-grading .wcp-field select,
.wcp-view-grading input[type="text"],
.wcp-view-grading input[type="number"],
.wcp-view-grading textarea,
.wcp-view-grading select{
    background:rgba(255,255,255,0.06) !important; color:#fff !important;
    border:1px solid rgba(255,255,255,0.2) !important;
}
.wcp-view-grading input::placeholder,
.wcp-view-grading textarea::placeholder{ color:#9aa4ad; }
.wcp-view-grading .wcp-btn-icon{ background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.18); color:#fff; }
/* Estilos inline claros → oscuro (no afecta el tablero, que colorea por clases) */
.wcp-view-grading [style*="background:white"],
.wcp-view-grading [style*="background: white"],
.wcp-view-grading [style*="background:#fff"],
.wcp-view-grading [style*="background: #fff"],
.wcp-view-grading [style*="background:#f8f9fa"],
.wcp-view-grading [style*="background:#f9f9f9"],
.wcp-view-grading [style*="background:#f0f0f0"],
.wcp-view-grading [style*="background:#ecf0f1"]{
    background:rgba(255,255,255,0.032) !important;
    border-color:rgba(255,255,255,0.16) !important;
}
.wcp-view-grading [style*="color:#2c3e50"],
.wcp-view-grading [style*="color:#333"],
.wcp-view-grading [style*="color:#444"],
.wcp-view-grading [style*="color:#555"],
.wcp-view-grading [style*="color:#666"]{ color:#e6ebf0 !important; }
.wcp-view-grading [style*="color:#856404"]{ color:#f5c877 !important; }
.wcp-view-grading [style*="color:#7f8c8d"],
.wcp-view-grading [style*="color:#95a5a6"]{ color:#9aa4ad !important; }
.wcp-view-grading [style*="border:1px solid #ddd"],
.wcp-view-grading [style*="border:1px solid #eee"],
.wcp-view-grading [style*="border:1px solid #e2e8f0"]{ border-color:rgba(255,255,255,0.18) !important; }
.wcp-view-grading ::-webkit-scrollbar{ width:8px; height:8px; }
.wcp-view-grading ::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.18); border-radius:8px; }

/* ---------------------------------------------------------------------------
   Vista "Crear / Editar Tarea" (wcp-editor-mode) — tema oscuro
   --------------------------------------------------------------------------- */
.wcp-editor-mode .wcp-main,
.wcp-editor-mode h1,.wcp-editor-mode h2,.wcp-editor-mode h3,.wcp-editor-mode h4,.wcp-editor-mode h5,
.wcp-editor-mode strong,.wcp-editor-mode label,.wcp-editor-mode p,.wcp-editor-mode span{ color:#fff; }
.wcp-editor-mode small{ color:#9aa4ad; }
.wcp-editor-mode .wcp-form-card{
    background:rgba(255,255,255,0.03); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
    border:1px solid rgba(255,255,255,0.16); color:#fff;
}
.wcp-editor-mode input[type="text"],
.wcp-editor-mode input[type="number"],
.wcp-editor-mode input[type="date"],
.wcp-editor-mode textarea,
.wcp-editor-mode select{
    background:rgba(255,255,255,0.06) !important; color:#fff !important;
    border:1px solid rgba(255,255,255,0.2) !important;
}
.wcp-editor-mode input::placeholder,
.wcp-editor-mode textarea::placeholder{ color:#9aa4ad; }
/* Blancos / grises → cristal oscuro */
.wcp-editor-mode [style*="background:white"],
.wcp-editor-mode [style*="background: white"],
.wcp-editor-mode [style*="background:#fff"],
.wcp-editor-mode [style*="background: #fff"],
.wcp-editor-mode [style*="background:#f8f9fa"],
.wcp-editor-mode [style*="background:#f9f9f9"],
.wcp-editor-mode [style*="background:#ecf0f1"]{
    background:rgba(255,255,255,0.032) !important; border-color:rgba(255,255,255,0.14) !important;
}
/* Paneles de color → tintados translúcidos (después de blancos: ganan sobre #fff3cd) */
.wcp-editor-mode [style*="background:#fff3cd"]{ background:rgba(223,158,56,.1) !important; border-color:rgba(223,158,56,.4) !important; }
.wcp-editor-mode [style*="background:#e3f2fd"]{ background:rgba(65,105,225,.12) !important; border-color:rgba(65,105,225,.4) !important; }
.wcp-editor-mode [style*="background:#d4edda"],
.wcp-editor-mode [style*="background:#dcfce7"]{ background:rgba(40,167,69,.14) !important; border-color:rgba(40,167,69,.35) !important; }
/* Textos oscuros → claros */
.wcp-editor-mode [style*="color:#2c3e50"],
.wcp-editor-mode [style*="color:#333"],
.wcp-editor-mode [style*="color:#555"],
.wcp-editor-mode [style*="color:#666"],
.wcp-editor-mode [style*="color:#1976d2"]{ color:#e6ebf0 !important; }
.wcp-editor-mode [style*="color:#999"],
.wcp-editor-mode [style*="color:#7f8c8d"]{ color:#9aa4ad !important; }
/* Bordes claros */
.wcp-editor-mode [style*="1px solid #ddd"],
.wcp-editor-mode [style*="1px solid #ced4da"],
.wcp-editor-mode [style*="1px solid #e0e0e0"],
.wcp-editor-mode [style*="1px solid #eee"]{ border-color:rgba(255,255,255,0.18) !important; }
.wcp-editor-mode ::-webkit-scrollbar{ width:8px; height:8px; }
.wcp-editor-mode ::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.18); border-radius:8px; }
/* ⭐ v4.11.0: filas de la lista de ejercicios + botones de acción */
.wcp-editor-mode #positions_list li{ border-bottom-color:rgba(255,255,255,0.12) !important; color:#fff; }
.wcp-editor-mode #positions_list .wcp-btn-icon{
    background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.18);
    color:#fff; border-radius:6px; padding:4px 8px; cursor:pointer; font-size:13px;
}
.wcp-editor-mode #positions_list .wcp-btn-icon:hover{ background:rgba(255,255,255,0.16); }
.wcp-editor-mode #positions_list .wcp-btn-icon[disabled]{ cursor:default; }

/* ---------------------------------------------------------------------------
   Menú del ALUMNO — sidebar vertical con el nuevo estilo oscuro/dorado
   (se mantiene VERTICAL; solo cambia la estética)
   --------------------------------------------------------------------------- */
.student-mode .wcp-sidebar{
    background:#0d1115;
    border-right:1px solid rgba(255,255,255,0.08);
    color:var(--wcp-text);
}
.student-mode .wcp-user-profile{ margin-bottom:26px; }
.student-mode .wcp-avatar{
    width:56px; height:56px; margin:0 auto 10px; font-size:26px;
    display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.15); border-radius:50%;
    position:relative; cursor:pointer; overflow:visible;
}
.student-mode .wcp-avatar img{
    width:100%; height:100%; border-radius:50%; object-fit:cover; display:block;
}
.student-mode .wcp-avatar .wcp-avatar-edit{
    position:absolute; bottom:-3px; right:-3px;
    width:22px; height:22px; border-radius:50%;
    background:#df9e38; color:#0d1115; font-size:11px;
    display:flex; align-items:center; justify-content:center;
    border:2px solid #0d1115; opacity:0; transition:opacity .15s;
}
.student-mode .wcp-avatar:hover .wcp-avatar-edit{ opacity:1; }
.student-mode .wcp-user-profile h3{ color:#fff; font-size:15px; margin:0; }
.student-mode .wcp-nav a{
    display:flex; align-items:center; gap:10px;
    color:var(--wcp-text-muted); border-radius:8px; padding:11px 12px; font-size:14px;
    border-left:3px solid transparent; transition:background .15s, color .15s;
}
.student-mode .wcp-nav a img{ width:20px; height:20px; object-fit:contain; }
.student-mode .wcp-nav a .nav-ico{ display:inline-flex; align-items:center; justify-content:center; width:22px; flex:0 0 22px; }
.student-mode .wcp-nav a .nav-ico svg{ width:20px; height:20px; stroke:currentColor; display:block; }
.student-mode .wcp-nav a:hover{ background:rgba(255,255,255,0.08); color:#fff; transform:none; }
.student-mode .wcp-nav a.active{
    background:rgba(223,158,56,0.14); color:var(--wcp-gold);
    border-left-color:var(--wcp-gold); transform:none;
}
.student-mode .wcp-nav a.logout{
    margin-top:auto; color:#ff9a9a; border:1px solid rgba(255,90,90,0.3);
    text-align:center; justify-content:center;
}
.student-mode .wcp-nav a.logout:hover{ background:rgba(255,90,90,0.9); color:#fff; }

/* ---------------------------------------------------------------------------
   Vista "Alumnos y Grupos" (wcp-groups-mode) — tema oscuro
   --------------------------------------------------------------------------- */
.wcp-groups-mode .wcp-main,
.wcp-groups-mode h1,.wcp-groups-mode h2,.wcp-groups-mode h3,.wcp-groups-mode h4,.wcp-groups-mode h5,
.wcp-groups-mode strong,.wcp-groups-mode label,.wcp-groups-mode p,.wcp-groups-mode td,.wcp-groups-mode th{ color:#fff; }
.wcp-groups-mode small{ color:#9aa4ad; }
.wcp-groups-mode .wcp-form-card{
    background:rgba(255,255,255,0.03); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
    border:1px solid rgba(255,255,255,0.16); color:#fff;
}
.wcp-groups-mode input[type="text"],
.wcp-groups-mode input[type="number"],
.wcp-groups-mode input[type="email"],
.wcp-groups-mode input[type="password"],
.wcp-groups-mode input[type="date"],
.wcp-groups-mode textarea,
.wcp-groups-mode select{
    background:rgba(255,255,255,0.06) !important; color:#fff !important;
    border:1px solid rgba(255,255,255,0.2) !important;
}
.wcp-groups-mode input::placeholder,
.wcp-groups-mode textarea::placeholder{ color:#9aa4ad; }
.wcp-groups-mode .wcp-btn-icon{ background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.18); color:#fff; }
/* Modales (Nuevo Alumno / Nuevo Grupo): caja SÓLIDA para que se distinga bien.
   El selector por ID gana sobre los overrides por atributo de abajo. */
.wcp-groups-mode #modal-nuevo-alumno > div,
.wcp-groups-mode #modal-nuevo-grupo > div{
    background:#141a22 !important;
    border:1px solid rgba(255,255,255,0.15) !important;
    box-shadow:0 20px 60px rgba(0,0,0,.55) !important;
}
/* Blancos / grises → cristal oscuro */
.wcp-groups-mode [style*="background:white"],
.wcp-groups-mode [style*="background: white"],
.wcp-groups-mode [style*="background:#fff"],
.wcp-groups-mode [style*="background: #fff"],
.wcp-groups-mode [style*="background:#f8f9fa"],
.wcp-groups-mode [style*="background:#f9f9f9"],
.wcp-groups-mode [style*="background:#f0f0f0"],
.wcp-groups-mode [style*="background:#ecf0f1"]{
    background:rgba(255,255,255,0.04) !important; border-color:rgba(255,255,255,0.14) !important;
}
/* Textos oscuros → claros */
.wcp-groups-mode [style*="color:#2c3e50"],
.wcp-groups-mode [style*="color:#333"],
.wcp-groups-mode [style*="color:#555"],
.wcp-groups-mode [style*="color:#666"]{ color:#e6ebf0 !important; }
.wcp-groups-mode [style*="color:#999"],
.wcp-groups-mode [style*="color:#7f8c8d"],
.wcp-groups-mode [style*="color:#95a5a6"]{ color:#9aa4ad !important; }
/* Bordes claros */
.wcp-groups-mode [style*="1px solid #ddd"],
.wcp-groups-mode [style*="1px solid #eee"],
.wcp-groups-mode [style*="1px solid #e0e0e0"],
.wcp-groups-mode [style*="1px solid #ecf0f1"]{ border-color:rgba(255,255,255,0.18) !important; }
.wcp-groups-mode ::-webkit-scrollbar{ width:8px; height:8px; }
.wcp-groups-mode ::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.18); border-radius:8px; }

/* ---------------------------------------------------------------------------
   Vista "Exámenes" (wcp-view-exams) — tema oscuro (lista + editor + resultados)
   --------------------------------------------------------------------------- */
.wcp-view-exams .wcp-main,
.wcp-view-exams h1,.wcp-view-exams h2,.wcp-view-exams h3,.wcp-view-exams h4,.wcp-view-exams h5,
.wcp-view-exams strong,.wcp-view-exams label,.wcp-view-exams p,.wcp-view-exams td,.wcp-view-exams th,.wcp-view-exams li{ color:#fff; }
.wcp-view-exams small{ color:#9aa4ad; }
.wcp-view-exams .wcp-form-card{
    background:rgba(255,255,255,0.03); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
    border:1px solid rgba(255,255,255,0.16); color:#fff;
}
.wcp-view-exams input[type="text"],
.wcp-view-exams input[type="number"],
.wcp-view-exams input[type="date"],
.wcp-view-exams input[type="time"],
.wcp-view-exams textarea,
.wcp-view-exams select{
    background:rgba(255,255,255,0.06) !important; color:#fff !important;
    border:1px solid rgba(255,255,255,0.2) !important;
}
.wcp-view-exams input::placeholder,
.wcp-view-exams textarea::placeholder{ color:#9aa4ad; }
.wcp-view-exams .wcp-btn-icon{ background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.18); color:#fff; }
/* ⭐ v4.10.0: clases propias del editor de exámenes (venían con fondo claro por clase) */
.wcp-view-exams .q-card{ background:rgba(255,255,255,0.045); border-color:rgba(255,255,255,0.16); }
.wcp-view-exams .opt-row{ background:rgba(255,255,255,0.05); border-color:rgba(255,255,255,0.22); color:#fff; }
.wcp-view-exams .opt-row:hover{ background:rgba(255,255,255,0.09); }
.wcp-view-exams .opt-row.correct{ background:rgba(40,167,69,.16); border-color:#28a745; }
.wcp-view-exams [style*="background:#fafbfc"],
.wcp-view-exams [style*="background:#e9ecef"]{ background:rgba(255,255,255,0.045) !important; border-color:rgba(255,255,255,0.16) !important; }
.wcp-view-exams [style*="2px solid #ddd"],
.wcp-view-exams [style*="2px solid #e9ecef"]{ border-color:rgba(255,255,255,0.22) !important; }
.wcp-view-exams [style*="color:#aaa"]{ color:#9aa4ad !important; }
/* ⭐ v4.10.1: revisión de respuestas de exámenes (colores/fondos que faltaban) */
.wcp-view-exams [style*="color:#888"],
.wcp-view-exams [style*="color:#bbb"]{ color:#9aa4ad !important; }
.wcp-view-exams [style*="color:#856404"]{ color:#f5c877 !important; }
.wcp-view-exams [style*="color:#155724"]{ color:#7ee2a0 !important; }
.wcp-view-exams [style*="background:#eafaf1"],
.wcp-view-exams [style*="background:#f0fff4"]{ background:rgba(40,167,69,.14) !important; border-color:rgba(40,167,69,.35) !important; }
.wcp-view-exams [style*="background:#fdecea"],
.wcp-view-exams [style*="background:#fff5f5"]{ background:rgba(255,90,90,.12) !important; border-color:rgba(255,90,90,.35) !important; }
/* Tabla de resultados */
.wcp-view-exams .wcp-table{ background:transparent; color:#fff; }
.wcp-view-exams .wcp-table thead{ background:rgba(255,255,255,0.07) !important; }
.wcp-view-exams .wcp-table th{ background:rgba(255,255,255,0.07) !important; color:#fff !important; border-color:rgba(255,255,255,0.16) !important; }
.wcp-view-exams .wcp-table td{ background:transparent !important; color:#e6ebf0 !important; border-color:rgba(255,255,255,0.12) !important; }
/* El hover venía definido en la fila (background claro) y se transparentaba a través
   de las celdas: hay que anularlo en el propio tr, no solo en el td. */
.wcp-view-exams .wcp-table tr:hover{ background-color:rgba(255,255,255,0.06) !important; }
.wcp-view-exams .wcp-table tr:hover td{ background:transparent !important; }
/* Blancos / grises → cristal oscuro */
.wcp-view-exams [style*="background:white"],
.wcp-view-exams [style*="background: white"],
.wcp-view-exams [style*="background:#fff"],
.wcp-view-exams [style*="background: #fff"],
.wcp-view-exams [style*="background:#f8f9fa"],
.wcp-view-exams [style*="background:#f9f9f9"],
.wcp-view-exams [style*="background:#f0f0f0"],
.wcp-view-exams [style*="background:#ecf0f1"]{
    background:rgba(255,255,255,0.04) !important; border-color:rgba(255,255,255,0.14) !important;
}
/* Paneles de color (después de blancos, para que ganen sobre #fff3cd) */
.wcp-view-exams [style*="background:#fff3cd"],
.wcp-view-exams [style*="background:#fef3c7"]{ background:rgba(223,158,56,.1) !important; border-color:rgba(223,158,56,.4) !important; }
.wcp-view-exams [style*="background:#e3f2fd"]{ background:rgba(65,105,225,.12) !important; border-color:rgba(65,105,225,.4) !important; }
.wcp-view-exams [style*="background:#d4edda"],
.wcp-view-exams [style*="background:#dcfce7"]{ background:rgba(40,167,69,.14) !important; border-color:rgba(40,167,69,.35) !important; }
/* Textos oscuros → claros */
.wcp-view-exams [style*="color:#2c3e50"],
.wcp-view-exams [style*="color:#333"],
.wcp-view-exams [style*="color:#444"],
.wcp-view-exams [style*="color:#555"],
.wcp-view-exams [style*="color:#666"]{ color:#e6ebf0 !important; }
.wcp-view-exams [style*="color:#999"],
.wcp-view-exams [style*="color:#7f8c8d"],
.wcp-view-exams [style*="color:#95a5a6"]{ color:#9aa4ad !important; }
/* Bordes claros */
.wcp-view-exams [style*="1px solid #ddd"],
.wcp-view-exams [style*="1px solid #eee"],
.wcp-view-exams [style*="1px solid #e0e0e0"],
.wcp-view-exams [style*="1px solid #ced4da"]{ border-color:rgba(255,255,255,0.18) !important; }
.wcp-view-exams ::-webkit-scrollbar{ width:8px; height:8px; }
.wcp-view-exams ::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.18); border-radius:8px; }

/* ---------------------------------------------------------------------------
   Contenido del ALUMNO — tema oscuro en todas sus vistas (.student-mode .wcp-main)
   --------------------------------------------------------------------------- */
.student-mode .wcp-main,
.student-mode .wcp-main h1,.student-mode .wcp-main h2,.student-mode .wcp-main h3,
.student-mode .wcp-main h4,.student-mode .wcp-main h5,
.student-mode .wcp-main strong,.student-mode .wcp-main b,.student-mode .wcp-main label,
.student-mode .wcp-main p,.student-mode .wcp-main td,.student-mode .wcp-main th,.student-mode .wcp-main li{ color:#fff; }
.student-mode .wcp-main small{ color:#9aa4ad; }
.student-mode .wcp-main .wcp-form-card,
.student-mode .wcp-main .wcp-alert{
    background:rgba(255,255,255,0.03); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
    border:1px solid rgba(255,255,255,0.16); color:#fff;
}
/* Lista de tareas del alumno (.wcp-task-item viene de portal.css con fondo blanco) */
.student-mode .wcp-main .wcp-task-item{
    background:rgba(255,255,255,0.055);
    color:#fff;
    box-shadow:0 4px 16px rgba(0,0,0,0.25);
}
.student-mode .wcp-main .wcp-task-item:hover{ background:rgba(255,255,255,0.09); }
/* Título y meta de cada tarea (clases de portal.css, tono oscuro por defecto) */
.student-mode .wcp-main .task-title{ color:#fff !important; }
.student-mode .wcp-main .task-meta{ color:#c0c7cf !important; }
/* Widget de rating: tarjeta oscura sólida (el degradado por color de badge se veía lavado) */
.student-mode .wcp-main .wcp-rating-widget{
    background:linear-gradient(135deg, rgba(30,41,66,0.96), rgba(13,17,25,0.96)) !important;
    border:1px solid rgba(223,158,56,0.35) !important;
    box-shadow:0 10px 30px rgba(0,0,0,0.4) !important;
}
.student-mode .wcp-main .wcp-rating-widget h3{ color:var(--wcp-gold); }
.student-mode .wcp-main .wcp-rating-widget hr{ border-color:rgba(255,255,255,0.15) !important; }
.student-mode .wcp-main input[type="text"],
.student-mode .wcp-main input[type="number"],
.student-mode .wcp-main input[type="date"],
.student-mode .wcp-main input[type="email"],
.student-mode .wcp-main textarea,
.student-mode .wcp-main select{
    background:rgba(255,255,255,0.06) !important; color:#fff !important;
    border:1px solid rgba(255,255,255,0.2) !important;
}
.student-mode .wcp-main input::placeholder,
.student-mode .wcp-main textarea::placeholder{ color:#9aa4ad; }
.student-mode .wcp-main .wcp-btn-icon{ background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.18); color:#fff; }
/* Blancos / grises → cristal oscuro */
.student-mode .wcp-main [style*="background:white"],
.student-mode .wcp-main [style*="background: white"],
.student-mode .wcp-main [style*="background:#fff"],
.student-mode .wcp-main [style*="background: #fff"],
.student-mode .wcp-main [style*="background:#f8f9fa"],
.student-mode .wcp-main [style*="background:#f9f9f9"],
.student-mode .wcp-main [style*="background:#f0f0f0"],
.student-mode .wcp-main [style*="background:#ecf0f1"]{
    background:rgba(255,255,255,0.04) !important; border-color:rgba(255,255,255,0.14) !important;
}
/* Paneles de color (después de blancos, para que ganen sobre #fff3cd) */
.student-mode .wcp-main [style*="background:#fff3cd"],
.student-mode .wcp-main [style*="background:#fef3c7"]{ background:rgba(223,158,56,.1) !important; border-color:rgba(223,158,56,.4) !important; }
.student-mode .wcp-main [style*="background:#e3f2fd"],
.student-mode .wcp-main [style*="background:#e8f4fd"]{ background:rgba(65,105,225,.12) !important; border-color:rgba(65,105,225,.4) !important; }
.student-mode .wcp-main [style*="background:#d4edda"],
.student-mode .wcp-main [style*="background:#e8f5e9"],
.student-mode .wcp-main [style*="background:#dcfce7"]{ background:rgba(40,167,69,.14) !important; border-color:rgba(40,167,69,.35) !important; }
/* Textos oscuros → claros */
.student-mode .wcp-main [style*="color:#2c3e50"],
.student-mode .wcp-main [style*="color:#333"],
.student-mode .wcp-main [style*="color:#444"],
.student-mode .wcp-main [style*="color:#555"],
.student-mode .wcp-main [style*="color:#666"]{ color:#e6ebf0 !important; }
.student-mode .wcp-main [style*="color:#999"],
.student-mode .wcp-main [style*="color:#7f8c8d"],
.student-mode .wcp-main [style*="color:#95a5a6"]{ color:#9aa4ad !important; }
/* Bordes claros */
.student-mode .wcp-main [style*="1px solid #ddd"],
.student-mode .wcp-main [style*="2px solid #ddd"],
.student-mode .wcp-main [style*="1px solid #eee"],
.student-mode .wcp-main [style*="1px solid #e0e0e0"],
.student-mode .wcp-main [style*="1px solid #ced4da"]{ border-color:rgba(255,255,255,0.18) !important; }
.student-mode .wcp-main [style*="color:#aaa"]{ color:#9aa4ad !important; }
/* ⭐ v4.10.1: tonos oscuros que quedaban ilegibles (listas de ejercicios, avisos) */
.student-mode .wcp-main [style*="color:#856404"]{ color:#f5c877 !important; }
.student-mode .wcp-main [style*="color:#155724"]{ color:#7ee2a0 !important; }
.student-mode .wcp-main [style*="color:#1976D2"],
.student-mode .wcp-main [style*="color:#1976d2"]{ color:#8ab0ff !important; }
.student-mode .wcp-main [style*="color:#888"],
.student-mode .wcp-main [style*="color:#bbb"]{ color:#9aa4ad !important; }

/* ---------------------------------------------------------------------------
   ⭐ v4.11.1: DESPLEGABLES NATIVOS (<select>)
   El panel que abre el navegador usa los colores del sistema, no del elemento:
   con color-scheme:dark + option oscuras, la lista abierta se ve oscura también.
   --------------------------------------------------------------------------- */
.wcp-view-classroom select,
.wcp-view-list select,
.wcp-view-grading select,
.wcp-view-exams select,
.wcp-editor-mode select,
.wcp-groups-mode select,
.student-mode .wcp-main select{
    color-scheme:dark;
    background-color:rgba(255,255,255,0.06);
    color:#fff;
    border:1px solid rgba(255,255,255,0.2);
    border-radius:6px;
}
.wcp-view-classroom select option,
.wcp-view-list select option,
.wcp-view-grading select option,
.wcp-view-exams select option,
.wcp-editor-mode select option,
.wcp-groups-mode select option,
.student-mode .wcp-main select option{
    background-color:#141a22;
    color:#fff;
}
.wcp-view-classroom select:focus,
.wcp-view-list select:focus,
.wcp-view-grading select:focus,
.wcp-view-exams select:focus,
.wcp-editor-mode select:focus,
.wcp-groups-mode select:focus,
.student-mode .wcp-main select:focus{
    outline:none;
    border-color:var(--wcp-gold);
}

/* ---------------------------------------------------------------------------
   4) RESPONSIVE
   --------------------------------------------------------------------------- */
@media (max-width:768px){
    .wcp-topbar{ flex-wrap:wrap; padding:8px 12px; gap:10px; }
    .wcp-topbar-nav{
        order:3; width:100%;
        justify-content:flex-start;
        overflow-x:auto; -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
    }
    .wcp-topbar-nav::-webkit-scrollbar{ display:none; }
    .wcp-topbar-link{ min-width:58px; padding:6px 9px; font-size:11px; }
    .wcp-topbar-link .nav-ico{ font-size:17px; height:24px; }
    .wcp-topbar-link .nav-ico svg{ width:22px; height:22px; }
    .wcp-topbar-profile-txt{ display:none; }
    .wcp-topbar-more.open .wcp-topbar-dropdown{ position:fixed; left:12px; right:12px; top:auto; }
    .wcp-topbar-mode .wcp-main{ padding:18px 14px; }
    .wcp-view-classroom .wcp-main{ padding:16px 12px; }
}