/* =====================================================================
   Lo que necesita la interfaz de agentes y el design system no trae.

   Vive acá y no en design-system.css porque ese archivo es una copia sin
   cambios del prototipo (ver Utilidades/diseno-backoffice). Y vive en la
   aplicación y no en Design.UI porque hoy el editor de grafo lo usa una sola:
   el día que otra lo necesite, se muda.
   ===================================================================== */

/* ============ COMPOSICIONES DE PÁGINA ============ */

/* Una nota al margen: el porqué de algo, al lado de la cosa. */
.note { border-left: 3px solid var(--palette-primary); background: var(--palette-background); padding: 10px 14px; margin-bottom: 16px; font-size: 13px; color: var(--palette-text-secondary) }
.note b { color: var(--palette-text-primary) }

/* Página a dos columnas: lo que se trabaja a la izquierda, lo corto a la derecha. */
.cols { display: grid; grid-template-columns: 1fr 380px; gap: 20px; align-items: start }
@media (max-width: 1200px) { .cols { grid-template-columns: 1fr } }

.stats { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px }

/* Avance de una ejecución. */
.bar { height: 6px; background: var(--palette-divider); overflow: hidden }
.bar > i { display: block; height: 100%; background: var(--palette-primary) }

/* ============ DIFF ENTRE VERSIONES ============ */
.diff { font-family: ui-monospace, monospace; font-size: 12px; line-height: 1.6; background: var(--palette-surface); border: 1px solid var(--palette-divider); padding: 12px 0; overflow-x: auto }
.diff div { padding: 0 14px; white-space: pre }
.diff .add { background: rgba(31, 122, 51, .12) }
.diff .del { background: rgba(179, 38, 30, .12) }

/* Sin comparar: el documento tal cual, sin marcas ni prefijos, para leerlo y copiarlo. */
.diff__plain { margin: 0; padding: 0 14px; font: inherit; white-space: pre; }

/* ============ TRANSCRIPCIÓN DE UNA CONVERSACIÓN ============ */
.chat { display: flex; flex-direction: column; gap: 10px; padding: 16px }
/* Los saltos de linea del agente se respetan. El modelo contesta con parrafos y a veces con
   viñetas, y HTML los aplasta en un solo bloque: se leia peor aca que en el WhatsApp del cliente,
   que es justo lo contrario de lo que sirve una transcripcion. Se muestra tal cual salio, no se
   interpreta como markdown: la mensajeria tampoco lo interpreta. */
.msg { max-width: 78%; padding: 8px 12px; font-size: 13px; border: 1px solid var(--palette-divider); white-space: pre-wrap; overflow-wrap: anywhere }
.msg--them { align-self: flex-start; background: var(--palette-background) }
.msg--us { align-self: flex-end; background: var(--palette-surface); border-color: var(--palette-text-primary) }
.msg__who { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--palette-text-secondary); margin-bottom: 3px }

/* ============ EDITOR DE GRAFO ============ */
.gr { display: grid; grid-template-columns: 1fr 340px; height: calc(100vh - 260px); min-height: 520px; border: 1px solid var(--palette-text-primary); background: var(--palette-surface) }
/* Con el inspector plegado el lienzo se queda con todo el ancho. */
.gr--folded { grid-template-columns: 1fr 40px }
@media (max-width: 1000px) { .gr, .gr--folded { grid-template-columns: 1fr } .gr__side { display: none } }

/* --- barra superior del editor */
.gr-bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--palette-text-primary); border-bottom: none; background: var(--palette-surface); flex-wrap: wrap }
.gr-bar__grow { flex: 1 }
.gr-bar__save { font-size: 12px; color: var(--palette-text-secondary); display: inline-flex; align-items: center; gap: 5px }

/* --- el lienzo */
.gr__canvas { position: relative; overflow: hidden; background-color: var(--palette-background);
    background-image: radial-gradient(var(--palette-divider) 1px, transparent 1px);
    background-size: 18px 18px }
