/* ══════════════════════════════════════════════════════════════════════════
   mentoria_polgar.css — El Escudo de la Reina · V125
   Identidad visual distintiva de Judit Polgár
   Academia Robles Bienestar

   RESTRICCIÓN ABSOLUTA: Este archivo SÓLO afecta a selectores bajo
   #layout-tactica.mentoria-polgar o body.mentoria-polgar-activa.
   El diseño dorado base y los demás mentores quedan intactos.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Variables de la Reina ── */
:root {
    --polgar-plata:       #c0cfe8;
    --polgar-purpura:     #7b5ea7;
    --polgar-purpura-rgb: 123, 94, 167;
    --polgar-plata-rgb:   192, 207, 232;
    --polgar-glow:        rgba(123, 94, 167, 0.22);
}


/* ════════════════════════════════════════════════
   1. BORDE DE TABLERO ELEGANTE
      Degradado plata/púrpura sutil alrededor del
      contenedor del tablero Chessground
   ════════════════════════════════════════════════ */

/* Columna izquierda: tinte sutil hacia el índigo */
#layout-tactica.mentoria-polgar #columna-izquierda {
    background: linear-gradient(160deg, #0f0c20 0%, #0a0705 100%);
    border-right: 1px solid rgba(var(--polgar-purpura-rgb), 0.35);
    transition: all 0.5s ease-in-out;
}

/* Marco del tablero: borde-degradado plata → púrpura → plata */
#layout-tactica.mentoria-polgar #contenedor-board {
    border-radius: 6px;
    /* Técnica padding-box / border-box para borde degradado */
    background:
        linear-gradient(#0a0705, #0a0705) padding-box,
        linear-gradient(135deg,
            var(--polgar-plata)   0%,
            var(--polgar-purpura) 50%,
            var(--polgar-plata)   100%) border-box;
    border: 2px solid transparent;
    box-shadow:
        0 0 28px rgba(var(--polgar-purpura-rgb), 0.20),
        0 0  8px rgba(var(--polgar-plata-rgb),   0.08),
        inset 0 0 1px rgba(var(--polgar-plata-rgb), 0.05);
    transition: all 0.5s ease-in-out;
}

#layout-tactica.mentoria-polgar #contenedor-board:hover {
    box-shadow:
        0 0 36px rgba(var(--polgar-purpura-rgb), 0.30),
        0 0 12px rgba(var(--polgar-plata-rgb),   0.12);
}


/* ════════════════════════════════════════════════
   2. TÍTULO DEL AULA — acento plata/púrpura
   ════════════════════════════════════════════════ */

#layout-tactica.mentoria-polgar #titulo-aula {
    background: linear-gradient(90deg,
        var(--polgar-plata)   0%,
        var(--polgar-purpura) 60%,
        var(--polgar-plata)   100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* ════════════════════════════════════════════════
   3. PANEL DE FEEDBACK IA — tono Polgar
   ════════════════════════════════════════════════ */

#layout-tactica.mentoria-polgar #feedback-ia {
    background: linear-gradient(180deg,
        rgba(15, 12, 32, 0.96) 0%,
        rgba(10,  7,  5, 0.99) 100%);
    border-top: 1px solid rgba(var(--polgar-purpura-rgb), 0.30);
    transition: all 0.5s ease-in-out;
}

/* Globo de diálogo de la IA */
#layout-tactica.mentoria-polgar #globo-dialogo {
    border-color: rgba(var(--polgar-purpura-rgb), 0.40);
    box-shadow: 0 2px 14px rgba(var(--polgar-purpura-rgb), 0.15);
    transition: all 0.5s ease-in-out;
}


/* ════════════════════════════════════════════════
   4. ÁRBOL DE LECCIONES — nodos Polgar resaltados
   ════════════════════════════════════════════════ */

#layout-tactica.mentoria-polgar .nodo-ejercicio[data-maestro^="polgar_"] {
    color: var(--polgar-plata);
    border-left: 2px solid rgba(var(--polgar-purpura-rgb), 0.55);
    padding-left: 10px;
}

#layout-tactica.mentoria-polgar .nodo-ejercicio[data-maestro^="polgar_"]:hover {
    background: rgba(var(--polgar-purpura-rgb), 0.12);
    color: #d8c7f0;
}

#layout-tactica.mentoria-polgar .nodo-ejercicio[data-maestro^="polgar_"].activo {
    background: rgba(var(--polgar-purpura-rgb), 0.18);
    color: #e2d6f8;
    border-left-color: var(--polgar-purpura);
}


/* ════════════════════════════════════════════════
   5. MODALES DE NARRATIVA (SweetAlert2)
      Se activan con body.mentoria-polgar-activa,
      ya que SweetAlert inserta el popup en <body>,
      fuera del #layout-tactica.
   ════════════════════════════════════════════════ */

body.mentoria-polgar-activa .swal2-popup {
    border: 1px solid rgba(var(--polgar-purpura-rgb), 0.50);
    box-shadow:
        0  8px 40px rgba(var(--polgar-purpura-rgb), 0.28),
        0  0   0 1px rgba(var(--polgar-plata-rgb),  0.08);
    background: linear-gradient(160deg, #13102a 0%, #0d0b10 100%);
}

body.mentoria-polgar-activa .swal2-title {
    background: linear-gradient(90deg,
        var(--polgar-plata)   0%,
        var(--polgar-purpura) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

body.mentoria-polgar-activa .swal2-html-container {
    color: #cdc8e0;
}

body.mentoria-polgar-activa .swal2-confirm {
    background: linear-gradient(135deg,
        var(--polgar-purpura) 0%,
        #9b6fc7 100%) !important;
    border-color: var(--polgar-purpura) !important;
    box-shadow: 0 4px 16px rgba(var(--polgar-purpura-rgb), 0.40) !important;
}

body.mentoria-polgar-activa .swal2-confirm:hover {
    background: linear-gradient(135deg,
        #9b6fc7 0%,
        #b88de0 100%) !important;
}

body.mentoria-polgar-activa .swal2-cancel {
    border-color: rgba(var(--polgar-purpura-rgb), 0.40) !important;
    color: var(--polgar-plata) !important;
}


/* ════════════════════════════════════════════════
   6. COLUMNA DERECHA — sutil tinte Polgar
   ════════════════════════════════════════════════ */

#layout-tactica.mentoria-polgar #columna-derecha {
    border-left: 1px solid rgba(var(--polgar-purpura-rgb), 0.20);
    transition: all 0.5s ease-in-out;
}

/* Cabeceras del árbol táctico con acento Polgar */
#layout-tactica.mentoria-polgar .nodo-cabecera {
    border-color: rgba(var(--polgar-purpura-rgb), 0.35);
}