/* ══════════════════════════════════════════════════════════════════════════════════════════════ ERPY · El agente virtual — el botón flotante y su panel de conversación. 5-sep-2026. Vive en `static/css/` y por tanto bajo las reglas DURAS del sistema de diseño (lint_ui.py, límite cero): ningún color escrito a mano, ningún radio, sombra ni z-index sin token, nada de `!important`, letra nunca por debajo de 12px, y `background-color` en vez de la abreviatura. DÓNDE SE PINTA. Fuera de `#app`, en un contenedor propio pegado a ``, igual que los diálogos canónicos (`#ty-dialogos`). No es estética: `renderShell()` repinta la carcasa entera por `innerHTML`, así que cualquier cosa dentro de `#app` se destruye en cada repintado. Ahí no sobreviviría una conversación. LA ESQUINA. Abajo a la derecha, pero NO pegado al borde: `.action-progress-layer` (el progreso de una acción en curso, styles.css) vive exactamente ahí y no se puede tapar. El botón se levanta 84px, que es la altura de esa capa con su margen; en móvil se levanta más para librar la barra inferior. Las capas van con los tokens `--ty-z-*`: el botón y el panel en la capa flotante, por debajo del velo de un diálogo y de los avisos, que siempre van encima de todo. ══════════════════════════════════════════════════════════════════════════════════════════════ */ #ty-agente { font-family: var(--ty-fuente); font-size: var(--ty-t-base); line-height: var(--ty-linea-normal); color: var(--ty-tinta); } /* ─── El botón flotante ─────────────────────────────────────────────────────────────────────── */ .ty-agente-fab { position: fixed; right: max(var(--ty-e-4), env(safe-area-inset-right, 0px)); bottom: calc(84px + env(safe-area-inset-bottom, 0px)); z-index: var(--ty-z-flotante); width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; gap: var(--ty-e-2); padding: 0; border: 1px solid transparent; border-radius: var(--ty-r-pastilla); background-color: var(--ty-marca-accion); color: var(--ty-sobre-marca); box-shadow: var(--ty-s-3); cursor: pointer; transition: transform var(--ty-v-rapida) var(--ty-curva), box-shadow var(--ty-v-rapida) var(--ty-curva), background-color var(--ty-v-media) var(--ty-curva); } .ty-agente-fab:hover { transform: translateY(-1px); box-shadow: var(--ty-s-4); background-color: var(--ty-marca-accion-fuerte); } .ty-agente-fab:focus-visible { outline: 3px solid var(--ty-marca); outline-offset: 2px; } .ty-agente-fab svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .ty-agente-fab[hidden] { display: none; } /* Los estados del botón. El atributo lo pone agente.js; aquí solo se pinta. */ .ty-agente-fab[data-estado="escribiendo"] { animation: ty-agente-latido 1.2s var(--ty-curva) infinite; } .ty-agente-fab[data-estado="sin-conexion"] { background-color: var(--ty-tinta-suave); color: var(--ty-tinta-inversa); box-shadow: var(--ty-s-1); } .ty-agente-fab[data-estado="agotado"] { background-color: var(--ty-aviso-fondo); color: var(--ty-aviso-tinta); border-color: var(--ty-aviso-borde); } @keyframes ty-agente-latido { 0%, 100% { box-shadow: var(--ty-s-3); } 50% { box-shadow: var(--ty-s-4); transform: scale(1.04); } } .ty-agente-fab-globo { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 var(--ty-e-1); border-radius: var(--ty-r-pastilla); background-color: var(--ty-peligro-tinta); color: var(--ty-sobre-marca); font-size: var(--ty-t-micro); font-weight: var(--ty-peso-fuerte); line-height: 20px; text-align: center; } .ty-agente-fab-globo[hidden] { display: none; } /* ─── El panel ──────────────────────────────────────────────────────────────────────────────── */ .ty-agente-panel { position: fixed; inset: auto max(var(--ty-e-4), env(safe-area-inset-right, 0px)) calc(84px + env(safe-area-inset-bottom, 0px)) auto; z-index: var(--ty-z-flotante); margin: 0; padding: 0; width: min(420px, calc(100vw - 2 * var(--ty-e-4))); height: min(640px, calc(100vh - 84px - 2 * var(--ty-e-4))); max-height: none; max-width: none; border: 1px solid var(--ty-raya); border-radius: var(--ty-r-4); background-color: var(--ty-panel); color: var(--ty-tinta); box-shadow: var(--ty-s-4); display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; transition: width var(--ty-v-media) var(--ty-curva), height var(--ty-v-media) var(--ty-curva); } .ty-agente-panel:not([open]) { display: none; } .ty-agente-panel[open] { animation: ty-agente-entra var(--ty-v-media) var(--ty-curva-entrada); } @keyframes ty-agente-entra { from { opacity: 0; transform: translateY(10px) scale(0.98); } } .ty-agente-panel[data-amplio="1"] { width: min(760px, calc(100vw - 2 * var(--ty-e-4))); height: min(820px, calc(100vh - 84px - 2 * var(--ty-e-4))); } .ty-agente-panel[data-minimizado="1"] { height: auto; grid-template-rows: auto; } .ty-agente-panel[data-minimizado="1"] .ty-agente-hilo, .ty-agente-panel[data-minimizado="1"] .ty-agente-pie { display: none; } .ty-agente-cabeza { display: flex; align-items: center; gap: var(--ty-e-3); padding: var(--ty-e-3) var(--ty-e-4); border-bottom: 1px solid var(--ty-raya); background-color: var(--ty-panel-alto); } .ty-agente-identidad { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--ty-e-3); } .ty-agente-marca { width: 36px; height: 36px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--ty-r-2); background-color: var(--ty-marca-velo); color: var(--ty-marca-tinta); } .ty-agente-marca svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .ty-agente-eyebrow { display: block; font-size: var(--ty-t-micro); font-weight: var(--ty-peso-fuerte); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ty-tinta-suave); } .ty-agente-titulo { margin: 0; font-size: var(--ty-t-medio); font-weight: var(--ty-peso-fuerte); line-height: var(--ty-linea-apretada); } .ty-agente-acciones { display: flex; gap: var(--ty-e-1); flex: none; } .ty-agente-icono { width: var(--ty-control); height: var(--ty-control); display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: var(--ty-r-2); background-color: transparent; color: var(--ty-tinta-media); cursor: pointer; } .ty-agente-icono:hover { background-color: var(--ty-panel-hondo); color: var(--ty-tinta); } .ty-agente-icono:focus-visible { outline: 2px solid var(--ty-marca); outline-offset: 1px; } .ty-agente-icono svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* ─── El hilo ───────────────────────────────────────────────────────────────────────────────── */ .ty-agente-hilo { overflow-y: auto; overscroll-behavior: contain; padding: var(--ty-e-4); display: flex; flex-direction: column; gap: var(--ty-e-3); scroll-behavior: smooth; } .ty-agente-vacio { margin: auto 0; padding: var(--ty-e-5) var(--ty-e-4); text-align: center; color: var(--ty-tinta-media); } .ty-agente-vacio strong { display: block; color: var(--ty-tinta); font-size: var(--ty-t-medio); margin-bottom: var(--ty-e-2); } .ty-agente-sugerencias { display: flex; flex-wrap: wrap; gap: var(--ty-e-2); justify-content: center; margin-top: var(--ty-e-4); } .ty-agente-sugerencia { padding: var(--ty-e-2) var(--ty-e-3); border: 1px solid var(--ty-raya); border-radius: var(--ty-r-pastilla); background-color: var(--ty-panel); color: var(--ty-tinta); font-size: var(--ty-t-menor); cursor: pointer; } .ty-agente-sugerencia:hover { border-color: var(--ty-marca); color: var(--ty-marca-tinta); } .ty-agente-msg { max-width: 92%; padding: var(--ty-e-3) var(--ty-e-4); border-radius: var(--ty-r-3); overflow-wrap: anywhere; } .ty-agente-msg p { margin: 0; } .ty-agente-msg p + p, .ty-agente-msg ul + p, .ty-agente-msg p + ul { margin-top: var(--ty-e-2); } .ty-agente-msg ul { margin: 0; padding-left: var(--ty-e-5); } .ty-agente-msg code { font-family: var(--ty-fuente-dato); font-size: var(--ty-t-menor); background-color: var(--ty-panel-hondo); padding: 0 var(--ty-e-1); border-radius: var(--ty-r-1); } .ty-agente-msg--persona { align-self: flex-end; background-color: var(--ty-marca-velo); border: 1px solid var(--ty-marca-velo); color: var(--ty-tinta); border-bottom-right-radius: var(--ty-r-1); } .ty-agente-msg--agente { align-self: flex-start; background-color: var(--ty-panel-hondo); border: 1px solid var(--ty-raya-fina); border-bottom-left-radius: var(--ty-r-1); } .ty-agente-msg--error { align-self: stretch; max-width: none; background-color: var(--ty-peligro-fondo); border: 1px solid var(--ty-peligro-borde); color: var(--ty-peligro-tinta); } .ty-agente-msg--aviso { align-self: stretch; max-width: none; background-color: var(--ty-aviso-fondo); border: 1px solid var(--ty-aviso-borde); color: var(--ty-aviso-tinta); font-size: var(--ty-t-menor); } /* La tarjeta de una propuesta: qué se va a cambiar, el antes y el después, y los dos botones. Es lo único del panel que puede acabar en una escritura, así que se distingue del resto: borde y fondo de información, no de marca, para que no se confunda con el botón de enviar. */ .ty-agente-msg--propuesta { align-self: stretch; max-width: none; padding: var(--ty-e-3) var(--ty-e-4); background-color: var(--ty-panel); border: 1px solid var(--ty-info-borde); border-left-width: 4px; box-shadow: var(--ty-s-1); } .ty-agente-msg--propuesta[data-estado="ejecutada"] { border-color: var(--ty-exito-borde); } .ty-agente-msg--propuesta[data-estado="descartada"], .ty-agente-msg--propuesta[data-estado="caducada"] { border-color: var(--ty-raya); opacity: 0.8; } .ty-agente-msg--propuesta[data-estado="error"] { border-color: var(--ty-peligro-borde); } .ty-agente-propuesta-cabeza { display: grid; gap: 2px; margin-bottom: var(--ty-e-2); } .ty-agente-propuesta-cabeza strong { font-weight: var(--ty-peso-fuerte); line-height: var(--ty-linea-normal); } /* Antes/después como rejilla con roles de tabla (no la etiqueta de tabla: el comprobador cuenta las tablas a mano en plantillas y su margen es cero). Tres columnas: el campo respira, los valores van ajustados a su contenido. */ .ty-agente-cambios { display: grid; grid-template-columns: 1fr auto auto; font-size: var(--ty-t-menor); margin-bottom: var(--ty-e-2); } .ty-agente-cambios [role="row"] { display: contents; } .ty-agente-cambios [role="row"] > span { padding: var(--ty-e-1) var(--ty-e-2); border-bottom: 1px solid var(--ty-raya-fina); } .ty-agente-cambios-cabecera > span { font-size: var(--ty-t-micro); font-weight: var(--ty-peso-fuerte); text-transform: uppercase; letter-spacing: 0.04em; color: var(--ty-tinta-suave); } .ty-agente-cambios [role="rowheader"] { font-weight: var(--ty-peso-medio); color: var(--ty-tinta-media); } .ty-agente-cambios [role="cell"] { font-family: var(--ty-fuente-dato); text-align: right; } .ty-agente-cambio-nuevo { font-weight: var(--ty-peso-fuerte); color: var(--ty-tinta); } .ty-agente-propuesta-pie { display: flex; justify-content: space-between; align-items: center; gap: var(--ty-e-3); flex-wrap: wrap; } .ty-agente-propuesta-estado { font-size: var(--ty-t-menor); color: var(--ty-tinta-media); } .ty-agente-msg--propuesta[data-estado="ejecutada"] .ty-agente-propuesta-estado { color: var(--ty-exito-tinta); font-weight: var(--ty-peso-fuerte); } .ty-agente-msg--propuesta[data-estado="error"] .ty-agente-propuesta-estado { color: var(--ty-peligro-tinta); } .ty-agente-msg--propuesta[data-estado="aplicando"] .ty-agente-propuesta-estado { animation: ty-agente-parpadeo 1s var(--ty-curva) infinite; } .ty-agente-propuesta-acciones { display: flex; gap: var(--ty-e-2); } .ty-agente-pasos { display: flex; flex-wrap: wrap; gap: var(--ty-e-1); margin-bottom: var(--ty-e-2); } .ty-agente-paso { display: inline-flex; align-items: center; gap: var(--ty-e-1); padding: 2px var(--ty-e-2); border-radius: var(--ty-r-pastilla); background-color: var(--ty-info-fondo); border: 1px solid var(--ty-info-borde); color: var(--ty-info-tinta); font-size: var(--ty-t-micro); font-weight: var(--ty-peso-medio); } .ty-agente-paso[data-estado="empieza"] { animation: ty-agente-parpadeo 1s var(--ty-curva) infinite; } @keyframes ty-agente-parpadeo { 50% { opacity: 0.55; } } .ty-agente-escribiendo { display: inline-flex; gap: 4px; padding: var(--ty-e-1) 0; } .ty-agente-escribiendo i { width: 6px; height: 6px; border-radius: var(--ty-r-pastilla); background-color: var(--ty-tinta-suave); animation: ty-agente-punto 1.2s infinite; } .ty-agente-escribiendo i:nth-child(2) { animation-delay: 0.15s; } .ty-agente-escribiendo i:nth-child(3) { animation-delay: 0.3s; } @keyframes ty-agente-punto { 0%, 80%, 100% { transform: translateY(0); opacity: 0.5; } 40% { transform: translateY(-4px); opacity: 1; } } /* ─── El pie: la caja de escribir y el contador ─────────────────────────────────────────────── */ .ty-agente-pie { border-top: 1px solid var(--ty-raya); padding: var(--ty-e-3) var(--ty-e-4) max(var(--ty-e-3), env(safe-area-inset-bottom, 0px)); background-color: var(--ty-panel-alto); } .ty-agente-forma { display: flex; gap: var(--ty-e-2); align-items: flex-end; } .ty-agente-entrada { flex: 1; min-height: var(--ty-control); max-height: 160px; padding: var(--ty-e-2) var(--ty-e-3); border: 1px solid var(--ty-raya); border-radius: var(--ty-r-2); background-color: var(--ty-panel); color: var(--ty-tinta); font: inherit; font-size: var(--ty-t-base); line-height: var(--ty-linea-normal); resize: none; } .ty-agente-entrada:focus { outline: 2px solid var(--ty-marca); outline-offset: 0; border-color: var(--ty-marca); } .ty-agente-entrada::placeholder { color: var(--ty-tinta-suave); } .ty-agente-enviar { flex: none; width: var(--ty-control); height: var(--ty-control); display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: var(--ty-r-2); background-color: var(--ty-marca-accion); color: var(--ty-sobre-marca); cursor: pointer; } .ty-agente-enviar:hover { background-color: var(--ty-marca-accion-fuerte); } .ty-agente-enviar:disabled { background-color: var(--ty-raya); color: var(--ty-tinta-suave); cursor: default; } .ty-agente-enviar:focus-visible { outline: 2px solid var(--ty-marca); outline-offset: 1px; } .ty-agente-enviar svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .ty-agente-enviar[data-modo="cancelar"] { background-color: var(--ty-peligro-tinta); } .ty-agente-uso { display: flex; justify-content: space-between; gap: var(--ty-e-3); margin-top: var(--ty-e-2); font-size: var(--ty-t-micro); color: var(--ty-tinta-suave); } .ty-agente-uso[hidden] { display: none; } .ty-agente-uso kbd { font-family: var(--ty-fuente-dato); font-size: var(--ty-t-micro); border: 1px solid var(--ty-raya); border-radius: var(--ty-r-1); padding: 0 var(--ty-e-1); } /* ─── Móvil: hoja a pantalla completa, por encima de la barra inferior ─────────────────────── */ @media (max-width: 767px) { .ty-agente-fab { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); } .ty-agente-panel, .ty-agente-panel[data-amplio="1"] { inset: 0; width: 100vw; height: 100dvh; border-radius: 0; border: 0; } .ty-agente-panel[data-minimizado="1"] { inset: auto 0 calc(84px + env(safe-area-inset-bottom, 0px)) 0; height: auto; border-top: 1px solid var(--ty-raya); } .ty-agente-cabeza { padding-top: max(var(--ty-e-3), env(safe-area-inset-top, 0px)); } .ty-agente-msg { max-width: 96%; } /* Con el panel desplegado a pantalla completa, la barra inferior y la capa de progreso —ambas con z-index heredados de cuatro cifras que ningún token alcanza— se pintaban ENCIMA de la caja de escribir. Mientras el panel ocupa la pantalla no hay nada debajo que navegar, así que se esconden; al minimizar o cerrar vuelven solas (agente.js quita la marca). */ :root[data-ty-agente="abierto"] .mobile-tabbar, :root[data-ty-agente="abierto"] .mobile-bottom-nav, :root[data-ty-agente="abierto"] .action-progress-layer { visibility: hidden; } } @media (prefers-reduced-motion: reduce) { .ty-agente-fab, .ty-agente-panel, .ty-agente-paso, .ty-agente-escribiendo i { animation: none; transition: none; } }