.gr-plane { position: relative; width: 1120px; height: 560px; transform-origin: 0 0; transition: transform .12s ease-out }
.gr-edges { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible }
.gr-edges path { fill: none; stroke: var(--palette-text-secondary); stroke-width: 2; pointer-events: stroke; cursor: pointer }
.gr-edges path.sel { stroke: var(--palette-primary); stroke-width: 3 }
.gr-edges path.ghost { stroke: var(--palette-primary); stroke-dasharray: 5 4 }

/* Las que vuelven a una columna anterior van por su carril y se marcan: son las que hacen que un
   recorrido sea un ciclo, y verlas distintas es la mitad de entenderlo. */
.gr-edges path.back { stroke: var(--palette-primary); stroke-dasharray: 6 4; opacity: .75 }
.gr-edges path.back.sel { opacity: 1 }
.gr-label--back { border-style: dashed; border-color: var(--palette-primary) }
.gr-edges text { font-family: Archivo, sans-serif; font-size: 11px; fill: var(--palette-text-secondary) }

/* --- cómo se agrega un nodo, dicho en el propio lienzo */
.gr-hint { position: absolute; left: 12px; top: 12px; display: flex; align-items: center; gap: 8px; background: var(--palette-surface); border: 1px dashed var(--palette-text-secondary); padding: 6px 10px; font-size: 12px; color: var(--palette-text-secondary); z-index: 2 }
.gr-hint .msr { font-size: 16px }
.gr-hint b { color: var(--palette-text-primary) }

/* --- lo que dice cada flecha: su orden y su condicion */
/* Se ubica por su centro y no por su esquina: el punto que se calcula es el medio del pasillo, y
   colgarla de la esquina la corría media etiqueta hacia la caja de la derecha. */
.gr-label { position: absolute; transform: translate(-50%, -50%); max-width: 190px; display: inline-flex; align-items: center; gap: 5px; padding: 2px 6px; border: 1px solid var(--palette-divider); background: var(--palette-surface); font: inherit; font-size: 11px; color: var(--palette-text-secondary); cursor: pointer; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; z-index: 1 }
.gr-label:hover { border-color: var(--palette-text-secondary); color: var(--palette-text-primary) }
.gr-label--sel { border-color: var(--palette-primary); color: var(--palette-primary) }
.gr-label__n { font-weight: 600; color: var(--palette-text-primary) }
.gr-label--sel .gr-label__n { color: var(--palette-primary) }

/* --- una caja del grafo */
.nd { position: absolute; width: 240px; background: var(--palette-surface); border: 1px solid var(--palette-text-primary); box-shadow: var(--elevation-1); cursor: grab }
.nd--sel { outline: 2px solid var(--palette-primary); outline-offset: 2px }
.nd--start { border-top: 4px solid var(--palette-primary) }
.nd--end { border-top: 4px solid var(--palette-success) }
/* La caja fantasma es la que se está creando al soltar una conexión. */
.nd--ghost { border: 1px dashed var(--palette-primary); box-shadow: none; background: var(--tint-hover); display: flex; align-items: center; justify-content: center; height: 96px; color: var(--palette-primary); font-size: 13px; gap: 6px }
.nd__head { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--palette-divider) }
.nd__name { font-size: 13px; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.nd__body { padding: 8px 10px }
.nd__obj { font-size: 12px; color: var(--palette-text-secondary); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.nd__tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px }
.nd__tag { font-size: 10px; letter-spacing: .04em; text-transform: uppercase; padding: 1px 5px; border: 1px solid var(--palette-divider); color: var(--palette-text-secondary); display: inline-flex; align-items: center; gap: 3px }
.nd__tag .msr { font-size: 12px }
.nd__foot { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-top: 1px dashed var(--palette-divider); font-size: 11px; color: var(--palette-text-secondary) }

/* --- los puntos por donde se conecta */
.nd__port { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--palette-surface); border: 2px solid var(--palette-text-secondary); top: 50%; margin-top: -7px }
.nd__port--in { left: -7px }
.nd__port--out { right: -7px; border-color: var(--palette-primary); cursor: crosshair }
.nd__port--out:hover { background: var(--palette-primary) }

