:root { --fondo:#070b1c; --panel:#0e1530; --tarjeta:#141d40; --borde:#232d57; --texto:#e8ebff; --suave:#8e97c4;
        --violeta:#9b7bf5; --azul:#4f8cf0; --verde:#4fd08a; --ambar:#f0b44c; --rosa:#ec7a96;
        --ancho-izq:340px; --ancho-der:340px; }
* { box-sizing:border-box; }
html, body { height:100%; }
body { margin:0; background:var(--fondo); color:var(--texto); font:13px/1.4 "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
       display:flex; flex-direction:column; overflow:hidden; }
button { font:inherit; color:inherit; cursor:pointer; }
button:focus-visible { outline:2px solid var(--azul); outline-offset:2px; }
h2 { font-size:12px; font-weight:600; margin:14px 0 8px; display:flex; align-items:center; gap:6px; }
h2:first-child { margin-top:4px; }
h3 { margin:0; font-size:17px; }
small { color:var(--suave); }

.enc { display:flex; align-items:center; gap:16px; padding:8px 14px; border-bottom:1px solid var(--borde); background:#0a1026; flex:none; }
.marca { display:flex; align-items:baseline; gap:8px; min-width:0; }
.marca b { font-size:18px; }
.marca small { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.logo { width:26px; height:26px; border-radius:6px; background:linear-gradient(135deg,var(--violeta),var(--azul)); align-self:center; flex:none; }
nav { display:flex; gap:4px; margin:0 auto; background:var(--panel); border:1px solid var(--borde); border-radius:10px; padding:3px; }
nav button { background:transparent; border:0; padding:6px 18px; border-radius:7px; }
nav button:hover { background:var(--tarjeta); }
.acciones { display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.acciones button { background:var(--tarjeta); border:1px solid var(--borde); border-radius:8px; padding:5px 10px; }
.acciones button:hover:not(:disabled) { border-color:var(--violeta); }
.acciones button.activo { border-color:var(--azul); }
.acciones button:disabled { opacity:.45; cursor:not-allowed; }
.conexion { display:flex; align-items:center; gap:6px; padding:5px 10px; border-radius:20px; background:var(--tarjeta); border:1px solid var(--borde); white-space:nowrap; }
.conexion i { width:8px; height:8px; border-radius:50%; background:var(--verde); }
.conexion.pausa i { background:var(--ambar); }
.reloj { text-align:right; line-height:1.1; } .reloj b { display:block; font-size:15px; } .reloj small { font-size:10px; }

.cuerpo { flex:1; min-height:0; display:grid; grid-template-columns:var(--izq) minmax(0,1fr) var(--der); transition:grid-template-columns .28s ease; }
.panel { min-width:0; overflow:hidden; background:var(--panel); transition:visibility 0s; }
#izq { border-right:1px solid var(--borde); } #der { border-left:1px solid var(--borde); }
.panel.cerrado { visibility:hidden; transition:visibility 0s .28s; border-width:0; }
.interior { width:var(--ancho-izq); height:100%; overflow:auto; padding:10px 12px; }
#der .interior { width:var(--ancho-der); }
.centro { min-width:0; min-height:0; display:flex; flex-direction:column; }
.escena { position:relative; flex:1; min-height:0; background:#070b1c; overflow:hidden; }
canvas { position:absolute; inset:0; width:100%; height:100%; image-rendering:pixelated; cursor:grab; touch-action:none; }
canvas:active { cursor:grabbing; }
.lengueta { position:absolute; top:50%; transform:translateY(-50%); background:rgba(14,21,48,.92); border:1px solid var(--borde); padding:10px 4px;
            writing-mode:vertical-rl; border-radius:0 8px 8px 0; }
.lengueta.izq { left:0; } .lengueta.der { right:0; border-radius:8px 0 0 8px; writing-mode:vertical-rl; }
.lengueta.activo { display:none; }
.zoom { position:absolute; right:10px; bottom:10px; display:flex; gap:4px; }
.zoom button { background:rgba(14,21,48,.92); border:1px solid var(--borde); border-radius:8px; min-width:32px; height:32px; padding:0 8px; }
.ayuda { position:absolute; left:12px; bottom:8px; margin:0; font-size:11px; color:var(--suave); background:rgba(7,11,28,.7); padding:2px 8px; border-radius:6px; pointer-events:none; }
.franja { flex:none; display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:8px 14px 10px; background:var(--panel); border-top:1px solid var(--borde); height:150px; overflow:hidden; }
.franja > div { overflow:auto; min-width:0; }

.tabs { display:flex; gap:6px; margin-bottom:8px; }
.tab { flex:1; background:var(--tarjeta); border:1px solid var(--borde); border-radius:8px; padding:6px 4px; }
.tab b { background:var(--borde); border-radius:10px; padding:0 6px; margin-left:3px; font-size:11px; }
.tab[aria-selected="true"] { border-color:var(--azul); background:#1a2a5c; }
.lista { display:flex; flex-direction:column; gap:6px; }
.tarea, .sesion { width:100%; text-align:left; background:var(--tarjeta); border:1px solid var(--borde); border-left:3px solid var(--c, var(--azul)); border-radius:8px; padding:8px 10px; display:block; }
.tarea:hover, .sesion:hover { border-color:var(--violeta); }
.tt small { margin-right:4px; }
.fila { display:flex; align-items:center; gap:6px; margin:6px 0 4px; flex-wrap:wrap; } .fila em { margin-left:auto; font-style:normal; color:var(--suave); }
.chip { background:color-mix(in srgb, var(--c) 22%, transparent); color:var(--texto); border:1px solid var(--c); border-radius:6px; padding:0 6px; font-size:11px; }
.ini { width:20px; height:20px; border-radius:50%; background:var(--c); color:#07102a; font-weight:700; font-size:11px; display:grid; place-items:center; }
.barra { height:5px; background:#0a1030; border-radius:4px; overflow:hidden; } .barra i { display:block; height:100%; background:linear-gradient(90deg,var(--azul),var(--violeta)); transition:width .6s; }
.pildora { border-radius:12px; padding:1px 8px; font-size:11px; border:1px solid currentColor; }
.pildora.prog { color:var(--verde); } .pildora.rev { color:var(--ambar); } .pildora.esp { color:var(--suave); } .pildora.coord { color:var(--violeta); }
.sesion { display:grid; grid-template-columns:32px 1fr auto; gap:8px; align-items:center; }
.sesion img { width:30px; height:40px; image-rendering:pixelated; object-fit:contain; } .sesion small { display:block; } .sesion time { font-variant-numeric:tabular-nums; color:var(--suave); }
.commit { display:grid; grid-template-columns:auto 1fr; gap:2px 8px; padding:6px 8px; background:var(--tarjeta); border-radius:8px; border:1px solid var(--borde); }
.commit code { color:var(--azul); font-size:11px; } .commit small { display:block; } .rama { display:none; }
.vacio { color:var(--suave); margin:4px 0; }

.metricas { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.metrica { background:var(--tarjeta); border:1px solid var(--borde); border-radius:10px; padding:10px; border-top:2px solid var(--c); }
.metrica b { display:block; font-size:22px; } .metrica span { color:var(--suave); font-size:11px; }
.ficha { display:flex; gap:12px; align-items:center; margin-bottom:10px; } .ficha img { width:60px; height:80px; image-rendering:pixelated; object-fit:contain; background:var(--tarjeta); border:2px solid var(--c); border-radius:10px; padding:4px; }
.ficha span { color:var(--suave); }
.dato { margin:10px 0; } .dato small { display:block; margin-bottom:3px; } .dato em { font-style:normal; color:var(--suave); }
.archivos { display:flex; gap:6px; flex-wrap:wrap; } .archivos span { background:var(--tarjeta); border:1px solid var(--borde); border-radius:8px; padding:4px 8px; font-size:11px; }
.archivos b { display:block; font-weight:500; } .mas { color:var(--verde); font-style:normal; } .menos { color:var(--rosa); font-style:normal; }
.ev { margin:0 0 4px; padding:2px 0 2px 8px; border-left:2px solid var(--borde); } .ev time { color:var(--suave); margin-right:4px; font-variant-numeric:tabular-nums; }
.tipo-commit { border-color:var(--verde); } .tipo-transferencia { border-color:var(--violeta); } .tipo-mensaje { border-color:var(--azul); }

@media (max-width:1100px) { :root { --ancho-izq:280px; --ancho-der:280px; } .marca small, .reloj { display:none; } }
/* En teléfonos los paneles se apilan: el canvas conserva espacio y los mismos
   botones, clases e indicadores de colapso siguen controlando cada panel. */
@media (max-width:760px) {
  .enc { flex-wrap:wrap; gap:5px; padding:6px 8px; }
  .marca { flex:1 0 100%; gap:6px; } .marca b { font-size:16px; }
  .enc nav { margin:0; } .enc nav button { padding:4px 8px; font-size:11px; }
  .acciones { display:contents; } .acciones button { padding:4px 6px; font-size:10px; }
  .conexion { margin-left:auto; padding:3px 6px; font-size:10px; }
  .cuerpo { display:flex; flex-direction:column; }
  .centro { order:-1; flex:1; min-height:160px; }
  .panel { flex:none; height:17vh; max-height:140px; transition:height .28s ease; }
  .panel.cerrado { height:0; }
  #izq, #der { border:0; border-top:1px solid var(--borde); }
  .interior, #der .interior { width:100%; padding:8px 10px; }
  .metricas { grid-template-columns:repeat(3,1fr); }
  .franja { height:84px; padding:4px 8px; gap:8px; font-size:10px; }
  .franja h2 { margin:2px 0 4px; }
  .ayuda { max-width:calc(100% - 120px); font-size:9px; left:6px; bottom:4px; }
}
@media (prefers-reduced-motion:reduce) { .cuerpo, .barra i, .panel { transition:none; } }