/* Panel del asistente.
   Se monta siempre y se muestra con la clase --abierta, nunca creando y
   destruyendo el nodo: así la conversación sobrevive a cerrar y abrir. */

.asistente-capa {
    position: fixed;
    inset: 0;
    z-index: 1080;
    pointer-events: none;
    visibility: hidden;
}

.asistente-capa--abierta {
    visibility: visible;
}

.asistente-panel {
    position: absolute;
    top: calc(var(--uc-topbar-height, 48px) + 8px);
    right: 16px;
    bottom: 16px;
    width: 400px;
    max-width: calc(100vw - 32px);
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--uc-border, #e2e8f0);
    border-radius: var(--uc-radius, .5rem);
    box-shadow: 0 12px 32px rgba(15, 23, 42, .18);
    pointer-events: auto;
    /* Fuera de la vista mientras está cerrado; no se desmonta. */
    transform: translateX(calc(100% + 24px));
    opacity: 0;
    transition: transform .18s ease, opacity .18s ease;
}

.asistente-capa--abierta .asistente-panel {
    transform: none;
    opacity: 1;
}

/* Encabezado ------------------------------------------------------------- */

.asistente-encabezado {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem;
    padding: .65rem .85rem;
    border-bottom: 1px solid var(--uc-border, #e2e8f0);
    flex: 0 0 auto;
}

.asistente-encabezado-texto {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.asistente-titulo {
    font-weight: 600;
    font-size: .92rem;
    line-height: 1.2;
}

.asistente-ubicacion {
    font-size: .74rem;
    color: var(--uc-text-secondary, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.asistente-modo {
    display: inline-block;
    margin-left: .35rem;
    padding: 0 .35rem;
    border: 1px solid var(--uc-border, #e2e8f0);
    border-radius: .65rem;
    font-size: .66rem;
    text-transform: lowercase;
}

.asistente-cerrar {
    flex: 0 0 auto;
    background: none;
    border: none;
    font-size: 1.35rem;
    line-height: 1;
    padding: 0 .2rem;
    cursor: pointer;
    color: var(--uc-text-secondary, #64748b);
}

.asistente-cerrar:hover {
    color: var(--uc-text-primary, #0f172a);
}

/* Cuerpo ----------------------------------------------------------------- */

/* La zona es el marco de referencia del aviso de novedad. El cuerpo no puede
   serlo: es el que se desplaza, y un elemento posicionado dentro se iría con el
   texto en vez de quedarse a la vista.

   `min-height: 0` no es adorno: sin él, un hijo desplazable dentro de un flex
   crece con su contenido en vez de desplazarse, y el panel entero se estira. */
.asistente-zona {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
}

.asistente-cuerpo {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: .75rem .85rem;
    font-size: .84rem;
}

.asistente-novedad {
    position: absolute;
    bottom: .5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    padding: .2rem .7rem;
    font-size: .74rem;
    color: #fff;
    background: var(--uc-primary, #4f46e5);
    border: none;
    border-radius: 1rem;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .25);
    cursor: pointer;
    white-space: nowrap;
}

.asistente-novedad:hover {
    filter: brightness(1.08);
}

.asistente-inicial {
    color: var(--uc-text-secondary, #64748b);
    margin-bottom: .75rem;
}

/* Fila de sugerencias, encima de la caja de pregunta. Antes vivía arriba del
   cuerpo y desaparecía en cuanto había conversación. */

.asistente-sugerencias {
    margin-bottom: .45rem;
}

.asistente-sugerencias-titulo {
    display: flex;
    align-items: center;
    gap: .3rem;
    width: 100%;
    padding: .1rem 0;
    background: none;
    border: none;
    text-align: left;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--uc-text-secondary, #64748b);
    cursor: pointer;
}

.asistente-sugerencias-titulo:hover {
    color: var(--uc-text-primary, #0f172a);
}

.asistente-sugerencias-flecha {
    font-size: .7rem;
    line-height: 1;
}

/* Tope de alto: en una pantalla con diez sugerencias, abrirlas no debe dejar la
   conversación sin sitio. */
.asistente-sugerencias-lista {
    max-height: 168px;
    overflow-y: auto;
    margin-top: .3rem;
}

.asistente-sugerencia {
    display: block;
    width: 100%;
    text-align: left;
    margin-bottom: .35rem;
    padding: .4rem .55rem;
    font-size: .8rem;
    background: #f8fafc;
    border: 1px solid var(--uc-border, #e2e8f0);
    border-radius: .4rem;
    cursor: pointer;
}

.asistente-sugerencia:hover:not(:disabled) {
    background: #eef2ff;
}

.asistente-sugerencia:disabled {
    opacity: .6;
    cursor: default;
}

.asistente-aviso {
    margin-bottom: .6rem;
    padding: .4rem .55rem;
    font-size: .76rem;
    background: #f1f5f9;
    border-radius: .35rem;
    color: var(--uc-text-secondary, #64748b);
}

/* Intercambios ----------------------------------------------------------- */

/* Orden cronológico —lo antiguo arriba, lo nuevo abajo— y forma de chat: la
   pregunta en burbuja a la derecha, la respuesta a la izquierda. Antes eran dos
   párrafos separados por una línea, que con el orden invertido daba una pila de
   bloques donde no se distinguía quién decía qué.

   El árbol DOM no cambia: todo esto es alineación y color. Los nodos siguen
   montados y ocultándose con `style`. */

.asistente-intercambio {
    display: flex;
    flex-direction: column;
    padding: .4rem 0 0;
}

/* Hora del intercambio. Alineada con la pregunta y muy discreta: es un dato de
   apoyo, no algo que haya que leer en cada renglón. */
.asistente-sello {
    align-self: flex-end;
    margin-bottom: .15rem;
    font-size: .66rem;
    color: var(--uc-text-secondary, #64748b);
}

.asistente-pregunta {
    align-self: flex-end;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .15rem;
    max-width: 88%;
    padding: .35rem .6rem;
    background: var(--uc-primary, #4f46e5);
    color: #fff;
    border-radius: .8rem .8rem .2rem .8rem;
    font-weight: 500;
    margin-bottom: .4rem;
}

.asistente-etiqueta {
    flex: 0 0 auto;
    font-size: .66rem;
    font-weight: 400;
    color: rgba(255, 255, 255, .85);
    background: rgba(255, 255, 255, .18);
    border-radius: .65rem;
    padding: 0 .4rem;
}

.asistente-respuesta {
    align-self: flex-start;
    max-width: 94%;
    padding: .45rem .6rem;
    background: #f8fafc;
    border: 1px solid var(--uc-border, #e2e8f0);
    border-radius: .8rem .8rem .8rem .2rem;
    white-space: pre-wrap;
    line-height: 1.45;
}

/* Respuesta con formato ---------------------------------------------------
   Los cuatro tipos de bloque usan los MISMOS elementos y se distinguen por la
   clase; las viñetas y la numeración las pone el CSS. Así el árbol no cambia de
   forma entre renders (ver la regla del árbol DOM estable). */

.asistente-respuesta--formato {
    /* El crudo va con pre-wrap; aquí los renglones ya son nodos propios, y
       dejarlo puesto pintaría la sangría del .razor como espacios. */
    white-space: normal;
}

.asistente-bloque {
    margin-bottom: .5rem;
}

.asistente-bloque:last-child {
    margin-bottom: 0;
}

.asistente-bloque--encabezado {
    font-weight: 600;
}

.asistente-bloque--vinetas,
.asistente-bloque--numerada {
    padding-left: 1.15rem;
}

.asistente-bloque--vinetas .asistente-renglon,
.asistente-bloque--numerada .asistente-renglon {
    margin-bottom: .15rem;
}

.asistente-bloque--vinetas .asistente-renglon::before,
.asistente-bloque--numerada .asistente-renglon::before {
    display: inline-block;
    width: 1.15rem;
    margin-left: -1.15rem;
    color: var(--uc-text-secondary, #64748b);
}

.asistente-bloque--vinetas .asistente-renglon::before {
    content: "•";
}

/* Un contador en vez de escribir el número: si el modelo enumera 1, 2, 2, 4
   —y lo hace— el usuario ve la numeración correcta. */
.asistente-bloque--numerada {
    counter-reset: asistente-paso;
}

.asistente-bloque--numerada .asistente-renglon {
    counter-increment: asistente-paso;
}

.asistente-bloque--numerada .asistente-renglon::before {
    content: counter(asistente-paso) ".";
}

.asistente-tramo--fuerte {
    font-weight: 600;
}

.asistente-tramo--codigo {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .92em;
    background: #eef2ff;
    border-radius: .2rem;
    padding: 0 .2rem;
    /* Un nombre de campo largo no debe ensanchar el panel. */
    overflow-wrap: anywhere;
}

/* Cursor que parpadea mientras la respuesta se está escribiendo. */
.asistente-cursor {
    display: inline-block;
    width: .45rem;
    height: .95em;
    margin-left: .1rem;
    vertical-align: text-bottom;
    background: var(--uc-text-secondary, #64748b);
    animation: asistente-parpadeo 1s steps(2, start) infinite;
}

@keyframes asistente-parpadeo {
    to { visibility: hidden; }
}

.asistente-nota {
    margin-top: .45rem;
    font-size: .74rem;
    color: var(--uc-text-secondary, #64748b);
}

/* Sustituye a la respuesta cuando no hay texto redactado, así que se alinea
   igual que ella: al lado del asistente, no ocupando el ancho del panel. */
.asistente-nota--gris {
    align-self: flex-start;
    max-width: 94%;
    background: #f1f5f9;
    border-radius: .35rem;
    padding: .4rem .55rem;
}

.asistente-fuentes {
    margin-top: .6rem;
}

.asistente-fuentes-titulo {
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--uc-text-secondary, #64748b);
    margin: 0 0 .25rem;
}

.asistente-fuente {
    font-size: .78rem;
    line-height: 1.4;
}

.asistente-fuente-modulo {
    color: var(--uc-text-secondary, #64748b);
    font-size: .72rem;
    margin-left: .3rem;
}

/* Pie -------------------------------------------------------------------- */

.asistente-pie {
    flex: 0 0 auto;
    padding: .6rem .85rem .7rem;
    border-top: 1px solid var(--uc-border, #e2e8f0);
}

.asistente-error {
    margin-bottom: .45rem;
    padding: .4rem .55rem;
    font-size: .76rem;
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: .35rem;
    color: #92400e;
}

.asistente-caja {
    display: flex;
    gap: .4rem;
    /* La caja crece hacia arriba; el botón se queda abajo, a su altura. */
    align-items: flex-end;
}

.asistente-caja input,
.asistente-caja textarea {
    flex: 1 1 auto;
    min-width: 0;
}

/* El alto lo fija el JS según el contenido (asistenteInterop.ajustarAlto).
   Aquí solo queda el aspecto y el tope de seguridad por si el JS no corre. */
.asistente-caja-texto {
    resize: none;
    overflow-y: auto;
    max-height: 132px;
    line-height: 1.35;
}

.asistente-pie-acciones {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-top: .4rem;
}

.asistente-pie-nota {
    font-size: .7rem;
    color: var(--uc-text-secondary, #64748b);
}

.asistente-enlace {
    background: none;
    border: none;
    padding: 0;
    font-size: .74rem;
    color: var(--uc-primary, #4f46e5);
    cursor: pointer;
    white-space: nowrap;
}

.asistente-enlace:disabled {
    opacity: .5;
    cursor: default;
}

/* Borde para ensanchar. El ancho lo pone el JS como estilo en línea sobre el
   panel (asistenteInterop.prepararAncho); aquí solo está la zona que se agarra.

   Ojo: Blazor no pinta ningún `style` en .asistente-panel, y por eso el estilo
   en línea del JS sobrevive a los renders. Si algún día se le añade uno desde el
   .razor, el ancho se perdería en el primer render. */
.asistente-tirador {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -3px;
    width: 8px;
    z-index: 3;
    cursor: ew-resize;
    /* Sin esto, arrastrar sobre el panel se interpreta como desplazarlo en una
       pantalla táctil y el redimensionado nunca llega a empezar. */
    touch-action: none;
}

.asistente-tirador:hover::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 2px;
    width: 3px;
    border-radius: 2px;
    background: var(--uc-primary, #4f46e5);
    opacity: .35;
}

/* En pantallas angostas ocupa todo el ancho. */
@media (max-width: 575.98px) {
    .asistente-panel {
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        /* `!important` porque hay que ganarle al ancho en línea que pudo dejar
           guardado el mismo usuario desde un monitor grande. */
        width: auto !important;
        max-width: none;
        border-radius: 0;
    }

    .asistente-tirador {
        display: none;
    }
}

/* Valoración de una respuesta (sección 34). El bloque está siempre montado y se
   oculta con style, nunca creando y destruyendo nodos. */

/* Fila de acciones de una respuesta: valorar a la izquierda, copiar a la
   derecha. Cada uno se oculta por su cuenta —copiar pide menos que valorar—, y
   el `space-between` deja copiar pegado al borde aunque el otro no esté. */
.asistente-acciones {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-top: .5rem;
}

.asistente-valoracion {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .74rem;
    color: var(--uc-text-secondary, #64748b);
}

.asistente-copiar {
    flex: 0 0 auto;
    margin-left: auto;
    background: none;
    border: 1px solid var(--uc-border, #e2e8f0);
    border-radius: .35rem;
    padding: .05rem .45rem;
    font-size: .74rem;
    line-height: 1.5;
    color: var(--uc-text-secondary, #64748b);
    cursor: pointer;
}

.asistente-copiar:hover {
    background: #f1f5f9;
}

.asistente-valoracion-texto {
    margin-right: .15rem;
}

.asistente-pulgar {
    background: none;
    border: 1px solid var(--uc-border, #e2e8f0);
    border-radius: .35rem;
    padding: .05rem .45rem;
    font-size: .74rem;
    line-height: 1.5;
    cursor: pointer;
    color: var(--uc-text-secondary, #64748b);
}

.asistente-pulgar:hover {
    background: #f1f5f9;
}

.asistente-pulgar--activo {
    background: #dcfce7;
    border-color: #86efac;
    color: #166534;
}

.asistente-pulgar--activo-no {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #991b1b;
}

.asistente-valoracion-gracias {
    margin-left: .15rem;
}

.asistente-comentario {
    display: flex;
    gap: .35rem;
    margin-top: .35rem;
}

.asistente-comentario input {
    flex: 1 1 auto;
    min-width: 0;
}

/* Indicador de uso diario (sección 35). Deliberadamente simple: una barra y una
   palabra, nunca cifras de tokens. */

.asistente-uso {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-top: .4rem;
    font-size: .68rem;
    color: var(--uc-text-secondary, #64748b);
}

.asistente-uso-barra {
    flex: 1 1 auto;
    height: 3px;
    border-radius: 2px;
    background: #e2e8f0;
    overflow: hidden;
}

.asistente-uso-relleno {
    height: 100%;
    background: #94a3b8;
    transition: width .3s ease;
}

.asistente-uso--medio .asistente-uso-relleno { background: #f59e0b; }
.asistente-uso--alto .asistente-uso-relleno { background: #f97316; }
.asistente-uso--agotado .asistente-uso-relleno { background: #dc2626; }
.asistente-uso--agotado { color: #991b1b; }

/* Etiqueta de origen de la respuesta (sección 14). */

.asistente-origen {
    display: inline-block;
    /* En un contenedor flex los hijos se estiran: sin esto la píldora saldría
       del ancho del panel en vez de ajustarse a su texto. */
    align-self: flex-start;
    margin-top: .45rem;
    padding: 0 .4rem;
    border: 1px solid #fde68a;
    background: #fef3c7;
    border-radius: .65rem;
    font-size: .66rem;
    color: #92400e;
}

/* Fuentes oficiales de una respuesta fiscal (secciones 10.2 y 13). */

.asistente-oficiales {
    margin-top: .55rem;
    padding: .45rem .55rem;
    background: #f8fafc;
    border-left: 2px solid #f59e0b;
    border-radius: .25rem;
}

.asistente-oficiales-titulo {
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--uc-text-secondary, #64748b);
    margin: 0 0 .3rem;
}

.asistente-oficial {
    font-size: .76rem;
    line-height: 1.35;
    margin-bottom: .25rem;
}

.asistente-oficial-detalle {
    display: block;
    font-size: .68rem;
    color: var(--uc-text-secondary, #64748b);
}

/* Caracteres que quedan en la caja de pregunta (sección 36). Solo se enseña
   cuando ya queda poco; el nodo está siempre montado y se oculta con style. */
.asistente-restantes {
    margin-top: .25rem;
    text-align: right;
    font-size: .68rem;
    color: var(--uc-text-secondary, #64748b);
}

/* Aviso de acción delicada (sección 18). Ámbar y discreto: la advertencia de
   verdad está en el texto; esto solo evita que pase desapercibida. */
.asistente-delicada {
    margin-top: .4rem;
    padding: .35rem .5rem;
    border-left: 3px solid var(--uc-warning, #d97706);
    background: var(--uc-warning-subtle, #fffbeb);
    border-radius: .2rem;
    font-size: .72rem;
    color: var(--uc-warning-emphasis, #92400e);
}