/* --- controles del lienzo */
.gr-tools { position: absolute; left: 12px; bottom: 12px; display: flex; align-items: center; gap: 4px; background: var(--palette-surface); border: 1px solid var(--palette-text-primary); padding: 3px; z-index: 2 }
.gr-zoom { font-size: 12px; display: inline-flex; align-items: center; padding: 0 8px; color: var(--palette-text-secondary); min-width: 52px; justify-content: center }
.gr-mini { position: absolute; right: 12px; bottom: 12px; width: 150px; height: 90px; background: var(--palette-surface); border: 1px solid var(--palette-text-primary); opacity: .95; z-index: 2 }
.gr-mini i { position: absolute; background: var(--palette-text-secondary); display: block }
.gr-mini u { position: absolute; border: 1px solid var(--palette-primary); display: block }

/* --- inspector del nodo, plegable */
.gr__side { border-left: 1px solid var(--palette-divider); overflow-y: auto; padding: 12px }
.gr__side .field { margin-bottom: 12px }

/* La salida del nodo o la flecha hacia la identidad del agente. Va arriba del panel porque es lo
   primero que se busca cuando uno ya vio lo que vino a ver. */
.gr-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px; padding: 4px 8px 4px 4px; border: 1px solid var(--palette-divider); background: none; font: inherit; font-size: 12px; color: var(--palette-text-secondary); cursor: pointer }
.gr-back:hover { border-color: var(--palette-text-primary); color: var(--palette-text-primary) }
.gr__side--folded { padding: 0; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 8px }
/* Plegado deja el nombre del nodo de canto, para no perder de vista cuál está abierto. */
.gr__side--folded .fold-name { writing-mode: vertical-rl; font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--palette-text-secondary) }
.gr__side--folded > *:not(.fold-btn):not(.fold-name) { display: none }

/* --- solo lectura, para una versión publicada */
.gr--ro .nd { cursor: default }
.gr--ro .nd__port { border-color: var(--palette-divider); cursor: default }
.ro-banner { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--tint-hover); border: 1px solid var(--palette-text-primary); border-bottom: none; font-size: 13px }

/* ============ AUDITORÍA ============ */
/* Una línea de tiempo por turno. El riel de la izquierda es lo que deja seguir de un evento al que
   lo causó sin perder de vista que todos pasaron dentro del mismo turno. */

