/* Hallmark · sistema: Juanet Corp (design.md) · género: lúdico-técnico · tema: a medida «oficina de píxel, serena y legible»
 * papel oklch(95.1% 0.006 255) · acento oklch(52.3% 0.088 188) verde azulado · Silkscreen + Atkinson Hyperlegible
 * pre-emit critique: P4 H4 E4 S5 R4 V3
 */
/* Aplicación de una pantalla: barra de secciones arriba y, debajo, el mapa a la izquierda y un panel a la derecha, que es lo único que se desplaza. En móvil, todo en una columna. */
:root{
  /* color */
  --bg:oklch(95.1% 0.006 255); --surface:oklch(100% 0 0); --sunk:oklch(92.4% 0.009 258); --fg:oklch(24.6% 0.032 268); --muted:oklch(48.9% 0.038 266); --line:oklch(86.6% 0.017 263);
  --accent:oklch(52.3% 0.088 188); --accent-ink:oklch(100% 0 0); --mine:oklch(94.4% 0.019 185);
  --ok:oklch(55.5% 0.129 153); --ask:oklch(61.1% 0.129 71); --bad:oklch(55.1% 0.172 25); --idle:oklch(61% 0.03 267);
  /* fondo suave de cada estado: sale de su color y del panel, así vale en claro y en oscuro */
  --ok-bg:color-mix(in oklab,var(--ok) 34%,var(--surface)); --ask-bg:color-mix(in oklab,var(--ask) 36%,var(--surface)); --bad-bg:color-mix(in oklab,var(--bad) 34%,var(--surface));
  --marco:oklch(26.9% 0.017 271); --badge-ink:oklch(19% 0.039 92);
  /* tipografía: dos familias, cada una con su papel */
  --display:"Silkscreen","Courier New",monospace;                       /* rótulos y controles */
  --body:"Atkinson Hyperlegible","Segoe UI",Verdana,sans-serif;         /* todo lo que se lee */
  --pixel-s:11px; --pixel-l:20px;                                         /* rótulos y controles · nombres */
  --text-s:13px; --text-m:15px;                                           /* secundario · base */
  --track:.04em;
  /* espacio: escala de 4 */
  --space-3xs:2px; --space-2xs:4px; --space-xs:8px; --space-sm:12px; --space-md:16px; --space-lg:24px;
  --fila:28px;                                                           /* alto de una fila de datos */
  --borde:2px;
  --foco:5px;                                                            /* lo que sobresale el recuadro de foco: 3px de trazo a 2px del borde */
  --barra:44px;                                                          /* alto de la barra de secciones del móvil */
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:oklch(19.6% 0.015 267); --surface:oklch(24% 0.022 269); --sunk:oklch(21.4% 0.021 268); --fg:oklch(94% 0.01 267); --muted:oklch(71.4% 0.029 265); --line:oklch(33.8% 0.029 269);
    --accent:oklch(75.3% 0.118 185); --accent-ink:oklch(22.7% 0.033 188); --mine:oklch(29.8% 0.035 184);
    --ok:oklch(72.9% 0.149 154); --ask:oklch(80.3% 0.152 80); --bad:oklch(68.7% 0.163 22); --idle:oklch(65.7% 0.028 269); color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:oklch(19.6% 0.015 267); --surface:oklch(24% 0.022 269); --sunk:oklch(21.4% 0.021 268); --fg:oklch(94% 0.01 267); --muted:oklch(71.4% 0.029 265); --line:oklch(33.8% 0.029 269);
  --accent:oklch(75.3% 0.118 185); --accent-ink:oklch(22.7% 0.033 188); --mine:oklch(29.8% 0.035 184);
  --ok:oklch(72.9% 0.149 154); --ask:oklch(80.3% 0.152 80); --bad:oklch(68.7% 0.163 22); --idle:oklch(65.7% 0.028 269); color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:var(--text-m);line-height:1.45}
