:root {
  --bg: #04070c; --panel: rgba(12, 28, 44, .62); --borde: rgba(34, 211, 238, .2);
  --cian: #22d3ee; --texto: #d6eef7; --tenue: #8aa4b2; --ok: #34d399; --mal: #f87171; --aviso: #fbbf24;
  --personal: #a78bfa; --glamurban: #fb923c;
  --sans: 'Fira Sans', 'Segoe UI', system-ui, sans-serif; --mono: 'Fira Code', Consolas, ui-monospace, monospace;
}
* { box-sizing: border-box; scrollbar-width: thin; scrollbar-color: rgba(34, 211, 238, .25) transparent; }
html, body { height: 100%; }
body { margin: 0; color: var(--texto); font: 14.5px/1.45 var(--sans); display: flex; flex-direction: column;
  background: radial-gradient(circle at 50% -20%, #0b2a3d 0%, var(--bg) 60%) fixed var(--bg); }
[hidden] { display: none !important; }
a { color: var(--cian); }
:focus-visible { outline: 2px solid var(--cian); outline-offset: 2px; }
.ico { display: inline-flex; flex: none; }

/* ---------- cabecera ---------- */
header { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--borde); }
.marca { display: flex; align-items: center; gap: 10px; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; padding: 4px; }
.logo { font-weight: 700; letter-spacing: .32em; color: var(--cian); text-shadow: 0 0 12px rgba(34, 211, 238, .6); }
.reactor { width: 22px; height: 22px; border-radius: 50%; flex: none; animation: pulso 2.4s ease-in-out infinite;
  background: radial-gradient(circle, #e0fbff 0 18%, var(--cian) 30%, transparent 70%); box-shadow: 0 0 18px var(--cian); }
.reactor.activo { animation-duration: .6s; }
@keyframes pulso { 50% { box-shadow: 0 0 5px var(--cian); opacity: .7; } }
.eco-titulo { display: none; min-width: 0; }
.eco-titulo .fila { flex-wrap: nowrap; gap: 6px; }
.eco-titulo h1 { min-width: 0; margin: 0; font-size: 17px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eco-titulo .tenue { font-family: var(--mono); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#volver, #foco { display: none; }
body:not([data-vista="inicio"]) #volver { display: inline-flex; }
body.en-eco .eco-titulo { display: block; }
body.en-eco #foco { display: inline-flex; }
#foco[aria-pressed="true"] { color: #04070c; background: var(--cian); border-color: var(--cian); }
#avisos.activo { color: var(--cian); }
#estado-general { color: var(--tenue); font-size: 12px; margin-left: auto; }
#reloj { font-family: var(--mono); color: var(--tenue); font-size: 12px; }
#cuenta { font-size: 13px; max-width: 100%; }

/* ---------- pestañas del ecosistema ---------- */
nav { display: none; gap: 4px; padding: 8px 12px; border-bottom: 1px solid var(--borde); overflow-x: auto; }
body.en-eco nav { display: flex; }
nav button { display: inline-flex; align-items: center; gap: 7px; background: none; border: 1px solid transparent; color: var(--tenue);
  padding: 7px 12px; border-radius: 10px; font: inherit; cursor: pointer; white-space: nowrap; }
nav button:hover { color: var(--texto); }
nav button.activa { color: var(--cian); border-color: var(--borde); background: rgba(34, 211, 238, .08); }

/* ---------- base ---------- */
main { flex: 1; min-height: 0; padding: 12px; }
.vista { display: none; height: 100%; min-height: 0; }
.vista.activa { display: flex; flex-direction: column; gap: 12px; }
.panel { background: var(--panel); border: 1px solid var(--borde); border-radius: 14px; padding: 14px; min-height: 0;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.scroll { overflow: auto; }
.scroll > * { flex-shrink: 0; }
h2 { margin: 0 0 10px; font-size: 11.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--cian); }
.tenue { color: var(--tenue); font-size: 12.5px; }
button.b, .b { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: rgba(34, 211, 238, .12); color: var(--cian);
  border: 1px solid var(--borde); border-radius: 10px; padding: 7px 11px; font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s; }
button.b:hover, a.b:hover { background: rgba(34, 211, 238, .24); }
button.b:disabled { opacity: .45; cursor: default; }
button.b.icono { width: 40px; height: 40px; padding: 0; flex: none; color: var(--texto); background: var(--panel); }
button.b.primario { background: var(--cian); color: #04070c; border-color: var(--cian); }
button.peligro, button.b.icono.peligro { color: var(--aviso); border-color: rgba(251, 191, 36, .4); background: rgba(251, 191, 36, .1); }
textarea, select, input { background: rgba(0, 0, 0, .38); color: var(--texto); border: 1px solid var(--borde); border-radius: 10px; padding: 8px 10px; font: inherit; }
textarea { resize: vertical; min-height: 42px; width: 100%; }
.fila { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.chip { font-size: 10.5px; padding: 1px 8px; border-radius: 99px; border: 1px solid currentColor; }
.chip.personal { color: var(--personal); } .chip.glamurban { color: var(--glamurban); }
.ok { color: var(--ok); } .mal { color: var(--mal); } .aviso { color: var(--aviso); }
.lista { display: flex; flex-direction: column; gap: 8px; }
.grupo { display: flex; flex-direction: column; gap: 10px; }
.grupo > .fila > h2 { margin: 0; }
.solo-movil { display: none !important; }

/* ---------- dos columnas: contenido + chat (Inicio y el cerebro del ecosistema) ---------- */
.vista.dos-col.activa { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(360px, 1fr); gap: 14px; }
.col-principal { min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 16px; padding-right: 2px; }
.col-chat { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.chat-cab { display: flex; align-items: center; gap: 8px; }
.chat-cab strong { font-size: 15px; }
.chat-cab .chat-titulo { flex: 1; min-width: 0; }
.chat-cab .chat-titulo .tenue { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-cab > strong { flex: 1; }
#chat-eco-volver { display: none; }
#chat-eco.en-rama #chat-eco-volver { display: inline-flex; }
.abrir-chat { align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; border-radius: 14px; border: 1px solid rgba(34, 211, 238, .3);
  background: rgba(0, 0, 0, .45); color: var(--tenue); font: inherit; font-size: 15px; text-align: left; cursor: pointer; flex: none; }
.abrir-chat .ico { color: var(--cian); }

/* ---------- conversación ---------- */
.atajos { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; flex: none; }
.atajos button { flex: none; font-size: 12.5px; }
.flujo { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 9px; padding: 4px 2px 10px; min-height: 120px; }
.msg { max-width: 94%; padding: 8px 11px; border-radius: 12px; white-space: pre-wrap; word-break: break-word; }
.msg.yo { align-self: flex-end; background: rgba(34, 211, 238, .12); border: 1px solid var(--borde); }
.msg.bot { align-self: flex-start; background: rgba(255, 255, 255, .05); }
.msg.sis { align-self: center; font-size: 11.5px; color: var(--tenue); }
.msg.error { align-self: flex-start; color: var(--mal); font-family: var(--mono); font-size: 12px; }
.msg code { font-family: var(--mono); background: rgba(255, 255, 255, .07); padding: 0 4px; border-radius: 4px; }
form.enviar { display: flex; gap: 8px; align-items: flex-end; }
/* modelo, esfuerzo y comandos de Claude Code (v0.10) */
.ajustes-chat { display: flex; gap: 6px; flex: none; overflow-x: auto; }
.ajustes-chat select, .ajustes-chat .b { flex: none; padding: 4px 10px; min-height: 0; border-radius: 99px; font-size: 12.5px; background: rgba(0, 0, 0, .3); color: var(--tenue); }
.ajustes-chat .b { color: var(--cian); }
.paleta { display: flex; flex-direction: column; flex: none; max-height: 280px; overflow: auto; border: 1px solid var(--borde); border-radius: 12px; background: rgba(4, 7, 12, .97); }
.paleta button { display: flex; gap: 10px; align-items: baseline; min-height: 42px; padding: 8px 12px; border: 0; border-bottom: 1px solid rgba(138, 164, 178, .12);
  background: none; color: var(--texto); font: inherit; text-align: left; cursor: pointer; }
.paleta button:hover, .paleta button:focus-visible { background: rgba(34, 211, 238, .1); }
.paleta b { font: 500 13px var(--mono); color: var(--cian); } .paleta span { color: var(--tenue); font-size: 12.5px; }
form.enviar textarea { min-height: 44px; max-height: 160px; resize: none; }
button.escuchando { background: var(--mal) !important; color: #fff !important; }

/* tarjetas de herramientas (v0.10): cada paso del agente, desplegable, con su resultado */
details.herr { align-self: stretch; border: 1px solid rgba(138, 164, 178, .2); border-radius: 12px; background: rgba(12, 28, 44, .62); overflow: hidden; flex: none; }
details.herr > summary { display: flex; align-items: center; gap: 9px; min-height: 40px; padding: 0 12px; cursor: pointer; list-style: none; font-size: 13px; }
details.herr > summary::-webkit-details-marker { display: none; }
details.herr > summary .ico { color: var(--tenue); }
details.herr .verbo { color: var(--tenue); flex: none; }
details.herr .que { flex: 1; min-width: 0; font-family: var(--mono); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
details.herr .mas { font-family: var(--mono); font-size: 11.5px; color: #86efac; } details.herr .menos { font-family: var(--mono); font-size: 11.5px; color: #fca5a5; }
details.herr .que.sebs { font-family: var(--sans); font-size: 13px; }
button.lanzada { align-self: flex-start; flex: none; }
.msg.pensando { align-self: flex-start; display: inline-flex; gap: 5px; padding: 13px 15px; background: rgba(255, 255, 255, .05); }
.msg.pensando i { width: 7px; height: 7px; border-radius: 50%; background: var(--cian); animation: punto 1.2s ease-in-out infinite; }
.msg.pensando i:nth-child(2) { animation-delay: .15s; } .msg.pensando i:nth-child(3) { animation-delay: .3s; }
@keyframes punto { 0%, 60%, 100% { opacity: .3; translate: 0 0; } 30% { opacity: 1; translate: 0 -4px; } }
.msg.yo.provisional { opacity: .75; }
.activas { display: flex; gap: 6px; overflow-x: auto; flex: none; }
.activas:empty { display: none; }
.activas button { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 99px;
  border: 1px solid var(--cian); background: rgba(34, 211, 238, .1); color: var(--cian); font: inherit; font-size: 12.5px; cursor: pointer; }
.activas button.espera { border-color: var(--aviso); background: rgba(251, 191, 36, .1); color: var(--aviso); }
.activas button.cola { border-style: dashed; }
details.herr.error { border-color: rgba(248, 113, 113, .45); } details.herr.error > summary .ico { color: var(--mal); }
details.herr pre { margin: 0; padding: 8px 12px; font: 12px/1.55 var(--mono); background: rgba(0, 0, 0, .38); white-space: pre-wrap; word-break: break-word; max-height: 320px; overflow: auto; }
details.herr pre.salida { color: #b8cdd8; border-top: 1px solid rgba(138, 164, 178, .15); }
details.herr pre.diff { white-space: pre; overflow-x: auto; padding: 6px 0; }
pre, code, .que, #xterm { font-variant-ligatures: none; }
pre.diff span { display: block; padding: 0 12px; }
pre.diff .del { color: #fca5a5; background: rgba(248, 113, 113, .08); } pre.diff .add { color: #86efac; background: rgba(52, 211, 153, .08); }
.plan { align-self: stretch; flex: none; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 12px;
  border: 1px solid rgba(138, 164, 178, .2); background: rgba(12, 28, 44, .62); font-size: 13.5px; }
.plan .cab { display: flex; align-items: center; gap: 8px; color: var(--tenue); }
.plan .cab span:last-child { margin-left: auto; font-family: var(--mono); font-size: 12px; }
.plan .barra { margin: 0; height: 4px; }
.plan .paso { display: flex; align-items: center; gap: 8px; }
.plan .paso.completed { color: var(--tenue); text-decoration: line-through; } .plan .paso.completed .ico { color: var(--ok); }
.plan .paso.in_progress { color: var(--cian); font-weight: 500; }
.plan .punto-plan { width: 15px; display: inline-flex; justify-content: center; }
.plan .punto-plan::before { content: ''; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--tenue); }
.plan .paso.in_progress .punto-plan::before { border: 0; background: var(--cian); animation: latir 1.4s ease-in-out infinite; }
@keyframes latir { 50% { opacity: .35; } }

/* ---------- Inicio ---------- */
h2.necesita { color: var(--aviso); display: flex; align-items: center; gap: 8px; margin: 0; }
h2 .cuenta { font-family: var(--mono); letter-spacing: 0; padding: 0 7px; border-radius: 99px; background: rgba(251, 191, 36, .16); }
h2 .cuenta:empty { display: none; }
.item { display: flex; gap: 10px; align-items: center; padding: 11px 12px; border-radius: 14px; border: 1px solid var(--borde);
  background: var(--panel); color: var(--texto); font: inherit; text-align: left; cursor: pointer; text-decoration: none; width: 100%; }
.item:hover { border-color: rgba(34, 211, 238, .45); }
.item > .ico:first-child, .item .cuadro { width: 34px; height: 34px; border-radius: 10px; align-items: center; justify-content: center;
  background: rgba(34, 211, 238, .12); color: var(--cian); }
.item .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.item .txt b { font-weight: 600; } .item .txt span { font-size: 12.5px; color: var(--tenue); overflow: hidden; text-overflow: ellipsis; }
.item > .ico:last-child { color: var(--tenue); }
.item.mal { border-color: rgba(248, 113, 113, .4); background: rgba(248, 113, 113, .06); } .item.mal > .ico:first-child { background: rgba(248, 113, 113, .14); color: var(--mal); }
.item.aviso { border-color: rgba(251, 191, 36, .45); background: rgba(251, 191, 36, .06); } .item.aviso > .ico:first-child { background: rgba(251, 191, 36, .14); color: var(--aviso); }
.item.aviso .txt span { color: var(--aviso); }
#p-buscar { flex: 1; min-width: 140px; max-width: 260px; margin-left: auto; padding: 6px 10px; }
.chips button { border-radius: 99px; padding: 5px 13px; background: transparent; }
.chips button.sel { background: rgba(34, 211, 238, .14); border-color: rgba(34, 211, 238, .5); }
.rejilla.eco { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.eco-card { position: relative; border-radius: 16px; border: 1px solid var(--borde); background: var(--panel); transition: border-color .15s, box-shadow .15s; }
.eco-card:hover { border-color: rgba(34, 211, 238, .5); }
.eco-card .abrir { display: flex; flex-direction: column; gap: 8px; width: 100%; padding: 14px; border: 0; border-radius: 16px; background: none;
  color: var(--texto); font: inherit; text-align: left; cursor: pointer; }
.eco-card.vivo { border-color: rgba(34, 211, 238, .45); box-shadow: 0 0 24px rgba(34, 211, 238, .12); }
.eco-card .nombre { font-weight: 600; font-size: 15.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eco-card .cab { display: flex; align-items: center; gap: 8px; padding-right: 30px; min-width: 0; }
.eco-card .pie { display: flex; align-items: center; gap: 8px; }
.eco-card .sitio { margin-left: auto; font-size: 12px; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.eco-card .sitio::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.eco-card .estado { font-size: 12.5px; color: var(--tenue); }
.eco-card .fijar { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border-radius: 10px; border: 0; background: none;
  color: var(--tenue); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.eco-card .fijar[aria-pressed="true"] { color: var(--aviso); }
.eco-card .fijar[aria-pressed="true"] svg { fill: currentColor; }
.puntos { display: flex; align-items: center; gap: 6px; }
.puntos i { width: 9px; height: 9px; border-radius: 50%; background: rgba(138, 164, 178, .25); }
.puntos i.activo { background: var(--cian); box-shadow: 0 0 8px var(--cian); animation: latir 1.4s ease-in-out infinite; }
.puntos i.espera { background: var(--aviso); box-shadow: 0 0 8px var(--aviso); }
.puntos i.cola { background: transparent; border: 1.5px solid var(--cian); }
details.reposo summary { cursor: pointer; color: var(--tenue); padding: 10px 2px; }
details.reposo[open] summary { margin-bottom: 8px; }
.globales .b { background: transparent; }

/* ---------- el cerebro y sus ramas (v0.10) ---------- */
.grafo { position: relative; width: 100%; max-width: 440px; aspect-ratio: 358 / 322; margin: 4px auto 0; flex: none; }
.grafo > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.grafo line { stroke: rgba(138, 164, 178, .22); stroke-width: 1.5; }
.grafo line.activo { stroke: rgba(34, 211, 238, .35); stroke-width: 4; }
.grafo line.flujo { stroke: #a5f3fc; stroke-width: 2; stroke-dasharray: 3 7; stroke-linecap: round; animation: fluir .9s linear infinite; }
.grafo line.espera { stroke: rgba(251, 191, 36, .75); stroke-width: 2; stroke-dasharray: 5 5; }
.grafo line.cola { stroke: rgba(34, 211, 238, .5); stroke-width: 1.5; stroke-dasharray: 2 6; }
@keyframes fluir { to { stroke-dashoffset: -20; } }
.nucleo { position: absolute; left: 50%; top: 51.55%; width: 24.6%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  border: 1px solid rgba(34, 211, 238, .6); background: radial-gradient(circle, rgba(224, 251, 255, .95) 0 10%, rgba(34, 211, 238, .85) 24%, rgba(8, 47, 66, .9) 58%, var(--bg) 100%);
  box-shadow: 0 0 34px rgba(34, 211, 238, .5), inset 0 0 14px rgba(34, 211, 238, .35); display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 14px; color: #e0fbff; font: 600 10px var(--sans); letter-spacing: .2em; text-shadow: 0 0 4px var(--bg), 0 0 8px var(--bg); cursor: pointer; animation: nucleo 2.4s ease-in-out infinite; }
.nucleo.activo { animation-duration: 1.1s; }
@keyframes nucleo { 50% { box-shadow: 0 0 22px var(--cian), inset 0 0 18px rgba(34, 211, 238, .5); } }
.nodo { position: absolute; width: 52px; height: 52px; transform: translate(-50%, -50%); border-radius: 50%; border: 1px solid rgba(138, 164, 178, .35);
  background: rgba(12, 28, 44, .92); color: var(--tenue); display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: border-color .15s, color .15s, box-shadow .15s; }
.nodo:hover { color: var(--texto); border-color: rgba(34, 211, 238, .5); }
.nodo.sel { border-color: var(--texto); color: var(--texto); }
.nodo.activo { border-color: var(--cian); color: var(--cian); background: rgba(8, 47, 66, .95); box-shadow: 0 0 18px rgba(34, 211, 238, .55); }
.nodo.activo::after { content: ''; position: absolute; inset: -1px; border-radius: 50%; border: 2px solid var(--cian); animation: anillo 1.8s ease-out infinite; }
@keyframes anillo { from { transform: scale(1); opacity: .7; } to { transform: scale(1.55); opacity: 0; } }
.nodo.espera { border-color: var(--aviso); color: var(--aviso); background: rgba(66, 47, 8, .9); box-shadow: 0 0 18px rgba(251, 191, 36, .45); }
.nodo.cola { border: 1.5px dashed var(--cian); color: var(--cian); }
.nodo-et { position: absolute; transform: translateX(-50%); font-size: 12px; line-height: 16px; color: var(--tenue); white-space: nowrap; pointer-events: none; }
.nodo-et.activo { color: var(--cian); font-weight: 600; } .nodo-et.espera { color: var(--aviso); font-weight: 600; }
.rama-info { display: flex; flex-direction: column; gap: 8px; flex: none; }
.rama-info:empty { display: none; }
.rama-info p { margin: 0; color: var(--tenue); font-size: 13px; }
.rama-info .corridas { display: flex; gap: 6px; flex-wrap: wrap; }
.rama-ico { width: 38px; height: 38px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--cian); background: rgba(8, 47, 66, .95); color: var(--cian); box-shadow: 0 0 12px rgba(34, 211, 238, .4); }
#chat-eco-ico:empty { display: none; }

/* ---------- Terminales ---------- */
.t-chips { flex-wrap: nowrap; flex: none; }
.t-lista { display: flex; gap: 8px; overflow-x: auto; flex: 1; min-width: 0; padding-bottom: 2px; }
.ses { flex: none; display: flex; align-items: center; border: 1px solid rgba(138, 164, 178, .25); border-radius: 12px; background: var(--panel); color: #b8cdd8; }
.ses.sel { border-color: var(--cian); background: rgba(34, 211, 238, .12); color: var(--cian); }
.ses button { background: none; border: 0; color: inherit; font: inherit; font-size: 13px; cursor: pointer; }
.ses .abrir-ses { display: flex; gap: 8px; align-items: center; min-height: 40px; padding: 0 4px 0 12px; white-space: nowrap; }
.ses .x { color: var(--tenue); width: 32px; height: 40px; }
.ses .chip { font-size: 10px; }
.punto { width: 8px; height: 8px; border-radius: 50%; background: var(--tenue); flex: none; }
.punto.viva { background: var(--ok); box-shadow: 0 0 6px var(--ok); }
#t-nueva { flex: none; }
#xterm { flex: 1; min-height: 200px; background: #000; border-radius: 12px; padding: 6px; overflow: hidden; border: 1px solid rgba(34, 211, 238, .15); }
.teclas { display: flex; gap: 6px; overflow-x: auto; flex: none; }
.teclas button { flex: none; font-family: var(--mono); font-size: 12px; padding: 6px 10px; }

/* ---------- Trabajo, Ajustes, Sitios, Sistema ---------- */
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.tarjeta { background: var(--panel); border: 1px solid var(--borde); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.tarjeta h3 { margin: 0; font-size: 15px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tarjeta .acciones { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.barra { height: 6px; background: rgba(255, 255, 255, .08); border-radius: 3px; overflow: hidden; margin: 4px 0 12px; }
.barra > i { display: block; height: 100%; background: var(--cian); }
.evento { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, .05); }
.evento .ico { font-size: 18px; width: 26px; text-align: center; flex: none; }
.evento b { font-weight: 600; }

/* Aprobaciones (v0.4) */
#aprobaciones { display: flex; flex-direction: column; gap: 8px; padding: 0 12px; }
#aprobaciones:empty { display: none; }
.aprobacion { margin-top: 10px; border: 1px solid rgba(251, 191, 36, .55); background: rgba(251, 191, 36, .08); border-radius: 14px;
  padding: 12px; display: flex; flex-direction: column; gap: 8px; animation: llamar 1.6s ease-in-out 3; }
@keyframes llamar { 50% { box-shadow: 0 0 18px rgba(251, 191, 36, .45); } }
.aprobacion pre { margin: 2px 0 0; font: 12px/1.45 var(--mono); white-space: pre-wrap; word-break: break-word; max-height: 220px;
  overflow: auto; background: rgba(0, 0, 0, .35); padding: 8px; border-radius: 8px; }
.aprobacion pre.del { color: #fca5a5; } .aprobacion pre.add { color: #86efac; }
button.permitir { background: rgba(52, 211, 153, .18); color: var(--ok); border-color: rgba(52, 211, 153, .5); font-weight: 600; }
button.denegar, button.b.icono.denegar { background: rgba(248, 113, 113, .12); color: var(--mal); border-color: rgba(248, 113, 113, .45); }

.issue h3 { font-size: 14.5px; line-height: 1.35; }
.issue .cuerpo { color: var(--tenue); font-size: 12.5px; white-space: pre-wrap; max-height: 4.4em; overflow: hidden; cursor: pointer; }
.issue .cuerpo.abierto { max-height: none; }
.etiqueta { font-size: 10.5px; padding: 1px 7px; border-radius: 99px; background: rgba(255, 255, 255, .08); color: var(--texto); }
a.b { text-decoration: none; }

/* Recetas, reglas y parada total (v0.7) */
.recetas { display: flex; gap: 6px; flex-wrap: wrap; }
.recetas button { font-size: 12px; }
.regla { font: 11px var(--mono); padding: 1px 4px 1px 8px; border-radius: 99px; background: rgba(52, 211, 153, .12); color: var(--ok); }
.regla button { background: none; border: 0; color: var(--tenue); cursor: pointer; }
label.check { display: flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--tenue); }
#parada[data-confirmar] { background: var(--mal); color: #fff; width: auto; padding: 0 10px; }
button.siempre { white-space: normal; text-align: left; }

/* Trabajos y línea de tiempo (v0.8) */
.linea { border-left: 2px solid var(--borde); margin: 6px 0 2px 6px; padding-left: 14px; display: flex; flex-direction: column; gap: 9px; }
.hito { position: relative; font-size: 13px; overflow-wrap: anywhere; }
.hito::before { content: ''; position: absolute; left: -20px; top: 5px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--cian); }
.hito .hora { font: 11px var(--mono); color: var(--tenue); margin-right: 6px; }
.hito a { color: var(--cian); text-decoration: none; }
details.terminados summary { cursor: pointer; color: var(--tenue); margin: 4px 0 10px; }

/* Sitios (v0.8) */
.barras { display: flex; gap: 2px; height: 16px; }
.barras i { flex: 1; max-width: 10px; border-radius: 2px; background: var(--ok); opacity: .85; }
.barras i.caido { background: var(--mal); } .barras i.lento { background: var(--aviso); } .barras i.protegido { background: var(--cian); }
.sitio-chip { font-size: 12px; text-decoration: none; color: var(--texto); }

@media (prefers-reduced-motion: reduce) {
  .reactor, .nucleo, .nodo.activo::after, .grafo line.flujo, .puntos i.activo, .plan .paso.in_progress .punto-plan::before, .aprobacion, .msg.pensando i { animation: none; }
}

/* ---------- celular ---------- */
@media (max-width: 860px) {
  body { font-size: 15px; }
  body.en-eco { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  header { padding: 8px 10px; gap: 6px; }
  .logo { letter-spacing: .2em; font-size: 14px; }
  body.en-eco .marca, body:not([data-vista="inicio"]) .logo { display: none; }
  .eco-titulo { flex: 1; }
  #estado-general, #reloj { display: none; }
  body:not(.en-eco) .marca { margin-right: auto; }
  body.en-eco #ir-sistema { display: none; }
  .chips { flex-wrap: nowrap; overflow-x: auto; }
  .chips button { flex: none; }
  button.b.icono { width: 44px; height: 44px; }
  /* pestañas abajo, como app */
  nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; justify-content: space-around; gap: 0;
    background: rgba(4, 7, 12, .97); border-top: 1px solid var(--borde); border-bottom: 0; padding: 4px 2px calc(6px + env(safe-area-inset-bottom)); }
  nav button { flex-direction: column; gap: 3px; padding: 6px 2px; font-size: 11px; flex: 1; min-width: 0; min-height: 54px; border: 0; }
  nav button.activa { background: none; }
  main { padding: 8px 10px; }
  .solo-movil { display: flex !important; }
  textarea, input, select { font-size: 16px; } /* evita el zoom automático del celular */
  button.b, a.b { min-height: 42px; padding: 8px 12px; }
  .panel { padding: 10px; }
  /* una columna; el chat se abre a pantalla completa */
  .vista.dos-col.activa { display: flex; flex-direction: column; gap: 10px; }
  .col-principal { flex: 1; }
  .col-chat { display: none; }
  .col-chat.abierto { display: flex; position: fixed; inset: 0; z-index: 50; border-radius: 0; border: 0; padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
    background: radial-gradient(circle at 50% -20%, #0b2a3d 0%, var(--bg) 60%) var(--bg); }
  #chat-eco-volver { display: inline-flex; }
  #p-buscar { max-width: none; }
  .rejilla, .rejilla.eco { grid-template-columns: 1fr; }
  .tarjeta .acciones { display: grid; grid-template-columns: 1fr 1fr; }
  #xterm { min-height: 50vh; }
  .teclas button { min-height: 44px; min-width: 48px; font-size: 13px; }
  /* aprobaciones siempre a la vista */
  #aprobaciones { position: sticky; top: 0; z-index: 25; max-height: 60vh; overflow: auto; padding: 0 8px; }
  .aprobacion pre { max-height: 130px; }
}