/* =========================================================
   Menti — ayudante del Aula Virtual (Mente Corporativa): el foco asistente.
   Se ubica en una esquina (la que elija cada persona, arrastrándolo)
   y muestra una burbuja con un consejo o su menú.
   ========================================================= */

.mc-menti {
    --mc-menti-lado: 18px;
    --mc-menti-arriba: 84px;           /* bajo la barra de navegación */
    --mc-menti-abajo: 18px;            /* lo ajusta mascota.js si hay barras fijas abajo */
    position: fixed;
    right: var(--mc-menti-lado);
    bottom: var(--mc-menti-abajo);
    /* Por debajo de menús, toasts, paneles de error y modales del propio
       sitio (algunos simuladores usan hasta z-index 401), para que Menti
       nunca tape algo importante que el usuario deba ver o pulsar. */
    z-index: 350;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .4s ease, transform .4s ease, bottom .25s ease;
    pointer-events: none;
}
.mc-menti--ready { opacity: 1; transform: translateY(0); pointer-events: auto; }

/* Esquinas: abajo-derecha (por defecto), abajo-izquierda, arriba-izquierda, arriba-derecha. */
.mc-menti--bl { right: auto; left: var(--mc-menti-lado); align-items: flex-start; }
.mc-menti--tl { right: auto; left: var(--mc-menti-lado); bottom: auto; top: var(--mc-menti-arriba); align-items: flex-start; flex-direction: column-reverse; }
.mc-menti--tr { bottom: auto; top: var(--mc-menti-arriba); flex-direction: column-reverse; }

