/* ==================================================
   FÍSICAS ESTÉTICAS (Siri / Glassmorphism)
   CERO BORDES ROJOS
   ================================================== */
#matilda-toast-container {
    position: fixed;
    bottom: var(--matilda-offset-y, 20px); 
    left: 50%;
    transform: translateX(-50%) translateY(50px) scale(0.9);
    opacity: 0;
    width: auto;
    min-width: 320px;
    max-width: 450px;
    
    background: rgba(25, 25, 27, 0.65); 
    backdrop-filter: blur(25px) saturate(200%);
    -webkit-backdrop-filter: blur(25px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    
    border-radius: 20px; 
    box-shadow: 0 24px 48px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.1);
    
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 14px 20px;
    z-index: 9999; 
    
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1.15), 
                opacity 0.4s ease, 
                bottom 0.4s cubic-bezier(0.2, 0.8, 0.2, 1.15);
    pointer-events: none; 
}

#matilda-toast-container.mostrar {
    transform: translateX(-50%) translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto; 
}

#matilda-toast-icon-wrapper {
    display: flex; justify-content: center; align-items: center;
    width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
}

.matilda-toast-body { display: flex; flex-direction: column; flex-grow: 1; gap: 4px; }
.matilda-toast-title { color: #f0f0f0; font-family: sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 0.3px; }
.matilda-toast-msg { color: #a0a0a5; font-family: sans-serif; font-size: 13px; line-height: 1.4; }

.matilda-toast-close {
    background: transparent; border: none; color: #666; cursor: pointer;
    display: flex; justify-content: center; align-items: center;
    padding: 5px; margin-left: 10px; transition: color 0.2s ease, transform 0.2s ease; outline: none;
}
.matilda-toast-close:hover { color: #fff; transform: scale(1.1); }

/* ERRADICACIÓN TOTAL DEL BORDER-LEFT */
.matilda-tema-error { border-left: none !important; }
.matilda-tema-exito { border-left: none !important; }
.matilda-tema-info { border-left: none !important; }

/* El color solo vive en el círculo del icono */
.matilda-tema-error #matilda-toast-icon-wrapper { background: rgba(231, 76, 60, 0.15); color: #ff6b5a; }
.matilda-tema-exito #matilda-toast-icon-wrapper { background: rgba(46, 204, 113, 0.15); color: #43e587; }
.matilda-tema-info #matilda-toast-icon-wrapper { background: rgba(240, 169, 73, 0.15); color: var(--bf-acento, #F0A949); }

/* =======================================================================
   EL FUNDIDO DE LAS BUSQUEDAS DE MATILDA

   Cuando Matilda escribe en el buscador, el modulo vacia su lista y la vuelve
   a pintar de golpe. Ese golpe es el destello blanco: no lo da Matilda, lo da
   el repintado, y no se puede quitar sin entrar en los diecinueve modulos.

   Lo que se hace aqui es taparlo: se apaga el marco, se escribe con el marco
   apagado, y se enciende. Lo que era un destello pasa a ser un cambio de plano.

   LAS DOS CLASES ESTAN SEPARADAS A PROPOSITO. La transicion se pone una vez y
   ya no se quita; si viviera dentro de la misma clase que la opacidad, al
   quitarla desapareceria tambien la transicion y el marco volveria de un tiron
   -que es exactamente lo que se queria evitar-.
   ======================================================================= */
.fb-matilda-transicion {
    transition: opacity 190ms ease;
}
.fb-matilda-transicion.fb-matilda-suave {
    opacity: 0.28;
}

/* =======================================================================
   EL INTERROGANTE QUE LLAMA A MATILDA

   Nació en Correo, para explicar el Id. de cliente de Microsoft sin meter
   media pantalla de texto en la ventana. Sirve para lo mismo en cualquier
   otra: el párrafo gris de tres renglones que colgaba debajo del campo se
   guarda detrás de este botón, y lo cuenta Matilda al pulsarlo.

   Redondo, del tamaño del renglón y APAGADO: es una salida opcional, no algo
   que haya que pulsar para seguir. Si llevara el ámbar competiría con el
   botón por el que existe la ventana, que es el único que puede llevarlo.

   'flex-shrink: 0' porque casi siempre vive dentro de una fila flexible: sin
   él, un campo largo lo aplasta hasta dejarlo ovalado.
   ======================================================================= */
.fb-ayuda {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    margin-left: 7px;
    vertical-align: middle;
    border-radius: 50%;
    background: transparent;
    border: 1px solid #3a3a3a;
    color: #888888;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 11px;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.fb-ayuda:hover,
.fb-ayuda:focus-visible {
    color: var(--bf-acento, #F0A949);
    border-color: var(--bf-acento, #F0A949);
    outline: none;
}

/* =======================================================================
   LA CARA DE MATILDA: SU ICONO EN TODO EL SISTEMA

   Es el aviso de Matilda en chiquito: el orbe en su hueco redondo y un aro
   fino que dice cómo va. Los mismos colores y el mismo aro de 1,5 px que el
   aviso de arriba, para que se lea igual:

       en reposo   el orbe gira muy despacio, aro verde (lista)
       pensando    el orbe vivo se mueve, aro ámbar
       falló       aro rojo un momento, el orbe agitado
       listo       aro verde un momento, el orbe tranquilo

   La mueve 'OrbeChico.trabajando(boton)' -JS/Globales/Plantillas/orbe_chico.js-
   y NINGÚN módulo anima a Matilda por su cuenta. En reposo la cara es un
   retrato del orbe dibujado una vez por sesión (--fb-matilda-retrato) que
   gira despacio; sólo la que está pensando lleva un orbe vivo.

   Se pone con <span class="fb-matilda" style="--fb-matilda-lado: 18px">, y
   dentro, si se quiere, el icono de líneas de Matilda: sólo asoma cuando el
   navegador no puede dibujar el orbe.
   ======================================================================= */
.fb-matilda {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    width: var(--fb-matilda-lado, 18px);
    height: var(--fb-matilda-lado, 18px);
    border-radius: 50%;
    vertical-align: middle;
    pointer-events: none;
}

/* EN REPOSO RESPIRA, NO SE CONGELA. El retrato va en su propia capa y gira
   muy despacio -una vuelta cada 24 s-: se nota viva sin pedirle nada a la
   tarjeta gráfica, que el orbe vivo se reserva para cuando piensa. Es un
   giro sobre sí misma, así que no empuja ni mueve nada de alrededor. */
.fb-matilda::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--fb-matilda-retrato, none) center / contain no-repeat;
    animation: fb-matilda-gira 24s linear infinite;
}

/* El icono de líneas es el respaldo: escondido mientras haya orbe -o
   mientras se está dibujando el retrato, que son décimas-, y a la vista sólo
   si este navegador no puede con WebGL2. */
.fb-matilda > .render-icono { display: none; }
html.fb-matilda-sin-orbe .fb-matilda > .render-icono {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--bf-acento, #F0A949);
}

/* El orbe vivo, encima del retrato y del mismo tamaño exacto. Mientras está
   puesto el retrato se aparta: debajo del halo del vivo se verían dos. */
.fb-matilda-vivo {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    overflow: hidden;
}
.fb-matilda.fb-matilda-en-vivo::before { visibility: hidden; }

/* EL ARO. Va en un ::after por encima del orbe -si fuera un borde, el orbe
   vivo lo taparía- y en 'box-shadow' y no en 'border' por lo mismo que en el
   aviso: un borde le come píxeles al hueco. */
/* EN REPOSO, ARO VERDE: está lista. Se pidió así el 17-sep-2026 -"el orbe
   debe estar con un contorno verde, y cuando piensa se pone ámbar"-: sin aro,
   la cara se leía como un adorno y no como alguien a quien pedirle algo. El
   verde de 'listo' y el de reposo son el mismo a propósito: al terminar bien
   vuelve a estar lista. */
.fb-matilda::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1.5px #43e587;
    transition: box-shadow 0.25s ease;
    pointer-events: none;
}
.fb-matilda.fb-matilda-pensando::after { box-shadow: inset 0 0 0 1.5px var(--bf-acento, #F0A949); }
.fb-matilda.fb-matilda-error::after    { box-shadow: inset 0 0 0 1.5px #ff6b5a; }
.fb-matilda.fb-matilda-exito::after    { box-shadow: inset 0 0 0 1.5px #43e587; }

/* Sin orbe vivo, la cara gira: movimiento, nunca parpadeo. */
.fb-matilda.fb-matilda-sin-vivo { animation: fb-matilda-gira 2.4s linear infinite; }

@keyframes fb-matilda-gira {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .fb-matilda.fb-matilda-sin-vivo { animation-duration: 8s; }
    .fb-matilda::before { animation: none; }
}

/* El botón que la lleva. Mientras piensa no se le vuelve a pulsar, y aunque
   su módulo lo deshabilite, la cara no se apaga: es justo lo que hay que ver
   en ese momento. */
.fb-matilda-trabajando { cursor: progress; }
.fb-matilda-trabajando:disabled {
    opacity: 1 !important;
    filter: none !important;          /* el kit agrisa lo deshabilitado */
    cursor: progress !important;
}

/* =======================================================================
   MATILDA DENTRO DE SU CAJA DE TEXTO

   Donde Matilda trabaja sobre un campo, su cara va DENTRO de la caja: abajo a
   la derecha en un texto largo, a la derecha y centrada en uno de una línea.
   Así se sabe sobre qué va a trabajar sin leer nada.

       <div class="fb-matilda-campo">            (o .fb-matilda-campo.en-linea)
           <textarea>…</textarea>
           <button class="fb-matilda-boton"><span class="fb-matilda"></span></button>
       </div>

   EN UN TEXTO LARGO, EL MARCO ES DEL CONTENEDOR Y NO DEL TEXTAREA. Reservarle
   el sitio con relleno DENTRO del textarea no sirve: ese relleno sólo existe
   al final del texto, y en cuanto el texto no cabe y hace scroll, las líneas
   pasan por debajo de la cara -y un clic en ellas la dispara-. Así, el borde,
   el fondo y el foco ámbar son de la caja entera; el textarea va sin marco
   arriba, y Matilda vive en su propia franja de abajo, fuera del scroll.
   ======================================================================= */
.fb-matilda-campo {
    position: relative;
    display: block;
    min-width: 0;
}

.fb-matilda-campo:not(.en-linea) {
    box-sizing: border-box;
    padding-bottom: 36px;                         /* la franja de Matilda */
    background: var(--bf-fondo-input, #0a0a0a);
    border: 1px solid var(--bf-borde-input, #333333);
    border-radius: 6px;
    transition: border-color 0.2s ease;
}
.fb-matilda-campo:not(.en-linea):focus-within { border-color: var(--bf-acento, #F0A949); }

.fb-matilda-campo:not(.en-linea) > textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: none;
    border-radius: 6px 6px 0 0;
    background: transparent;
    box-shadow: none;
    outline: none;
}

/* LA CAJA QUE SE PUEDE ESTIRAR se estira ENTERA, desde su esquina.
   Estirando el textarea, el tirador del navegador quedaba en la esquina del
   texto: a media caja, encima de la franja de Matilda. Así el tirador cae en
   la esquina de verdad, la franja baja con ella y el texto ocupa lo que
   sobre. El alto de partida se le pone a la caja, no al textarea. */
.fb-matilda-campo.estirable {
    display: flex;
    flex-direction: column;
    resize: vertical;
    overflow: hidden;
    min-height: 96px;
}
.fb-matilda-campo.estirable > textarea {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    resize: none;
}

.fb-matilda-campo.en-linea > input { padding-right: 42px; }

/* A 14 px del borde y no pegada: la esquina es del tirador de estirar, y
   así los dos se ven sin tocarse. */
.fb-matilda-boton {
    position: absolute;
    right: 14px;
    bottom: 3px;
    width: 30px;
    height: 30px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
    --fb-matilda-lado: 22px;
}
.fb-matilda-campo.en-linea > .fb-matilda-boton {
    top: 50%;
    bottom: auto;
    right: 6px;
    transform: translateY(-50%);
}
.fb-matilda-boton:hover:not(:disabled) .fb-matilda,
.fb-matilda-boton:focus-visible .fb-matilda { filter: brightness(1.25); }

/* EL MICRÓFONO, JUSTO DEBAJO DE MATILDA Y DE SU MISMO TAMAÑO.
   Cuando el dictado se engancha a una caja de Matilda, su botón deja de ser
   el cuadrito de 28 px pegado al borde: mide lo mismo que el de ella (30) y
   su centro cae en la misma vertical que el orbe. 15 px = 1 de borde + 14
   del botón de Matilda: los dos centros a 30 px del borde derecho. */
.campo-con-voz > .fb-matilda-campo + .franja-dictado { padding-right: 15px; }
.campo-con-voz > .fb-matilda-campo + .franja-dictado .btn-dictado {
    width: 30px;
    height: 30px;
}
.campo-con-voz > .fb-matilda-campo + .franja-dictado .btn-dictado svg {
    width: 17px;
    height: 17px;
}