.outer{max-width:1532px;margin:0 auto;padding-inline:var(--space-md);padding-block:var(--space-md) var(--space-lg);display:flex;flex-direction:column;gap:var(--space-sm)}
.wrap{display:flex;flex-direction:column;gap:var(--space-md)}
.wrap.desk{width:1120px;transform-origin:0 0}
.wrap.mob{width:100%;max-width:390px;margin:0 auto}
.mob #nav{display:none}
.tabbar{display:none}
/* En móvil la barra de secciones va anclada al pie de la pantalla, y la página deja justo su hueco. */
.mob .tabbar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;padding-bottom:env(safe-area-inset-bottom,0px);background:var(--surface);border-top:var(--borde) solid var(--line);z-index:2}
.tabbar button{height:var(--barra);font-family:var(--display);font-size:var(--pixel-s);padding:var(--space-sm) 1px;border:0;border-right:2px solid var(--line);background:var(--surface);color:var(--fg);cursor:pointer;min-width:0;overflow:hidden;text-overflow:ellipsis}
.tabbar button:last-child{border-right:0}
.tabbar button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.mob .composer{bottom:calc(var(--barra) + var(--borde) + env(safe-area-inset-bottom,0px))}   /* la barra mide --barra más su borde de arriba */
.mob .barrow{grid-template-columns:96px minmax(0,1fr) 58px}
.top{display:flex;flex-wrap:wrap;gap:var(--space-xs) var(--space-lg);align-items:center;justify-content:space-between}
.brand{font-family:var(--display);font-weight:700;font-size:var(--pixel-l);margin:0;letter-spacing:var(--track)}
h2{font-family:var(--display);font-weight:400;font-size:var(--pixel-s);margin:0;letter-spacing:var(--track);text-transform:uppercase;color:var(--muted)}
h3{font-size:var(--text-m);font-weight:700;margin:0}
p{margin:0;max-width:65ch}
.muted{color:var(--muted);font-size:var(--text-s)}
button{font:inherit;color:inherit}
button:focus-visible,input:focus-visible{outline:3px solid var(--accent);outline-offset:2px}   /* suma --foco */
.seg{display:flex;flex-wrap:wrap;gap:var(--space-xs)}
.seg button,.btn{font-family:var(--display);font-size:var(--pixel-s);padding:var(--space-xs) var(--space-sm);border:var(--borde) solid var(--line);background:var(--surface);color:var(--fg);cursor:pointer}
.seg button[aria-pressed="true"],.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.badge{display:inline-block;min-width:18px;padding:0 var(--space-2xs);margin-left:var(--space-xs);background:var(--ask);color:var(--badge-ink);font-family:var(--display);font-weight:400;font-size:var(--pixel-s);text-align:center}
.tally{display:flex;flex-wrap:wrap;gap:var(--space-2xs) var(--space-md);font-family:var(--display);font-size:var(--pixel-s);letter-spacing:var(--track)}
.tally span{display:inline-flex;align-items:center;gap:var(--space-xs)}
.dot{width:10px;height:10px;flex:none;background:var(--idle);display:inline-block}
.dot.work{background:var(--ok)}.dot.ask{background:var(--ask)}.dot.bad{background:var(--bad)}.dot.off{background:var(--line)}
.main{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--space-md);align-items:start}
.desk .stage{position:sticky;top:8px}
.mob .main{grid-template-columns:minmax(0,1fr)}
.col{display:flex;flex-direction:column;gap:var(--space-sm);min-width:0}
.stage{position:relative;border:var(--borde) solid var(--line);background:var(--marco);line-height:0;min-width:0}
#cv{display:block;width:100%;cursor:pointer}
#zoomOut{position:absolute;left:8px;top:8px;line-height:1.2}
.card{border:var(--borde) solid var(--line);background:var(--surface);padding:var(--space-md);display:flex;flex-direction:column;gap:var(--space-xs);min-width:0}
/* Un rótulo abre un bloque: más aire por encima que por debajo, siempre el mismo. */
.card>h2:not(:first-child),.card>.col>h2:not(:first-child){margin-top:var(--space-sm)}
.head{display:flex;gap:var(--space-sm);align-items:center}
.av{image-rendering:pixelated;width:56px;height:56px;border:var(--borde) solid var(--line);flex:none}
.av.s{width:24px;height:24px}.av.m{width:36px;height:36px}
.head strong{font-family:var(--display);font-size:var(--pixel-l);display:block;line-height:1.1}
.pill{font-family:var(--display);font-size:var(--pixel-s);font-weight:400;letter-spacing:var(--track);padding:var(--space-3xs) var(--space-xs);border:var(--borde) solid currentColor;color:var(--idle);display:inline-block}
.pill.work{color:var(--ok)}.pill.ask{color:var(--ask)}.pill.bad{color:var(--bad)}
.prog{height:10px;border:var(--borde) solid var(--line);background:var(--sunk)}
.prog i{display:block;height:100%;background:var(--ok)}
.prog.warn i{background:var(--bad)}
.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 var(--space-md);font-size:var(--text-m);margin:0}
/* Todas las filas miden lo mismo, lleven texto o una ficha. */
.kv dt,.kv dd{min-height:var(--fila);display:flex;align-items:center;margin:0}
.kv dt{color:var(--muted);align-self:start}
.kv dd .chips{padding-block:var(--space-2xs)}.kv dd{font-variant-numeric:tabular-nums}
.chips{display:flex;flex-wrap:wrap;gap:var(--space-xs)}
.chip{display:inline-flex;align-items:center;gap:var(--space-xs);font-family:var(--display);font-size:var(--pixel-s);letter-spacing:var(--track);color:var(--fg);padding:var(--space-2xs) var(--space-xs) var(--space-2xs) var(--space-2xs);border:var(--borde) solid var(--line);background:var(--surface);cursor:pointer}
.chip.room{padding:var(--space-2xs) var(--space-xs)}
.live{display:flex;flex-direction:column;gap:0;font-size:var(--text-s);background:var(--sunk);border:var(--borde) solid var(--line);max-height:230px;overflow:auto}
.live div{display:grid;grid-template-columns:44px minmax(0,1fr);gap:var(--space-xs);padding:var(--space-2xs) var(--space-xs);border-bottom:1px solid var(--line)}
.live div:last-child{border-bottom:0}
.live time{color:var(--muted);font-variant-numeric:tabular-nums}
.live b{font-weight:700}
/* «En directo» de la oficina es una sola caja: el título es su cabecera y las líneas van debajo, dentro. */
.directo{border:var(--borde) solid var(--line);background:var(--sunk)}
.directo>h2{padding:var(--space-xs);border-bottom:var(--borde) solid var(--line);background:var(--surface)}
.directo>.live{border:0;background:none}
/* conversación */
.chat{display:flex;flex-direction:column;gap:var(--space-sm);max-width:720px}
.msg{display:flex;gap:var(--space-xs);align-items:flex-start;max-width:92%}
.msg.me{align-self:flex-end;flex-direction:row-reverse}
.bub{border:var(--borde) solid var(--line);background:var(--surface);padding:var(--space-xs) var(--space-sm);display:flex;flex-direction:column;gap:var(--space-xs);min-width:0}
.msg.me .bub{background:var(--mine)}
.bub small{color:var(--muted);font-size:var(--text-s)}
.aviso{margin:0;font-size:var(--text-s)}
.aviso.mal{color:var(--bad)}
.ficha{border:var(--borde) solid var(--accent);padding:var(--space-sm);display:flex;flex-direction:column;gap:var(--space-xs);background:var(--surface)}
.ficha h3{font-family:var(--display);font-size:var(--pixel-s);font-weight:400;letter-spacing:var(--track)}
.composer{display:flex;gap:var(--space-xs);position:sticky;bottom:env(safe-area-inset-bottom,0px);background:var(--bg);padding-block:var(--space-xs)}
/* La casilla de reanudar va dentro de la tarjeta de su encargo: no se pega abajo como la del chat. */
.composer.retomar,.mob .composer.retomar{position:static;background:none;padding-block:0}
.composer input{flex:1;min-width:0;font:inherit;padding:var(--space-sm);border:var(--borde) solid var(--line);background:var(--surface);color:var(--fg)}
/* encargos */
.board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-sm);align-items:start}
.mob .board{grid-template-columns:minmax(0,1fr)}
.task{border:var(--borde) solid var(--line);background:var(--surface);padding:var(--space-sm)}
.task summary{cursor:pointer;font-weight:700;list-style:none}
.task summary::-webkit-details-marker{display:none}
.task .sum{display:flex;flex-direction:column;gap:var(--space-xs)}
.task .sum .meta{font-weight:400}
.task .sum .prog{display:block}
.task .inner{display:flex;flex-direction:column;gap:var(--space-xs);margin-top:var(--space-xs)}
/* Las secciones de un encargo: plegadas, con lo esencial en el título y una señal de si están abiertas. */
.sec{border-top:var(--borde) solid var(--line);padding-top:var(--space-xs)}
.sec>summary{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2xs) var(--space-xs);font-weight:400;color:var(--muted)}
.sec>summary::before,.sec>summary>span:first-of-type{font-family:var(--display);font-size:var(--pixel-s);letter-spacing:var(--track);text-transform:uppercase}
.sec>summary::before{content:'+';width:1ch}
.sec[open]>summary::before{content:'−'}
.sec>summary .meta{margin-left:auto}
.meta{display:flex;flex-wrap:wrap;gap:var(--space-2xs) var(--space-sm);align-items:center;font-size:var(--text-s);color:var(--muted)}
.quote{border-left:4px solid var(--accent);padding-left:10px;font-style:italic}
/* organigrama */
.orgwrap{overflow-x:auto;border:var(--borde) solid var(--line);background:var(--surface);padding:var(--space-md)}
.org{display:flex;flex-direction:column;align-items:center;width:max-content;min-width:100%}
.vline{width:2px;height:16px;background:var(--line)}
.band{display:flex;flex-direction:column;align-items:center}
.bandt{font-family:var(--display);font-size:var(--pixel-s);letter-spacing:var(--track);color:var(--muted);text-transform:uppercase;padding:var(--space-3xs) var(--space-xs);border:var(--borde) solid var(--line);background:var(--sunk)}
.bus{display:flex;gap:var(--space-xs);border-top:2px solid var(--line)}
.ocol{display:flex;flex-direction:column;align-items:center}
.ocol::before,.sub::before{content:"";width:2px;height:12px;background:var(--line)}
.sub{display:flex;flex-direction:column;align-items:center}
.node{width:96px;display:flex;flex-direction:column;align-items:center;gap:var(--space-2xs);padding:var(--space-xs) var(--space-2xs);border:var(--borde) solid var(--line);background:var(--surface);cursor:pointer;text-align:center;font-size:var(--text-s);line-height:1.2}
/* El recuadro dice el estado con el color de su fondo; el marco es siempre el mismo y el elegido lleva un contorno. */
.node.e-work{background:var(--ok-bg)}
.node.e-ask{background:var(--ask-bg)}
.node.e-bad{background:var(--bad-bg)}
.node.e-off{background:var(--sunk);color:var(--muted)}
.node[aria-pressed="true"]{outline:3px solid var(--accent);outline-offset:2px}
.node small{font-size:var(--text-s);color:var(--muted)}
.node.e-work small,.node.e-ask small,.node.e-bad small{color:var(--fg)}
.node.you{cursor:default;background:var(--sunk)}
.youav{width:36px;height:36px;flex:none;border:var(--borde) solid var(--line);display:grid;place-items:center;font-family:var(--display);font-size:var(--pixel-s);background:var(--surface)}
/* costes y normas */
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-md);align-items:start}
.mob .grid2{grid-template-columns:minmax(0,1fr)}
.meter{position:relative;height:22px;border:var(--borde) solid var(--line);background:var(--sunk)}
.meter i{display:block;height:100%;background:var(--accent)}
.meter u{position:absolute;top:-6px;bottom:-6px;width:3px;background:var(--bad)}
.barrow{display:grid;grid-template-columns:120px minmax(0,1fr) 62px;gap:var(--space-xs);align-items:center;font-size:var(--text-s)}
.barrow span:last-child{text-align:right;font-variant-numeric:tabular-nums}
.barrow i{display:block;height:12px;background:var(--accent)}
.norm{display:flex;flex-wrap:wrap;gap:var(--space-xs) var(--space-md);align-items:center;justify-content:space-between;padding:var(--space-sm) 0;border-bottom:1px solid var(--line)}
.norm:last-child{border-bottom:0}
.norm>div:first-child{flex:1 1 240px;min-width:0}
.norm .seg button{font-size:var(--pixel-s);padding:var(--space-xs) var(--space-xs)}
.chip[aria-pressed="true"],.composer .btn.oyendo{border-color:var(--accent);background:var(--mine)}
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-xs);counter-reset:s}
.steps li{display:flex;gap:var(--space-sm);align-items:baseline;padding:var(--space-xs) var(--space-sm);border:var(--borde) solid var(--line);border-left-width:6px}
.steps li::before{counter-increment:s;content:counter(s) ".";font-family:var(--display);font-size:var(--pixel-s)}
.steps li span{flex:1;min-width:0}
.steps li small{color:var(--muted);font-size:var(--text-s)}
.steps .s2{border-left-color:var(--ok)}
.steps .s1{border-left-color:var(--ask);background:var(--mine)}
.steps .s0{color:var(--muted)}
.sw{width:32px;height:32px;border:var(--borde) solid var(--line);cursor:pointer;padding:0}
.sw[aria-pressed="true"]{outline:3px solid var(--fg);outline-offset:2px}
.left{text-align:left}
.salir{margin:0}
.salir .btn{padding:var(--space-2xs) var(--space-sm)}
body{margin:0}
[hidden]{display:none!important}
img{max-width:100%}
.acceso{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--space-md)}
.acceso .card{width:100%;max-width:340px}
.acceso label{font-size:var(--text-s);color:var(--muted)}
.acceso input:not([type=hidden]){font:inherit;padding:var(--space-xs) var(--space-sm);border:var(--borde) solid var(--line);background:var(--surface);color:var(--fg);min-width:0}
.acceso .error{color:var(--bad);margin:0;font-size:var(--text-s)}
.desk #right.alto #side{flex:1;min-height:0;overflow:auto}
.desk #right.alto #side>.col:last-child{flex:1;min-height:140px}
.desk #right.alto #liveAll{flex:1;min-height:0;max-height:none}
/* Barras de desplazamiento finas y cuadradas, del color de las líneas de la web. */
*{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line);border:var(--borde) solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--muted);background-clip:padding-box}
::-webkit-scrollbar-corner{background:transparent}
::-webkit-scrollbar-button{display:none}
/* clases de separación para lo que monta el programa */
.junto{gap:var(--space-xs)}
.pegado{gap:var(--space-2xs)}
.sin{gap:0}
/* En ordenador la página no se desplaza: lo hace el panel. */
html.fija,html.fija body{height:100%;overflow:hidden}
/* Un panel que se desplaza recorta lo que sobresale: se le da por los lados el hueco del recuadro de foco, sin mover su contenido. */
.desk #right,.desk #wide{overflow:auto;min-height:0;padding-inline:var(--foco);margin-left:calc(-1*var(--foco))}
.desk #right.alto{overflow:visible;padding-inline:0;margin-left:0}
.desk .outer{padding-block:var(--space-md)}
/* Organigrama: el árbol a la izquierda y la ficha de quien se elige a la derecha, cada uno con su desplazamiento. */
.orgdos{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-md);align-items:start}
.desk .orgdos{grid-template-columns:minmax(0,1fr) 340px;height:100%;align-items:stretch}
.desk #view-org{height:100%}
.desk .orgdos>*{min-height:0;overflow:auto}
.orgficha{min-width:0}
.brand{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-xs)}
.marca{image-rendering:pixelated;flex:none}
.outer:has(.mob){padding-bottom:calc(var(--barra) + env(safe-area-inset-bottom,0px))}
.mob .top{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start}
.mob .salir{grid-column:2;grid-row:1}
/* En móvil el nombre de la casa va en una sola fila, al lado de los botones, que se estrechan para dejarle sitio. */
.mob .nombre{white-space:nowrap}
.mob .salir .btn{padding-inline:var(--space-2xs)}
@media (max-width:359px){.mob .nombre{white-space:normal}}
.mob .tally{grid-column:1/-1;grid-row:2}
/* En móvil, la conversación ocupa toda la pantalla: sin la cabecera de la casa. */
.mob.en-chat .top{display:none}
/* Como un chat de verdad: con quién hablas queda fijo arriba, los mensajes pasan por debajo y la caja de escribir queda fija abajo. */
.chat>.head{position:sticky;top:0;z-index:1;background:var(--bg);padding-block:var(--space-xs);border-bottom:var(--borde) solid var(--line)}
/* La caja va pegada abajo aunque la conversación sea corta: la conversación ocupa todo el alto del panel (ordenador) o de la pantalla (móvil). */
.desk #right>#view-chat,.desk .chat{flex:1 0 auto}
.mob .chat{min-height:calc(100dvh - var(--space-md) - var(--barra) - var(--borde) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}
.chat>.composer{margin-top:auto}
.acceso .btn{margin-top:var(--space-sm)}
.salir{display:flex;gap:var(--space-xs)}
a.btn{text-decoration:none;display:inline-block;text-align:center}
.acceso .card>a.btn{margin-top:var(--space-xs)}
.lista-huellas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-xs)}
.lista-huellas li{display:flex;gap:var(--space-sm);align-items:center;justify-content:space-between;border:var(--borde) solid var(--line);padding:var(--space-xs) var(--space-sm)}
.lista-huellas li>div{display:flex;flex-direction:column;min-width:0}