.mc-menti__bubble {
    position: relative;
    background: #fff;
    border: 1px solid var(--mcw-line, #E2E5EC);
    border-top: 2px solid var(--mcw-crimson, #9E1B32);
    border-radius: 2px;
    padding: 14px 34px 14px 16px;
    max-width: 290px;
    box-shadow: 0 12px 28px rgba(11,31,58,.14);
}
.mc-menti__name {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--mcw-crimson, #9E1B32);
    margin-bottom: 4px;
}
.mc-menti__text {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--mc-ink, #14213D);
}

.mc-menti__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}
.mc-menti__acciones[hidden] { display: none; }
.mc-menti__btn {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--mcw-line, #D9DEE8);
    background: #fff;
    color: var(--mc-navy-800, #0F2C59);
    border-radius: 2px;
    padding: 6px 10px;
    font: 600 12.5px/1.2 'Plus Jakarta Sans', system-ui, sans-serif;
    text-decoration: none;
    cursor: pointer;
}
.mc-menti a.mc-menti__btn { color: var(--mc-navy-800, #0F2C59); }
.mc-menti__btn:hover, .mc-menti a.mc-menti__btn:hover { background: #F2F5FA; color: var(--mc-navy-900, #0B1F3A); }
.mc-menti__btn--principal { background: var(--mc-navy-800, #0F2C59); border-color: var(--mc-navy-800, #0F2C59); color: #fff; }
.mc-menti__btn--principal:hover { background: var(--mc-navy-900, #0B1F3A); color: #fff; }
.mc-menti__btn--suave { border-color: transparent; background: var(--mc-bg-alt, #F6F7F9); color: var(--mc-muted, #5C6B85); }
.mc-menti a.mc-menti__btn--principal, .mc-menti a.mc-menti__btn--principal:hover { color: #fff; }
/* Atajos «Ir a:» del menú: enlaces compactos en una línea. */
.mc-menti__ir {
    flex-basis: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    padding: 8px 0 6px;
    margin-top: 2px;
    border-top: 1px solid var(--mcw-line, #E2E5EC);
    font-size: 12.5px;
}
.mc-menti__ir-t { color: var(--mc-muted, #5C6B85); font-weight: 700; }
.mc-menti .mc-menti__ir a { color: var(--mc-navy-800, #0F2C59); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.mc-menti .mc-menti__ir a:hover { color: var(--mcw-crimson, #9E1B32); }
/* Ajustes (silenciar, cambiar de lugar, apagar): discretos, al final. */
.mc-menti__btn--ajuste {
    border: none;
    background: none;
    padding: 4px 6px 2px 0;
    margin-right: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--mc-muted, #5C6B85);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.mc-menti__btn--ajuste:hover { background: none; color: var(--mc-ink, #14213D); }
.mc-menti__btn:focus-visible, .mc-menti__close:focus-visible, .mc-menti__robot-btn:focus-visible {
    outline: 2px solid var(--mcw-crimson, #9E1B32);
    outline-offset: 2px;
}

.mc-menti__close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    border-radius: 2px;
    border: none;
    background: var(--mc-bg-alt, #F6F7F9);
    color: var(--mc-muted, #5C6B85);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
}
.mc-menti__close:hover { background: var(--mc-line, #E7E9EF); color: var(--mc-ink, #14213D); }

.mc-menti__robot-btn {
    position: relative;
    background: none;
    border: none;
    padding: 0;
    cursor: grab;
    line-height: 0;
    touch-action: none;                /* para poder arrastrarlo en el celular */
}
.mc-menti--arrastrando .mc-menti__robot-btn { cursor: grabbing; }
.mc-menti--arrastrando { transition: none; }
.mc-menti--arrastrando .mc-menti__bubble { display: none; }
.mc-menti__robot {
    width: 70px;
    height: auto;
    display: block;
    overflow: visible;
    filter: drop-shadow(0 8px 14px rgba(11,31,58,.18));
}
/* Solo se mueve cuando habla: así el movimiento significa «tengo algo que decirte». */
.mc-menti:not(.mc-menti--sinburbuja):not(.mc-menti--minimized) .mc-menti__robot { animation: mcMentiBob 2.6s ease-in-out infinite; }
.mc-menti__robot-btn:hover .mc-menti__robot { animation: mcMentiBob 2.6s ease-in-out infinite; }
/* Rayos de luz al felicitar o en una alerta. */
.mc-menti__rayos { animation: mcMentiPulse 1.2s ease-in-out infinite; }
.mc-menti--minimized .mc-menti__sombra, .mc-menti--minimized .mc-menti__cuerpo { display: none; }

/* Puntito: Menti tiene algo importante que contar (y está silenciado). */
.mc-menti__punto {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--mcw-crimson, #9E1B32);
    border: 2px solid #fff;
}
.mc-menti__punto[hidden] { display: none; }

@keyframes mcMentiBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
@keyframes mcMentiPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .4; }
}

/* Sin burbuja: solo el robot. Silenciado (minimized): robot pequeño. */
.mc-menti--sinburbuja .mc-menti__bubble,
.mc-menti--minimized .mc-menti__bubble { display: none; }
.mc-menti--minimized .mc-menti__robot { width: 46px; animation: none; }

/* Lo que Menti está señalando durante «¿Qué hago en esta página?». */
.mc-menti-foco {
    outline: 3px solid var(--mcw-crimson, #9E1B32) !important;
    outline-offset: 4px;
    border-radius: 2px;
    animation: mcMentiFoco 1.6s ease-in-out infinite;
}
@keyframes mcMentiFoco {
    0%, 100% { outline-color: rgba(158,27,50,1); }
    50% { outline-color: rgba(158,27,50,.35); }
}

@media (max-width: 560px) {
    .mc-menti { --mc-menti-lado: 12px; --mc-menti-arriba: 70px; }
    .mc-menti__bubble { max-width: min(270px, calc(100vw - 24px)); padding: 12px 30px 12px 14px; }
    .mc-menti__robot { width: 58px; }
    .mc-menti--minimized .mc-menti__robot { width: 42px; }
}

/* =========================================================
   Simuladores: Menti desplazándose hacia una casilla.
   ========================================================= */
.mc-menti--roaming {
    transition: left .55s cubic-bezier(.4,0,.2,1), top .55s cubic-bezier(.4,0,.2,1);
}
.mc-menti.mc-menti--walking .mc-menti__robot, .mc-menti.mc-menti--walking:not(.mc-menti--sinburbuja):not(.mc-menti--minimized) .mc-menti__robot {
    animation: mcMentiWalk .5s ease-in-out infinite;
}
@keyframes mcMentiWalk {
    0%, 100% { transform: rotate(-4deg) translateY(0); }
    50% { transform: rotate(4deg) translateY(-3px); }
}

.mc-menti-tour-btn {
    position: fixed;
    left: 18px;
    bottom: 18px;
    z-index: 350;
    background: var(--mc-navy-800, #0F2C59);
    color: #fff;
    border: none;
    border-radius: 2px;
    padding: 11px 20px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(11,31,58,.22);
}
.mc-menti-tour-btn:hover { background: var(--mc-navy-900, #0B1F3A); }

@media (max-width: 560px) {
    .mc-menti-tour-btn { left: 12px; bottom: 12px; padding: 9px 16px; font-size: 12px; }
}

/* Quien prefiere menos movimiento en pantalla: Menti se queda quieto. */
@media (prefers-reduced-motion: reduce) {
    .mc-menti, .mc-menti--roaming { transition: none; }
    .mc-menti__robot, .mc-menti__robot-btn:hover .mc-menti__robot, .mc-menti:not(.mc-menti--sinburbuja):not(.mc-menti--minimized) .mc-menti__robot,
    .mc-menti__rayos, .mc-menti--walking .mc-menti__robot, .mc-menti-foco { animation: none; }
}

@media print {
    .mc-menti, .mc-menti-tour-btn { display: none !important; }
}

/* Con un menú del encabezado abierto (notificaciones, perfil, menú del
   celular), Menti se aparta: antes quedaba encima del panel. */
body.st-panel-abierto .mc-menti, body.st-panel-abierto .mc-menti-tour-btn {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Pantallas táctiles: botón de cerrar de 44 px (antes 22 px, difícil de
   acertar con el dedo). */
@media (pointer: coarse) {
    .mc-menti__close { top: 0; right: 0; width: 44px; height: 44px; background: transparent; font-size: 18px; }
    .mc-menti__bubble { padding-right: 44px; }
}
@media (max-width: 560px) {
    .mc-menti__bubble { max-width: min(250px, calc(100vw - 90px)); }
}