/* Awareness · panel. Identidad CRIATech: fondo ink, azul de marca, acento verde del agente,
   Space Grotesk + JetBrains Mono locales y el sello octogonal (clip-path) en superficies no interactivas. */
@font-face{font-family:'Space Grotesk';font-weight:400;font-display:swap;src:url('/fuentes/SpaceGrotesk-400.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-weight:500;font-display:swap;src:url('/fuentes/SpaceGrotesk-500.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-weight:700;font-display:swap;src:url('/fuentes/SpaceGrotesk-700.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-weight:400;font-display:swap;src:url('/fuentes/JetBrainsMono-400.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-weight:500;font-display:swap;src:url('/fuentes/JetBrainsMono-500.woff2') format('woff2')}
:root{--bg-0:#05070a;--bg-1:#0a0d12;--bg-2:#0c1016;--bg-3:#11151b;--line:#1a1f28;--line-2:#2a303b;
  --fg-1:#e9edf2;--fg-2:#8a93a2;--fg-3:#5b6370;--blue:#1b70b4;--blue-2:#2a8ae0;--blue-3:#5fb8ff;
  --green:#4ac28a;--green-glow:rgba(74,194,138,.14);--warn:#e8b257;--red:#ff6b6b;
  --font:'Space Grotesk',system-ui,sans-serif;--mono:'JetBrains Mono',ui-monospace,monospace;--cut:14px}
body[data-acc=green]{--acc:var(--green);--acc-glow:var(--green-glow)}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html,body{background:var(--bg-0);color:var(--fg-1);font-family:var(--font);-webkit-font-smoothing:antialiased;min-height:100%}
body{line-height:1.5;position:relative}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(ellipse at top,var(--acc-glow) 0%,transparent 55%)}
::selection{background:var(--acc);color:var(--bg-0)}
:focus-visible{outline:2px solid var(--blue-3);outline-offset:3px}
.cab{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:12px;height:64px;padding:0 clamp(14px,3vw,32px);background:linear-gradient(180deg,#070a10,var(--bg-0));border-bottom:1px solid var(--line);backdrop-filter:blur(8px)}
.cab-marca,.cab-der{display:flex;align-items:center;gap:14px}
.logo{height:22px;width:auto}
.sep{width:1px;height:26px;background:var(--line-2)}
.modulo{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;color:var(--fg-2)}
.rotulo{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;color:var(--acc);margin-bottom:.3rem}
.rejilla-pagina{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(14px,2vw,24px);max-width:1280px;margin:0 auto;padding:clamp(14px,3vw,32px)}
@media (max-width:980px){.rejilla-pagina{grid-template-columns:minmax(0,1fr)}}
.panel{background:var(--bg-2);border:1px solid var(--line);padding:clamp(16px,2.5vw,28px);align-self:start}
.sello{clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut))}
h1{font-size:clamp(1.3rem,2.4vw,1.7rem);font-weight:700;line-height:1.2;margin-bottom:1rem}
h2{font-size:1.25rem;font-weight:700;margin-bottom:.8rem}
h3{font-size:1.05rem;font-weight:500;margin:1rem 0 .4rem}
h4{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;color:var(--fg-2);margin:1rem 0 .4rem;font-weight:500}
fieldset{border:0;margin:1.2rem 0 0;min-width:0}
legend{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;color:var(--fg-2);margin-bottom:.6rem}
.fila{display:flex;flex-wrap:wrap;gap:12px}
.campo{display:flex;flex-direction:column;gap:4px;flex:1;min-width:160px}
label{font-size:.85rem;color:var(--fg-2)}
select,input[type=text],input[type=password],textarea{font:inherit;color:var(--fg-1);background:var(--bg-1);border:1px solid var(--line-2);border-radius:6px;padding:.6rem .75rem;width:100%}
textarea{resize:vertical}
select:hover,input:hover,textarea:hover{border-color:var(--fg-3)}
.temas{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.tema{position:relative;display:block;padding:12px 14px;border:1px solid var(--line-2);border-radius:8px;background:var(--bg-1);cursor:pointer;min-height:84px}
.tema input{position:absolute;opacity:0;inset:0;cursor:pointer}
.tema strong{display:block;font-weight:500;font-size:.95rem;color:var(--fg-1)}
.tema span{display:block;font-size:.8rem;color:var(--fg-2);margin-top:.25rem}
.tema:hover{border-color:var(--fg-3)}
.tema:has(input:checked){border-color:var(--acc);background:var(--bg-3);box-shadow:inset 3px 0 0 var(--acc)}
.tema:has(input:focus-visible){outline:2px solid var(--blue-3);outline-offset:2px}
.libre{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.formatos{display:flex;flex-wrap:wrap;gap:10px}
.formato{display:flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid var(--line-2);border-radius:8px;background:var(--bg-1)}
.formato input{accent-color:var(--acc);width:1.05rem;height:1.05rem}
.formato.apagado{opacity:.55}
.formato small{font-family:var(--mono);font-size:.68rem;color:var(--fg-3)}
.nota{font-size:.85rem;color:var(--fg-2);margin:.6rem 0}
.error{color:var(--red);font-size:.9rem;min-height:1.3rem;margin:.4rem 0}
.boton{display:inline-block;font:inherit;font-weight:500;cursor:pointer;color:#fff;background:var(--blue);border:1px solid var(--blue);border-radius:6px;padding:.7rem 1.4rem;text-decoration:none;min-height:44px}
.boton:hover{background:#17629c}
.boton.sec{background:transparent;color:var(--blue-3);border-color:var(--line-2)}
.boton.sec:hover{border-color:var(--blue-3);background:var(--bg-3)}
.boton.peq{padding:.4rem .9rem;min-height:36px;font-size:.85rem}
.boton:disabled{opacity:.5;cursor:not-allowed}
.chip{display:inline-block;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;padding:.18rem .55rem;border:1px solid var(--line-2);border-radius:999px;color:var(--fg-2)}
.chip.running{color:var(--blue-3);border-color:var(--blue-3)}
.chip.completed{color:var(--acc);border-color:var(--acc)}
.chip.failed{color:var(--red);border-color:var(--red)}
.chip.waiting_ok{color:var(--warn);border-color:var(--warn)}
.pedidos{list-style:none;display:flex;flex-direction:column;gap:6px;max-height:320px;overflow:auto;margin-bottom:1rem}
.pedido{display:flex;align-items:center;gap:10px;width:100%;text-align:left;font:inherit;color:var(--fg-1);background:var(--bg-1);border:1px solid var(--line);border-radius:8px;padding:10px 12px;cursor:pointer}
.pedido:hover{border-color:var(--fg-3)}
.pedido[aria-current=true]{border-color:var(--acc);background:var(--bg-3)}
.pedido .titulo{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.92rem}
.pedido .hora{font-family:var(--mono);font-size:.7rem;color:var(--fg-3)}
.detalle{border-top:1px solid var(--line);padding-top:1rem}
.agentes{list-style:none;display:flex;flex-direction:column;gap:6px;margin:.8rem 0}
.agentes li{display:grid;grid-template-columns:1.4rem 8.5rem 1fr auto;gap:8px;align-items:baseline;font-size:.9rem}
.agentes .marca{font-family:var(--mono);color:var(--fg-3)}
.agentes .completed .marca{color:var(--acc)}
.agentes .running .marca{color:var(--blue-3)}
.agentes .failed .marca{color:var(--red)}
.agentes .mensaje{color:var(--fg-2);font-size:.82rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.agentes .costo{font-family:var(--mono);font-size:.72rem;color:var(--fg-3)}
.acciones{display:flex;flex-wrap:wrap;gap:10px;margin:.8rem 0}
.vista{width:100%;height:560px;border:1px solid var(--line-2);border-radius:8px;background:#fff;margin-top:12px}
.traza dl{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:.82rem}
.traza dt{font-family:var(--mono);color:var(--fg-2)}
.traza dd{color:var(--fg-1);word-break:break-all}
.fuentes{list-style:none;font-size:.8rem;margin-top:.6rem;display:flex;flex-direction:column;gap:4px}
.fuentes a{color:var(--blue-3);word-break:break-all}
.login{display:grid;place-items:center;min-height:100vh;padding:20px}
.acceso{position:relative;z-index:1;width:min(420px,100%);background:var(--bg-2);border:1px solid var(--line);padding:32px}
.acceso .logo{height:28px;margin-bottom:10px}
.acceso .modulo{margin-bottom:1.4rem}
.acceso form{display:flex;flex-direction:column;gap:8px}
.oficina{grid-column:1/-1}
.oficina h2{margin-bottom:0}
.oficina-cab{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.oficina-acciones{display:flex;align-items:center;gap:10px}
.lienzo{margin-top:14px;background:var(--bg-0);border:1px solid var(--line);display:flex;justify-content:center;overflow:hidden}
.lienzo canvas{display:block;image-rendering:pixelated}
.registro{margin-top:12px;max-height:200px;overflow:auto;font-family:var(--mono);font-size:.76rem;color:var(--fg-2);display:flex;flex-direction:column;gap:3px}
.registro p{margin:0}
.registro p::before{content:'›';color:var(--acc);margin-right:.55rem}
.registro:empty::before{content:'Aquí aparece, en palabras, lo que hace cada agente.';color:var(--fg-3)}
@media (max-width:700px){.lienzo{display:none}#o-demo{display:none}}
@media (max-width:520px){.cab{height:auto;min-height:56px;padding:10px 14px;flex-wrap:wrap}.cab-marca .sep{display:none}.logo{height:18px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}