/* La Central: una oficina en pixel art. La sala y la cabecera son moradas; las ventanas que se abren, claras. */
@font-face {
  font-family: "Pixelify Sans";
  src: url("/fuentes/pixelify-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  /* oficina (oscuro) */
  --noche: #1d1838; --morado: #2a2350; --morado2: #352c63; --morado3: #4a3f80; --linea: #120f24;
  --amarillo-p: #ffd23f; --amarillo-o: #d9a91a; --crema: #fff4d6; --crema-o: #e6d6aa; --rosa: #ffb3b3; --rosa-o: #e48888;
  --menta: #3ddc84; --coral: #ff5d5d; --claro: #f3eefc; --lila: #b9add9;
  --pixel: "Pixelify Sans", "Courier New", monospace;
  /* ventanas (claro) */
  --fondo: #f5f6f8; --panel: #ffffff; --panel2: #eef0f4; --texto: #1b1f27; --suave: #5d6675; --borde: #dde1e8;
  --acento: #5a3fc0; --acento-t: #ffffff; --verde: #1f9d55; --amarillo: #b27a00; --rojo: #d64545; --gris: #8a93a3;
  --verde-f: #e3f5ea; --amarillo-f: #fdf3d8; --rojo-f: #fbe5e5; --azul-f: #ece6fb;
  --radio: 10px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--noche); color: var(--claro); font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--acento); }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5rem; }
h1 { font-size: 1.4rem; } h2 { font-size: 1.15rem; } h3 { font-size: 1rem; }
p { margin: .3rem 0; }
button, input, textarea, select { font: inherit; color: inherit; }
.suave { color: var(--suave); }
.peque { font-size: .85rem; }
.error { color: var(--rojo); font-weight: 600; }
.oculto { display: none !important; }

/* ---------- botones pixel ---------- */
.boton-pixel { font-family: var(--pixel); font-weight: 700; font-size: 1rem; border: 0; cursor: pointer; padding: .6rem 1rem; color: #1d1838;
  box-shadow: inset -3px -3px 0 rgba(0,0,0,.25), inset 3px 3px 0 rgba(255,255,255,.35), 0 0 0 3px var(--linea); min-height: 44px; letter-spacing: .02em; }
.boton-pixel:active { transform: translateY(2px); box-shadow: inset 3px 3px 0 rgba(0,0,0,.25), 0 0 0 3px var(--linea); }
.boton-pixel:disabled { opacity: .5; cursor: default; transform: none; }
.boton-pixel.amarillo { background: var(--amarillo-p); }
.boton-pixel.crema { background: var(--crema); }
.boton-pixel.rosa { background: var(--rosa); }
.boton-pixel.menta { background: var(--menta); }
.boton-pixel.peque { font-size: .85rem; padding: .35rem .7rem; min-height: 34px; }
.boton-pixel:focus-visible, .objeto:focus-visible, .puesto:focus-visible { outline: 3px solid var(--amarillo-p); outline-offset: 3px; }