.tr { border: 1px solid var(--palette-text-primary); background: var(--palette-surface); margin-bottom: 16px }
.tr__head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--palette-divider); flex-wrap: wrap }
.tr__n { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase }
.tr__id { font-family: ui-monospace, monospace; font-size: 11px; color: var(--palette-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0 }
.tr__grow { flex: 1; min-width: 0 }

.ev { display: grid; grid-template-columns: 26px 1fr; column-gap: 10px; padding: 0 14px; position: relative }
.ev__rail { position: relative; display: flex; justify-content: center }
.ev__rail::before { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: var(--palette-divider) }
.tr__body > .ev:first-child .ev__rail::before { top: 22px }
.tr__body > .ev:last-child .ev__rail::before { bottom: calc(100% - 22px) }
.ev__dot { position: relative; margin-top: 10px; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; background: var(--palette-surface); border: 1px solid var(--palette-divider); color: var(--palette-text-secondary) }
.ev__dot .msr { font-size: 14px }
.ev--good .ev__dot { border-color: var(--palette-success); color: var(--palette-success) }
.ev--bad .ev__dot { border-color: var(--palette-error); color: var(--palette-error) }
.ev--att .ev__dot { border-color: var(--palette-primary); color: var(--palette-primary) }

.ev__body { min-width: 0; padding: 8px 0 10px }
.ev__line { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; cursor: pointer; list-style: none }
.ev__line::-webkit-details-marker { display: none }
.ev__t { font-size: 13px; font-weight: 600 }
.ev__s { font-size: 12px; color: var(--palette-text-secondary); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ev__at { margin-left: auto; font-size: 11px; color: var(--palette-text-secondary); font-variant-numeric: tabular-nums }
.ev__open { border-top: 1px dashed var(--palette-divider); margin-top: 8px; padding-top: 8px }

.ev__kv { display: grid; grid-template-columns: 150px 1fr; gap: 4px 12px; font-size: 12px; margin: 0 }
.ev__kv dt { color: var(--palette-text-secondary) }
.ev__kv dd { margin: 0; word-break: break-word }
.ev__blk { margin-top: 10px }
.ev__blk > b { display: flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--palette-text-secondary); margin-bottom: 4px }
/* Crudo es crudo: una linea larga se parte para poder leerla, pero el texto no se toca. */
.ev__blk pre { word-break: break-word }
.ev__blk pre { font-family: ui-monospace, monospace; font-size: 12px; line-height: 1.5; background: var(--palette-background); border: 1px solid var(--palette-divider); padding: 8px 10px; margin: 0; max-height: 260px; overflow: auto; white-space: pre-wrap; word-break: break-word }
.ev__raw { margin-top: 10px; font-size: 12px; color: var(--palette-text-secondary) }
.ev__raw > summary { cursor: pointer }

/* ============ PROBAR A MANO ============ */
/* El chat reusa .chat y .msg de la transcripción: dos pantallas que muestran una conversación
   tienen que leerse igual, y el lado derecho es siempre el nuestro. */

.msg--dead { opacity: .55; border-style: dashed }

/* La conversacion crece mientras se escribe: hace scroll ella y no la pagina, para que el campo
   donde se escribe no se vaya abajo del todo. */
.chat--live { max-height: calc(100vh - 420px); min-height: 260px; overflow-y: auto }

/* Un salto de nodo no es algo que alguien dijo, así que no es un globo. */
.jump { align-self: center; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px dashed var(--palette-divider); font-size: 11px; color: var(--palette-text-primary); text-align: center; flex-wrap: wrap; justify-content: center }
.jump .msr { color: var(--palette-primary) }

.say { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--palette-divider); align-items: center }
.say__box { flex: 1; min-width: 0 }
.say__err { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--palette-error); background: rgba(179, 38, 30, .08); font-size: 13px; color: var(--palette-error); flex-wrap: wrap }
.say__err-grow { flex: 1; min-width: 140px }

/* ============ CREDENCIALES ============ */
/* Una llave no tiene espacios ni guiones donde cortarse, asi que hay que dejarla partir a la fuerza:
   si no, estira su caja hasta pasarse del ancho del dialogo. */

.secret { display: flex; align-items: flex-start; gap: 8px; border: 1px solid var(--palette-divider); background: var(--palette-background); padding: 8px 10px }
.secret__value { flex: 1; min-width: 0; font-family: ui-monospace, monospace; font-size: 12px; line-height: 1.5; word-break: break-all; max-height: 96px; overflow-y: auto }
.secret__acts { display: flex; align-items: center; gap: 4px; flex: none }

/* ============ MÓVIL ============ */
@media (max-width: 900px) {
    /* El índice de la maqueta pasa a ser una barra arriba. */

    .cols { grid-template-columns: 1fr }

    /* El grafo no se edita con el dedo, pero sí se mira: el lienzo conserva su altura y el
       inspector baja debajo, en vez de desaparecer y llevarse los campos. */
    .gr, .gr--folded { display: block; height: auto }
    .gr__canvas { height: 60vh; min-height: 320px }
    .gr__side { border-left: none; border-top: 1px solid var(--palette-text-primary) }
    .gr__side--folded { display: block; padding: 12px }
    .gr__side--folded > *:not(.fold-btn):not(.fold-name) { display: revert }
    .fold-name { display: none }
    .gr-mini { display: none }
    .gr-hint { position: static; margin: 8px; border-style: solid }

    /* En pantalla angosta la grilla de dos columnas deja los valores en una tira de tres letras. */
    .ev__kv { grid-template-columns: 1fr; gap: 0 }
    .ev__kv dt { margin-top: 6px }
    .ev__at { margin-left: 0; width: 100% }

    .chat .msg { max-width: 92% }

    /* Con el teclado abierto no entra el botón al lado del campo. */
    .say { flex-wrap: wrap }
    .say__box { flex-basis: 100% }
    .diff { font-size: 11px }
}