:root { --fondo:#070b1c; --panel:#0c1229; --tarjeta:#131a3b; --borde:#222b55; --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:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--suave); margin:16px 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:14px; padding:8px 14px; border-bottom:1px solid var(--borde); background:linear-gradient(180deg,#0d1430,#0a1026); flex:none; }
.marca { display:flex; align-items:center; gap:10px; min-width:0; }
.marca > span { display:flex; flex-direction:column; min-width:0; line-height:1.15; }
.marca b { font-size:18px; letter-spacing:.01em; }
.marca small { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:11px; }
.logo { width:30px; height:30px; border-radius:8px; flex:none; background:
  linear-gradient(135deg,var(--violeta),var(--azul)); box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 4px 14px rgba(155,123,245,.35); position:relative; }
.logo::after { content:""; position:absolute; inset:9px; background:#0a1026; border-radius:3px; box-shadow: 0 0 0 2px #0a1026 inset; clip-path: polygon(0 0, 100% 0, 100% 35%, 60% 35%, 60% 100%, 0 100%); }
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; color:var(--suave); }
nav button:hover { background:var(--tarjeta); color:var(--texto); }
.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); box-shadow:0 0 8px var(--verde); animation:late 2s infinite; }
.conexion.pausa i { background:var(--ambar); box-shadow:none; animation:none; }
@keyframes late { 50% { opacity:.45; } }
.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; position:relative; }
.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; scrollbar-width:thin; }
#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:#05081a; overflow:hidden; }
canvas { position:absolute; inset:0; width:100%; height:100%; image-rendering:pixelated; image-rendering:crisp-edges; cursor:grab; touch-action:none; display:block; }
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; color:var(--suave); }
.lengueta.izq { left:0; } .lengueta.der { right:0; border-radius:8px 0 0 8px; }
.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:34px; height:34px; 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; scrollbar-width:thin; }
.velo { display:none; }

.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; color:var(--suave); }
.tab b { background:var(--borde); border-radius:10px; padding:0 6px; margin-left:3px; font-size:11px; color:var(--texto); }
.tab[aria-selected="true"] { border-color:var(--azul); background:#1a2a5c; color:var(--texto); }
.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; }
.cara { width:22px; height:22px; border-radius:50%; background:#0a1026; border:2px solid var(--c); image-rendering:pixelated; object-fit:cover; }
.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; display:inline-flex; align-items:center; gap:5px; }
.pildora i { width:6px; height:6px; border-radius:50%; background: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:34px 1fr auto; gap:8px; align-items:center; }
.sesion img { width:32px; height:32px; border-radius:50%; border:2px solid var(--c); background:#0a1026; image-rendering:pixelated; object-fit:cover; } .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:64px; height:96px; image-rendering:pixelated; object-fit:contain; background:radial-gradient(circle at 50% 30%, #1d2650, var(--tarjeta) 70%); 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:290px; --ancho-der:290px; } .marca small, .reloj { display:none; } nav button { padding:6px 12px; } }
@media (max-width:820px) {
  .enc { gap:8px; padding:6px 10px; flex-wrap:wrap; }
  .marca b { font-size:16px; } nav { order:3; width:100%; margin:0; } nav button { flex:1; padding:6px 4px; }
  .solo-ancho { display:none; } .acciones { margin-left:auto; }
  .cuerpo { grid-template-columns:minmax(0,1fr) !important; }
  .panel { position:absolute; top:0; bottom:0; width:min(88vw, 340px); z-index:5; transition:transform .25s ease, visibility 0s; box-shadow:0 0 30px rgba(0,0,0,.6); }
  #izq { left:0; transform:translateX(0); } #der { right:0; transform:translateX(0); }
  #izq.cerrado { transform:translateX(-100%); } #der.cerrado { transform:translateX(100%); }
  .panel.cerrado { visibility:hidden; transition:transform .25s ease, visibility 0s .25s; }
  .interior, #der .interior { width:100%; padding:10px; }
  .velo { display:block; position:absolute; inset:0; z-index:4; background:rgba(3,5,16,.45); opacity:0; pointer-events:none; transition:opacity .25s; }
  .velo.visible { opacity:1; pointer-events:auto; }
  .franja { height:112px; grid-template-columns:1fr; gap:4px; padding:6px 10px; }
  .franja > div:last-child { display:none; }
  .ayuda { display:none; }
  .zoom { bottom:8px; right:8px; }
}
@media (prefers-reduced-motion:reduce) { .cuerpo, .barra i, .panel { transition:none; } .conexion i { animation:none; } }