/* Oficina Bica · oficina LEGO en 3D (WebGL con three.js, Oficina3D.js) con caras flotantes, fichas y cajón en Liquid Glass,
   y chat de Augusto (paneles). Colores LEGO: rojo #c91a09, amarillo #f2cd37, azul #0055bf, verde #4b9f4a,
   verde oscuro #237841, café rojizo #582a12, tostado #e4cd9e, gris #a0a5a9, blanco. */

/* ---------- Página a pantalla completa ---------- */
body.Pantalla { height: 100vh; overflow: hidden; }
body.Pantalla .Encabezado { position: fixed; top: 0; left: 0; right: 0; z-index: 30; }
.Escenario { position: fixed; inset: var(--AltoEncabezado, 58px) 0 0 0; }
.Rotulo2 { font-size: 12px; font-weight: 650; color: var(--Suave); }

/* ---------- Mundo 3D ---------- */
.Mundo {
  position: absolute; inset: 0; overflow: hidden; user-select: none; touch-action: none; cursor: grab;
  background: radial-gradient(ellipse at 50% 0%, #ffffff 0, #e6f0fa 40%, #cfe1f2 100%);
}
/* Oficina 3D (Oficina3D.js): el lienzo WebGL deja ver el degradado de .Mundo; encima, la capa con nombres, globos y letreros */
.Lienzo3D { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.Capa3D { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.Capa3D .DePie { left: 0; top: 0; will-change: transform; }
.Capa3D .NombreLego, .Capa3D .Letrero { pointer-events: auto; }
.Capa3D .Personaje3D .NombreLego { cursor: pointer; }
.Capa3D .Personaje3D.Inactivo .NombreLego { opacity: 0.75; }
.Capa3D .Globo { bottom: calc(100% + 8px); }
.Capa3D .Notificacion { top: -12px; right: -12px; }
.Capa3D.SinWebGL { display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 14px; padding: 24px; pointer-events: auto; overflow: auto; }
.Capa3D.SinWebGL .DePie, .Capa3D.SinWebGL .Erguido { position: static; width: auto; height: auto; }
.Capa3D.SinWebGL .Globo { display: none; }
@media (max-width: 760px) {
  .Capa3D .Letrero { padding: 3px 9px; border-radius: 10px; }
  .Capa3D .Letrero b { font-size: 12px; }
  .Capa3D .Letrero small { font-size: 10px; }
}
/* Luz según la hora (Oficina3D.js): cielo de atardecer y de noche detrás de la oficina */
.Mundo[data-luz="Atardecer"] { background: radial-gradient(ellipse at 50% 0%, #fff4e6 0, #f6d9bf 45%, #e8b996 100%); }
.Mundo[data-luz="Noche"] { background: radial-gradient(ellipse at 50% 0%, #3a4f78 0, #1d2b47 50%, #111a2e 100%); }
/* Widget del tour (Widgets.js + Oficina3D.js): salas conocidas; al completarlo, insignia y lluvia de bloques */
/* Widget de filtros: año y hasta qué mes; recalcula todas las tarjetas de KPI */
.TipoFiltro .WidgetControles { display: grid; gap: 8px; align-content: start; }
.TipoFiltro .Segmentado { flex-wrap: wrap; }
.TipoFiltro .Segmentado button { padding: 4px 9px; font-size: 12px; }
.TipoFiltro .FilaFiltro { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.TipoFiltro select { padding: 5px 8px; border-radius: 10px; border: 1px solid var(--BordeVidrio); background: rgba(255, 255, 255, 0.7); font: inherit; font-size: 12px; color: var(--Tinta); }
.TipoFiltro .FilaFiltro .Boton { padding: 4px 10px; font-size: 12px; }
.TipoTour .WidgetValor small { margin-left: 6px; font-size: 12px; color: var(--Suave); }
.TipoTour .MedidorTour { margin: 6px 0 8px; }
.TipoTour.TamChico .PasosTour { display: none; }
.TipoTour.TamMediano .PasosTour { display: flex; flex-wrap: wrap; gap: 4px; }
.TipoTour.TamMediano .PasosTour li { font-size: 0; gap: 0; }
.TipoTour.TamMediano .PasosTour li::before { width: 24px; height: 24px; }
.PasosTour { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; counter-reset: PasoTour; }
.PasosTour li { counter-increment: PasoTour; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--Tinta); }
.PasosTour li::before { content: counter(PasoTour); flex: none; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center;
  background: rgba(37, 75, 141, 0.1); color: var(--Azul); font-size: 11px; font-weight: 800; }
.PasosTour li.Hecho { color: var(--Suave); }
.PasosTour li.Hecho::before { content: "✓"; background: #1f7a50; color: #fff; }
.MedidorTour { display: block; height: 6px; border-radius: 4px; background: rgba(37, 75, 141, 0.12); overflow: hidden; }
.MedidorTour i { display: block; height: 100%; width: 0; background: #f2cd37; transition: width 0.4s; }
.InsigniaTour { position: absolute; left: 50%; top: 16px; transform: translateX(-50%); z-index: 7; display: flex; gap: 12px; align-items: center;
  padding: 10px 18px 10px 10px; border-radius: 18px; border: 1px solid var(--BordeVidrio); }
.InsigniaTour b { display: block; font-size: 14px; color: var(--Tinta); }
.InsigniaTour small { font-size: 12px; color: var(--Suave); }
.EstrellaTour { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: #f2cd37; color: #582a12; font-weight: 900; box-shadow: 0 3px 0 #c99b0c; }
@media (prefers-reduced-motion: reduce) { .MedidorTour i { transition: none; } }
/* Maullido al tocar un gato */
.Capa3D .Miau { position: absolute; left: 0; top: 0; margin: -30px 0 0 -26px; padding: 3px 10px; border-radius: 999px; background: #fffaf0; color: #7a4e2a;
  font-size: 12px; font-weight: 800; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18); white-space: nowrap; }
.AvisoSinWebGL { flex-basis: 100%; margin: 0; text-align: center; color: var(--Suave); font-size: 13px; }
/* Colores LEGO de las piezas */
.Rojo { --C: #c91a09; } .Amarillo { --C: #f2cd37; } .Azul { --C: #0055bf; } .Verde { --C: #4b9f4a; } .VerdeOscuro { --C: #237841; }
.Cafe { --C: #582a12; } .Tostado { --C: #b5895a; } .Gris { --C: #a0a5a9; } .Blanco { --C: #f4f4f4; } .Negro { --C: #1b2a34; }
.Crema { --C: #f3ead3; } .Arena { --C: #e4cd9e; } .GrisClaro { --C: #c9ced1; } .GrisOscuro { --C: #6c6e68; } .Magenta { --C: #b8327a; } .Turquesa { --C: #069d9f; }

/* Nombres y letreros flotando sobre el mundo 3D */
.DePie { position: absolute; width: 0; height: 0; }
.Erguido { position: absolute; left: -70px; bottom: 0; width: 140px; display: grid; justify-items: center; align-content: end; }
.Letrero { display: grid; justify-items: center; gap: 1px; padding: 5px 14px; border-radius: 12px; cursor: pointer; font: inherit; color: var(--Tinta);
  background: var(--Vidrio); -webkit-backdrop-filter: var(--DesenfoqueVidrio); backdrop-filter: var(--DesenfoqueVidrio); border: 1px solid var(--BordeVidrio); box-shadow: var(--SombraVidrio); white-space: nowrap; }
.Letrero b { font-size: 15px; }
.Letrero small { font-size: 11px; color: var(--Azul); font-weight: 650; }
.Letrero.SinPanel small { color: var(--Suave); }
.Letrero:hover { transform: translateY(-3px); }

/* Personajes */
.Personaje3D { cursor: pointer; }
.Personaje3D.Elegido .NombreLego { background: var(--Azul); color: #fff; }
.NombreLego { position: relative; z-index: 1; margin-top: 2px; padding: 1px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--Tinta); white-space: nowrap;
  background: var(--Vidrio); -webkit-backdrop-filter: var(--DesenfoqueVidrio); backdrop-filter: var(--DesenfoqueVidrio); border: 1px solid var(--BordeVidrio); }
.Notificacion { position: absolute; top: -4px; right: 20%; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center;
  background: #e5262b; color: #fff; font-size: 11px; font-weight: 800; border: 2px solid #fff; box-shadow: 0 3px 8px rgba(229, 38, 43, 0.45); animation: Latido 1.6s ease-in-out infinite; }
.Globo { position: absolute; bottom: 132px; left: 50%; width: 240px; margin-left: -120px; padding: 8px 11px; border-radius: 16px; font-size: 12px; line-height: 1.35; color: var(--Tinta);
  background: var(--VidrioDenso); -webkit-backdrop-filter: var(--DesenfoqueVidrio); backdrop-filter: var(--DesenfoqueVidrio); border: 1px solid var(--BordeVidrio);
  box-shadow: var(--SombraVidrio); animation: Aparecer 0.25s ease-out; }
/* Solo el nombre (primer b) va en su línea; las cifras en negrita del texto siguen en la misma línea */
/* Globos con diseño: cabecera con cara y área, primera oración destacada y un borde que toma el tono de lo que dice */
.Globo { border-left: 4px solid var(--Azul); }
.Globo.TonoAlerta { border-left-color: #c8444a; }
.Globo.TonoBien { border-left-color: #1f7a50; }
.Globo .CabezaGlobo { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; padding-bottom: 5px; border-bottom: 1px solid rgba(37, 75, 141, 0.12); }
.Globo .CabezaGlobo img, .Globo .CabezaGlobo .CaraLego { width: 24px; height: 24px; flex: none; border-radius: 50%; background: rgba(255, 255, 255, 0.75); }
.Globo .CabezaGlobo span { display: grid; line-height: 1.15; }
.Globo .CabezaGlobo b { color: var(--Azul); font-size: 11.5px; }
.Globo .CabezaGlobo small { color: var(--Suave); font-size: 10px; }
.Globo .TextoGlobo { line-height: 1.45; }
/* Que el globo que habla quede sobre los nombres de los demás */
.Capa3D .Personaje3D:has(.Globo:not([hidden])) { z-index: 5; }
.Globo b.Cifra { display: inline; font-size: inherit; margin: 0; }
/* Diálogo con formato (globos, Centro y ficha): cifras en negrita azul (rojas si son negativas), caídas en rojo,
   alzas en verde, la acción propuesta subrayada y la alerta resaltada como con marcador */
:is(.Globo, .Dicho) .Entrada { font-weight: 650; }
:is(.Globo, .Dicho) .Cifra { font-weight: 750; color: #1f4f9a; padding: 0 5px; border-radius: 6px; background: rgba(0, 85, 191, 0.09); white-space: nowrap; }
:is(.Globo, .Dicho) .Cifra.Negativa { color: #c8444a; background: rgba(200, 68, 74, 0.1); }
:is(.Globo, .Dicho) .Malo { font-weight: 650; color: #b03a3e; }
:is(.Globo, .Dicho) .Bueno { font-weight: 650; color: #1f7a50; }
:is(.Globo, .Dicho) u.Accion { text-decoration: none; border-radius: 3px; background: linear-gradient(transparent 58%, rgba(0, 137, 190, 0.2) 58%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
:is(.Globo, .Dicho) u.Accion::before { content: "→ "; color: #0089be; font-weight: 800; }
:is(.Globo, .Dicho) mark { padding: 0 3px; border-radius: 4px; color: inherit; background: linear-gradient(transparent 35%, rgba(242, 205, 55, 0.65) 35%); }
/* Nivel de detalle de la Oficina: Solo gráfico y Ligero sin globos; Regular globos cortos; Cerebro y Muy denso globos amplios con el razonamiento */
:root:is([data-detalle="Grafico"], [data-detalle="Resumida"]) .Mundo .Globo { display: none !important; }
:root[data-detalle="Regular"] .Globo { width: 210px; margin-left: -105px; }
:root:is([data-detalle="Densa"], [data-detalle="Tarjetas"]) .Globo { width: 300px; margin-left: -150px; font-size: 12.5px; }
/* La barra de agentes (dock) es un widget: solo se ve si se agregó (clic derecho → Agregar la barra de agentes); en el celular no */
:root:not([data-barra-agentes="1"]) .Dock { display: none !important; }
@media (max-width: 760px) { .Dock { display: none !important; } }
/* Barra de arriba: logo (fijo) · pestañas (deslizables) · nivel de detalle (fijo). La cuenta está en la pestaña Configuración */
body.Pantalla .Encabezado .Usuario { display: none !important; }
body.Pantalla .Encabezado .Marca { flex: none; }
body.Pantalla .Encabezado .BarraPaneles { flex: 0 1 auto; }
.Encabezado .SelectorDetalle { flex: none; padding: 3px; margin-left: auto; }
.Encabezado .SelectorDetalle button { display: grid; place-items: center; padding: 5px 9px; }
.Encabezado .SelectorDetalle .Icono { width: 17px; height: 17px; }
@keyframes Aparecer { from { opacity: 0; transform: translateY(6px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes Latido { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }

/* ---------- Superposiciones en vidrio ---------- */
/* En la barra de navegación de arriba: paneles al centro, saludo y estado de la IA a la derecha */
.Encabezado .Saludo { display: flex; align-items: center; gap: 10px; flex: none; padding: 0; border: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.Saludo strong { font-size: 15px; color: var(--Tinta); white-space: nowrap; }
.Pastilla { padding: 3px 11px; border-radius: 999px; background: rgba(233, 246, 239, 0.75); border: 1px solid #cde9da; color: #1f6f4a; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.Pastilla.Apagada { background: #fdf3e2; border-color: #f2dcb3; color: #8a5a12; }
.Escenario > .Saludo, .Escenario > .BarraPaneles { display: none; }
.BarraPaneles { display: flex; align-items: center; gap: 4px; padding: 4px 6px; margin: 0 auto; border-radius: 14px; border: 1px solid var(--BordeVidrio); min-width: 0; overflow-x: auto; scrollbar-width: none; }
.Encabezado .Usuario { margin-left: 0; }
.Encabezado .Saludo.Frescura { display: grid; gap: 2px; min-width: 175px; padding: 5px 10px; background: var(--Vidrio); border: 1px solid var(--BordeVidrio); border-radius: 10px; -webkit-backdrop-filter: var(--DesenfoqueVidrio); backdrop-filter: var(--DesenfoqueVidrio); }
.Encabezado .Marca strong { font-size: 17px; }
.BotonPanel { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 0; border-radius: 10px; background: transparent; color: var(--Tinta); font: inherit; font-size: 12.5px; font-weight: 650; white-space: nowrap; cursor: pointer; }
.BotonPanel:hover { background: rgba(37, 75, 141, 0.1); color: var(--Azul); }
.BotonPanel.Pronto { color: var(--Suave); font-weight: 500; }
/* Pestañas con ícono o nombre (Configuración → Pestañas): automático = íconos en el celular y nombres en iPad y PC */
.BotonPanel .IconoPestana { display: none; width: 17px; height: 17px; flex: none; }
:root[data-pestanas="Iconos"] .BotonPanel .IconoPestana { display: block; }
:root[data-pestanas="Iconos"] .BotonPanel .NombrePestana { display: none; }
:root[data-pestanas="Iconos"] .BotonPanel { padding: 6px 10px; }
/* Cámara de la oficina 3D: pista de uso */
.Mundo.Arrastrando { cursor: grabbing; }
.PistaCamara { position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 6; display: flex; gap: 14px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--BordeVidrio); font-size: 12.5px; color: var(--Suave); pointer-events: none; white-space: nowrap; transition: opacity 0.8s; }
.PistaCamara b { color: var(--Azul); }
.PistaCamara.Desvanecer { opacity: 0; }


/* Dock de caras flotantes (estilo macOS) */
/* Barra de agentes a gusto: manija para moverla, esquina para el ancho y ⚙ para elegir agentes y tamaño de caras */
.Dock { align-items: center; }
.Dock.Movida { transform: none; }
/* Imantada a un borde: horizontal arriba y abajo, vertical a los costados (centrada en su posición a lo largo del borde) */
.Dock.BordeAbajo { top: auto; bottom: 12px; transform: translateX(-50%); }
.Dock.BordeArriba { top: 12px; bottom: auto; transform: translateX(-50%); }
.Dock.BordeIzquierda { left: 12px; right: auto; bottom: auto; transform: translateY(-50%); }
.Dock.BordeDerecha { left: auto; right: 12px; bottom: auto; transform: translateY(-50%); }
.Dock.Vertical { flex-direction: column; max-width: none; max-height: calc(100% - 24px); padding: 10px 7px; }
.Dock.Vertical .CarasDock { flex-direction: column; overflow-x: hidden; overflow-y: auto; padding: 2px 6px 2px 2px; }
.Dock.Arrastrando { transition: none; cursor: grabbing; }
.Dock .CarasDock { display: flex; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 6px 2px 2px; }
.Dock .CarasDock::-webkit-scrollbar { display: none; }
.ManijaDock, .AjustesDock { flex: none; padding: 2px 3px; border: 0; background: transparent; color: var(--Suave); font: inherit; font-size: 16px; line-height: 1; touch-action: none; }
.ManijaDock { cursor: grab; }
.AjustesDock { cursor: pointer; }
.AjustesDock:hover, .ManijaDock:hover { color: var(--Azul); }
.EsquinaDock { position: absolute; right: 3px; bottom: 3px; width: 13px; height: 13px; cursor: ew-resize; touch-action: none; border-radius: 0 0 14px 0;
  background: linear-gradient(135deg, transparent 52%, rgba(37, 75, 141, 0.38) 52%); }
.AjustesDockPanel { position: absolute; z-index: 9; width: 270px; max-height: min(60vh, 520px); overflow: auto; display: grid; gap: 10px; padding: 12px 14px;
  border-radius: 18px; border: 1px solid var(--BordeVidrio); font-size: 13px; color: var(--Tinta); }
.AjustesDockPanel header { display: flex; justify-content: space-between; align-items: center; }
.AjustesDockPanel .TamanoDock { display: grid; gap: 4px; font-size: 12px; color: var(--Suave); }
.AjustesDockPanel .Botones { display: flex; flex-wrap: wrap; gap: 6px; }
.AjustesDockPanel .Botones .Boton { padding: 4px 10px; font-size: 12px; }
.AjustesDockPanel .ListaDock { display: grid; gap: 4px; }
.AjustesDockPanel .ListaDock label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.AjustesDockPanel .ListaDock .CaraLego { box-shadow: none; }
.Dock { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 6; display: flex; gap: 6px; padding: 7px 10px; border-radius: 24px;
  border: 1px solid var(--BordeVidrio); max-width: calc(100vw - 260px); overflow-x: auto; scrollbar-width: none; }
.CaraFlotante { position: relative; flex: none; padding: 0; border: 0; background: none; cursor: pointer; transition: transform 0.18s cubic-bezier(0.2, 0.7, 0.2, 1); }
.CaraFlotante:hover, .CaraFlotante.Elegida { transform: translateY(-6px) scale(1.12); }
.CaraFlotante.Inactiva .CaraLego { filter: grayscale(0.7); opacity: 0.75; }
.CaraFlotante .Notificacion { top: -3px; right: -3px; }
.CaraLego { width: var(--Tam, 48px); height: var(--Tam, 48px); flex: none; display: inline-grid; justify-items: center; align-items: start; overflow: hidden; border-radius: 50%;
  background: radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.35) 55%, rgba(210, 228, 246, 0.5));
  -webkit-backdrop-filter: var(--DesenfoqueVidrio); backdrop-filter: var(--DesenfoqueVidrio); border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: inset 0 1px 1px #fff, inset 0 -6px 12px rgba(37, 75, 141, 0.08), 0 4px 12px rgba(31, 56, 104, 0.18); }
.CaraLego img.Recorte { height: calc(var(--Tam, 48px) * 2.75); width: auto; max-width: none; margin-top: calc(var(--Tam, 48px) * 0.05); }
.CaraLego img.SoloCabeza { width: 92%; height: 92%; object-fit: contain; margin-top: 4%; }
.CaraLego svg { margin-top: 2%; }
/* Retrato de la figura 3D (barra de agentes) */
.CaraLego.CaraRetrato img { width: 100%; height: 100%; object-fit: cover; }

/* Ficha flotante del personaje: chat, estado y desafíos */
.FichaFlotante { position: absolute; left: 50%; bottom: 90px; transform: translateX(-50%); z-index: 8; width: min(470px, calc(100vw - 24px)); max-height: min(68vh, 640px);
  display: grid; grid-template-rows: auto auto 1fr; gap: 8px; padding: 12px 14px; border-radius: 22px; border: 1px solid var(--BordeVidrio); background: var(--VidrioDenso); }
.FichaCabecera { display: flex; align-items: center; gap: 10px; }
.FichaCabecera strong { display: block; font-size: 16px; }
.FichaCabecera small { color: var(--Suave); }
.CerrarFicha { margin-left: auto; width: 32px; height: 32px; flex: none; border: 1px solid var(--BordeVidrio); border-radius: 50%; background: var(--Vidrio); font-size: 18px; color: var(--Tinta); cursor: pointer; }
.FichaCuerpo { min-height: 0; overflow: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-content: start; font-size: 13px; }
.FichaCuerpo .ChatMensajes { max-height: 34vh; padding: 4px 2px; }
.FichaCuerpo textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--BordeVidrio); border-radius: 12px; font: inherit; font-size: 13px; background: rgba(255, 255, 255, 0.7); resize: vertical; }
.Bloque2 h4 { margin: 4px 0; font-size: 12px; color: var(--Azul); text-transform: uppercase; letter-spacing: 0.8px; }
.Insight { margin: 0 0 6px; padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.6); border: 1px solid var(--Linea); }
.Contadores { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.EnlacePropuesta { display: block; width: 100%; margin-top: 4px; padding: 6px 10px; border: 1px solid var(--Linea); border-radius: 10px; background: rgba(255, 255, 255, 0.6); text-align: left; font: inherit; font-size: 12.5px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.EnlacePropuesta .ChipEstado { font-size: 10px; padding: 1px 7px; }
/* Ficha: semáforo en la cabecera; KPIs y botones arriba; el resto resumido para que no haya scroll */
.FichaCabecera .Semaforo { align-self: flex-start; padding: 4px 4px 0 0; }
.FichaFlotante.FichaMinima { grid-template-rows: auto; }
.FichaFlotante.FichaMinima > :not(.FichaCabecera) { display: none; }
.FichaFlotante.FichaAmplia { width: min(760px, calc(100vw - 24px)); max-height: min(82vh, 820px); }
.FichaFlotante.FichaAmplia .ChatMensajes { max-height: 58vh; }
.KpisFicha { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
.KpiFicha { display: grid; gap: 0; padding: 7px 10px; border: 1px solid var(--Linea); border-radius: 12px; background: rgba(255, 255, 255, 0.72); color: var(--Tinta); font: inherit; text-align: left; cursor: pointer; }
.KpiFicha:hover { box-shadow: 0 6px 16px rgba(24, 55, 96, 0.12); }
.KpiFicha.Tareas { cursor: default; }
.KpiFicha b { font-size: 20px; line-height: 1.15; letter-spacing: -0.4px; }
.KpiFicha small { font-size: 11px; color: var(--Suave); }
.KpiFicha.EstadoPropuesta b { color: #8a5a12; } .KpiFicha.EstadoAprobada b { color: #1f6f4a; } .KpiFicha.EstadoRechazada b { color: #5d6b7d; } .KpiFicha.Tareas b { color: var(--Azul); }
.BotonesFicha { display: flex; gap: 6px; }
.BotonesFicha .Boton { flex: 1; justify-content: center; padding: 6px 10px; font-size: 12.5px; }
.RolFicha { margin: 0; color: var(--Suave); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.FichaCuerpo .Insight { margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.FichaFlotante.FichaAmplia .Insight { -webkit-line-clamp: 8; }
.TareasFicha summary { cursor: pointer; font-size: 12px; font-weight: 700; color: var(--Azul); text-transform: uppercase; letter-spacing: 0.8px; }

/* Widgets de KPI sobre el café (Widgets.js): se arrastran, se tocan para editarlos */
.CapaWidgets { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.Escenario.ConPanel .CapaWidgets { display: none; }
/* Sin lupa ni menú del sistema al mantener el dedo sobre la oficina (abre el menú de widgets) */
.Mundo { -webkit-touch-callout: none; -webkit-user-select: none; }
.Widget { position: absolute; display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; overflow: hidden; transition: left 0.18s ease, top 0.18s ease, box-shadow 0.15s, transform 0.15s; border-radius: 18px; border: 1px solid var(--BordeVidrio); pointer-events: auto; cursor: grab; touch-action: none; user-select: none;
  box-shadow: inset 0 1px 1px #fff, 0 12px 30px rgba(24, 55, 96, 0.18); transition: box-shadow 0.15s, transform 0.15s; }
.Widget:hover { box-shadow: inset 0 1px 1px #fff, 0 16px 36px rgba(24, 55, 96, 0.24); }
.Widget.Moviendo { cursor: grabbing; transform: scale(1.03); transition: none; z-index: 2; box-shadow: 0 22px 44px rgba(24, 55, 96, 0.3); }
/* Silueta de la celda donde quedará el widget al soltarlo (grilla tipo iPhone) */
.WidgetFantasma { position: absolute; border-radius: 18px; border: 2px dashed rgba(37, 75, 141, 0.45); background: rgba(255, 255, 255, 0.28); pointer-events: none; transition: left 0.12s, top 0.12s; }
.Widget.TamChico .WidgetValor { flex-direction: column; align-items: flex-start; gap: 4px; }
.Widget.TamChico .WidgetValor b { font-size: 18px; }
.Widget.TamChico .MedidorCaja { display: none; }
/* Medidor mediano: valor a la izquierda y medidor a la derecha (cabe en una fila de la grilla) */
.Widget.TipoMedidor.TamMediano .WidgetCuerpo { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto 1fr; column-gap: 8px; }
.Widget.TipoMedidor.TamMediano .MedidorCaja { grid-column: 2; grid-row: 1 / 4; align-self: center; }
.Widget.TipoMedidor.TamMediano .MedidorCaja svg { width: 130px; height: 70px; }
.Widget.TipoMedidor.TamGrande .MedidorCaja svg { width: 230px; height: 124px; }
.Widget.TamGrande .WidgetValor b { font-size: 26px; }
.Widget .WidgetCuerpo { flex: 1; min-height: 0; }
.Widget .WidgetCuerpo svg { max-width: 100%; }
.WidgetCabecera { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--Suave); }
.WidgetCabecera strong { color: var(--Tinta); }
.WidgetAsa { color: var(--Suave); font-size: 14px; }
.WidgetCuerpo { display: grid; gap: 2px; }
.WidgetValor { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.WidgetValor b { font-size: 21px; letter-spacing: -0.4px; }
.WidgetCuerpo > small { color: var(--Suave); font-size: 11px; }
.Widget .ChipCambio { padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; background: #f1f3f6; color: #5d6b7d; }
.Widget .ChipCambio.Favorable { background: #e7f5ee; color: #1f7a50; } .Widget .ChipCambio.Desfavorable { background: #fbeaea; color: #b03a3e; }
.WidgetBarras .Positiva { fill: #3a64ad; opacity: 0.55; } .WidgetBarras .Negativa { fill: #d34d4f; opacity: 0.55; }
.WidgetBarras .Ultima { opacity: 1; }
.WidgetBarras.Cascada .Positiva, .WidgetBarras.Cascada .Negativa { opacity: 0.85; }
.WidgetBarras .Total { fill: #1f2f4d; }
.WidgetBarras .Escalon { stroke: rgba(31, 41, 55, 0.4); stroke-width: 1; stroke-dasharray: 2 2; }
.WidgetBarras text.ValorBarra { font-size: 9px; font-weight: 650; fill: var(--Tinta); }
.WidgetBarras .Cero { stroke: rgba(31, 41, 55, 0.35); stroke-width: 1; }
.WidgetBarras .Promedio { stroke: rgba(31, 41, 55, 0.45); stroke-width: 1; stroke-dasharray: 3 3; }
.WidgetBarras text { font-size: 9px; fill: var(--Suave); }
.WidgetBarras text.ValorUltima { font-size: 10px; font-weight: 750; fill: var(--Tinta); }
.WidgetBarras text.Mes.Ultima { font-weight: 750; fill: var(--Tinta); }
.MedidorCaja { display: grid; justify-items: center; }
.WidgetMedidor .Fondo, .WidgetMedidor .Bien, .WidgetMedidor .Mal { fill: none; stroke-width: 11; stroke-linecap: round; }
.WidgetMedidor .Fondo { stroke: rgba(37, 75, 141, 0.12); } .WidgetMedidor .Bien { stroke: #21895c; } .WidgetMedidor .Mal { stroke: #e89411; }
.WidgetMedidor .Referencia { stroke: #183760; stroke-width: 2.5; stroke-linecap: round; }
.WidgetMenu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 3; width: 248px; display: grid; gap: 8px; padding: 10px; border-radius: 16px; border: 1px solid var(--BordeVidrio); cursor: default;
  background: var(--VidrioDenso); box-shadow: 0 16px 36px rgba(24, 55, 96, 0.22); }
.WidgetMenu small { color: var(--Suave); font-size: 11px; font-weight: 650; }
.WidgetMenu .Segmentado { display: flex; }
.WidgetMenu .Segmentado button { flex: 1; padding: 4px 6px; font-size: 11.5px; }
.WidgetMenu .Botones { margin: 0; }
.WidgetMenu .Botones .Boton { flex: 1; }
.Boton.Peligro { color: #b03a3e; }
/* Fuera de edición los widgets solo muestran datos (clic en una pila = siguiente; doble clic = abrir en el panel) */
.CapaWidgets:not(.Editando) .Widget.EnPila { cursor: pointer; }
.CapaWidgets:not(.Editando) .WidgetAsa { visibility: hidden; }
/* Modo edición (clic derecho → Editar o quitar widgets): tiemblan como en iPhone y muestran ⊖ para quitarlos */
.CapaWidgets.Editando .Widget { animation: Temblar 0.26s ease-in-out infinite alternate; }
.CapaWidgets.Editando .Widget:nth-child(2n) { animation-delay: -0.13s; }
.CapaWidgets.Editando .Widget.Moviendo { animation: none; }
@keyframes Temblar { from { transform: rotate(-0.8deg); } to { transform: rotate(0.8deg); } }
.WidgetQuitar { display: none; position: absolute; top: 7px; left: 7px; z-index: 3; width: 22px; height: 22px; padding: 0; place-items: center; border: 0; border-radius: 50%;
  background: rgba(118, 126, 138, 0.92); color: #fff; font: 700 17px/1 system-ui, sans-serif; cursor: pointer; box-shadow: 0 2px 6px rgba(16, 38, 70, 0.3); }
.WidgetQuitar:hover { background: #d34d4f; }
.CapaWidgets.Editando .WidgetQuitar { display: grid; }
.CapaWidgets.Editando .WidgetCabecera { padding-left: 24px; }
.AvisoEdicion { position: absolute; top: 14px; left: 50%; z-index: 6; padding: 7px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 650; color: var(--Azul); transform: translateX(-50%); pointer-events: none; animation: AparecerIsla 0.3s ease; }
/* Pila: bordes de las tarjetas de abajo y puntos con la posición (como las pilas de widgets de iPhone) */
.Widget.EnPila { box-shadow: inset 0 1px 1px #fff, 0 10px 26px rgba(24, 55, 96, 0.16), 0 5px 0 -2px rgba(255, 255, 255, 0.75), 0 9px 0 -5px rgba(255, 255, 255, 0.5); }
.PilaPuntos { position: absolute; right: 7px; top: 50%; display: grid; gap: 4px; transform: translateY(-50%); }
.PilaPuntos i { width: 5px; height: 5px; border-radius: 50%; background: rgba(37, 75, 141, 0.22); }
.PilaPuntos i.Activo { background: var(--Azul); }
/* iPhone y iPad: mantener el dedo sobre un widget lo levanta para moverlo (sin lupa, selección ni menú del sistema);
   el widget que recibirá la pila se ilumina como un imán */
.CapaWidgets .Widget { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: none; }
.CapaWidgets:not(.Editando) .Widget { cursor: grab; }
.Widget.Levantado { transform: scale(1.05); box-shadow: 0 22px 44px rgba(24, 55, 96, 0.3); z-index: 3; transition: transform 0.15s ease; }
.Widget.Iman { outline: 3px solid #f2cd37; outline-offset: 3px; box-shadow: 0 0 0 9px rgba(242, 205, 55, 0.22); }
.WidgetFantasma.Apilar { border-style: solid; border-color: var(--Azul); background: rgba(58, 100, 173, 0.16); }
/* Menú del clic derecho sobre el café */
.MenuContextual { position: fixed; z-index: 96; display: grid; gap: 2px; min-width: 220px; padding: 6px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.95); box-shadow: 0 16px 36px rgba(24, 55, 96, 0.25); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); }
.MenuContextual button { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 0; border-radius: 9px; background: none; color: var(--Tinta); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.MenuContextual button:is(:hover, :focus-visible) { background: rgba(58, 100, 173, 0.1); outline: none; }
.MenuContextual button.Peligro { color: #b03a3e; }
.MenuContextual .Simbolo { width: 18px; text-align: center; color: var(--Suave); }
.MenuContextual .Peligro .Simbolo { color: inherit; }
.MenuContextual hr { margin: 3px 6px; border: 0; border-top: 1px solid rgba(24, 55, 96, 0.1); }
@media (prefers-reduced-motion: reduce) { .CapaWidgets.Editando .Widget { animation: none; } }
.CatalogoWidgets { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 16px; background: rgba(16, 38, 70, 0.28); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.CatalogoCaja { width: min(860px, 100%); max-height: 86vh; overflow: auto; display: grid; gap: 10px; padding: 16px 18px; border-radius: 22px; border: 1px solid var(--BordeVidrio); background: var(--VidrioDenso);
  box-shadow: 0 30px 70px rgba(16, 38, 70, 0.3); }
.CatalogoCaja header { display: flex; justify-content: space-between; align-items: center; }
.CatalogoCaja header strong { font-size: 16px; }
.CatalogoLista { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.CatalogoKpi { display: grid; gap: 8px; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.65); border: 1px solid var(--BordeVidrio); }
.CatalogoTipos { display: flex; flex-wrap: wrap; gap: 6px; }
.CatalogoTipos .Boton { padding: 5px 10px; font-size: 12px; }
.CatalogoArchivados { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.CatalogoArchivados small { color: var(--Suave); margin-right: 4px; }

/* Tareas programadas en la ficha del agente */
.TareaProgramada { display: grid; gap: 4px; margin-bottom: 8px; padding: 9px 11px; border-radius: 12px; background: rgba(255, 255, 255, 0.62); border: 1px solid var(--BordeVidrio); border-left: 4px solid #9aa6b6; }
.TareaProgramada.Ensayo { border-left-color: var(--Naranjo); } .TareaProgramada.Activa { border-left-color: var(--Verde); }
.TareaProgramada p { margin: 0; }
.TareaProgramada small { color: var(--Suave); }
.TareaProgramada small.Falta { color: #8a5a12; font-weight: 650; }
.TareaCabecera { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ChipModo { padding: 1px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; background: #eef1f5; color: #5d6b7d; }
.ChipModo.Ensayo { background: #fdf3e2; color: #8a5a12; } .ChipModo.Activa { background: #e9f6ef; color: #1f6f4a; }
.EditarTarea summary { cursor: pointer; font-size: 12px; color: var(--Azul); font-weight: 650; }
.EditarTarea textarea { width: 100%; margin: 6px 0; padding: 8px 10px; border: 1px solid var(--BordeVidrio); border-radius: 10px; font: inherit; font-size: 12.5px; background: rgba(255, 255, 255, 0.75); }
.TareaProgramada .Botones { align-items: center; }
.TareaProgramada .Segmentado button { padding: 4px 10px; font-size: 12px; }

/* Cajón derecho minimizable */
.BarraCajon { display: flex; align-items: center; gap: 6px; }
.BarraCajon .Segmentado { flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.BarraCajon .Segmentado button { flex: 1; white-space: nowrap; }
.CajonCuerpo { min-height: 0; overflow: auto; padding-right: 2px; }
/* Centro de la oficina en la ventana de los paneles: barra de título con semáforo, como los paneles */
.VentanaNativa { display: grid; grid-template-rows: auto 1fr; gap: 12px; height: 100%; min-height: 0; padding: 12px 18px 16px; background: var(--VidrioDenso); }
.VentanaNativa .BarraCajon { gap: 12px; }
.VentanaNativa .TituloCentro { font-size: 16px; white-space: nowrap; }
.VentanaNativa .BarraCajon .Segmentado { flex: none; margin-left: auto; overflow: visible; }
/* Botones de las secciones con su ancho natural (antes el texto «Conversación» se salía de su píldora en iPad y PC) */
.VentanaNativa .BarraCajon .Segmentado button { flex: none; padding: 6px 16px; }
.VentanaCentro { grid-template-rows: auto auto 1fr; }
.VentanaNativa .CajonCuerpo { width: 100%; max-width: 1100px; margin: 0 auto; }
.Conversacion { display: grid; gap: 8px; }
.Burbuja { display: grid; grid-template-columns: 38px 1fr; gap: 8px; align-items: start; padding: 0; border: 0; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.Burbuja > div { padding: 8px 11px; border-radius: 4px 16px 16px 16px; background: rgba(255, 255, 255, 0.62); border: 1px solid var(--BordeVidrio); }
.Burbuja.Activa > div { border-color: var(--Azul); box-shadow: 0 0 0 2px rgba(37, 75, 141, 0.15); }
.Burbuja strong { display: block; font-size: 11.5px; color: var(--Azul); margin-bottom: 1px; }
.Burbuja p { margin: 0; font-size: 13px; }
.PedirPropuesta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.PedirPropuesta input { flex: 1 1 140px; }
.ListaPropuestas { display: grid; gap: 10px; margin-top: 10px; }
.Propuesta { padding: 11px 13px; border: 1px solid var(--BordeVidrio); border-left: 4px solid var(--Naranjo); border-radius: 14px; background: rgba(255, 255, 255, 0.66); font-size: 13px; }
.Propuesta.Aprobada { border-left-color: var(--Verde); } .Propuesta.Rechazada { border-left-color: #9aa6b6; }
.Propuesta header { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; }
.Propuesta header strong { display: block; font-size: 14px; }
.Propuesta header small { color: var(--Suave); }
.Propuesta h3 { font-size: 12px; margin: 8px 0 2px; color: var(--Azul); }
.Propuesta ul, .Propuesta ol { margin: 0; padding-left: 18px; }
.CaraEquipo { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--Vidrio); border: 1px solid var(--BordeVidrio); }
.ChipEstado { padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; background: #fdf3e2; color: #8a5a12; white-space: nowrap; }
.ChipEstado.Aprobada { background: #e9f6ef; color: #1f6f4a; } .ChipEstado.Rechazada { background: #eef1f5; color: #5d6b7d; }
.Decision { display: grid; gap: 8px; margin-top: 10px; }
.Decision textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--BordeVidrio); border-radius: 10px; font: inherit; font-size: 13px; }
.Botones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }

/* Panel abierto dentro de la oficina */
.VentanaPanel { position: absolute; inset: 8px 14px 80px 14px; z-index: 9; display: grid; grid-template-rows: auto 1fr; gap: 8px; padding: 10px 12px; border-radius: 22px;
  border: 1px solid var(--BordeVidrio); background: var(--VidrioDenso); }
.VentanaPanel header { display: flex; align-items: center; gap: 10px; }
.VentanaPanel header strong { margin-right: auto; font-size: 15px; }
/* Panel abierto como ventana emergente: flota sobre la oficina atenuada; su barra de título (la del propio panel)
   lleva filtros, nivel de detalle, versión completa y cerrar. Agentes y cajón se esconden mientras está abierta. */
.Escenario.ConPanel .VentanaPanel { inset: max(14px, 2.4vh) max(14px, 2.4vw); padding: 0; gap: 0; border: 1px solid rgba(255, 255, 255, 0.85); border-radius: 22px; overflow: hidden;
  background: #eef3f9; grid-template-rows: 1fr; box-shadow: 0 30px 80px rgba(16, 38, 70, 0.35), 0 0 0 1px rgba(37, 75, 141, 0.08); animation: AbrirVentana 0.22s ease-out;
  -webkit-backdrop-filter: none; backdrop-filter: none; }
.Escenario.ConPanel .VentanaPanel iframe { border-radius: 0; }
/* Amarillo: ventana más chica y centrada; verde: casi todo el escenario, sin perder bordes redondeados ni el fondo */
.Escenario.ConPanel.VentanaCompacta .VentanaPanel { inset: 50% auto auto 50%; width: min(1240px, 74vw); height: min(780px, 80%); transform: translate(-50%, -50%); animation: none; }
.Escenario.ConPanel.VentanaCompleta .VentanaPanel { inset: 8px 10px; border-radius: 20px; }
.Escenario.ConPanel .Mundo { filter: blur(3px) brightness(0.82) saturate(0.9); transition: filter 0.25s; }
.Escenario.ConPanel :is(.Dock, .FichaFlotante, .PistaCamara) { display: none !important; }
@keyframes AbrirVentana { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: none; } }
.AvisoPanel { display: grid; gap: 10px; place-content: center; justify-items: center; padding: 40px; text-align: center; color: var(--Suave); }
.AvisoPanel strong { font-size: 18px; color: var(--Tinta); }
.BotonPanel[aria-pressed="true"] { background: linear-gradient(180deg, #3a64ad, #254b8d); color: #fff; }
.VentanaPanel iframe { width: 100%; height: 100%; border: 0; border-radius: 14px; background: #f3f7fb; }

/* ---------- Chat (Augusto en los paneles y fichas de la oficina) ---------- */
.AugustoLanzador {
  position: fixed; z-index: 40; width: 64px; height: 64px; padding: 0; border-radius: 50%; cursor: grab; touch-action: none;
  background: radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.14) 62%, rgba(180, 210, 240, 0.25));
  -webkit-backdrop-filter: blur(16px) saturate(190%); backdrop-filter: blur(16px) saturate(190%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.95), inset 0 -8px 16px rgba(255, 255, 255, 0.18), 0 10px 26px rgba(24, 55, 96, 0.28);
  transition: left 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), top 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.15s;
}
.AugustoLanzador:hover { transform: scale(1.07); }
.AugustoLanzador img { width: 86%; height: 86%; margin: 7%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.25)); }
.AugustoLanzador.Arrastrando { cursor: grabbing; transition: none; transform: scale(1.1); }
/* Equipo en los paneles: abanico de caras de vidrio junto a Augusto y fila de caras en la cabecera del chat */
.AbanicoChat { position: fixed; z-index: 40; display: flex; gap: 8px; padding: 4px; animation: Aparecer 0.18s ease-out; }
.AbanicoChat.Vertical { flex-direction: column; }
.CaraChat { position: relative; flex: none; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; transition: transform 0.16s cubic-bezier(0.2, 0.7, 0.2, 1); }
.CaraChat:hover, .CaraChat:focus-visible { transform: scale(1.12); }
.CaraChat[aria-pressed="true"] .CaraLego { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--Azul), 0 4px 12px rgba(31, 56, 104, 0.25); }
.AbanicoChat .CaraLego { box-shadow: inset 0 1px 1px #fff, 0 8px 20px rgba(24, 55, 96, 0.28); }
.EquipoChat { display: flex; gap: 6px; padding: 8px 12px 4px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid rgba(255, 255, 255, 0.6); }
.EquipoChat:empty { display: none; }
.AugustoCabecera .CaraLego { border-color: rgba(255, 255, 255, 0.55); }
.AugustoPestana { position: fixed; z-index: 40; width: 26px; height: 44px; padding: 0; border: 1px solid var(--BordeVidrio); border-radius: 12px 0 0 12px; color: var(--Azul); font-size: 22px; font-weight: 700; line-height: 1; cursor: pointer;
  background: var(--VidrioDenso); -webkit-backdrop-filter: var(--DesenfoqueVidrio); backdrop-filter: var(--DesenfoqueVidrio); box-shadow: var(--SombraVidrio); }
.AugustoPestana[data-lado="Izquierda"] { border-radius: 0 12px 12px 0; }
.AugustoPestana:not(.Vertical) { width: 44px; height: 26px; border-radius: 12px 12px 0 0; }
.AugustoPestana[data-lado="Arriba"] { border-radius: 0 0 12px 12px; }
.AugustoVentana { position: fixed; z-index: 41; display: grid; grid-template-rows: auto 1fr auto; padding: 0; margin: 0; overflow: hidden; color: var(--Tinta); border-radius: 22px;
  border: 1px solid var(--BordeVidrio); background: var(--VidrioDenso); -webkit-backdrop-filter: var(--DesenfoqueVidrio); backdrop-filter: var(--DesenfoqueVidrio); box-shadow: 0 18px 50px rgba(24, 55, 96, 0.25), inset 0 1px 0 #fff; }
.AugustoCabecera { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: linear-gradient(125deg, rgba(37, 75, 141, 0.92), rgba(19, 110, 140, 0.88)); color: #fff; }
.AugustoCabecera img { width: 42px; height: 42px; object-fit: contain; border-radius: 50%; background: rgba(255, 255, 255, 0.16); }
.AugustoCabecera strong { display: block; }
.AugustoCabecera small { color: #d6e6f7; }
.AugustoCabecera button { margin-left: auto; border: 0; background: rgba(255, 255, 255, 0.16); color: #fff; width: 32px; height: 32px; border-radius: 50%; font-size: 18px; cursor: pointer; }
.ChatMensajes { overflow: auto; padding: 12px 14px; display: grid; gap: 10px; align-content: start; min-height: 110px; }
.Mensaje { max-width: 90%; padding: 9px 12px; border-radius: 16px; font-size: 13.5px; }
.Mensaje.Usuario { justify-self: end; white-space: pre-wrap; background: linear-gradient(180deg, #3a64ad, #254b8d); color: #fff; border-bottom-right-radius: 5px; }
.Mensaje.Augusto { justify-self: start; background: rgba(255, 255, 255, 0.72); border: 1px solid var(--BordeVidrio); border-bottom-left-radius: 5px; }
.Mensaje.Enriquecido p { margin: 0 0 6px; }
.Mensaje.Enriquecido p:last-child { margin-bottom: 0; }
.Mensaje.Enriquecido ul, .Mensaje.Enriquecido ol { margin: 2px 0 6px; padding-left: 18px; }
.Mensaje.Enriquecido li { margin: 1px 0; }
.Mensaje.Enriquecido strong { color: var(--Marino); }
.Mensaje.Enriquecido code { padding: 0 4px; border-radius: 4px; background: #eef2f7; font-size: 12px; }
.Mensaje.Enriquecido .TituloChat { font-weight: 750; color: var(--Azul); }
.Mensaje.Error { background: #fbeaea; color: #8a2d30; }
.Mensaje.Pensando { color: var(--Suave); font-style: italic; }
.Sugerencias { display: flex; flex-wrap: wrap; gap: 6px; }
.Sugerencia { display: inline-flex; align-items: stretch; border: 1px solid var(--BordeVidrio); border-radius: 999px; background: rgba(255, 255, 255, 0.7); overflow: hidden; }
.Sugerencia button { border: 0; background: none; font: inherit; font-size: 12px; cursor: pointer; }
.Sugerencia .Preguntar { padding: 5px 4px 5px 11px; color: var(--Azul); }
.Sugerencia .Cerrar { padding: 0 9px; color: var(--Suave); font-size: 15px; }
.Sugerencia .Cerrar:hover { color: var(--Negativo); background: rgba(200, 68, 74, 0.08); }
.MasPreguntas { padding: 5px 11px; border: 1px dashed var(--LineaFuerte); border-radius: 999px; background: transparent; color: var(--Suave); font: inherit; font-size: 12px; cursor: pointer; }
.ChatEntrada { display: grid; gap: 6px; padding: 10px 14px 12px; border-top: 1px solid rgba(255, 255, 255, 0.6); }
.ChatEntrada textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--BordeVidrio); border-radius: 12px; font: inherit; font-size: 13px; background: rgba(255, 255, 255, 0.7); resize: vertical; }
.ChatEntrada .Fila2 { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 11px; color: var(--Suave); }
.FichaCuerpo .ChatEntrada { padding: 6px 0 0; }

@media (max-width: 1100px) {
  body.Pantalla .Encabezado { flex-wrap: wrap; row-gap: 6px; }
  .Encabezado .BarraPaneles { order: 5; flex: 1 1 100%; }
  .Dock { max-width: calc(100vw - 24px); }
  
}
@media (max-width: 760px) {
  /* Pestañas automáticas en el celular: solo el ícono (el nombre queda en el aviso y para lectores de pantalla) */
  :root[data-pestanas="Auto"] .BotonPanel .IconoPestana { display: block; }
  :root[data-pestanas="Auto"] .BotonPanel .NombrePestana { display: none; }
  :root[data-pestanas="Auto"] .BotonPanel, :root[data-pestanas="Iconos"] .BotonPanel { padding: 7px 11px; }
  .Encabezado .BarraPaneles { gap: 2px; }
  /* La sala queda centrada en el espacio libre entre la barra de arriba y el dock */
  .Plano { top: 40%; }
  .Encabezado .Marca small, .Encabezado .Saludo, .Encabezado .NombreUsuario { display: none !important; }
  .VentanaNativa { padding: 10px 12px 14px; }
  .VentanaNativa .BarraCajon { flex-wrap: wrap; }
  .VentanaNativa .TituloCentro { margin-right: auto; font-size: 15px; }
  .VentanaNativa .BarraCajon .Segmentado { order: 3; flex: 1 1 100%; margin-left: 0; overflow-x: auto; }
  .VentanaNativa .BarraCajon .Segmentado button { flex: 1 0 auto; padding: 6px 10px; }
  .FichaFlotante { bottom: 80px; max-height: 72vh; }
  .VentanaPanel { inset: 8px 8px 80px 8px; }
  .PistaCamara { display: none; }
  /* Arriba, en una sola fila: logo · paneles (deslizable) · ⚙ */
  body.Pantalla .Encabezado { flex-wrap: nowrap; gap: 8px; }
  .Encabezado .Marca { flex: none; }
  .Encabezado .Marca span { display: none; }
  .Encabezado .Marca img { width: 32px; height: 32px; }
  .Encabezado .BarraPaneles { order: 0; flex: 1 1 auto; min-width: 0; }
  /* Celular: del selector de detalle solo se ve el nivel activo (tocarlo pasa al siguiente) y el reloj abre su globo a lo ancho */
  .Encabezado .SelectorDetalle button { padding: 6px 8px; }
  .Encabezado .SelectorDetalle button:not([aria-pressed="true"]) { display: none; }
  .Encabezado .SelectorDetalle .Icono { width: 17px; height: 17px; }
  .Encabezado .BotonConfiguracion { width: 38px; height: 38px; }
  /* Dock tipo iPhone: barra compacta de vidrio con las 4 cabezas grandes de los agentes que hablaron último */
  .Dock { bottom: max(12px, env(safe-area-inset-bottom)); max-width: calc(100vw - 24px); display: grid; grid-auto-flow: column; align-items: center; gap: 16px;
    padding: 10px 16px; border-radius: 32px; overflow: visible;
    background: rgba(255, 255, 255, 0.5); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.75); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 1px rgba(24, 55, 96, 0.08), 0 10px 30px rgba(24, 55, 96, 0.22); }
  .Dock .CaraFlotante:not(.Reciente) { display: none; }
  .Dock .CaraLego { --Tam: 60px !important; }
  .Dock .CaraLego svg { width: 100%; height: 100%; }
  /* En pantallas táctiles el :hover queda pegado: sin salto al tocar */
  .Dock .CaraFlotante:hover { transform: none; }
  .Dock .CaraFlotante.Elegida { transform: translateY(-4px); }
  /* Ventana del panel: esquinas de abajo concéntricas con las del iPhone */
  .Escenario.ConPanel .VentanaPanel { inset: 8px 8px max(10px, env(safe-area-inset-bottom)) 8px; border-radius: 26px 26px 44px 44px; }
  .Escenario.ConPanel.VentanaCompleta .VentanaPanel, .Escenario.ConPanel.VentanaCompacta .VentanaPanel { inset: 8px 8px max(10px, env(safe-area-inset-bottom)) 8px; width: auto; height: auto; transform: none; border-radius: 26px 26px 44px 44px; }

  .Globo { width: 200px; margin-left: -100px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .Personaje3D.Caminando .Cuerpo, .Notificacion { animation: none; }
  .Plano { transition: none; }
}

/* ---------- Agentes: historias como Instagram (anillo de color = insight sin ver) ---------- */
.Historias { display: flex; gap: 14px; padding: 4px 4px 10px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid rgba(37, 75, 141, 0.1); }
.Historias::-webkit-scrollbar { display: none; }
.Historia { flex: none; display: grid; justify-items: center; gap: 4px; width: 70px; padding: 0; border: 0; background: none; font: inherit; color: var(--Tinta); cursor: pointer; }
.Historia .Anillo { display: grid; place-items: center; width: 66px; height: 66px; border-radius: 50%; padding: 3px; background: transparent; }
.Historia .Anillo > * { border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px #fff; }
.Historia.ConInsight .Anillo { background: conic-gradient(from 210deg, #f9ce34, #ee2a7b, #c91a09, #6228d7, #f9ce34); animation: Latido 2.4s ease-in-out infinite; }
.Historia.Vista .Anillo { background: #c9d2dd; }
.Historia.SinInsight .Anillo { background: rgba(37, 75, 141, 0.08); }
.Historia.Inactiva { opacity: 0.55; }
.NombreHistoria { max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; font-weight: 650; }
.Historia.ConInsight .NombreHistoria { color: #b0204f; }

/* Conversación en tarjetas (cada insight como una historia) */
.TarjetasInsight { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; align-items: stretch; }
.Burbuja.TarjetaInsight { display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; gap: 8px; padding: 12px 14px; border-radius: 18px; text-align: left;
  background: rgba(255, 255, 255, 0.8); border: 1px solid #e3e9f1; box-shadow: 0 4px 16px rgba(24, 55, 96, 0.07); cursor: pointer; position: relative; overflow: hidden; }
.Burbuja.TarjetaInsight::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--Degradado); }
.Burbuja.TarjetaInsight:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(24, 55, 96, 0.13); }
.Burbuja.TarjetaInsight.Activa { border-color: var(--Azul); box-shadow: 0 0 0 2px rgba(37, 75, 141, 0.18); }
.Burbuja.TarjetaInsight > div, .Burbuja.TarjetaInsight > span { padding: 0; border: 0; background: none; }
.CabezaInsight { display: flex; align-items: center; gap: 8px; }
.CabezaInsight strong { display: block; font-size: 12.5px; color: var(--Tinta); margin: 0; }
.CabezaInsight small { display: block; font-size: 11px; color: var(--Suave); }
.TarjetaInsight p { margin: 0; font-size: 13.5px; line-height: 1.45; }
.VerHistoria { justify-self: end; font-size: 11.5px; font-weight: 650; color: var(--Azul); }
.HistoriaAzul { --Degradado: linear-gradient(135deg, #254b8d, #0089be); }
.HistoriaVioleta { --Degradado: linear-gradient(135deg, #6b5797, #b8327a); }
.HistoriaVerde { --Degradado: linear-gradient(135deg, #21895c, #8dbb19); }
.HistoriaNaranjo { --Degradado: linear-gradient(135deg, #e89411, #d34d4f); }
.HistoriaCian { --Degradado: linear-gradient(135deg, #0089be, #069d9f); }
.HistoriaRojo { --Degradado: linear-gradient(135deg, #c91a09, #ee2a7b); }

/* Visor de historias: tarjeta vertical con barras de avance, sobre la ventana Agentes */
.VentanaCentro { position: relative; }
.VisorHistoria { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; padding: 14px; border-radius: inherit;
  background: rgba(14, 26, 44, 0.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: Aparecer 0.2s ease-out; }
.TarjetaHistoria { position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: 12px; width: min(440px, 100%); height: min(720px, 100%); padding: 14px 16px 16px;
  border-radius: 24px; color: #fff; background: var(--Degradado); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); cursor: pointer; user-select: none; }
.BarrasHistoria { display: flex; gap: 4px; }
.BarrasHistoria span { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.35); overflow: hidden; }
.BarrasHistoria span.Lista { background: #fff; }
.BarrasHistoria span.Actual { background: linear-gradient(90deg, #fff 50%, rgba(255, 255, 255, 0.35) 50%); background-size: 200% 100%; background-position: 100% 0; animation: AvanceHistoria 9s linear forwards; }
@keyframes AvanceHistoria { to { background-position: 0 0; } }
.CabezaHistoria { display: flex; align-items: center; gap: 10px; }
.CabezaHistoria > span { flex: 1; min-width: 0; }
.CabezaHistoria strong { display: block; font-size: 14px; }
.CabezaHistoria small { display: block; font-size: 11.5px; opacity: 0.85; }
.CerrarHistoria { width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.2); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; }
.CuerpoHistoria { align-self: center; display: grid; gap: 14px; padding: 18px; border-radius: 18px; background: rgba(255, 255, 255, 0.95); color: var(--Tinta);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); max-height: 100%; overflow: auto; }
.CuerpoHistoria p { margin: 0; font-size: 15px; line-height: 1.5; }
.CuerpoHistoria .TitularHistoria { font-size: 19px; font-weight: 700; line-height: 1.3; }
.PieHistoria { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; }
.PieHistoria .Boton { background: rgba(255, 255, 255, 0.92); color: var(--Azul); border: 0; }

/* ---------- Configuración ---------- */
.GrillaConfig { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; align-content: start; }
.SeccionConfig { display: grid; gap: 10px; align-content: start; padding: 14px 16px; border-radius: 18px; background: rgba(255, 255, 255, 0.82); border: 1px solid #e3e9f1;
  box-shadow: 0 4px 16px rgba(24, 55, 96, 0.06); }
.SeccionConfig h3 { margin: 0; font-size: 14px; color: var(--Marino); }
.SeccionConfig .Nota { margin: 0; }
.SeccionConfig, .CuerpoSeccion { min-width: 0; }
.CuerpoSeccion { display: grid; gap: 10px; align-content: start; }
/* En PC el título de la sección es solo título; en el celular despliega la sección */
.DesplegarSeccion { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; pointer-events: none; }
.DesplegarSeccion .Chevron { display: none; color: var(--Suave); transition: transform 0.2s; }
.CuentaConfig { display: flex; align-items: center; gap: 10px; }
.CuentaConfig .Avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--Azul); color: #fff; font-weight: 700; }
.CuentaConfig b { display: block; }
.CuentaConfig small { display: block; color: var(--Suave); font-size: 11.5px; }
.FilaConfig { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.DatosConfig { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0; font-size: 13px; }
.DatosConfig dt { color: var(--Suave); }
.DatosConfig dd { margin: 0; font-weight: 650; text-align: right; }
.Cifras { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.Cifras > span { display: grid; gap: 1px; padding: 8px 10px; border-radius: 12px; background: rgba(37, 75, 141, 0.06); }
.Cifras small { font-size: 11px; color: var(--Suave); }
.Cifras b { font-size: 16px; }
.TablaConfig { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.TablaConfig th { padding: 4px 6px; text-align: right; font-size: 11px; color: var(--Suave); font-weight: 650; border-bottom: 1px solid #e3e9f1; }
.TablaConfig th:first-child, .TablaConfig td:first-child { text-align: left; }
.TablaConfig td { padding: 5px 6px; text-align: right; border-bottom: 1px solid #f0f3f7; font-variant-numeric: tabular-nums; white-space: nowrap; }
.TablaConfig td:first-child { white-space: normal; }
.TablaConfig tr.Lento td { color: #b03a3e; }
.NombreConsumo { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.BarraConsumo { display: block; height: 4px; margin-top: 3px; border-radius: 4px; background: linear-gradient(90deg, #254b8d, #0089be); }
.TipoTiempo { display: inline-block; padding: 0 6px; border-radius: 999px; background: rgba(37, 75, 141, 0.08); color: var(--Azul); font-size: 10.5px; font-weight: 650; }
.CadenaDato { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.CadenaDato li { display: grid; gap: 1px; padding: 8px 10px 8px 14px; border-left: 3px solid #0089be; border-radius: 0 10px 10px 0; background: rgba(0, 137, 190, 0.06); font-size: 12.5px; }
.CadenaDato li.Pendiente { border-left-color: #c9d2dd; background: rgba(37, 75, 141, 0.03); color: var(--Suave); }
.CadenaDato li small { color: var(--Suave); font-size: 11px; }

/* ---------- Agente que analiza el panel: botón con su cara en la barra del panel y la historia en un diálogo abajo ---------- */
/* Solo la cabeza del agente dentro de un círculo de Liquid Glass; al tocarlo se abre su ventana */
.BotonAnalista { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border-radius: 50%; cursor: pointer; flex: none;
  background: radial-gradient(120% 90% at 30% 20%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.3) 60%), rgba(214, 230, 247, 0.4);
  -webkit-backdrop-filter: blur(14px) saturate(190%); backdrop-filter: blur(14px) saturate(190%); border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 1px 2px #fff, inset 0 -5px 12px rgba(37, 75, 141, 0.12), 0 4px 14px rgba(24, 55, 96, 0.22); transition: transform 0.15s, box-shadow 0.15s; }
.BotonAnalista:hover { transform: translateY(-1px) scale(1.04); box-shadow: inset 0 1px 2px #fff, 0 8px 20px rgba(24, 55, 96, 0.28); }
.BotonAnalista .CaraLego { border: 0; background: transparent; box-shadow: none; }
.BotonAnalista[hidden] { display: none; }
@media (max-width: 760px) { .BotonAnalista { width: 38px; height: 38px; } }

.Analisis { position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 120; width: min(620px, calc(100vw - 24px)); transform: translateX(-50%);
  display: grid; gap: 8px; padding: 12px 14px 10px; border-radius: 22px; color: var(--Tinta);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(236, 244, 252, 0.9)); -webkit-backdrop-filter: blur(22px) saturate(190%); backdrop-filter: blur(22px) saturate(190%);
  border: 1px solid rgba(255, 255, 255, 0.85); box-shadow: inset 0 1px 1px #fff, 0 22px 50px rgba(24, 55, 96, 0.32); animation: AbrirAnalisis 0.22s ease-out; }
@keyframes AbrirAnalisis { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
/* Barras de avance como las historias: la activa se llena al ritmo del paso */
.AnalisisBarras { display: flex; gap: 4px; }
.AnalisisBarras i { flex: 1; height: 3px; border-radius: 2px; background: rgba(37, 75, 141, 0.15); }
.AnalisisBarras i.Hecha { background: var(--Azul); }
.AnalisisBarras i.Activa { background: linear-gradient(90deg, var(--Azul) 50%, rgba(37, 75, 141, 0.15) 50%) right / 200% 100% no-repeat; animation: AvanceAnalisis var(--Duracion, 6s) linear forwards; }
.AnalisisBarras i.Activa:last-child { animation: none; background: var(--Azul); }
.Analisis.Pausado .AnalisisBarras i.Activa { animation-play-state: paused; }
@keyframes AvanceAnalisis { to { background-position: left; } }
.AnalisisCabecera { display: flex; align-items: center; gap: 10px; }
.AnalisisCabecera > div { display: grid; flex: 1; min-width: 0; }
.AnalisisCabecera strong { font-size: 14px; }
.AnalisisCabecera small { font-size: 11.5px; color: var(--Suave); }
.Analisis[data-tipo="Conclusión"] .AnalisisCabecera small { color: var(--Azul); font-weight: 700; }
.Analisis[data-tipo="Recomendación"] .AnalisisCabecera small { color: #1f7a50; font-weight: 700; }
.AnalisisTexto { margin: 0; min-height: 2.9em; font-size: 14.5px; line-height: 1.5; }
.AnalisisTexto b { color: var(--Azul); }
.AnalisisTexto mark { padding: 0 3px; border-radius: 4px; color: inherit; background: linear-gradient(transparent 35%, rgba(242, 205, 55, 0.65) 35%); }
.Analisis[data-tipo="Recomendación"] .AnalisisTexto { padding: 8px 10px; border-radius: 12px; border-left: 3px solid #21895c; background: rgba(33, 137, 92, 0.09); }
.AnalisisAviso { margin: 0; font-size: 11px; color: var(--Suave); }
.AnalisisControles { display: flex; justify-content: flex-end; gap: 6px; }
.Analisis .BotonIcono { min-width: 32px; min-height: 30px; padding: 2px 8px; }
.Escribiendo { display: inline-flex; gap: 4px; padding: 6px 0; }
.Escribiendo i { width: 7px; height: 7px; border-radius: 50%; background: var(--Azul); opacity: 0.35; animation: Escribiendo 1s infinite; }
.Escribiendo i:nth-child(2) { animation-delay: 0.15s; } .Escribiendo i:nth-child(3) { animation-delay: 0.3s; }
@keyframes Escribiendo { 50% { opacity: 1; transform: translateY(-2px); } }
/* Lo que señala el agente: el resto se atenúa, la tarjeta o el gráfico se enmarca y su cifra o título se subraya como con marcador */
.EnAnalisis :is(.KpiCaja, .PulseCaja, .Visor):not(.Foco) { opacity: 0.4; filter: saturate(0.5); }
:is(.KpiCaja, .PulseCaja, .Visor) { transition: opacity 0.3s, filter 0.3s; }
.Foco { position: relative; z-index: 6; border-radius: 18px; outline: 3px solid #f2cd37; outline-offset: 2px; box-shadow: 0 0 0 6px rgba(242, 205, 55, 0.22); animation: LatidoFoco 1.6s ease-in-out 2; }
@keyframes LatidoFoco { 50% { box-shadow: 0 0 0 15px rgba(242, 205, 55, 0.1); } }
/* Subrayado tipo marcador solo bajo el texto (no una franja de todo el ancho que tape el dato) */
.Foco :is(.Frente .KpiValor, .PulseCuerpo strong, .VisorCabecera h2) { text-decoration: underline; text-decoration-color: rgba(242, 205, 55, 0.85); text-decoration-thickness: 0.32em;
  text-underline-offset: -0.08em; text-decoration-skip-ink: none; animation: Subrayar 0.6s ease-out; }
@keyframes Subrayar { from { text-decoration-color: rgba(242, 205, 55, 0); } }
@media (max-width: 760px) { .Analisis { bottom: max(10px, env(safe-area-inset-bottom)); padding: 10px 12px 8px; } .AnalisisTexto { font-size: 14px; } }
@media (prefers-reduced-motion: reduce) { .Analisis, .Foco, .Foco *, .AnalisisBarras i.Activa, .Escribiendo i { animation: none !important; } }

/* ---------- Ventanas propias sin scroll hacia el lado. En el celular, Configuración en secciones desplegables: una abierta
   a la vez, que toma el alto libre y hace scroll dentro; la ventana completa no hace scroll ---------- */
.VentanaNativa .CajonCuerpo { overflow-x: hidden; }
@media (max-width: 760px) {
  .VentanaConfiguracion .CajonCuerpo.GrillaConfig { display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
  .VentanaConfiguracion .SeccionConfig { flex: none; display: flex; flex-direction: column; gap: 0; padding: 0; }
  .VentanaConfiguracion .SeccionConfig.Abierta { flex: 1 1 auto; min-height: 0; }
  .DesplegarSeccion { pointer-events: auto; padding: 12px 14px; cursor: pointer; }
  .DesplegarSeccion .Chevron { display: inline; }
  .DesplegarSeccion[aria-expanded="false"] .Chevron { transform: rotate(-90deg); }
  .VentanaConfiguracion .CuerpoSeccion { display: none; }
  .VentanaConfiguracion .Abierta .CuerpoSeccion { display: grid; flex: 1 1 auto; min-height: 0; overflow: hidden auto; overscroll-behavior: contain; padding: 0 14px 14px; }
  .TablaConfig { font-size: 11.5px; }
  .TablaConfig th, .TablaConfig td { padding: 4px 3px; }
  .TablaConfig td:first-child { overflow-wrap: anywhere; }
  .DatosConfig dd { overflow-wrap: anywhere; }
}
/* PC: Configuración sin scroll de la ventana. Dos filas que llenan el alto (la de arriba a su medida, la de abajo con el
   resto); si una sección trae más de lo que cabe, hace scroll dentro de su tarjeta. Las tablas se ajustan al ancho */
@media (min-width: 761px) {
  .VentanaConfiguracion .CajonCuerpo.GrillaConfig { height: 100%; overflow: hidden; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto minmax(0, 1fr); }
  .VentanaConfiguracion .SeccionConfig { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
  .VentanaConfiguracion .CuerpoSeccion { flex: 1 1 auto; min-height: 0; overflow: hidden auto; scrollbar-width: thin; }
}
.TablaConfig td:first-child { overflow-wrap: anywhere; }
.TablaConfig th, .TablaConfig td { white-space: normal; }

/* ---------- Mesa de análisis (bajo las tarjetas de la conversación): hilo tipo chat que se recorre hacia abajo, como un
   feed, y hallazgos en tarjetas con qué mejorar, en base a qué y cómo ayuda ---------- */
.Mesa { display: grid; gap: 12px; width: min(680px, 100%); margin: 18px auto 6px; }
.CabezaMesa { display: grid; gap: 2px; padding-top: 14px; border-top: 1px solid rgba(37, 75, 141, 0.12); }
.CabezaMesa h3, .TituloHallazgos { margin: 0; font-size: 15px; color: var(--Marino); }
.CabezaMesa small { font-size: 12px; color: var(--Suave); }
.HiloMesa { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.MensajeMesa { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 8px; align-items: start; }
.MensajeMesa .CaraLego { box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(37, 75, 141, 0.18); }
.MensajeMesa > div { padding: 8px 12px; border-radius: 4px 16px 16px 16px; background: rgba(255, 255, 255, 0.78); border: 1px solid var(--BordeVidrio); box-shadow: 0 2px 8px rgba(24, 55, 96, 0.06); }
.MensajeMesa strong { display: block; font-size: 12px; color: var(--Azul); }
.MensajeMesa strong small { font-weight: 600; color: var(--Suave); }
.MensajeMesa p { margin: 2px 0 0; font-size: 13.5px; line-height: 1.45; }
.TituloHallazgos { margin-top: 6px; }
.Hallazgo { display: grid; gap: 10px; padding: 14px 16px; border-radius: 18px; background: #fff; border: 1px solid #e3e9f1; border-top: 4px solid var(--Azul); box-shadow: 0 6px 18px rgba(24, 55, 96, 0.08); }
.Hallazgo.TipoKPI { border-top-color: #0089be; } .Hallazgo.TipoPestana { border-top-color: #6b5797; } .Hallazgo.TipoProceso { border-top-color: #21895c; }
.Hallazgo.TipoAlerta { border-top-color: #c91a09; } .Hallazgo.TipoDecision { border-top-color: #e89411; }
.Hallazgo > header { display: flex; align-items: center; gap: 10px; }
.Hallazgo > header > span:not(.ChipHallazgo) { display: grid; flex: 1; min-width: 0; }
.Hallazgo > header strong { font-size: 14.5px; line-height: 1.3; }
.Hallazgo > header small { font-size: 11.5px; color: var(--Suave); }
.ChipHallazgo { flex: none; padding: 2px 10px; border-radius: 999px; background: rgba(37, 75, 141, 0.08); color: var(--Azul); font-size: 11px; font-weight: 700; }
.Hallazgo dl { display: grid; gap: 2px; margin: 0; }
.Hallazgo dt { margin-top: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--Suave); }
.Hallazgo dt:first-child { margin-top: 0; }
.Hallazgo dd { margin: 0; font-size: 13.5px; line-height: 1.45; }

/* ---------- Barra de arriba en modo íconos: un ícono por modelo (Contabilidad…) que despliega sus pestañas al tocarlo.
   Con nombres se ven todas las pestañas y el ícono del modelo no aparece ---------- */
.GrupoModelo { display: contents; }
.BotonModelo { display: none; align-items: center; gap: 4px; padding: 6px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--Tinta); cursor: pointer; }
.BotonModelo:hover { background: rgba(37, 75, 141, 0.1); color: var(--Azul); }
.BotonModelo[aria-pressed="true"] { background: linear-gradient(180deg, #3a64ad, #254b8d); color: #fff; }
.BotonModelo .IconoPestana { display: block; width: 17px; height: 17px; }
.BotonModelo .NombrePestana { display: none; }
.BotonModelo::after { content: "▸"; font-size: 10px; opacity: 0.7; transition: transform 0.2s; }
.GrupoModelo.Abierto .BotonModelo::after { transform: rotate(180deg); }
:root[data-pestanas="Iconos"] .GrupoModelo { display: inline-flex; align-items: center; gap: 2px; border-radius: 12px; }
:root[data-pestanas="Iconos"] .GrupoModelo.Abierto { padding: 0 2px; background: rgba(37, 75, 141, 0.07); }
:root[data-pestanas="Iconos"] .BotonModelo { display: inline-flex; }
:root[data-pestanas="Iconos"] .GrupoModelo:not(.Abierto) .BotonPanel { display: none; }
@media (max-width: 760px) {
  :root[data-pestanas="Auto"] .GrupoModelo { display: inline-flex; align-items: center; gap: 2px; border-radius: 12px; }
  :root[data-pestanas="Auto"] .GrupoModelo.Abierto { padding: 0 2px; background: rgba(37, 75, 141, 0.07); }
  :root[data-pestanas="Auto"] .BotonModelo { display: inline-flex; padding: 7px 11px; }
  :root[data-pestanas="Auto"] .GrupoModelo:not(.Abierto) .BotonPanel { display: none; }
}

/* ---------- Pestaña Tareas: quién está a cargo y las tareas agrupadas por el agente que las hace ---------- */
.VistaTareas { display: grid; gap: 12px; width: min(900px, 100%); margin: 0 auto; }
.EncargadoTareas { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, 0.82); border: 1px solid #e3e9f1; }
.EncargadoTareas > div { display: grid; flex: 1; min-width: 0; }
.EncargadoTareas small { color: var(--Suave); font-size: 12px; }
.ResumenTareas { flex: none; padding: 3px 10px; border-radius: 999px; background: rgba(37, 75, 141, 0.08); color: var(--Azul); font-size: 12px; font-weight: 700; }
.GrupoTareas { display: grid; gap: 8px; }
.GrupoTareas > header { display: flex; align-items: center; gap: 8px; }
.GrupoTareas > header span { display: grid; }
.GrupoTareas > header small { color: var(--Suave); font-size: 11.5px; }
@media (max-width: 760px) { .EncargadoTareas { flex-wrap: wrap; } }
/* La cabeza del agente flota sobre el diálogo en un círculo de Liquid Glass (no hay cabeza flotante aparte: el chat es el botón) */
.Analisis { padding-left: 86px; overflow: visible; }
.AnalisisCara { position: absolute; left: 10px; top: -22px; display: grid; place-items: center; width: 70px; height: 70px; border-radius: 50%;
  background: radial-gradient(120% 90% at 30% 20%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.25) 60%), rgba(214, 230, 247, 0.35);
  -webkit-backdrop-filter: blur(16px) saturate(190%); backdrop-filter: blur(16px) saturate(190%); border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 1px 2px #fff, inset 0 -6px 14px rgba(37, 75, 141, 0.12), 0 12px 28px rgba(24, 55, 96, 0.28); animation: FlotarCara 3.2s ease-in-out infinite; }
.AnalisisCara .CaraLego { border: 0; background: transparent; box-shadow: none; }
@keyframes FlotarCara { 50% { transform: translateY(-4px); } }
.AnalisisTexto p { margin: 0 0 6px; } .AnalisisTexto p:last-child { margin-bottom: 0; }
.AnalisisTexto ul, .AnalisisTexto ol { margin: 4px 0; padding-left: 20px; }
.AnalisisTexto { max-height: 38vh; overflow-y: auto; overscroll-behavior: contain; }
.AnalisisControles { align-items: center; }
.AnalisisPregunta { display: flex; flex: 1; gap: 6px; min-width: 0; }
.AnalisisPregunta input { flex: 1; min-width: 0; min-height: 32px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--BordeVidrio); background: rgba(255, 255, 255, 0.8); font: inherit; font-size: 13px; }
.AnalisisPregunta .Boton { min-height: 32px; padding: 4px 12px; }
.Analisis[data-tipo="Respuesta"] .AnalisisCabecera small { color: var(--Azul); }
@media (max-width: 760px) {
  .Analisis { padding-left: 14px; padding-top: 30px; }
  .AnalisisCara { left: 50%; top: -38px; width: 60px; height: 60px; margin-left: -30px; }
  .AnalisisControles { flex-wrap: wrap; }
  .AnalisisPregunta { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { .AnalisisCara { animation: none; } }

/* Barra de pestañas: se arrastra con el mouse hacia el lado (sin barra de scroll visible) */
.BarraPaneles { cursor: grab; scrollbar-width: none; user-select: none; -webkit-user-select: none; }
.BarraPaneles::-webkit-scrollbar { display: none; }
.BarraPaneles.Arrastrando { cursor: grabbing; scroll-behavior: auto; }
.BarraPaneles.Arrastrando .BotonPanel, .BarraPaneles.Arrastrando .BotonModelo { pointer-events: none; }
/* Ventana amarilla: se arrastra desde la barra de título a cualquier parte del lienzo */

/* Widgets: un clic da vuelta la tarjeta (reverso: de dónde sale, qué mide y contra qué se compara); catálogo con recomendados y grupos */
.Widget.Volteado { animation: VoltearWidget 0.34s ease-in-out; }
@keyframes VoltearWidget { 50% { transform: perspective(700px) rotateY(90deg); } }
.WidgetReverso { display: none; gap: 6px; align-content: start; padding: 2px 2px 0; font-size: 12px; line-height: 1.4; overflow: hidden; }
.WidgetReverso p { margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.Widget.TamChico .WidgetReverso p { -webkit-line-clamp: 4; }
.Widget.TamGrande .WidgetReverso p { -webkit-line-clamp: 6; }
.Widget.TamChico .WidgetReverso > small:not(:first-child):not(.Pista) { display: none; }
.WidgetReverso > * { min-width: 0; }
.WidgetReverso small { color: var(--Suave); }
.WidgetReverso .Pista { font-size: 10.5px; opacity: 0.8; }
/* El frente se oculta siempre al voltear (algunos tipos, como el medidor mediano, le dan display: grid con más especificidad) */
.Widget.Volteado .WidgetCuerpo { display: none !important; }
.Widget.Volteado .WidgetReverso { display: grid; }
.CatalogoRecomendados, .CatalogoGrupo { display: grid; gap: 6px; margin-top: 10px; }
.CatalogoRecomendados > small, .CatalogoGrupo > small { font-weight: 700; color: var(--Suave); text-transform: uppercase; letter-spacing: 0.4px; font-size: 11px; }
.CatalogoRecomendados .CatalogoTipos { flex-wrap: wrap; }
@media (prefers-reduced-motion: reduce) { .Widget.Volteado { animation: none; } }


/* ---------- Inicio · Pulse: tarjetas cortas con lo más reciente; al tocarlas «despegan» hacia el panel del cruce ---------- */
.VentanaInicio { grid-template-rows: auto 1fr; }
.SubtituloPulse { color: var(--Suave); font-size: 12px; margin-left: 4px; }
.PulseInicio { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; align-content: start; width: min(1100px, 100%); margin: 0 auto; }
.TarjetaPulseInicio { display: grid; gap: 6px; align-content: start; min-height: 150px; padding: 14px 16px; border-radius: 18px; text-align: left; cursor: pointer; font: inherit; color: inherit;
  background: var(--Vidrio); -webkit-backdrop-filter: var(--DesenfoqueVidrio); backdrop-filter: var(--DesenfoqueVidrio); border: 1px solid var(--BordeVidrio);
  box-shadow: inset 0 1px 1px #fff, 0 6px 18px rgba(24, 55, 96, 0.1); transition: transform 0.18s, box-shadow 0.18s; }
.TarjetaPulseInicio:hover { transform: translateY(-2px); box-shadow: inset 0 1px 1px #fff, 0 12px 26px rgba(24, 55, 96, 0.16); }
.PulseArea { justify-self: start; padding: 1px 9px; border-radius: 999px; background: rgba(37, 75, 141, 0.08); color: var(--Azul); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; }
.PulseArea.Alerta { background: rgba(200, 68, 74, 0.1); color: #c8444a; }
.PulseTitulo { font-size: 13.5px; }
.PulseValor { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; font-size: 22px; font-weight: 700; letter-spacing: -0.4px; }
.PulseValor .ChipCambio { font-size: 11px; letter-spacing: 0; }
.TarjetaPulseInicio .Minilinea { width: 100%; height: 40px; }
.TarjetaPulseInicio p { margin: 0; font-size: 12.5px; color: var(--Tinta); }
.PulseIr { color: var(--Azul); font-size: 11.5px; font-weight: 650; }
/* Despegar: la tarjeta crece y se desvanece hacia el panel que se abre */
.TarjetaPulseInicio.Despegando { animation: DespegarPulse 0.3s ease-in forwards; }
@keyframes DespegarPulse { to { transform: scale(1.12) translateY(-10px); opacity: 0; box-shadow: 0 30px 60px rgba(24, 55, 96, 0.3); } }
/* Llegada al panel desde Pulse: la tarjeta del cruce se ilumina con un sello */
/* La franja de tarjetas deja aire arriba mientras dura el sello, para que no lo corte su borde */
:is(.Kpis, .Pulsos):has(> .DesdePulse, > * > .DesdePulse) { padding-top: 14px; overflow: visible; }
.DesdePulse::after { content: "Desde Pulse"; position: absolute; top: -11px; right: 12px; z-index: 7; padding: 1px 9px; border-radius: 999px; background: #f2cd37; color: #3d2f00;
  font-size: 10.5px; font-weight: 700; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12); }
@media (prefers-reduced-motion: reduce) { .TarjetaPulseInicio.Despegando { animation: none; } }
  background: linear-gradient(135deg, transparent 50%, rgba(37, 75, 141, 0.35) 50%, rgba(37, 75, 141, 0.35) 58%, transparent 58%, transparent 70%, rgba(37, 75, 141, 0.35) 70%, rgba(37, 75, 141, 0.35) 78%, transparent 78%); }

/* ---------- Tarjetas del consultor en su ficha: pestañas que se ajustan al ancho (dos filas si hace falta), flechas, puntos y pie ---------- */
.TarjetasConsultor { display: grid; gap: 8px; margin: 4px 0 8px; min-width: 0; max-width: 100%; }
.NavegacionConsultor { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px; min-width: 0; }
.PastillasConsultor { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; min-width: 0; }
.PastillasConsultor button { padding: 4px 10px; border-radius: 999px; border: 1px solid #d5dde8; background: rgba(255, 255, 255, 0.75); color: #3d4b5c;
  font: inherit; font-size: 12px; font-weight: 650; cursor: pointer; white-space: nowrap; }
.PastillasConsultor button[aria-selected="true"] { background: #254b8d; border-color: #254b8d; color: #fff; }
.FlechaConsultor { width: 30px; height: 30px; border-radius: 50%; border: 1px solid #d5dde8; background: rgba(255, 255, 255, 0.85); color: #254b8d; font: inherit;
  font-size: 18px; font-weight: 700; line-height: 1; cursor: pointer; }
.CartaConsultor { display: grid; gap: 8px; min-width: 0; padding: 12px 14px; border-radius: 18px; border: 1px solid #dfe7f1; border-top: 4px solid #254b8d;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.95), rgba(236, 243, 251, 0.9)); box-shadow: 0 8px 22px rgba(24, 55, 96, 0.1);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: pan-y; }
.CartaConsultor.Entrando { animation: EntrarCarta 0.28s ease-out; }
@keyframes EntrarCarta { from { opacity: 0.2; transform: translateX(14px) scale(0.98); } }
.CartaCabecera { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.CartaCabecera strong { font-size: 14px; }
.CartaCabecera small, .LineaNombre small, .LineaLugar { color: var(--Suave); font-size: 10.5px; }
.LineaKpi { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 10px; min-width: 0; }
.LineaNombre { display: grid; font-size: 12.5px; font-weight: 650; min-width: 0; }
.LineaValor { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; color: #14233c; text-align: right; }
.LineaKpi .FranjaEquipo { grid-column: 1 / -1; }
.LineaLugar { grid-column: 1 / -1; margin-top: -4px; }
.LineaLugar.Favorable { color: #15803d; }
.LineaLugar.Desfavorable { color: #b42318; }
.CartaConclusion { margin: 2px 0 0; padding: 8px 10px; border-radius: 12px; background: rgba(37, 75, 141, 0.07); font-size: 12px; line-height: 1.45; color: #1e2f4d; }
.FranjaEquipo { width: 100%; height: 26px; }
.FranjaEquipo .Eje { stroke: #d5dde8; stroke-width: 2; stroke-linecap: round; }
.FranjaEquipo .Par { fill: #b9c6d6; }
.FranjaEquipo .Promedio { stroke: #56647a; stroke-width: 2; stroke-dasharray: 3 3; }
.FranjaEquipo .Propio { fill: #254b8d; stroke: #fff; stroke-width: 2.5; }
.FranjaEquipo .Propio.Favorable { fill: #15803d; }
.FranjaEquipo .Propio.Desfavorable { fill: #c8444a; }
.PuntosConsultor { display: flex; justify-content: center; gap: 6px; }
.PuntosConsultor i { width: 6px; height: 6px; border-radius: 50%; background: #c8d3e1; transition: width 0.2s; }
.PuntosConsultor i.Activo { width: 16px; border-radius: 3px; background: #254b8d; }
.AccionesConsultor { display: flex; align-items: center; gap: 6px; min-width: 0; }
.AccionesConsultor .Vigencia { margin-right: auto; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.AccionesConsultor .Vigencia.Si { color: #15803d; background: rgba(21, 128, 61, 0.1); }
.AccionesConsultor .Vigencia.No { color: #b45309; background: rgba(217, 119, 6, 0.12); }
.AccionesConsultor .BotonMini { min-height: 28px; padding: 3px 12px; font-size: 12px; border-radius: 9px; }
@media (prefers-reduced-motion: reduce) { .CartaConsultor.Entrando { animation: none; } }
/* Ficha de un consultor: solo sus tarjetas (sin cuerpo vacío) y, si no cabe en alto, se desplaza dentro de la ficha */
.FichaFlotante:has(.TarjetasConsultor) { overflow-y: auto; overscroll-behavior: contain; }
.FichaFlotante .FichaCuerpo:empty { display: none; }

/* Ficha de consultor en verde: ocupa el lienzo; todas las tarjetas a la vista y gráficos de su aporte al equipo */
.FichaFlotante.FichaAmplia:has(.TarjetasConsultor) { left: 12px; right: 12px; top: 12px; bottom: 84px; width: auto; max-height: none; transform: none; }
.TarjetasConsultor.Amplia > :is(.NavegacionConsultor, .CartaConsultor, .PuntosConsultor) { display: none; }
.ZonaAmplia:empty { display: none; }
.ConsultorAmplio { display: grid; gap: 12px; min-width: 0; }
.GruposAmplios { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 10px; align-items: start; }
.GruposAmplios .CartaConsultor { animation: none; }
.GraficosConsultor { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 10px; }
.GraficoFicha { display: grid; gap: 6px; min-width: 0; padding: 10px 12px; border-radius: 16px; background: rgba(255, 255, 255, 0.85); border: 1px solid #e3e9f1; }
.GraficoFicha h3 { margin: 0; font-size: 13px; color: #14233c; }
.LienzoFicha { height: 240px; min-width: 0; }

/* Islas: flechas ‹ › en los bordes para cambiar de ambiente, aviso con el nombre de la isla y viaje con un leve fundido */
.FlechaIsla { position: absolute; top: 50%; z-index: 6; display: grid; justify-items: center; gap: 2px; padding: 10px 6px; border: 1px solid var(--BordeVidrio);
  border-radius: 16px; background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--Azul);
  box-shadow: 0 8px 24px rgba(31, 41, 55, 0.14); cursor: pointer; transform: translateY(-50%); transition: transform 0.15s ease, background 0.15s ease; }
.FlechaIsla.Izquierda { left: max(10px, env(safe-area-inset-left, 0px)); }
.FlechaIsla.Derecha { right: max(10px, env(safe-area-inset-right, 0px)); }
.FlechaIsla .Punta { font-size: 30px; font-weight: 800; line-height: 0.8; }
.FlechaIsla small { max-width: 64px; font-size: 10px; font-weight: 650; line-height: 1.1; text-align: center; color: var(--Suave); }
.FlechaIsla:hover { background: rgba(255, 255, 255, 0.92); }
.FlechaIsla.Izquierda:hover { transform: translateY(-50%) translateX(-2px); }
.FlechaIsla.Derecha:hover { transform: translateY(-50%) translateX(2px); }
.Escenario.ConPanel .FlechaIsla { display: none; }
.NombreIsla { position: absolute; top: 18px; left: 50%; z-index: 6; display: grid; justify-items: center; padding: 8px 18px; border-radius: 14px; transform: translateX(-50%);
  pointer-events: none; animation: AparecerIsla 0.35s ease; }
.NombreIsla b { font-size: 15px; color: var(--Azul); }
.NombreIsla small { font-size: 11px; color: var(--Suave); }
@keyframes AparecerIsla { from { opacity: 0; transform: translate(-50%, -8px); } }
.Mundo .Lienzo3D { transition: opacity 0.3s ease, filter 0.3s ease; }
.Mundo.Viajando .Lienzo3D { opacity: 0.55; filter: blur(2px); }
@media (prefers-reduced-motion: reduce) { .Mundo.Viajando .Lienzo3D { opacity: 1; filter: none; } }
@media (max-width: 760px) { .FlechaIsla { padding: 8px 4px; } .FlechaIsla small { display: none; } }

/* Sala de máquinas: letreros de las estaciones y su ficha (recorrido del dato, filtro por proyecto y lo que hay en cada uno) */
.Capa3D .Letrero.LetreroEstacion { padding: 4px 9px 5px; border-top: 3px solid var(--ColorEstacion); }
.Capa3D .Letrero.LetreroEstacion b { font-size: 12px; }
.Capa3D .Letrero.LetreroEstacion small { font-size: 9.5px; }
.IconoEstacion { width: 38px; height: 38px; flex: none; border-radius: 11px; background: var(--ColorEstacion);
  box-shadow: inset 0 -6px 0 rgba(0, 0, 0, 0.16), 0 4px 10px rgba(31, 41, 55, 0.16); }
.FichaEstacion { gap: 10px; }
.RecorridoDato { display: flex; flex-wrap: wrap; gap: 4px; padding-bottom: 8px; border-bottom: 1px solid rgba(37, 75, 141, 0.12); }
.RecorridoDato button { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px 3px 6px; border: 1px solid rgba(37, 75, 141, 0.14); border-radius: 999px;
  background: rgba(255, 255, 255, 0.6); font: inherit; font-size: 11px; color: var(--Texto, #1f2937); cursor: pointer; }
.RecorridoDato button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ColorEstacion); }
.RecorridoDato button:not(:last-child)::after { content: "→"; margin-left: 2px; color: var(--Suave); }
.RecorridoDato button:nth-last-child(2)::after { content: ""; margin: 0; }
.RecorridoDato button.Actual { border-color: var(--ColorEstacion); background: #fff; font-weight: 750; box-shadow: 0 0 0 2px color-mix(in srgb, var(--ColorEstacion) 30%, transparent); }
.TextoEstacion { margin: 0; line-height: 1.45; }
.Herramientas { display: flex; flex-wrap: wrap; gap: 4px; }
.Herramientas span { padding: 2px 8px; border-radius: 6px; background: rgba(0, 85, 191, 0.08); color: #1f4f9a; font-size: 11px; font-weight: 700; }
.FiltroProyectos { display: flex; flex-wrap: wrap; gap: 4px; }
.FiltroProyectos .Boton.Activo { background: var(--Azul); color: #fff; border-color: var(--Azul); }
.FiltroProyectos small { opacity: 0.7; }
.FiltroProyectos .Boton { min-height: 0; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; }
.GrupoEstacion h4 small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.GrupoEstacion { display: grid; gap: 6px; padding: 9px 10px; border: 1px solid rgba(37, 75, 141, 0.1); border-radius: 12px; background: rgba(255, 255, 255, 0.55); }
.GrupoEstacion h4 { display: grid; margin: 0; font-size: 13px; color: var(--Azul); }
.GrupoEstacion h4 small { font-weight: 500; font-size: 11px; color: var(--Suave); }
.ListaEstacion { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; }
.ListaEstacion li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; min-width: 0; }
.ListaEstacion code { min-width: 0; overflow-wrap: anywhere; font-size: 11.5px; }
.ListaEstacion small { flex-basis: 100%; padding-left: 4px; color: var(--Suave); font-size: 11px; }
.ListaEstacion .MasItems { color: var(--Suave); font-size: 11px; }
.TipoItem { flex: none; min-width: 58px; padding: 1px 6px; border-radius: 5px; background: rgba(31, 41, 55, 0.07); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--Suave); }
.ChipsEstacion { display: flex; flex-wrap: wrap; gap: 5px; }
.ChipRuta, .ChipAgente { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid rgba(37, 75, 141, 0.18); border-radius: 999px;
  background: #fff; font: inherit; font-size: 12px; color: var(--Azul); cursor: pointer; }
.ChipRuta:hover, .ChipAgente:hover { border-color: var(--Azul); }
.ChipAgente { padding: 3px 10px 3px 3px; }
.ChipAgente img { width: 24px; height: 24px; border-radius: 50%; background: rgba(37, 75, 141, 0.08); }
.ChipAgente small { color: var(--Suave); font-size: 10.5px; }
.FichaEstacion .Vacio { margin: 0; color: var(--Suave); }

/* Fábrica: etiquetas sobre cada cinta (MB y demora), selector de proyecto y balizas explicadas en la ficha de procesos */
.Capa3D .EtiquetaCinta { display: grid; justify-items: center; padding: 3px 8px; border-radius: 8px; background: rgba(28, 25, 22, 0.86); color: #f1e6d2;
  border-bottom: 2px solid #f2c230; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); white-space: nowrap; pointer-events: none; transform: translate(-50%, -100%); }
.Capa3D .EtiquetaCinta b { font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.Capa3D .EtiquetaCinta small { font-size: 9.5px; color: #d8cfc2; font-variant-numeric: tabular-nums; }
.Capa3D .EtiquetaCinta.Lenta { border-bottom-color: #ff4b3e; }
.Capa3D .EtiquetaCinta.Lenta small { color: #ffb4a8; }
.SelectorFabrica { position: absolute; left: 50%; bottom: 14px; z-index: 6; display: none; max-width: calc(100% - 140px); gap: 3px; padding: 4px; overflow-x: auto;
  border-radius: 999px; transform: translateX(-50%); scrollbar-width: none; }
.Mundo[data-isla="Arquitectura"] .SelectorFabrica { display: flex; }
.Escenario.ConPanel .SelectorFabrica { display: none !important; }
.SelectorFabrica button { flex: none; padding: 5px 11px; border: 0; border-radius: 999px; background: transparent; font: inherit; font-size: 12px; font-weight: 650; color: var(--Azul); cursor: pointer; }
.SelectorFabrica button.Activo { background: #1c1916; color: #f2c230; }
.Mundo[data-isla="Arquitectura"] ~ .Dock, .Mundo[data-isla="Arquitectura"] .Dock.BordeAbajo { bottom: 64px; }
.MedidasGrupo { display: flex; flex-wrap: wrap; gap: 4px; }
.MedidasGrupo span { padding: 2px 7px; border-radius: 6px; background: rgba(28, 25, 22, 0.07); font-size: 11px; font-variant-numeric: tabular-nums; color: #3a342e; }
.ProcesosAqui { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.ProcesosAqui > small { flex-basis: 100%; color: var(--Suave); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
.ChipProceso { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border: 1px solid rgba(28, 25, 22, 0.14); border-radius: 999px; background: #fff;
  font: inherit; font-size: 11.5px; color: #1c1916; cursor: pointer; }
.ChipProceso small { color: var(--Suave); }
:is(.ChipProceso, .Proceso) i { width: 9px; height: 9px; flex: none; border-radius: 50%; background: #9a9186; }
:is(.ChipProceso, .Proceso).EstadoBien i { background: #34d17a; }
:is(.ChipProceso, .Proceso).EstadoFallo i { background: #ff4b3e; }
:is(.ChipProceso, .Proceso).EstadoVivo i { background: #4c9bff; }
:is(.ChipProceso, .Proceso).EstadoEnCurso i { background: #ffb020; }
.RecorridoDato .BotonHorarios { border-color: #1c1916; background: #1c1916; color: #f2c230; font-weight: 750; }
.RecorridoDato .BotonHorarios::before { display: none; }
.RecorridoDato .BotonHorarios.Actual { box-shadow: 0 0 0 2px rgba(242, 194, 48, 0.5); }
.RecorridoDato button:nth-last-child(2)::after { content: ""; margin: 0; }
.RecorridoDato button:nth-last-child(3)::after { content: "→"; margin-left: 2px; }
.IconoReloj { display: grid; place-items: center; }
.IconoReloj::after { content: "⏱"; font-size: 20px; }
.ResumenProcesos { display: flex; flex-wrap: wrap; gap: 6px; }
.ResumenProcesos span { padding: 4px 10px; border-radius: 10px; background: rgba(52, 209, 122, 0.12); font-size: 12px; }
.ResumenProcesos span.Aviso { background: rgba(255, 176, 32, 0.16); }
.ResumenProcesos span.Falla { background: rgba(255, 75, 62, 0.14); }
.NotaProcesos { margin: 0; padding: 7px 10px; border-left: 3px solid #ffb020; border-radius: 6px; background: rgba(255, 176, 32, 0.08); font-size: 12px; line-height: 1.4; }
.Proceso { display: grid; gap: 6px; padding: 10px 11px; border: 1px solid rgba(28, 25, 22, 0.1); border-left: 4px solid #9a9186; border-radius: 12px; background: rgba(255, 255, 255, 0.6); }
.Proceso.EstadoBien { border-left-color: #34d17a; }
.Proceso.EstadoFallo { border-left-color: #ff4b3e; }
.Proceso.EstadoVivo { border-left-color: #4c9bff; }
.Proceso header { display: flex; align-items: center; gap: 7px; }
.Proceso header b { flex: 1; min-width: 0; font-size: 13px; }
.TipoProceso, .EstadoProceso { padding: 1px 7px; border-radius: 5px; font-size: 10px; font-weight: 750; text-transform: uppercase; letter-spacing: 0.04em; background: rgba(28, 25, 22, 0.07); color: #5b534b; }
.Proceso.EstadoFallo .EstadoProceso { background: rgba(255, 75, 62, 0.14); color: #b3261e; }
.Proceso.EstadoBien .EstadoProceso { background: rgba(52, 209, 122, 0.14); color: #17663d; }
.HorasProceso { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; margin: 0; font-size: 12px; }
.HorasProceso dt { color: var(--Suave); }
.HorasProceso dd { margin: 0; font-variant-numeric: tabular-nums; }
.HorasProceso dd.SinProgramar { color: #a35f00; font-weight: 650; }
.PasosProceso { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.PasosProceso li { display: grid; padding: 4px 9px; border-radius: 8px; background: #1c1916; color: #f1e6d2; font-size: 11px; line-height: 1.25; }
.PasosProceso li:not(:last-child)::after { content: none; }
.PasosProceso li b { font-size: 11px; }
.PasosProceso li span { font-variant-numeric: tabular-nums; color: #d8cfc2; }
.PasosProceso li small { color: #f2c230; font-weight: 750; }
.PasosProceso .FinPaso { background: #2f6f73; }
.ErrorProceso { margin: 0; padding: 6px 9px; border-radius: 8px; background: rgba(255, 75, 62, 0.1); color: #8c1d18; font: 11.5px ui-monospace, Consolas, monospace; overflow-wrap: anywhere; }
.DetalleProceso { margin: 0; color: var(--Suave); font-size: 11.5px; line-height: 1.4; }
.ChipEstacion { border-left: 4px solid var(--ColorEstacion); }
.TituloVivo { margin: 6px 0 0; font-size: 13px; color: var(--Azul); }
.TituloVivo small { color: #17663d; font-weight: 600; }
.TablaDesliza { overflow-x: auto; }
.TablaProcesos { width: 100%; border-collapse: collapse; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.TablaProcesos th { padding: 4px 6px; text-align: left; color: var(--Suave); font-weight: 650; border-bottom: 1px solid rgba(28, 25, 22, 0.12); white-space: nowrap; }
.TablaProcesos td { padding: 4px 6px; border-bottom: 1px solid rgba(28, 25, 22, 0.06); white-space: nowrap; }
.ListaTareasNube { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ListaTareasNube li { display: grid; padding: 5px 9px; border-left: 3px solid #4c9bff; border-radius: 6px; background: rgba(255, 255, 255, 0.6); font-size: 12px; }
.ListaTareasNube li.ConError { border-left-color: #ff4b3e; }
.ListaTareasNube small { color: var(--Suave); font-size: 11px; }
@media (max-width: 760px) { .SelectorFabrica { max-width: calc(100% - 90px); bottom: 10px; } .Capa3D .EtiquetaCinta small { display: none; } }

.Capa3D .EtiquetaCinta .Conteo { margin-top: 1px; padding-top: 2px; border-top: 1px solid rgba(241, 230, 210, 0.18); color: #f2c230; font-weight: 650; }
.Capa3D .Personaje3D.Visitante .NombreLego { border-bottom: 2px solid #f2c230; }

.DondeEsta { padding: 6px 10px; border-radius: 10px; background: rgba(28, 25, 22, 0.05); font-size: 12px; }
.DondeEsta summary { cursor: pointer; font-weight: 700; color: #3a342e; }
.DondeEsta ul { display: grid; gap: 3px; margin: 6px 0 2px; padding: 0; list-style: none; }
.DondeEsta code { font-size: 11px; overflow-wrap: anywhere; user-select: all; }
.MejorasFlujo { display: grid; gap: 6px; padding: 9px 10px; border: 1px dashed rgba(47, 111, 115, 0.45); border-radius: 12px; background: rgba(47, 111, 115, 0.06); }
.MejorasFlujo h4 { display: grid; margin: 0; font-size: 13px; color: #2f6f73; }
.MejorasFlujo h4 small { font-weight: 500; color: var(--Suave); font-size: 11px; }
.MejorasFlujo .Boton { justify-self: start; }
.Mejora { display: grid; gap: 4px; padding: 7px 9px; border-left: 3px solid #8fa3b8; border-radius: 8px; background: rgba(255, 255, 255, 0.75); }
.Mejora.ImpactoAlto { border-left-color: #ff4b3e; }
.Mejora.ImpactoMedio { border-left-color: #ffb020; }
.Mejora header { display: flex; align-items: center; gap: 6px; font-size: 12.5px; }
.Mejora header img { width: 22px; height: 22px; border-radius: 50%; background: rgba(37, 75, 141, 0.08); }
.Mejora p { margin: 0; font-size: 11.5px; line-height: 1.4; color: #3a342e; }
.QuienPropone { font-weight: 700; color: #2f6f73; }
.AccionMejora { display: block; padding: 4px 7px; border-radius: 6px; background: #1c1916; color: #f2c230; font-size: 10.5px; overflow-wrap: anywhere; user-select: all; }

/* Cada puente tiene su pieza LEGO: la etiqueta lleva su color en el borde y un ladrillito al lado del peso */
.Capa3D .EtiquetaCinta { border-bottom: 3px solid var(--ColorPieza, #f2c230); }
.Capa3D .EtiquetaCinta b::before { content: ""; display: inline-block; width: 12px; height: 8px; margin-right: 5px; border-radius: 2px; vertical-align: 1px;
  background: var(--ColorPieza, #f2c230); box-shadow: 3px -3px 0 -1px var(--ColorPieza, #f2c230), -3px -3px 0 -1px var(--ColorPieza, #f2c230); }

/* Mina: las etiquetas de cada puente van chicas, a la altura de los rieles, debajo de los letreros de las estaciones */
.Capa3D .DePie:has(.EtiquetaCinta) { z-index: 1; }
.Capa3D .DePie:has(.LetreroEstacion) { z-index: 3; }
.Capa3D .EtiquetaCinta { padding: 2px 7px; border-radius: 7px; background: rgba(28, 25, 22, 0.8); transform: translate(-50%, -30%); }
.Capa3D .EtiquetaCinta b { font-size: 10.5px; }
.Capa3D .EtiquetaCinta small { font-size: 9px; line-height: 1.2; }

.Capa3D .EtiquetaCinta { transform: none; }

/* Mina: catastro de errores, conexiones con ajustes y catálogo de maestros */
.ChipConexion { padding: 2px 8px; border-radius: 999px; background: rgba(47, 111, 115, 0.1); color: #2f6f73; font-size: 11px; font-weight: 650; }
.ChipConexion::before { content: "⚡ "; }
.ApisProceso { font-size: 11.5px; }
.ApisProceso summary { cursor: pointer; color: var(--Suave); font-weight: 650; }
.ApisProceso ul, .Falla ul { display: grid; gap: 2px; margin: 4px 0 0; padding: 0; list-style: none; }
.ApisProceso code, .Falla code { font-size: 10.5px; overflow-wrap: anywhere; }
.CatastroErrores { display: grid; gap: 6px; }
.CatastroErrores h4 { display: grid; margin: 4px 0 0; font-size: 13px; color: #b3261e; }
.CatastroErrores h4 small { font-weight: 500; color: var(--Suave); font-size: 11px; }
.Falla { display: grid; gap: 4px; padding: 8px 10px; border-left: 4px solid #ff4b3e; border-radius: 10px; background: rgba(255, 75, 62, 0.06); }
.Falla header { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; }
.Falla header small { color: var(--Suave); }
.Falla li { display: grid; }
.Falla li small { color: var(--Suave); font-size: 10.5px; }
:is(.ConexionesCuentas, .CatalogoMaestros) { display: grid; gap: 6px; padding: 8px 10px; border-radius: 12px; background: rgba(28, 25, 22, 0.04); }
:is(.ConexionesCuentas, .CatalogoMaestros) > summary { cursor: pointer; font-weight: 750; font-size: 13px; color: var(--Azul); }
:is(.Conexion, .MaestroCatalogo) { display: grid; gap: 4px; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.7); }
:is(.Conexion, .MaestroCatalogo) header { display: flex; align-items: center; gap: 6px; font-size: 12.5px; }
:is(.Conexion, .MaestroCatalogo) header b { flex: 1; min-width: 0; }
.MaestroCatalogo p { margin: 0; font-size: 11.5px; line-height: 1.4; }
.MaestroCatalogo small { color: var(--Suave); font-size: 10.5px; }
.DondeCambiar { display: block; padding: 3px 7px; border-radius: 6px; background: #1c1916; color: #f2c230; font-size: 10.5px; overflow-wrap: anywhere; user-select: all; }
.Ajuste { display: grid; gap: 4px; padding: 7px 9px; border: 1px dashed rgba(242, 194, 48, 0.8); border-radius: 8px; background: rgba(242, 194, 48, 0.08); font-size: 12px; }
.Ajuste label { font-weight: 700; }
.FilaAjuste { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.CampoAjuste { width: 74px; padding: 4px 6px; border: 1px solid rgba(28, 25, 22, 0.2); border-radius: 6px; font: inherit; }
.RiesgoAjuste { color: #a35f00; }
.EstadoAjuste { color: var(--Suave); font-size: 10.5px; }

/* Widget de consultores por hora: costo (coral) contra venta (verde) por consultor, margen y promedio del equipo */
.Widget.TipoConsultores .WidgetCabecera small { color: var(--Suave); font-size: 10.5px; }
.CuerpoConsultores { display: grid; gap: 6px; align-content: start; }
.PromediosConsultores { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.PromediosConsultores span { display: grid; padding: 4px 6px; border-radius: 8px; background: rgba(255, 255, 255, 0.6); line-height: 1.15; }
.PromediosConsultores small { font-size: 9.5px; color: var(--Suave); }
.PromediosConsultores b { font-size: 14px; font-variant-numeric: tabular-nums; }
.PromediosConsultores .Costo b { color: #c8444a; }
.PromediosConsultores .Venta b { color: #1f7a50; }
.PromediosConsultores .Gasto b { color: #a8741a; }
.PromediosConsultores .Margen b { color: var(--Azul); }
.PromediosConsultores .Negativo b, .ListaConsultores b.Negativo { color: #c8444a; }
.Widget.TipoConsultores .Segmentado button { padding: 2px 8px; font-size: 11px; }
.ListaConsultores { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ListaConsultores li { display: grid; grid-template-columns: 68px minmax(0, 1fr) 36px; align-items: center; gap: 6px; font-size: 11px; }
.NombreConsultor { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.BarrasConsultor { position: relative; display: grid; gap: 2px; }
.BarrasConsultor i { display: block; height: 6px; border-radius: 3px; }
.BarrasConsultor .BarraVenta { background: #3fae7a; }
.BarrasConsultor .BarraCosto { background: #ef7d5a; }
.BarrasConsultor .PilaCosto { display: flex; gap: 1px; }
.BarrasConsultor .PilaCosto i { flex: none; }
.BarrasConsultor .PilaCosto .BarraCosto { border-radius: 3px 0 0 3px; }
.BarrasConsultor .PilaCosto .BarraGasto { background: #e8b54a; border-radius: 0 3px 3px 0; }
.BarrasConsultor .PilaCosto .BarraCosto:last-child { border-radius: 3px; }
.BarrasConsultor .RayaPromedio { position: absolute; top: -2px; bottom: -2px; width: 2px; height: auto; border-radius: 1px; background: rgba(37, 75, 141, 0.7); }
.ListaConsultores b { text-align: right; font-variant-numeric: tabular-nums; color: var(--Azul); }
.MasConsultores { color: var(--Suave); font-size: 10px; }

/* Flechas de islas angostas (los widgets llegan al borde): el nombre de la isla se ve al pasar el mouse */
.FlechaIsla { padding: 12px 4px; }
.FlechaIsla small { display: none; }
.FlechaIsla:hover small { display: block; }

/* Widget de uso de Claude: barras de la semana y la sesión con su cuenta regresiva */
.CuerpoClaude { display: grid; gap: 6px; align-content: start; }
.PlanClaude { justify-self: start; padding: 1px 8px; border-radius: 999px; background: #1c1916; color: #f2c230; font-size: 10.5px; font-weight: 750; }
.FilaClaude { display: grid; gap: 3px; }
.TituloClaude { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; font-size: 12px; }
.TituloClaude small { color: var(--Suave); font-variant-numeric: tabular-nums; }
.BarraClaude { display: block; height: 7px; border-radius: 4px; background: rgba(37, 75, 141, 0.12); overflow: hidden; }
.BarraClaude i { display: block; height: 100%; border-radius: 4px; background: #d97757; }
.FilaClaude.Alta .BarraClaude i { background: #c8444a; }
.FilaClaude > small { color: var(--Suave); font-size: 10.5px; }
.LecturaClaude { color: var(--Suave); font-size: 9.5px; }
.Widget.TipoClaude.TamMediano .FilaClaude:nth-of-type(3) > small { display: none; }

/* Consultores por hora: usa todo el alto (las filas se reparten el espacio) y su reverso es el detalle por consultor */
.Widget.TipoConsultores .CuerpoConsultores { flex: 1; min-height: 0; grid-template-rows: auto auto minmax(0, 1fr) auto; }
.Widget.TipoConsultores.TamMediano .CuerpoConsultores { grid-template-rows: auto minmax(0, 1fr) auto; }
.Widget.TipoConsultores .ListaConsultores { align-content: space-evenly; min-height: 0; }
.Widget.TipoConsultores .BarrasConsultor i { height: 7px; }
.Widget.TipoConsultores.TamGrande .ListaConsultores li { font-size: 11.5px; }
.ReversoConsultores { flex: 1; min-height: 0; overflow: auto; }
.TablaConsultores { width: 100%; border-collapse: collapse; font-size: 10.5px; font-variant-numeric: tabular-nums; }
.TablaConsultores th { padding: 2px 3px; text-align: right; color: var(--Suave); font-weight: 650; border-bottom: 1px solid rgba(37, 75, 141, 0.15); }
.TablaConsultores td { padding: 2px 3px; text-align: right; border-bottom: 1px solid rgba(37, 75, 141, 0.06); }
.TablaConsultores td:first-child, .TablaConsultores th:first-child { text-align: left; }
.TablaConsultores td.Negativo { color: #c8444a; font-weight: 700; }
.TablaConsultores tfoot td { font-weight: 750; color: var(--Azul); border-bottom: 0; }
.Widget.TipoConsultores .ReversoConsultores p { -webkit-line-clamp: unset; font-size: 10.5px; color: var(--Suave); }

/* La flecha de islas queda a media altura de lo que se ve (el lienzo puede ser más alto que la pantalla) */
.FlechaIsla { top: min(50%, 46vh); }

/* Ficha de un agente: tres columnas que en verde (ficha amplia, todo el lienzo) quedan lado a lado sin scroll; propuestas por decidir
   en una línea con la cara del agente y Aprobar / Rechazar; fila de caras de la ventana Agentes centrada */
.FichaFlotante.FichaAmplia { left: 12px; right: 12px; top: 12px; bottom: 84px; width: auto; max-height: none; transform: none; }
.FichaCuerpo:has(> .ColumnaFicha) { display: grid; gap: 10px; align-content: start; }
.FichaAmplia .FichaCuerpo:has(> .ColumnaFicha) { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; overflow: auto; }
.ColumnaFicha { display: grid; gap: 8px; align-content: start; min-width: 0; }
.ColumnaFicha:empty { display: none; }
.DecisionRapida { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 12px;
  border: 1px solid #e3e9f1; background: rgba(255, 255, 255, 0.85); }
.DecisionTexto { display: grid; min-width: 0; }
.DecisionTexto strong { font-size: 12.5px; line-height: 1.3; overflow-wrap: anywhere; }
.DecisionTexto small { color: var(--Suave); font-size: 11px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.DecisionRapida .BotonMini { min-height: 28px; padding: 3px 10px; font-size: 12px; border-radius: 9px; }
.PendientesChat { display: grid; gap: 6px; }
.PendientesChat:empty { display: none; }
.Historias { justify-content: safe center; }
@media (max-width: 760px) { .FichaAmplia .FichaCuerpo:has(> .ColumnaFicha) { grid-template-columns: minmax(0, 1fr); } .DecisionRapida { grid-template-columns: auto minmax(0, 1fr); } }

/* Densidad de lo escrito sobre el mundo (Oficina3D.js), según el nivel de detalle de la barra de arriba: Nada · Avisos · Regular · Denso · Todo */
.Capa3D .DePie { transition: opacity 0.2s ease; }
.Capa3D .TagOculto { opacity: 0; }
.Capa3D .TagOculto, .Capa3D .TagOculto * { pointer-events: none !important; }
/* Nada: escena limpia */
.Capa3D[data-densidad="Nada"] .DePie { opacity: 0; }
.Capa3D[data-densidad="Nada"] .DePie * { pointer-events: none !important; }
/* Títulos de salas y estaciones desde Regular */
.Capa3D[data-densidad="Avisos"] .DePie:has(.Letrero) { opacity: 0; }
.Capa3D[data-densidad="Avisos"] .Letrero { pointer-events: none !important; }
/* Etiquetas de las cintas solo en Todo */
.Capa3D:not([data-densidad="Todo"]) .DePie:has(.EtiquetaCinta) { opacity: 0; }
/* Nombres: los de agentes activos desde Denso, el resto en Todo. Sin nombre queda solo el punto rojo de aviso. */
.Capa3D:is([data-densidad="Avisos"], [data-densidad="Regular"]) .Personaje3D .NombreLego,
.Capa3D[data-densidad="Denso"] .Personaje3D:not([data-importante]) .NombreLego {
  padding: 0; border-color: transparent; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: transparent; font-size: 0; }
.Capa3D:is([data-densidad="Avisos"], [data-densidad="Regular"]) .Personaje3D .Notificacion,
.Capa3D[data-densidad="Denso"] .Personaje3D:not([data-importante]) .Notificacion { right: auto; left: -10px; top: -10px; }

/* Fichas de la sala de máquinas: las tarjetas van en columnas cuando hay ancho (más de un registro por fila) */
.RejillaTarjetas { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); align-items: start; }
.FichaFlotante.FichaAmplia .FichaEstacion { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); align-items: start; overflow: auto; }
.FichaFlotante.FichaAmplia .FichaEstacion > :not(.GrupoEstacion, .Proceso) { grid-column: 1 / -1; }
.FichaFlotante.FichaAmplia .RejillaTarjetas { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.FichaFlotante.FichaAmplia .GrupoEstacion, .FichaFlotante.FichaAmplia .Proceso { height: 100%; }

/* Fuente de poder y oficina de ética: mosaicos de datos, series y tablas */
.RecorridoDato .BotonPoder { border-color: #e1251b; background: #2a0f0d; color: #ffb4a8; }
.RecorridoDato .BotonEtica { border-color: #6b4fbb; background: #2b2050; color: #d9ccff; }
.IconoPoder::after { content: "⚡"; display: grid; place-items: center; height: 100%; font-size: 20px; color: #fff; }
.FotoFicha { width: 44px; height: 44px; border-radius: 50%; background: rgba(107, 79, 187, 0.12); }
.MosaicosDatos { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.MosaicoDato { display: grid; gap: 1px; padding: 7px 9px; border-left: 3px solid #8fa3b8; border-radius: 10px; background: rgba(255, 255, 255, 0.7); }
.MosaicoDato small { color: var(--Suave); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; }
.MosaicoDato b { font-size: 17px; font-variant-numeric: tabular-nums; color: #1c1916; overflow-wrap: anywhere; }
.MosaicoDato span { color: var(--Suave); font-size: 10.5px; }
.MosaicoDato.NivelBajo { border-left-color: #34d17a; }
.MosaicoDato.NivelMedio { border-left-color: #ffb020; }
.MosaicoDato.NivelAlto { border-left-color: #ff4b3e; }
.MosaicoDato.NivelAlto b { color: #b3261e; }
.SerieEquipo { display: grid; gap: 4px; }
.SerieEquipo h4, .ProcesosEquipo h4, .BloqueEquipo h4, .PendientesPrivacidad h4, .TratamientosPrivacidad h4 { margin: 4px 0 0; font-size: 13px; color: var(--Azul); }
.SerieEquipo h4 small, .BloqueEquipo h4 small { color: var(--Suave); font-weight: 500; }
.LineaSerie { width: 100%; height: 46px; border-radius: 8px; background: rgba(255, 255, 255, 0.6); }
.PendientesPrivacidad ol { display: grid; gap: 4px; margin: 4px 0 0; padding-left: 20px; font-size: 12px; line-height: 1.4; }
.TipoProceso.Sensible { background: rgba(255, 75, 62, 0.14); color: #b3261e; }

/* Widgets del equipo y de la conexión */
:is(.EquipoCuerpo, .ConexionCuerpo) { display: grid; gap: 5px; align-content: start; flex: 1; min-height: 0; }
.FilaNivel { display: grid; gap: 2px; }
.FilaNivel > span:first-child { display: flex; justify-content: space-between; gap: 6px; font-size: 11.5px; }
.FilaNivel small { color: var(--Suave); font-variant-numeric: tabular-nums; }
.BarraNivel { display: block; height: 7px; border-radius: 4px; background: rgba(37, 75, 141, 0.12); overflow: hidden; }
.BarraNivel i { display: block; height: 100%; border-radius: 4px; }
.BarraNivel i.Bajo { background: #34a853; }
.BarraNivel i.Medio { background: #f5a623; }
.BarraNivel i.Alto { background: #e5484d; }
.ProcesosWidget { display: grid; gap: 2px; margin: 2px 0 0; padding: 0; list-style: none; font-size: 11px; }
.ProcesosWidget li { display: flex; justify-content: space-between; gap: 6px; }
.ProcesosWidget small { color: var(--Suave); font-variant-numeric: tabular-nums; }
.PieWidget { color: var(--Suave); font-size: 10px; }
.RedWifi { display: grid; line-height: 1.2; }
.RedWifi b { font-size: 14px; color: var(--Azul); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.RedWifi small { color: var(--Suave); font-size: 10.5px; }
.DatosConexion { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 4px; }
.DatoConexion { display: grid; padding: 4px 6px; border-left: 3px solid #8fa3b8; border-radius: 8px; background: rgba(255, 255, 255, 0.6); line-height: 1.15; }
.DatoConexion small { color: var(--Suave); font-size: 9.5px; }
.DatoConexion b { font-size: 13px; font-variant-numeric: tabular-nums; }
.DatoConexion.Bajo { border-left-color: #34a853; }
.DatoConexion.Medio { border-left-color: #f5a623; }
.DatoConexion.Alto { border-left-color: #e5484d; }
.DatoConexion.Alto b { color: #c8444a; }
.Widget :is(.TipoEquipo, .TipoConexion) .WidgetCabecera small, .Widget.TipoEquipo .WidgetCabecera small, .Widget.TipoConexion .WidgetCabecera small { color: var(--Suave); font-size: 10.5px; }
.TokensClaude { display: grid; padding: 4px 7px; border-radius: 8px; background: rgba(217, 119, 87, 0.1); line-height: 1.2; }
.TokensClaude small { color: var(--Suave); font-size: 9.5px; }
.TokensClaude b { font-size: 12px; font-variant-numeric: tabular-nums; }

/* Piezas de filtro sueltas y la barra de filtros de abajo (PC e iPad) */
.Widget.TipoPieza .WidgetCabecera { display: flex; align-items: center; gap: 6px; }
.Widget.TipoPieza .WidgetCabecera strong { flex: 1; }
.CuerpoPieza { display: grid; gap: 6px; align-content: center; flex: 1; }
.CuerpoPieza > small { color: var(--Suave); font-size: 10px; }
.CuerpoPieza .Segmentado { flex-wrap: wrap; }
.CuerpoPieza .Segmentado button { padding: 3px 7px; font-size: 11px; }
.CuerpoPieza select, .PiezaAbajo select { padding: 4px 6px; border: 1px solid var(--BordeVidrio); border-radius: 8px; background: rgba(255, 255, 255, 0.8); font: inherit; font-size: 12px; }
.MoverPieza { padding: 1px 7px; border: 1px solid rgba(37, 75, 141, 0.2); border-radius: 999px; background: #fff; color: var(--Azul); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.BarraFiltros { position: absolute; left: 50%; bottom: 14px; z-index: 6; display: flex; align-items: center; gap: 10px; max-width: calc(100% - 120px); padding: 5px 8px;
  overflow-x: auto; border-radius: 999px; transform: translateX(-50%); pointer-events: auto; scrollbar-width: none; }
.PiezaAbajo { display: flex; flex: none; align-items: center; gap: 5px; padding-right: 8px; border-right: 1px solid rgba(37, 75, 141, 0.12); }
.PiezaAbajo:last-child { border-right: 0; padding-right: 0; }
.PiezaAbajo > small { color: var(--Suave); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.PiezaAbajo .Segmentado button { padding: 4px 9px; font-size: 12px; }
.Escenario:has(.Mundo[data-isla="Arquitectura"]) .BarraFiltros, .Escenario.ConPanel .BarraFiltros { display: none; }
.Escenario:has(.BarraFiltros) .Dock.BordeAbajo { bottom: 70px; }
@media (max-width: 760px) { .BarraFiltros { display: none; } }

/* Navegador de modelos: siempre al centro de la barra de abajo */
.PiezaNavegador { gap: 2px; }
.PiezaNavegador button:not(.MoverPieza) { flex: none; padding: 5px 11px; border: 0; border-radius: 999px; background: transparent; font: inherit; font-size: 12px; font-weight: 650; color: var(--Azul); cursor: pointer; }
.PiezaNavegador button.Activo { background: #1c1916; color: #f2c230; }
.PiezaNavegador .MoverPieza { margin-left: 4px; }
#BarraPaneles > [hidden] { display: none !important; }

/* Con la ficha ampliada (botón verde) desaparecen las barras de abajo, igual que al abrir un panel */
body:has(.FichaFlotante.FichaAmplia:not([hidden])) :is(.BarraFiltros, .SelectorFabrica, .Dock) { display: none !important; }