/* ---------- acceso ---------- */
body.acceso { display: grid; place-items: center; min-height: 100vh; padding: 16px;
  background: repeating-linear-gradient(0deg, #2c2454 0 14px, #231d45 14px 16px), var(--noche); }
.acceso-caja { background: var(--morado); border: 0; box-shadow: 0 0 0 4px var(--linea), inset 0 0 0 4px var(--morado3); padding: 1.6rem 1.4rem; width: 100%; max-width: 380px; text-align: center; }
.acceso-caja h1 { font-family: var(--pixel); color: var(--amarillo-p); font-size: 2rem; margin: .3rem 0 .6rem; }
.acceso-caja p { color: var(--claro); }
.acceso-nota { color: var(--lila) !important; font-size: .85rem; }
.acceso-puerta img { image-rendering: pixelated; }
.acceso-caja label { display: block; text-align: left; font-family: var(--pixel); color: var(--amarillo-p); margin: 1rem 0 .3rem; }
.acceso-caja input { width: 100%; padding: .7rem; font-size: 1.1rem; background: var(--crema); color: #1d1838; border: 0; box-shadow: 0 0 0 3px var(--linea); border-radius: 0; }
.acceso-caja button { width: 100%; margin-top: 1.1rem; }
.acceso-caja .error { color: #ffb0b0; font-weight: 700; }

/* ---------- cabecera ---------- */
.marco { max-width: 1440px; margin: 0 auto; }
header.cab { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem 1rem; padding: .7rem 16px; background: var(--morado); border-bottom: 4px solid var(--linea); }
.titulo-pixel { font-family: var(--pixel); color: var(--amarillo-p); font-size: 1.6rem; margin: 0; text-shadow: 3px 3px 0 var(--linea); letter-spacing: .03em; }
.cab-chips { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-left: auto; }
.chip { font-family: var(--pixel); font-size: .85rem; padding: .25rem .55rem; background: var(--morado2); color: var(--claro); box-shadow: 0 0 0 2px var(--linea); white-space: nowrap; }
.chip.verde { background: #17573a; color: #b9ffd8; } .chip.rojo { background: #6b1f2c; color: #ffc9c9; } .chip.amarillo { background: #5e4a0c; color: #ffe89a; }
.chip.texto { background: none; box-shadow: none; font-family: inherit; color: var(--lila); }
.cab-botones { display: flex; gap: .5rem; align-items: center; }
.icono-btn { position: relative; width: 40px; height: 40px; display: grid; place-items: center; background: var(--morado2); border: 0; box-shadow: 0 0 0 2px var(--linea); cursor: pointer; padding: 0; }
.icono-btn svg { width: 24px; height: 24px; }
.contador { position: absolute; top: -8px; right: -8px; min-width: 20px; height: 20px; padding: 0 4px; background: var(--coral); color: #fff; font: 700 .75rem/20px var(--pixel); text-align: center; box-shadow: 0 0 0 2px var(--linea); }
.contador.cero { background: var(--morado3); }
.salir { background: none; border: 0; color: var(--claro); text-decoration: underline; cursor: pointer; font-family: var(--pixel); padding: .3rem; }

/* ---------- acciones ---------- */
.acciones { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: flex-start; padding: 1rem 16px; background: var(--morado); border-bottom: 4px solid var(--linea); }
.acciones-izq { display: flex; flex-direction: column; align-items: flex-start; gap: .7rem; min-width: 0; flex: 1 1 380px; max-width: 760px; }
.acciones-der { flex: 0 1 460px; }
.btn-negocio { display: inline-flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; text-align: left; }
.btn-negocio b { font-size: 1.1rem; }
.btn-negocio span { font-family: system-ui, sans-serif; font-weight: 600; font-size: .85rem; }
.atajos { display: flex; flex-wrap: wrap; gap: .45rem; }
.acciones-der { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem .6rem; width: min(100%, 460px); }
.acciones-der .ancho { grid-column: 1 / -1; }
.estado-linea { grid-column: 1 / -1; color: var(--lila); font-size: .88rem; margin: .1rem 0 0; }
.estado-linea button { margin-left: .4rem; }
#bandas:empty { display: none; }
#bandas { padding: .6rem 16px 0; display: grid; gap: .5rem; }
.banda { font-family: var(--pixel); padding: .55rem .8rem; box-shadow: 0 0 0 3px var(--linea); color: #1d1838; }
.banda.amarillo { background: var(--amarillo-p); } .banda.rojo { background: var(--rosa); } .banda.azul { background: #a9d8ff; }

/* ---------- cuerpo: sala + columna ---------- */
.cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; padding: 16px; align-items: start; }
@media (max-width: 900px) { .cuerpo { grid-template-columns: minmax(0, 1fr); } }
.sala-zona { min-width: 0; }
.sala-marco { position: relative; overflow: hidden; box-shadow: 0 0 0 4px var(--linea); background: var(--linea); }
.sala-marco.ampliada { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sala { width: 960px; transform-origin: 0 0; position: relative; }
.cargando { padding: 2rem; font-family: var(--pixel); color: var(--amarillo-p); }
.sala-pie { display: flex; gap: .8rem; align-items: center; margin-top: .7rem; flex-wrap: wrap; }
.pista { color: var(--lila); font-size: .82rem; }
@media (min-width: 1000px) { #ampliar { display: none; } }

/* pared de ladrillo */
.pared { position: relative; padding-bottom: 18px;
  background-color: #4b3a8a;
  background-image:
    linear-gradient(#3a2c6e 2px, transparent 2px),
    linear-gradient(90deg, #3a2c6e 2px, transparent 2px),
    linear-gradient(90deg, #3a2c6e 2px, transparent 2px);
  background-size: 100% 16px, 32px 32px, 32px 32px;
  background-position: 0 0, 0 0, 16px 16px; }
.pared::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 16px, rgba(0,0,0,.0) 16px 32px); }
.decor { position: relative; height: 230px; }
.decor > * { position: absolute; }
.guirnalda { left: 0; top: 4px; width: 100%; }
.objeto { background: none; border: 0; padding: 0; cursor: pointer; color: inherit; }
.objeto:hover .rotulo, .objeto:focus-visible .rotulo { background: var(--amarillo-p); color: #1d1838; }
.objeto svg { display: block; }
.rotulo { display: block; margin-top: 4px; font: 700 .78rem/1.2 var(--pixel); background: rgba(18,15,36,.82); color: var(--claro); padding: 3px 6px; text-align: left; }
.globo-n { position: absolute; top: -10px; right: -10px; min-width: 24px; height: 24px; padding: 0 5px; background: var(--coral); color: #fff; font: 700 .85rem/24px var(--pixel); text-align: center; box-shadow: 0 0 0 2px var(--linea); }
.ventana-sala { left: 24px; top: 30px; text-align: left; }
.ventana-sala .rotulo { max-width: 150px; }
.corcho-pared { left: 196px; top: 36px; }
.reloj { left: 392px; top: 46px; background: #3a2416; padding: 5px; box-shadow: 0 0 0 3px var(--linea), inset 0 0 0 3px #7a4a2a; }
.reloj span { display: flex; align-items: center; justify-content: center; gap: 5px; background: #fff4d6; padding: 6px 9px; min-width: 92px; }
.reloj span svg, .reloj .dos svg { display: block; }
.reloj .dos { display: block; }
.reloj .dos { animation: parpadeo 1s steps(1) infinite; }
.tele { left: 528px; top: 26px; }
.calendario-pared { left: 730px; top: 30px; }
.estante { left: 640px; top: 160px; width: 300px; }
@keyframes parpadeo { 50% { opacity: 0; } }
.bombilla-luz { animation: parpadeo 2.4s steps(1) infinite; }
.bombilla-luz.b2 { animation-delay: 1.2s; }
.tele-barra { animation: subir 2s steps(4) infinite alternate; transform-box: fill-box; transform-origin: bottom; }
@keyframes subir { from { transform: scaleY(.6); } to { transform: scaleY(1); } }

/* pizarra encima de la pared */
.pizarra-sala { margin: 0 24px; background: #fff; color: var(--texto); box-shadow: 0 0 0 4px var(--linea); padding: 12px 16px 14px; position: relative; }
.pizarra-cab { display: flex; align-items: center; gap: .6rem; border-bottom: 2px solid var(--borde); padding-bottom: 8px; margin-bottom: 10px; }
.pizarra-cab h2 { font-family: var(--pixel); margin: 0; font-size: 1.3rem; }
.pizarra-cab .suave { font-size: .85rem; }
.pizarra-cab .der { margin-left: auto; display: flex; gap: .5rem; }
.plegar { background: none; border: 0; cursor: pointer; color: var(--amarillo-o); font-size: 1rem; padding: 4px 6px; }
.fases { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.fase { background: var(--panel2); padding: 6px; min-width: 0; min-height: 70px; }
.fase h3 { font: 700 .78rem/1.2 var(--pixel); color: var(--suave); display: flex; justify-content: space-between; margin: 0 0 6px; text-transform: uppercase; }
.fase.revisar { background: #fdecec; }
.ficha-mini { display: block; width: 100%; text-align: left; background: #fff; border: 0; box-shadow: 0 0 0 2px #d8d2ec; padding: 4px 6px; margin-bottom: 6px; cursor: pointer; font-size: .76rem; line-height: 1.25; color: var(--texto); overflow: hidden; }
.ficha-mini:hover { box-shadow: 0 0 0 2px var(--acento); }
.ficha-mini b { display: block; color: var(--acento); font-family: var(--pixel); }
.ficha-mini span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pizarra-vacia { background: var(--panel2); padding: .8rem 1rem; color: var(--suave); }

/* zócalo y suelo de tarima */
.zocalo { height: 14px; background: #3a2416; border-top: 4px solid #5c3a22; }
.suelo { padding: 26px 20px 30px; display: flex; flex-wrap: wrap; justify-content: center; gap: 40px 26px; min-height: 300px;
  background-color: #6b3f22;
  background-image:
    linear-gradient(#4f2d17 2px, transparent 2px),
    linear-gradient(90deg, #4f2d17 2px, transparent 2px),
    linear-gradient(90deg, #4f2d17 2px, transparent 2px),
    linear-gradient(rgba(255,255,255,.04) 50%, transparent 50%);
  background-size: 100% 22px, 96px 44px, 96px 44px, 100% 22px;
  background-position: 0 0, 0 0, 48px 22px, 0 0; }
.puesto { position: relative; width: 196px; background: none; border: 0; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; color: inherit; }
.puesto svg { display: block; }
.puesto:hover .placa { transform: translateY(-2px); }
.placa { margin-top: 2px; background: var(--crema); color: #1d1838; text-align: center; padding: 3px 12px 4px; box-shadow: 0 0 0 3px var(--linea); border-left: 8px solid var(--c, #888); min-width: 120px; transition: transform .1s; }
.placa b { display: block; font-family: var(--pixel); font-size: 1rem; line-height: 1.1; }
.placa small { display: block; font-family: var(--pixel); font-size: .78rem; color: #5a4f7a; }
.bocadillo { position: absolute; top: -6px; left: 50%; transform: translateX(-10%); background: #fff; color: #1d1838; font: 700 .72rem/1.2 var(--pixel); padding: 3px 6px; box-shadow: 0 0 0 2px var(--linea); max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; z-index: 2; }
.bocadillo.rojo { background: var(--coral); color: #fff; }
.bocadillo.aviso { background: var(--amarillo-p); }
.zz { position: absolute; top: 6px; left: 44%; font: 700 1rem var(--pixel); color: #fff; text-shadow: 2px 2px 0 var(--linea); animation: flotar 2.4s steps(6) infinite; pointer-events: none; }
@keyframes flotar { 0% { transform: translate(0, 6px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(14px, -16px); opacity: 0; } }
.progreso-mini { display: block; margin: 4px auto 2px; width: 110px; height: 8px; background: var(--linea); margin-top: 4px; box-shadow: 0 0 0 2px var(--linea); }
.progreso-mini span { display: block; height: 100%; background: var(--menta); }
.mano-a { animation: teclea .5s steps(1) infinite; }
.mano-b { animation: teclea .5s steps(1) infinite reverse; animation-delay: .25s; }
@keyframes teclea { 50% { transform: translateY(-1px); } }
.pantalla-luz { animation: parpadeo 1.6s steps(1) infinite; }
.temblor { animation: temblor .4s steps(2) infinite; }
@keyframes temblor { 50% { transform: translateX(1px); } }
@media (prefers-reduced-motion: reduce) { .zz, .mano-a, .mano-b, .pantalla-luz, .temblor, .bombilla-luz, .tele-barra, .reloj .dos { animation: none; } }

/* ---------- columna derecha ---------- */
.columna-der { display: grid; gap: 14px; min-width: 0;
  --texto: var(--claro); --suave: var(--lila); --borde: var(--morado3); --panel: var(--morado); --panel2: var(--morado2); --acento: var(--amarillo-p); --acento-t: #1d1838;
  --verde: #6ee7a8; --amarillo: #ffd23f; --rojo: #ff8c8c; --verde-f: #17573a; --amarillo-f: #5e4a0c; --rojo-f: #6b1f2c; --azul-f: var(--morado3); }
.corcho { background-color: #b98a55; padding: 12px 12px 14px; box-shadow: 0 0 0 4px var(--linea), inset 0 0 0 6px #7a4a2a;
  background-image: radial-gradient(#a0723f 1px, transparent 1.5px), radial-gradient(#cfa06a 1px, transparent 1.5px); background-size: 7px 7px, 11px 11px; background-position: 0 0, 3px 4px; }
.corcho h2 { font-family: var(--pixel); color: #3a2416; font-size: 1rem; margin: 4px 4px 8px; }
.papel { position: relative; background: var(--crema); color: #1d1838; padding: 10px 10px 8px; box-shadow: 2px 3px 0 rgba(0,0,0,.35); margin: 0 4px 10px; }
.papel::before { content: ""; position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; background: #3f6bff; box-shadow: 0 0 0 2px var(--linea); }
.papel.rosa::before { background: var(--coral); } .papel.verde::before { background: #1f9d55; }
.papel.girado { transform: rotate(-1.2deg); } .papel.girado2 { transform: rotate(1deg); }
.papel.rosa { background: #ffe0e0; } .papel.amarillo { background: #fff2a8; }
.contadores { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; }
.contadores b { display: block; font: 700 1.6rem/1.1 var(--pixel); }
.contadores span { font-size: .72rem; }
.c1 { color: #1f9d55; } .c2 { color: #d64545; } .c3 { color: #d9822b; } .c4 { color: #3f6bff; }
.papel p { margin: 0; font-size: .86rem; }
.papel button { margin-top: 6px; }
.plegable { background: var(--morado); box-shadow: 0 0 0 4px var(--linea), inset 0 0 0 3px var(--morado2); }
.plegable > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: .5rem; padding: .7rem .9rem; }
.plegable > summary::-webkit-details-marker { display: none; }
.plegable > summary b { font-family: var(--pixel); color: var(--amarillo-p); font-size: 1rem; }
.plegable > summary small { color: var(--lila); font-size: .78rem; font-weight: 600; }
.plegable > summary::after { content: "▼"; margin-left: auto; color: var(--amarillo-p); font-size: .8rem; }
.plegable[open] > summary::after { content: "▲"; }
.plegable-cuerpo { padding: 0 .9rem .9rem; font-size: .9rem; }
.plegable-cuerpo .boton-pixel { width: 100%; margin-top: .6rem; }
.lista-corta { list-style: none; padding: 0; margin: 0; }
.lista-corta li { padding: .3rem 0; border-bottom: 1px dashed var(--morado3); display: flex; gap: .5rem; font-size: .85rem; }
.lista-corta time { color: var(--lila); flex: none; font-variant-numeric: tabular-nums; }
.alerta-mini { display: block; width: 100%; text-align: left; background: var(--morado2); border: 0; border-left: 5px solid var(--amarillo-p); color: var(--claro); padding: .45rem .6rem; margin-bottom: .45rem; cursor: pointer; font-size: .85rem; }
.alerta-mini.rojo { border-left-color: var(--coral); }

/* ---------- ventanas (claras) ---------- */
dialog { border: 0; padding: 0; max-width: none; background: var(--panel); color: var(--texto); box-shadow: 0 0 0 4px var(--linea), 8px 8px 0 rgba(0,0,0,.4); color-scheme: light; }
dialog::backdrop { background: rgba(18,15,36,.7); }
dialog.ventana { width: min(1120px, calc(100vw - 24px)); height: min(860px, calc(100vh - 32px)); max-height: calc(100vh - 32px); }
dialog.ventana[open] { display: flex; flex-direction: column; }
#dialogo { width: min(720px, calc(100vw - 24px)); max-height: calc(100vh - 32px); }
.ventana-cab, .dialogo-cab { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .65rem 1rem; background: var(--morado); position: sticky; top: 0; z-index: 2; }
.ventana-cab h2, .dialogo-cab h2 { font-family: var(--pixel); color: var(--amarillo-p); margin: 0; font-size: 1.25rem; overflow-wrap: anywhere; }
.cerrar { background: var(--crema); color: #1d1838; border: 0; box-shadow: 0 0 0 2px var(--linea); font: 700 .9rem var(--pixel); padding: .35rem .7rem; cursor: pointer; flex: none; }
.ventana-cuerpo { padding: 1rem 1.1rem 1.5rem; overflow: auto; flex: 1; background: var(--fondo); }
.dialogo-cuerpo { padding: 1rem; }

/* ---------- piezas de las ventanas (del diseño anterior) ---------- */
input, textarea, select { width: 100%; padding: .55rem .65rem; border: 1px solid var(--borde); border-radius: 8px; background: var(--panel); color: var(--texto); }
textarea { min-height: 5rem; resize: vertical; }
label { display: block; font-weight: 600; margin: .6rem 0 .25rem; font-size: .9rem; }
label.check { display: flex; gap: .5rem; align-items: center; font-weight: 500; }
label.check input { width: auto; }
.boton { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; padding: .55rem .9rem; border-radius: 6px; border: 2px solid var(--borde); background: var(--panel); cursor: pointer; font-weight: 600; min-height: 40px; text-decoration: none; color: var(--texto); }
.boton:hover { border-color: var(--acento); }
.boton.principal { background: var(--acento); color: var(--acento-t); border-color: var(--acento); }
.boton.peligro { color: var(--rojo); }
.boton.bien { color: var(--verde); }
.boton.peque { min-height: 32px; padding: .3rem .6rem; font-size: .85rem; }
.boton:disabled { opacity: .5; cursor: default; }
.fila { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.entre { justify-content: space-between; }
.punto { width: 10px; height: 10px; display: inline-block; background: var(--gris); flex: none; }
.punto.verde { background: var(--verde); } .punto.amarillo { background: #e0a500; } .punto.rojo { background: var(--rojo); }
.globo { display: inline-block; min-width: 1.2rem; padding: 0 .3rem; background: var(--rojo); color: #fff; font-size: .72rem; text-align: center; margin-left: .25rem; }
.tarjeta { background: var(--panel); border: 2px solid var(--borde); border-radius: var(--radio); padding: 1rem; margin-bottom: 1rem; min-width: 0; }
.rejilla { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.rejilla > .tarjeta { margin-bottom: 0; }
.seccion { margin: 1.25rem 0 .6rem; }
.aviso-banda { border-radius: var(--radio); padding: .75rem 1rem; margin-bottom: 1rem; font-weight: 600; }
.aviso-banda.amarillo { background: var(--amarillo-f); } .aviso-banda.rojo { background: var(--rojo-f); } .aviso-banda.verde { background: var(--verde-f); } .aviso-banda.azul { background: var(--azul-f); }
.etiqueta { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .75rem; font-weight: 700; background: var(--panel2); color: var(--suave); }
.etiqueta.verde { background: var(--verde-f); color: var(--verde); } .etiqueta.amarillo { background: var(--amarillo-f); color: var(--amarillo); }
.etiqueta.rojo { background: var(--rojo-f); color: var(--rojo); } .etiqueta.azul { background: var(--azul-f); color: var(--acento); }
.chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: .4rem 0; }
.trab-cab { display: flex; align-items: center; gap: .6rem; margin-bottom: .4rem; }
.mesa { border-top: 1px dashed var(--borde); padding-top: .5rem; margin-top: .5rem; }
.mesa.fallo { color: var(--rojo); }
.barra { height: 8px; background: var(--panel2); overflow: hidden; margin: .35rem 0; position: relative; }
.barra > span { display: block; height: 100%; background: var(--acento); }
.semaforo { display: flex; gap: .6rem; align-items: flex-start; padding: .45rem 0; border-top: 1px solid var(--borde); }
.semaforo:first-of-type { border-top: 0; }
.semaforo .punto { margin-top: .35rem; }
.pizarra { display: grid; gap: .75rem; grid-template-columns: repeat(7, minmax(180px, 1fr)); overflow-x: auto; padding-bottom: .5rem; }
.columna { background: var(--panel2); border-radius: var(--radio); padding: .6rem; min-width: 0; }
.columna h3 { font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; color: var(--suave); display: flex; justify-content: space-between; }
.ficha { background: var(--panel); border: 2px solid var(--borde); border-radius: 8px; padding: .55rem .65rem; margin-bottom: .5rem; cursor: pointer; }
.ficha:hover { border-color: var(--acento); }
.ficha b { display: block; font-size: .8rem; color: var(--acento); }
@media (max-width: 760px) { .pizarra { grid-template-columns: 1fr; overflow: visible; } }
.tabla-caja { overflow-x: auto; border: 1px solid var(--borde); border-radius: 8px; background: var(--panel); }
table { border-collapse: collapse; width: 100%; font-size: .88rem; }
th, td { padding: .45rem .6rem; text-align: left; border-bottom: 1px solid var(--borde); vertical-align: top; }
th { background: var(--panel2); font-weight: 700; white-space: nowrap; cursor: default; }
th.ordenable { cursor: pointer; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr:last-child td { border-bottom: 0; }
.calendario { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .5rem; }
.dia { background: var(--panel); border: 2px solid var(--borde); border-radius: 8px; padding: .5rem; min-height: 92px; min-width: 0; overflow-wrap: anywhere; }
.dia.hoy { border-color: var(--acento); }
.dia.vacio { background: var(--amarillo-f); }
.dia .num-dia { font-weight: 800; font-size: .85rem; }
.dia .vid { font-size: .78rem; margin-top: .25rem; }
@media (max-width: 760px) { .calendario { grid-template-columns: 1fr; } .dia { min-height: 0; } }
.huecos td { text-align: center; min-width: 38px; padding: .3rem; }
.hueco { display: block; width: 100%; min-height: 28px; border-radius: 4px; border: 1px solid var(--borde); background: var(--panel); cursor: pointer; font-size: .7rem; }
.hueco.cola { background: var(--verde-f); border-color: var(--verde); cursor: default; }
.hueco.espera { background: var(--amarillo-f); border-color: var(--amarillo); font-weight: 700; }
.propuestas-dia { margin: .4rem 0 1rem; padding-left: 1.1rem; font-size: .9rem; }
.propuestas-dia li { margin: .2rem 0; }
.pregunta { font-size: 1.1rem; font-weight: 700; }
.medidor { margin: .5rem 0; }
.medidor .barra { height: 12px; }
.medidor .objetivo { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--texto); }
.medidor .barra > span.bien { background: var(--verde); } .medidor .barra > span.mal { background: var(--rojo); }
.medidor .barra > span.provisional { background: repeating-linear-gradient(45deg, var(--gris), var(--gris) 6px, var(--panel2) 6px, var(--panel2) 12px); }
.regla { display: grid; grid-template-columns: 1fr; gap: .4rem; margin: .5rem 0; }
.regla div { background: var(--panel2); border-radius: 6px; padding: .5rem .65rem; overflow-wrap: anywhere; }
.regla .despues { background: var(--verde-f); }
.tono-bien { border-left: 5px solid var(--verde); } .tono-ojo { border-left: 5px solid #e0a500; } .tono-mal { border-left: 5px solid var(--rojo); }
ol.pasos { margin: .4rem 0; padding-left: 1.3rem; }
.minis { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .5rem; }
.minis img, .fotos img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 6px; border: 1px solid var(--borde); display: block; }
.minis button { padding: 0; border: 0; background: none; cursor: pointer; position: relative; text-align: left; }
.minis button span { position: absolute; left: 6px; top: 6px; background: rgba(0,0,0,.65); color: #fff; font-size: .75rem; padding: 0 .35rem; }
.fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .4rem; }
.fuente { display: flex; gap: .5rem; align-items: flex-start; margin: .35rem 0; }
.fuente img { width: 96px; aspect-ratio: 16/9; object-fit: cover; border-radius: 4px; flex: none; }
pre.json { background: var(--panel2); padding: .75rem; border-radius: 6px; overflow: auto; max-height: 60vh; font-size: .8rem; white-space: pre-wrap; overflow-wrap: anywhere; }
dl.kv { display: grid; grid-template-columns: minmax(110px, max-content) 1fr; gap: .25rem .75rem; margin: .4rem 0; }
dl.kv dt { color: var(--suave); } dl.kv dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) { dl.kv { grid-template-columns: 1fr; } dl.kv dd { margin-bottom: .35rem; } }
.lista-diario { list-style: none; padding: 0; margin: 0; }
.lista-diario li { padding: .35rem 0; border-bottom: 1px solid var(--borde); display: flex; gap: .6rem; }
.lista-diario time { color: var(--suave); font-size: .8rem; flex: none; min-width: 3.2rem; font-variant-numeric: tabular-nums; }
.subpestanas { display: flex; gap: .3rem; overflow-x: auto; margin-bottom: 1rem; padding: 3px; }
.subpestanas button { flex: none; border: 0; background: var(--panel); box-shadow: 0 0 0 2px var(--borde); padding: .4rem .8rem; cursor: pointer; font-family: var(--pixel); font-weight: 700; color: var(--suave); }
.subpestanas button.activa { background: var(--amarillo-p); color: #1d1838; box-shadow: 0 0 0 2px var(--linea); }
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.kpi { background: var(--panel); border: 2px solid var(--borde); border-radius: 8px; padding: .6rem .75rem; }
.kpi b { display: block; font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.kpi span { color: var(--suave); font-size: .8rem; }
.vacio-txt { color: var(--suave); font-style: italic; padding: .5rem 0; }
.no-leido { border-left: 5px solid var(--acento); }

/* ---------- móvil ---------- */
@media (max-width: 640px) {
  header.cab { padding: .6rem 12px; }
  .titulo-pixel { font-size: 1.35rem; }
  .cab-chips { order: 3; margin-left: 0; width: 100%; }
  .cab-botones { margin-left: auto; }
  .acciones { padding: .8rem 12px; }
  .acciones-izq, .acciones-der { width: 100%; }
  .btn-negocio { width: 100%; }
  .acciones-der .boton-pixel { font-size: .85rem; padding: .4rem .5rem; min-height: 40px; }
  .atajos { gap: .35rem; }
  .atajos .boton-pixel { font-size: .72rem; padding: .25rem .45rem; min-height: 30px; }
  .cab-chips .chip { font-size: .75rem; }
  .icono-btn { width: 36px; height: 36px; }
  .cuerpo { padding: 12px; }
  .ventana-cuerpo { padding: .8rem; }
  dialog.ventana { width: calc(100vw - 12px); height: calc(100vh - 12px); max-height: calc(100vh - 12px); }
}

a.boton, a.boton-pixel { display: inline-block; text-decoration: none; }