:root {
  --bg:#14121f; --panel:#1f1c33; --panel2:#272344; --ink:#f2efe6; --tenue:#a29fbd; --linea:#3a3560;
  --ok:#52d273; --mal:#ff5d6c; --espera:#ffd166; --acc:#7cc8ff; --acc2:#c792ff; --sombra:#0c0a16;
}
@media (prefers-color-scheme: light) {
  :root { --bg:#eceaf4; --panel:#fff; --panel2:#f4f2fb; --ink:#1d1a2e; --tenue:#57537a; --linea:#c9c4e2;
          --ok:#1c7a37; --mal:#c62839; --espera:#8f5d00; --acc:#1a62a0; --acc2:#7a3fc4; --sombra:#bdb8d8; }
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { color-scheme: light dark; scroll-padding-top:70px; }
body { margin:0; background:var(--bg); color:var(--ink); font:14px/1.55 ui-monospace,"Cascadia Mono",Consolas,monospace; }
a { color:var(--acc); }
a.btn, .pestanas a, .espacios a, .marca { text-decoration:none; }
button, select, input { font:inherit; color:inherit; }
:focus-visible { outline:3px solid var(--acc); outline-offset:2px; }
h1, h2, h3 { margin:0 0 6px; }
h2 { font-size:16px; } h3 { font-size:12px; text-transform:uppercase; letter-spacing:1px; color:var(--acc); }
.tenue { color:var(--tenue); } .chico-txt { font-size:12px; }

/* ── barra superior ── */
.barra { position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:12px; padding:10px 16px; border-bottom:4px solid var(--linea); background:var(--bg); flex-wrap:wrap; }
.marca { display:flex; align-items:center; gap:10px; font-weight:bold; letter-spacing:2px; font-size:18px; color:var(--ink); }
.logo { width:24px; height:24px; image-rendering:pixelated; background:
  linear-gradient(var(--acc),var(--acc)) 0 0/8px 8px, linear-gradient(var(--ok),var(--ok)) 8px 8px/8px 8px, linear-gradient(var(--espera),var(--espera)) 16px 16px/8px 8px; background-repeat:no-repeat; }
.espacios { display:flex; gap:6px; flex-wrap:wrap; }
.espacios a { padding:2px 10px; border:2px solid var(--linea); color:var(--tenue); }
.espacios a[aria-current="page"] { color:var(--ink); border-color:var(--acc); }
.quien { margin-left:auto; display:flex; gap:8px; align-items:center; color:var(--tenue); font-size:12px; flex-wrap:wrap; }
.insignia { border:2px solid var(--espera); color:var(--espera); padding:0 6px; font-size:11px; letter-spacing:1px; }
.avatar { display:inline-grid; place-items:center; width:24px; height:24px; background:var(--acc); color:var(--bg); font-weight:bold; text-transform:uppercase; }

main { max-width:1180px; margin:0 auto; padding:16px; display:grid; gap:16px; }
.pixel { background:var(--panel); border:4px solid var(--linea); box-shadow:6px 6px 0 var(--sombra); padding:14px 16px; }

/* ── botones ── */
.btn { cursor:pointer; background:var(--panel2); border:3px solid var(--linea); padding:5px 14px; box-shadow:3px 3px 0 var(--sombra); display:inline-block; min-height:32px; }
.btn:hover:not(:disabled) { border-color:var(--acc); }
.btn:active:not(:disabled) { transform:translate(2px,2px); box-shadow:1px 1px 0 var(--sombra); }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn.primario { border-color:var(--ok); color:var(--ok); font-weight:bold; }
.btn.peligro { border-color:var(--mal); color:var(--mal); }
.btn.chico { padding:0 9px; min-height:26px; font-size:12px; box-shadow:2px 2px 0 var(--sombra); }
.btn.ok-grande { font-size:20px; padding:10px 34px; letter-spacing:3px; border-color:var(--ok); color:var(--ok); font-weight:bold; }
.btn.ok-grande.prod { border-color:var(--mal); color:var(--mal); }
.btn.trabajando { opacity:.8; cursor:progress; }

.pestanas { display:flex; gap:8px; flex-wrap:wrap; }
.pestanas a { padding:6px 16px; border:3px solid var(--linea); color:var(--tenue); background:var(--panel); }
.pestanas a[aria-current="page"] { color:var(--ink); border-color:var(--acc); box-shadow:0 4px 0 var(--acc); }

/* ── panel: resumen y tarjetas ── */
.resumen { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; }
.dato { background:var(--panel); border:3px solid var(--linea); padding:8px 12px; }
.dato b { display:block; font-size:24px; line-height:1.1; } .dato span { font-size:12px; color:var(--tenue); }
.dato.alerta { border-color:var(--mal); } .dato.alerta b { color:var(--mal); } .dato.bien b { color:var(--ok); }
.apps { display:grid; gap:16px; }
.app-cab { display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; margin-bottom:10px; }
.app-cab h2 { margin:0; font-size:17px; }
.etiqueta { display:inline-block; font-size:11px; padding:0 6px; border:2px solid currentColor; }
.etiqueta.mal { color:var(--mal); } .etiqueta.espera { color:var(--espera); } .etiqueta.ok { color:var(--ok); }
.flujo { display:grid; grid-template-columns:1fr; gap:10px; }
@media (min-width: 820px) { .flujo { grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); } }
.env { border:2px solid var(--linea); padding:10px 12px; background:var(--panel2); position:relative; }
.env-cab { display:flex; justify-content:space-between; gap:8px; align-items:baseline; flex-wrap:wrap; }
.env-cab h3 { margin:0; }
.version { display:flex; align-items:center; gap:10px; margin:8px 0 2px; flex-wrap:wrap; }
.ver { display:inline-block; padding:0 7px; background:var(--bg); border:2px solid var(--linea); text-decoration:none; }
.ver.grande { font-size:20px; padding:1px 10px; border-color:var(--ok); color:var(--ok); }
.ver.vacia { border-style:dashed; color:var(--tenue); }
.alineacion { font-size:12px; margin:4px 0; }
.alineacion.atras { color:var(--espera); } .alineacion.igual { color:var(--ok); }
.bloque { margin-top:8px; }
ul.lista { list-style:none; margin:6px 0 0; padding:0; }
ul.lista li { margin:6px 0; display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.ci { display:inline-block; min-width:9ch; text-align:center; font-size:11px; padding:0 4px; border:2px solid currentColor; }
.ci.ok, .ok { color:var(--ok); } .ci.fallo, .fallo { color:var(--mal); } .ci.pendiente, .pendiente { color:var(--espera); } .ci.sin-checks { color:var(--tenue); }
details.mas { margin-top:8px; border-top:1px dashed var(--linea); padding-top:6px; }
details.mas summary { cursor:pointer; color:var(--tenue); font-size:12px; }
details.mas table { width:100%; border-collapse:collapse; font-size:12px; margin-top:4px; }
details.mas td { padding:2px 8px 2px 0; border-bottom:1px dotted var(--linea); }
.fila { margin:5px 0; display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.aviso { color:var(--mal); font-size:12px; margin-top:8px; }
.nota { border-left:6px solid var(--acc); padding:6px 10px; background:var(--panel2); }
.nota.mal { border-left-color:var(--mal); } .nota.espera { border-left-color:var(--espera); }
.esqueleto { display:grid; gap:10px; }
.esqueleto i { display:block; height:18px; background:var(--panel2); animation:parpadeo 1.2s steps(2) infinite; }
.esqueleto i:nth-child(odd) { width:60%; } .esqueleto i.alto { height:70px; width:100%; }
@keyframes parpadeo { 50% { opacity:.4; } }

/* ── formularios ── */
.rejilla { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; }
label.campo { display:grid; gap:2px; font-size:12px; color:var(--tenue); }
.campo input, .campo select { background:var(--bg); border:2px solid var(--linea); padding:6px 8px; color:var(--ink); min-height:34px; }
.campo input:invalid { border-color:var(--mal); }
.segmentos { display:flex; flex-wrap:wrap; gap:0; }
.segmentos label { cursor:pointer; padding:6px 18px; border:3px solid var(--linea); margin-right:-3px; background:var(--panel2); }
.segmentos label:has(input:checked) { border-color:var(--acc); background:var(--panel); position:relative; z-index:1; font-weight:bold; }
.segmentos label.prod:has(input:checked) { border-color:var(--mal); color:var(--mal); }
.segmentos input { position:absolute; opacity:0; }
.segmentos label:has(input:focus-visible) { outline:3px solid var(--acc); }
.tarjetas { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:10px; }
.tarjeta-op { cursor:pointer; border:3px solid var(--linea); padding:10px 12px; background:var(--panel2); display:block; }
.tarjeta-op:has(input:checked) { border-color:var(--acc); background:var(--panel); box-shadow:3px 3px 0 var(--acc); }
.tarjeta-op input { margin-right:6px; }
.orden { display:flex; flex-wrap:wrap; gap:4px; align-items:center; margin-top:6px; font-size:12px; }
.orden .ver { font-size:12px; }
.resumen-despliegue { border:3px dashed var(--linea); padding:10px 14px; margin:12px 0; }

/* ── corrida ── */
.escena { width:100%; max-height:190px; image-rendering:pixelated; border:4px solid var(--linea); background:var(--bg); display:block; }
.estado-banner { display:flex; gap:12px; align-items:center; flex-wrap:wrap; justify-content:space-between; margin-bottom:10px; }
.estado-banner h2 { margin:0; display:flex; gap:10px; align-items:center; }
.corrida-items { display:grid; gap:6px; margin-top:10px; }
.corrida-item { display:grid; grid-template-columns:minmax(80px,140px) 1fr auto; gap:10px; align-items:center; border:2px solid var(--linea); padding:6px 10px; background:var(--panel2); }
.barra-avance { height:12px; border:2px solid var(--linea); background:var(--bg); }
.barra-avance > i { display:block; height:100%; background:var(--acc); transition:width .4s steps(8); }
.corrida-item.listo .barra-avance > i { background:var(--ok); } .corrida-item.fallo .barra-avance > i { background:var(--mal); }
.corrida-item.esperandoAprobacion .barra-avance > i { background:var(--espera); }
.release { text-align:center; padding:10px; } .release .chip { margin:3px; }

/* ── editor ── */
details.editor-app { border:2px solid var(--linea); margin:10px 0; background:var(--panel2); }
details.editor-app > summary { cursor:pointer; padding:8px 12px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
details.editor-app > .cuerpo { padding:4px 12px 12px; display:grid; gap:10px; }
.fila-amb { display:grid; grid-template-columns:1fr 1fr 1.4fr auto; gap:6px; align-items:end; }
.estado-wf { font-size:12px; margin-top:2px; }
.barra-guardar { position:sticky; bottom:0; display:flex; gap:12px; align-items:center; flex-wrap:wrap; background:var(--panel); border-top:3px solid var(--linea); padding:10px 0 2px; margin-top:12px; }
.sucio { color:var(--espera); }
pre.codigo { background:var(--bg); border:2px solid var(--linea); padding:10px; overflow:auto; font-size:12px; }

/* ── diálogo, avisos, ayuda, guía, tour ── */
.dialogo { background:var(--panel); color:var(--ink); border:4px solid var(--acc); box-shadow:8px 8px 0 var(--sombra); max-width:640px; width:calc(100vw - 24px); padding:16px; }
.dialogo::backdrop { background:rgba(0,0,0,.6); }
.dialogo menu { display:flex; gap:10px; justify-content:flex-end; padding:0; margin:14px 0 0; flex-wrap:wrap; }
.toasts { position:fixed; right:12px; bottom:12px; display:grid; gap:8px; z-index:40; max-width:calc(100vw - 24px); }
.toast { background:var(--panel); border:3px solid var(--linea); padding:8px 12px; max-width:360px; box-shadow:4px 4px 0 var(--sombra); }
.toast.ok { border-color:var(--ok); } .toast.mal { border-color:var(--mal); }
.vacio-grande { text-align:center; padding:28px 12px; }
.progreso { position:fixed; top:0; left:0; right:0; height:4px; z-index:50; opacity:0; transition:opacity .2s; pointer-events:none;
  background:repeating-linear-gradient(90deg,var(--acc) 0 12px,var(--acc2) 12px 24px,var(--ok) 24px 36px); background-size:72px 100%; }
.progreso.activo { opacity:1; animation:avance-progreso .6s steps(6) infinite; }
@keyframes avance-progreso { to { background-position:72px 0; } }
.cargando { display:flex; align-items:center; gap:14px; justify-content:center; padding:28px 16px; color:var(--tenue); }
.giro { display:inline-grid; grid-template-columns:repeat(2,8px); gap:2px; vertical-align:middle; }
.giro i { width:8px; height:8px; background:var(--acc); animation:giro-bloque 1s steps(1) infinite; }
.giro i:nth-child(2) { animation-delay:.25s; background:var(--acc2); } .giro i:nth-child(4) { animation-delay:.5s; background:var(--ok); } .giro i:nth-child(3) { animation-delay:.75s; background:var(--espera); }
@keyframes giro-bloque { 0%,100% { opacity:1; } 50% { opacity:.2; } }
.guiado h2 { margin-bottom:8px; }
.pasos { list-style:none; margin:10px 0; padding:0; display:grid; gap:6px; }
.pasos li { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.pasos li.hecho { color:var(--tenue); text-decoration:line-through; }
.marca-paso { width:1.4em; text-align:center; color:var(--ok); } .pasos li:not(.hecho) .marca-paso { color:var(--tenue); }
.resaltado { outline:4px solid var(--espera) !important; outline-offset:3px; position:relative; z-index:31; }
.tour { position:fixed; z-index:45; max-width:320px; background:var(--panel); border:4px solid var(--espera); box-shadow:6px 6px 0 var(--sombra); padding:10px 14px; }
.tour p { margin:6px 0 10px; }
.ayuda-nav { display:flex; flex-wrap:wrap; gap:6px 12px; margin:6px 0 12px; font-size:12px; }
.ayuda-cuerpo { max-height:55vh; overflow:auto; padding-right:6px; }
.ayuda-cuerpo section { margin-bottom:14px; } .ayuda-cuerpo h3 { margin-top:0; }
.ayuda-cuerpo dt { font-weight:bold; margin-top:6px; } .ayuda-cuerpo dd { margin:0 0 4px 12px; color:var(--tenue); }
.ayuda-cuerpo details { border:2px dashed var(--linea); padding:4px 8px; margin:6px 0; } .ayuda-cuerpo summary { cursor:pointer; }
.ayuda-cuerpo code { background:var(--bg); padding:0 4px; border:1px solid var(--linea); }

/* ── móvil ── */
@media (max-width: 640px) {
  main { padding:10px; gap:12px; }
  .barra { padding:8px 10px; } .quien { margin-left:0; width:100%; }
  .btn { min-height:40px; } .btn.chico { min-height:32px; }
  .fila-amb { grid-template-columns:1fr 1fr; }
  .corrida-item { grid-template-columns:1fr; }
  .btn.ok-grande { width:100%; padding:12px; }
  .pixel { padding:12px; box-shadow:4px 4px 0 var(--sombra); }
}
@media (prefers-reduced-motion: reduce) { * { transition:none !important; animation:none !important; } }

/* ── cabecera en una sola línea: Guía · Ayuda · usuario · Salir juntos a la derecha ── */
.barra { flex-wrap:nowrap; }
.barra .espacios { flex:1 1 auto; min-width:0; overflow-x:auto; flex-wrap:nowrap; scrollbar-width:thin; }
.barra .espacios a { white-space:nowrap; }
.barra .quien { flex:0 0 auto; margin-left:auto; flex-wrap:nowrap; white-space:nowrap; }
.quien .nombre { max-width:14ch; overflow:hidden; text-overflow:ellipsis; }
@media (max-width: 700px) { .quien .nombre { display:none; } .barra { gap:8px; padding:8px 10px; } .marca span:last-child { display:none; } }
@media (max-width: 640px) { .barra .quien { width:auto; } }

/* ── proyectos ── */
.proyectos { display:grid; gap:18px; }
details.proyecto { padding:0; }
details.proyecto > summary { cursor:pointer; padding:12px 16px; display:flex; gap:12px; align-items:baseline; flex-wrap:wrap; list-style:none; background:var(--panel2); border-bottom:4px solid var(--linea); }
details.proyecto > summary::-webkit-details-marker { display:none; }
details.proyecto > summary::before { content:"▸"; color:var(--acc); } details.proyecto[open] > summary::before { content:"▾"; }
.proyecto-nombre { font-size:19px; font-weight:bold; letter-spacing:1px; }
.proyecto-desc { flex-basis:100%; }
details.proyecto > .apps, details.proyecto > p { padding:14px 16px; }
details.proyecto .apps { gap:14px; }
.app { border:2px solid var(--linea); padding:12px 14px; background:var(--panel); }
.app-nombre { margin:0; font-size:15px; text-transform:none; letter-spacing:0; color:var(--ink); }
.env h4 { margin:0; font-size:12px; text-transform:uppercase; letter-spacing:1px; color:var(--acc); }
.chips-proyectos { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.tipo { display:inline-block; font-size:10px; letter-spacing:1px; padding:0 5px; border:2px solid var(--linea); color:var(--tenue); vertical-align:middle; }
.tipo-api { border-color:var(--acc); color:var(--acc); } .tipo-web { border-color:var(--acc2); color:var(--acc2); }
.tipo-app { border-color:var(--ok); color:var(--ok); } .tipo-servicio { border-color:var(--espera); color:var(--espera); }
details.proyecto-ed { border-width:3px; } details.proyecto-ed > summary { font-size:15px; }
details.editor-app details.editor-app { background:var(--panel); }
details.guiado > summary { cursor:pointer; }
details.guiado[open] > summary { margin-bottom:8px; }