/* Maya, la IA de ARPAN. El logo es el componente <maya-logo> (src/ui/mayaLogo.js); aquí solo su color y sus botones.
   Fusión lavanda → rosa, más clara en modo oscuro. Cambiar la marca = estas dos líneas. */
:root {
    --maya-a: #9b6cf2;
    --maya-b: #f06fb3;
    --maya-label-bg: rgba(155, 108, 242, .12);
}

.dark-style {
    --maya-a: #c3a2ff;
    --maya-b: #ff9fd0;
    --maya-label-bg: rgba(195, 162, 255, .16);
}

/* Las acciones de Maya son ligas, no botones: sin fondo, sin borde y sin el anillo de Sneat al hacer clic (el logo
   animado se salía del recuadro). Al llegar con teclado (Tab) sí se marca, para no perder dónde está el foco.
   `.maya-link` = la chica junto a la etiqueta de un campo en inglés; `.maya-link-lg` = la de una barra de editor. */
.maya-link {
    background: none;
    border: 0;
    padding: 0;
    box-shadow: none;
    cursor: pointer;
    color: var(--maya-a);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    text-transform: none;
    letter-spacing: 0;
    font-size: .8125rem;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    vertical-align: middle;
    overflow: visible;
}

.maya-link-lg {
    font-size: .9375rem;
    gap: .4rem;
}

.maya-link:hover {
    color: var(--maya-b);
}

.maya-link:focus,
.maya-link:active {
    outline: 0;
    box-shadow: none;
}

.maya-link:focus-visible {
    outline: 2px solid var(--maya-a);
    outline-offset: 4px;
    border-radius: .375rem;
}

.maya-link:disabled {
    opacity: .7;
    cursor: progress;
}

/* El texto en degradado solo en títulos grandes */
.maya-gradient-text {
    background: linear-gradient(135deg, var(--maya-a), var(--maya-b));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}