/* ============================================================
   BitBoard — "Máquina apagada"
   Único fichero de tokens + componentes. Vanilla, sin build.
   Clases existentes conservadas: .card .brow .col .chip .bar
   .p0-.p3 .plan #panel .card2 .arow
   ============================================================ */

:root{
  /* superficies */
  --bg-0:#0B0910; --bg-1:#141020; --bg-2:#1A1526; --bg-3:#221B31; --bg-4:#2A2139;
  --line-1:#2E2542; --line-2:#3D3157; --line-3:#574672;
  /* texto */
  --tx-1:#EDE9F5; --tx-2:#A99FBE; --tx-3:#8B819F;
  /* acentos */
  --pri:#FCEE0A; --pri-dim:#8A8206; --acc:#C084FC; --acc-line:#A855F7;
  --danger:#FF7A7A; --ok:#7DD3A0;
  /* prioridad: un tono por nivel, para que P0..P3 se distingan de un vistazo
     y no solo por el peso de la tipografía */
  --p0:#FF6B6B; --p1:#FCEE0A; --p2:#C084FC; --p3:#8B819F;
  /* tipografía */
  --f-ui:ui-sans-serif,"Segoe UI",Helvetica,Arial,sans-serif;
  --f-head:Palatino,"Palatino Linotype",Georgia,serif;
  --f-mono:ui-monospace,"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  --t-28:28px; --t-19:19px; --t-15:15px; --t-14:14px; --t-13:13px; --t-12:12px; --t-11:11px;
  /* espaciado / forma */
  --s-1:2px; --s-2:4px; --s-3:6px; --s-4:8px; --s-5:12px; --s-6:16px; --s-7:24px; --s-8:32px;
  --r-1:3px; --r-2:6px; --r-3:10px;
  --e-1:0 1px 0 rgba(255,255,255,.03) inset;
  --e-2:0 2px 8px rgba(0,0,0,.45);
  --e-3:0 12px 28px rgba(0,0,0,.6);
  --hit:44px;
  --fast:90ms; --mid:140ms; --slow:180ms;
  --ease:cubic-bezier(.2,.7,.3,1);
}

*{ box-sizing:border-box }
/* El atributo hidden solo trae display:none del user-agent, asi que cualquier
   regla con display explicito lo anula: #panel, #toast y .errbar son flex. */
[hidden]{ display:none !important }
html,body{ margin:0; background:var(--bg-0); color:var(--tx-1);
  font:500 var(--t-13)/1.45 var(--f-ui); -webkit-font-smoothing:antialiased }
h1{ margin:0; font:600 var(--t-28)/32px var(--f-head) }
h2{ margin:0; font:600 var(--t-19)/24px var(--f-head) }
a{ color:var(--acc); text-decoration:none }
a:hover{ color:var(--tx-1) }
::selection{ background:var(--pri); color:var(--bg-0) }
:focus-visible{ outline:2px solid var(--acc); outline-offset:2px }

/* ── NAVEGACIÓN: la pestaña activa no se rellena ─────────── */
.nav{ display:flex; align-items:center; gap:var(--s-5); height:48px; padding:0 var(--s-5);
  background:var(--bg-1); border-bottom:1px solid var(--line-2) }
.nav a{ display:grid; place-items:center; min-height:var(--hit); padding:0 var(--s-2);
  color:var(--tx-2); font:600 var(--t-13)/1 var(--f-ui);
  border-bottom:2px solid transparent; transition:color var(--fast) linear }
.nav a:hover{ color:var(--tx-1) }
.nav a[aria-current]{ color:var(--tx-1); border-bottom-color:var(--pri) }

/* ── COLUMNA DEL BOARD ──────────────────────────────────── */
.board{ display:grid; grid-template-columns:repeat(5,minmax(210px,1fr));
  gap:var(--s-5); align-items:start; padding:var(--s-5) }
.col{ display:flex; flex-direction:column;
  background:var(--bg-1); border:1px solid var(--line-1); border-radius:var(--r-2);
  transition:border-color var(--fast) linear }
.col.is-empty{ background:var(--bg-0) }
.col > header{ display:flex; align-items:center; justify-content:space-between;
  height:36px; padding:0 var(--s-5);
  background:var(--bg-3); border-bottom:1px solid var(--line-2);
  border-radius:var(--r-2) var(--r-2) 0 0; position:sticky; top:0; z-index:2 }
.col > header > .name{ font:600 var(--t-12)/16px var(--f-ui);
  letter-spacing:.06em; text-transform:uppercase; color:var(--tx-2) }
.col > header > .count{ font:600 var(--t-11)/1.2 var(--f-mono); color:var(--tx-3);
  font-variant-numeric:tabular-nums }
.col.over-wip > header > .count{ color:var(--danger) }
.col > .body{ display:flex; flex-direction:column; gap:var(--s-4);
  padding:10px; min-height:140px }
/* destino de drop: cambia el cuerpo, nunca la cabecera */
.col.is-droptarget{ border-color:var(--acc-line) }
.col.is-droptarget > .body{ outline:1px solid var(--acc-line); outline-offset:-2px;
  border-radius:0 0 var(--r-2) var(--r-2) }
.col .drop-slot{ height:6px; background:var(--acc-line); border-radius:var(--r-1);
  transition:height var(--mid) ease-out }

/* ── TARJETA DEL BOARD ──────────────────────────────────── */
.card{
  position:relative; display:flex; flex-direction:column; gap:var(--s-3);
  padding:var(--s-4) var(--s-5); min-height:96px; overflow:hidden;
  background:var(--bg-2);
  border:1px solid var(--line-2); border-radius:var(--r-2);
  box-shadow:var(--e-1);
  color:var(--tx-1); font:500 var(--t-14)/19px var(--f-ui);
  cursor:grab; touch-action:none;
  transition:background-color var(--fast) linear,
             border-color var(--fast) linear,
             transform 120ms var(--ease),
             box-shadow 120ms var(--ease);
}
.card > .head{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-4) }
.card .id{ display:flex; align-items:center; gap:var(--s-3);
  font:600 var(--t-11)/1.2 var(--f-mono); letter-spacing:.04em; color:var(--acc) }
.card .pts{ min-width:22px; padding:0 var(--s-3);
  font:600 var(--t-11)/18px var(--f-mono); text-align:center;
  color:var(--tx-1); background:var(--bg-4);
  border:1px solid var(--line-1); border-radius:var(--r-1);
  font-variant-numeric:tabular-nums }
.card > .title{ margin:0; overflow:hidden; text-wrap:pretty }
/* el clamp va en el span interior: un hijo directo de flex se blockifica
   y -webkit-box deja de aplicar (se cortaría sin puntos suspensivos) */
.card > .title > span{ display:-webkit-box; -webkit-line-clamp:3;
  -webkit-box-orient:vertical; overflow:hidden }
.card > .meta{ display:flex; align-items:center; gap:var(--s-4); flex-wrap:wrap;
  font:500 var(--t-11)/1.3 var(--f-mono); color:var(--tx-3) }
.card > .meta .who{ color:var(--tx-2) }
/* raíl de prioridad: única señal periférica */
.card > .rail{ position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--line-1) }

.card:hover{ background:var(--bg-3); border-color:var(--line-3) }
.card:focus-visible{ outline:2px solid var(--acc); outline-offset:2px }

.card.is-dragging{
  opacity:.9; transform:scale(1.02) rotate(.4deg);
  box-shadow:var(--e-3); border-color:var(--acc-line);
  cursor:grabbing; transition:none; z-index:20;
}
.card.is-ghost{
  background:repeating-linear-gradient(135deg,var(--line-1) 0 1px,transparent 1px 5px);
  border:1px dashed var(--line-2); box-shadow:none;
}
.card.is-ghost > *{ visibility:hidden }

.card.is-blocked > .rail{ background:var(--danger) }
.card.is-blocked > .title{ color:var(--tx-2) }
.card.is-blocked .id::before{ content:"⊘"; color:var(--danger) }
.card.is-blocked .meta .blocked{ color:var(--danger); font-weight:600 }

/* en curso sin dueño: se avisa, no se impide. Discreto a propósito — no es un
   error, solo algo que conviene mirar cuando el tablero se llena. */
.card.is-huerfana .sin-dueno{ color:var(--tx-3); font-style:italic }
.card.is-huerfana .sin-dueno::before{ content:"○ " }

/* corrección pendiente tras una revisión: la tarjeta lo dice, como con
   "bloqueado", porque es trabajo que ya se dio por hecho una vez */
.card.is-review .revmark{ color:var(--acc); font-weight:600 }
.card.is-review .revmark::before{ content:"↩ " }

.card.is-selected{ background:var(--bg-3); box-shadow:0 0 0 2px var(--pri) }

.card.is-readonly{ cursor:default; color:var(--tx-2) }
.card.is-readonly:hover{ background:var(--bg-2); border-color:var(--line-2) }
.card.is-readonly .pts{ border-color:transparent }
.card.is-readonly .arow{ display:none }

/* prioridad en el raíl: mismo tono por nivel que el chip */
.card.p0 > .rail{ background:var(--p0) }
.card.p1 > .rail{ background:var(--p1) }
.card.p2 > .rail{ background:var(--p2) }
.card.p3 > .rail{ background:var(--p3) }

/* ── FILA DE BACKLOG ────────────────────────────────────── */
.brow{
  display:grid; align-items:center; gap:var(--s-4);
  grid-template-columns:28px 44px 26px 68px minmax(0,1fr) auto;
  height:40px; padding:0 var(--s-5);
  background:transparent;
  border:0; border-bottom:1px solid var(--line-1);
  color:var(--tx-1); font:500 var(--t-15)/20px var(--f-ui);
  cursor:grab; touch-action:none; user-select:none;
  transition:background-color var(--fast) linear;
}
.brow > .id{ font:600 var(--t-11)/1.2 var(--f-mono); color:var(--acc) }
.brow > .pts{ font:600 var(--t-11)/1.2 var(--f-mono); color:var(--tx-2);
  text-align:right; font-variant-numeric:tabular-nums }
.brow > .title{ min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis }
.brow > .arow{ display:flex; gap:var(--s-2); opacity:0;
  transition:opacity var(--fast) linear }
.brow > .arow > button{ display:grid; place-items:center; min-width:28px; min-height:28px;
  background:none; border:1px solid var(--line-2); border-radius:var(--r-1);
  color:var(--tx-2); font:500 var(--t-13)/1 var(--f-ui); cursor:pointer }
.brow > .arow > button:hover{ border-color:var(--line-3); color:var(--tx-1) }

.brow:hover{ background:var(--bg-2) }
.brow:hover > .arow,
.brow:focus-within > .arow{ opacity:1 }
.brow:focus-visible{ outline:2px solid var(--acc); outline-offset:-2px }

.brow.is-dragging{ height:6px; padding:0; overflow:hidden;
  background:var(--acc-line); border-bottom-color:transparent }
.brow.is-dragging > *{ display:none }
.brow.is-droptarget{ box-shadow:0 -2px 0 0 var(--pri) }

.brow.is-blocked > .id::before{ content:"⊘ "; color:var(--danger) }
.brow.is-blocked > .title{ color:var(--tx-2) }
.brow.is-selected{ background:var(--bg-3); box-shadow:inset 3px 0 0 var(--pri) }
.brow.is-readonly{ cursor:default }
.brow.is-readonly:hover{ background:transparent }
.brow.is-readonly > .arow{ display:none }

/* cabecera de la tabla de backlog */
.brow.is-header{ height:32px; background:var(--bg-3);
  border-bottom:1px solid var(--line-2); cursor:default;
  font:600 var(--t-11)/1.2 var(--f-mono); letter-spacing:.04em; color:var(--tx-3) }
.brow.is-header:hover{ background:var(--bg-3) }

/* ── SUBTAREA ───────────────────────────────────────────── */
.card2{ display:grid; grid-template-columns:24px minmax(0,1fr) auto;
  gap:var(--s-4); align-items:center; padding:var(--s-2) var(--s-3);
  background:var(--bg-4); border-radius:var(--r-1);
  font:500 var(--t-13)/18px var(--f-ui); color:var(--tx-1) }
.card2 > .id{ font:600 var(--t-11)/1.2 var(--f-mono); color:var(--tx-3) }
.card2 select{ min-height:28px; background:var(--bg-2); color:var(--tx-1);
  border:1px solid var(--line-2); border-radius:var(--r-1);
  font:500 var(--t-11)/1 var(--f-mono) }

/* ── CHIPS ──────────────────────────────────────────────── */
.chip{ padding:var(--s-1) 5px; border-radius:var(--r-1);
  font:500 var(--t-11)/16px var(--f-mono); letter-spacing:.04em;
  color:var(--tx-2); border:1px solid var(--line-1); background:none;
  justify-self:start }
/* prioridad: tono por nivel y, además, peso y relleno decrecientes, para que
   se distingan también sin color */
.chip.p0{ background:var(--p0); color:var(--bg-0); border-color:transparent; font-weight:700 }
.chip.p1{ background:none; color:var(--p1); border-color:var(--p1); font-weight:700 }
.chip.p2{ background:none; color:var(--p2); border-color:var(--p2); font-weight:600 }
.chip.p3{ background:none; color:var(--p3); border-color:var(--line-2); font-weight:500 }

/* ── BARRAS: siempre rectas ─────────────────────────────── */
.bar{ display:block; width:100%; height:4px; border-radius:2px;
  background:var(--line-1); overflow:hidden }
.bar > i{ display:block; height:100%; border-radius:2px; background:var(--ok);
  transition:width 300ms ease-out }
.bar.is-over > i{ background:var(--danger) }
.card .bar{ width:56px; height:3px }

/* ── PANELES ────────────────────────────────────────────── */
#panel,.plan{ display:flex; flex-direction:column; gap:var(--s-5);
  padding:var(--s-6); background:var(--bg-1);
  border:1px solid var(--line-2); border-radius:var(--r-3) }
#panel h2,.plan h2{ font:600 var(--t-12)/16px var(--f-ui);
  letter-spacing:.06em; text-transform:uppercase; color:var(--tx-2) }
.plan .figure{ font:600 var(--t-11)/1.4 var(--f-mono); color:var(--tx-2);
  font-variant-numeric:tabular-nums }
/* inline-flex y no inline: sin esto el texto de los .btn que son <a> (Tablero)
   no queda centrado, porque el min-height no lo centra en una caja inline. */
.btn{ display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--hit); padding:0 var(--s-5); border-radius:var(--r-1);
  background:none; border:1px solid var(--line-2); color:var(--tx-1);
  font:600 var(--t-13)/1 var(--f-ui); text-align:center; cursor:pointer;
  transition:border-color var(--fast) linear, background-color var(--fast) linear }
.btn:hover{ color:var(--tx-1) }
.btn:hover{ border-color:var(--line-3); background:var(--bg-3) }
.btn.primary{ background:var(--pri); color:var(--bg-0); border-color:transparent }
.btn.primary:hover{ background:#FFF64A }
.btn.danger{ color:var(--danger); border-color:rgba(255,122,122,.4) }
.danger-zone{ border-color:rgba(255,122,122,.4) }

/* firma de cabecera de página: sustituye a los engranajes */
.page-mark{ width:240px; height:2px;
  background:linear-gradient(90deg,var(--acc-line),transparent) }

/* barra de error */
.errbar{ display:flex; align-items:center; justify-content:space-between;
  height:32px; padding:0 var(--s-5); background:var(--bg-2);
  border-bottom:1px solid var(--danger);
  color:var(--danger); font:500 var(--t-13)/1 var(--f-ui) }

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media (pointer:coarse){
  .brow{ height:var(--hit) }
  .brow > .arow{ opacity:1 }
  .brow > .arow > button{ min-width:var(--hit); min-height:var(--hit) }
  .card2 select{ min-height:var(--hit) }
}
@media (max-width:900px){
  .board{ grid-template-columns:1fr }
  .col{ display:none }
  .col.is-active{ display:flex }
  .brow{ grid-template-columns:28px 44px 26px minmax(0,1fr); height:var(--hit) }
  .brow > .chip:not(.p0):not(.p1):not(.p2):not(.p3),
  .brow > .arow{ display:none }
}

@media (prefers-reduced-motion: reduce){
  *{ transition-duration:1ms !important; animation-duration:1ms !important }
}

/* ============================================================
   Resto de la aplicación, con los mismos tokens y las mismas
   reglas: nada de glow, serif solo en H1/H2, amarillo reservado
   a prioridad y a la acción principal de un panel.
   ============================================================ */

/* barra superior: la nav del handoff más proyecto, buscador y estado */
#top{ position:sticky; top:0; z-index:30 }
#top > nav{ display:contents }
#pj{ min-height:32px; max-width:180px; padding:0 var(--s-3);
  background:var(--bg-2); color:var(--tx-1);
  border:1px solid var(--line-2); border-radius:var(--r-1);
  font:600 var(--t-11)/1 var(--f-mono) }
#search{ width:200px; min-height:32px; padding:0 var(--s-3);
  background:var(--bg-2); color:var(--tx-1);
  border:1px solid var(--line-2); border-radius:var(--r-1);
  font:500 var(--t-13)/1 var(--f-ui) }
#st{ margin-left:auto; color:var(--tx-3);
  font:500 var(--t-11)/1 var(--f-mono); white-space:pre;
  font-variant-numeric:tabular-nums }
#who{ color:var(--tx-3); font:500 var(--t-11)/1 var(--f-mono) }

main{ padding:var(--s-5) }
.page-head{ display:flex; align-items:baseline; gap:var(--s-5); margin-bottom:var(--s-2) }
.page-head + .page-mark{ margin-bottom:var(--s-6) }
.muted{ color:var(--tx-2) }
.mono{ font-family:var(--f-mono) }

/* controles genéricos */
select,input[type=text],input[type=number],input[type=date],
input[type=password],input[type=search],textarea{
  min-height:32px; padding:var(--s-2) var(--s-3);
  background:var(--bg-2); color:var(--tx-1);
  border:1px solid var(--line-2); border-radius:var(--r-1);
  font:500 var(--t-13)/1.3 var(--f-ui) }
textarea{ font-family:var(--f-mono); font-size:var(--t-12) }
select:hover,input:hover{ border-color:var(--line-3) }
input:disabled,select:disabled,textarea:disabled{ color:var(--tx-3); cursor:not-allowed }
.filters{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-4);
  margin-bottom:var(--s-5) }
.filters .figure{ font:500 var(--t-11)/1 var(--f-mono); color:var(--tx-3);
  font-variant-numeric:tabular-nums }

/* cabecera del sprint en el board */
.sprinthead{ display:flex; align-items:center; gap:var(--s-5); flex-wrap:wrap;
  padding:0 var(--s-5) var(--s-2) }
.sprinthead .goal{ color:var(--tx-2) }
/* un filtro puesto se nota: si no, el tablero parece vacío sin motivo */
.sprinthead select.is-on{ border-color:var(--acc-line); color:var(--tx-1) }
.sprinthead .burn{ display:flex; align-items:center; gap:var(--s-4);
  margin-left:auto; min-width:220px }
.sprinthead .burn .bar{ width:130px }

/* backlog: contenedor de tabla + panel lateral */
.blwrap{ display:grid; grid-template-columns:minmax(0,1fr) 280px;
  gap:var(--s-5); align-items:start }
.rows{ background:var(--bg-1); border:1px solid var(--line-2);
  border-radius:var(--r-2); overflow:hidden }
.rows .brow:last-child{ border-bottom:0 }
.quick{ display:flex; gap:var(--s-4); margin-top:var(--s-5) }
.quick input{ flex:1; font-family:var(--f-mono); font-size:var(--t-12) }
.plan .cap.over{ color:var(--danger) }

/* épicas: dos barras rectas por fila */
.elist,.slist{ display:flex; flex-direction:column; gap:var(--s-2) }
.erow,.srow{ background:var(--bg-1); border:1px solid var(--line-2);
  border-radius:var(--r-2); padding:var(--s-4) var(--s-5) }
.erow > .head{ display:grid; grid-template-columns:44px minmax(0,1fr) 150px 150px auto;
  gap:var(--s-5); align-items:center; cursor:pointer }
.erow > .head > .title{ font:500 var(--t-15)/20px var(--f-ui);
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis }
.erow .metric{ display:flex; align-items:center; gap:var(--s-3) }
.erow .metric .figure{ font:500 var(--t-11)/1 var(--f-mono); color:var(--tx-3);
  font-variant-numeric:tabular-nums; white-space:nowrap }
.erow .kids{ display:flex; flex-direction:column; gap:var(--s-2);
  margin-top:var(--s-4); padding-top:var(--s-4); border-top:1px solid var(--line-1) }
.erow .kid{ display:grid; grid-template-columns:44px 44px 80px minmax(0,1fr);
  gap:var(--s-4); align-items:center; color:var(--tx-2);
  font:500 var(--t-13)/18px var(--f-ui); cursor:pointer }
.erow .kid:hover{ color:var(--tx-1) }
.srow{ display:grid; grid-template-columns:110px 80px 190px 90px minmax(0,1fr);
  gap:var(--s-5); align-items:center }
.srow.is-active{ border-color:var(--line-3) }
.srow .acts{ display:flex; gap:var(--s-3); justify-content:flex-end }
.srow .acts .btn{ min-height:32px }
.burnchart{ margin-top:var(--s-5); padding:var(--s-5); background:var(--bg-1);
  border:1px solid var(--line-2); border-radius:var(--r-2) }

/* panel de detalle */
#panel{ position:fixed; top:0; right:0; bottom:0; width:430px; max-width:92vw;
  border-radius:0; border-left:1px solid var(--line-2);
  overflow:auto; z-index:40; box-shadow:var(--e-3); gap:var(--s-4) }
#panel .close{ position:absolute; top:var(--s-5); right:var(--s-5);
  min-height:32px; padding:0 var(--s-4) }
#panel .mover{ position:absolute; top:var(--s-5); right:52px;
  min-height:32px; padding:0 var(--s-4); color:var(--tx-2) }
#panel .grid{ display:grid; grid-template-columns:88px minmax(0,1fr);
  gap:var(--s-4) var(--s-5); align-items:center }

/* ── panel abajo (SO) ─────────────────────────────────────
   Misma pieza, otro anclaje: gana ancho para los campos y deja de tapar la
   columna de la derecha del tablero, a cambio de altura. El botón del propio
   panel cambia de una a otra y la elección se recuerda. */
#panel.is-bottom{ top:auto; left:0; right:0; bottom:0; width:auto; max-width:none;
  height:min(52vh,520px); border-left:0; border-top:1px solid var(--line-2) }
/* con el ancho de la pantalla, los campos van en dos parejas etiqueta+valor */
#panel.is-bottom .grid{ grid-template-columns:88px minmax(0,1fr) 88px minmax(0,1fr) }
#panel.is-bottom textarea{ min-height:80px }
/* el board se encoge para que el panel no tape la última fila de tarjetas */
body.panel-bottom #view{ padding-bottom:min(52vh,520px) }
@media (max-width:900px){
  #panel.is-bottom .grid{ grid-template-columns:88px minmax(0,1fr) }
}
#panel .grid > label{ color:var(--tx-2); font:500 var(--t-12)/1.3 var(--f-ui) }
#panel textarea{ width:100%; min-height:140px }
#panel .tasklist{ display:flex; flex-direction:column; gap:var(--s-2) }
#panel .section-title{ font:600 var(--t-12)/16px var(--f-ui);
  letter-spacing:.06em; text-transform:uppercase; color:var(--tx-2) }

/* corrección pendiente, arriba del panel de detalle: enmarcada en violeta, que
   es el acento de la casa, y no en rojo — no es un error, es trabajo por hacer */
#panel .review{ display:flex; flex-direction:column; gap:var(--s-3);
  padding:var(--s-4) var(--s-5); background:var(--bg-2);
  border:1px solid var(--acc-line); border-radius:var(--r-2) }
#panel .review .section-title{ color:var(--acc) }
#panel .review .texto{ color:var(--tx-1); white-space:pre-wrap;
  font:500 var(--t-13)/1.45 var(--f-ui) }
#panel .review textarea.texto{ min-height:64px; width:100% }
#panel .review .btn{ min-height:32px; align-self:flex-start }
/* vacía no grita: sigue siendo un campo más hasta que alguien escribe algo */
#panel .review.is-vacia{ border-color:var(--line-2) }
#panel .review.is-vacia .section-title{ color:var(--tx-2) }

/* historial del item, dentro del panel de detalle: una línea por cambio y el
   texto de apoyo en mono, como el resto de cifras */
.loglist{ display:flex; flex-direction:column; gap:var(--s-1) }
.logrow{ display:grid; grid-template-columns:74px 74px minmax(0,1fr) auto;
  gap:var(--s-4); align-items:baseline; min-height:22px;
  font:500 var(--t-12)/1.4 var(--f-ui); color:var(--tx-2) }
.logrow > *{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }

/* administración */
.arows{ display:flex; flex-direction:column; gap:var(--s-2) }
.arow{ display:grid; grid-template-columns:44px minmax(0,1fr) 160px auto;
  gap:var(--s-5); align-items:center; min-height:40px;
  padding:var(--s-2) var(--s-4); background:var(--bg-2);
  border:1px solid var(--line-1); border-radius:var(--r-1) }
.arow.inv{ grid-template-columns:112px 92px minmax(0,1fr) auto }
.arow > *{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.arow .btn{ min-height:32px }
.secret{ padding:var(--s-4) var(--s-5); background:var(--bg-2);
  border:1px solid var(--pri); border-radius:var(--r-1) }
.secret code{ display:block; margin:var(--s-3) 0; color:var(--tx-1);
  font:500 var(--t-12)/1.5 var(--f-mono); word-break:break-all; user-select:all }
.err{ color:var(--danger); font:500 var(--t-12)/1.4 var(--f-ui) }

/* avisos flotantes: el rojo solo para fallos, el verde para confirmaciones */
.toast{ position:fixed; left:50%; bottom:var(--s-6); transform:translateX(-50%);
  z-index:60; max-width:70vw; height:32px; padding:0 var(--s-5);
  display:flex; align-items:center; gap:var(--s-4);
  background:var(--bg-2); border:1px solid var(--line-2); border-radius:var(--r-1);
  border-left-width:3px; box-shadow:var(--e-2);
  font:500 var(--t-13)/1 var(--f-ui); color:var(--tx-1) }
.toast.is-error{ border-left-color:var(--danger); color:var(--danger) }
.toast.is-ok{ border-left-color:var(--ok) }

/* login / alta inicial */
dialog{ padding:var(--s-7); background:var(--bg-1); color:var(--tx-1);
  border:1px solid var(--line-2); border-radius:var(--r-3); box-shadow:var(--e-3) }
dialog::backdrop{ background:rgba(11,9,16,.8) }
dialog form{ display:flex; flex-direction:column; gap:var(--s-4); width:300px; max-width:92vw }
dialog h2{ font:600 var(--t-19)/24px var(--f-head); color:var(--tx-1) }
dialog p{ margin:0; color:var(--tx-2); font:500 var(--t-13)/1.45 var(--f-ui) }
dialog input,dialog select{ min-height:var(--hit) }
/* los campos ocupan su celda: sin esto, un select dentro de una rejilla de dos
   columnas se queda a su ancho natural y la fila se ve descuadrada */
dialog input,dialog select,dialog textarea{ width:100% }
/* cada pareja etiqueta + campo se apila y ocupa el alto de su celda */
dialog form span{ display:flex; flex-direction:column; gap:var(--s-2); min-width:0 }
dialog form span > label{ margin:0 }
dialog textarea{ padding:var(--s-3) var(--s-4); background:var(--bg-2); color:var(--tx-1);
  border:1px solid var(--line-2); border-radius:var(--r-1);
  font:500 var(--t-13)/1.45 var(--f-ui); resize:vertical }
/* los formularios con campos en dos columnas necesitan más de 300 px: a 300 se
   cortaban los selects y las parejas se montaban */
#itemForm,#sprintForm{ width:min(440px,92vw) }

/* selector de prioridad: mismo código de color que los chips, un tono por
   nivel. El texto va teñido; el relleno se reserva al chip de P0 para no
   multiplicar objetos luminosos en pantalla. */
select.prio{ font-weight:600 }
select.prio.p0{ color:var(--p0); border-color:var(--p0) }
select.prio.p1{ color:var(--p1); border-color:var(--p1) }
select.prio.p2{ color:var(--p2); border-color:var(--p2) }
select.prio.p3{ color:var(--p3) }
select.prio option{ background:var(--bg-2) }
select.prio option.p0{ color:var(--p0) }
select.prio option.p1{ color:var(--p1) }
select.prio option.p2{ color:var(--p2) }
select.prio option.p3{ color:var(--p3) }

/* contador de subtareas dentro de la tarjeta: texto, no botón */
.linkish{ padding:0; background:none; border:0; cursor:pointer;
  color:var(--tx-3); font:500 var(--t-11)/1.3 var(--f-mono) }
.linkish:hover{ color:var(--tx-1) }
.card .tasks{ display:flex; flex-direction:column; gap:var(--s-2);
  margin-top:var(--s-2); padding-top:var(--s-3); border-top:1px solid var(--line-1) }

/* estado de carga: estructura visible, sin skeletons pulsantes */
.loading{ background:var(--bg-1); border-radius:var(--r-2); min-height:96px }

.mobonly{ display:none }
@media (max-width:900px){
  .mobonly{ display:block }
  .blwrap{ grid-template-columns:1fr }
  #search{ width:120px }
  #st{ display:none }
  .erow > .head{ grid-template-columns:44px minmax(0,1fr) auto }
  .erow > .head .metric{ display:none }
  .srow{ grid-template-columns:1fr 1fr }
}

/* ── avatares ──
   La cara va donde antes solo estaba el nombre, así que no debe cambiar el
   alto de la fila: se alinea al texto y no crece con él. */
.avatar{ flex:0 0 auto; border-radius:50%; object-fit:cover; vertical-align:middle;
  background:var(--bg-3); border:1px solid var(--line-2) }
.avatar.is-txt{ display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--f-mono); font-weight:600; color:var(--tx-2); letter-spacing:-.02em }
.whoami{ display:inline-flex; align-items:center; gap:var(--s-3); min-width:0 }
.whoami > span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }

/* Editor de la foto en el perfil. */
.pfp{ display:flex; align-items:center; gap:var(--s-5) }
.pfp .avatar{ width:64px; height:64px }
.pfp input[type=file]{ font-size:var(--t-12); color:var(--tx-2) }

/* ── ayuda ──
   Dos columnas: qué es y cómo se usa. El bloque de texto preformateado es el
   manual del agente tal cual lo recibe, así que no se reformatea: solo se
   deja desbordar en horizontal si hace falta. */
.arow.doc{ grid-template-columns:minmax(0,180px) minmax(0,1fr); align-items:start; gap:var(--s-5) }
.arow.doc > span:first-child{ font-weight:600 }
.doc-pre{ margin:var(--s-5) 0 0; padding:var(--s-5); overflow-x:auto;
  background:var(--bg-1); border:1px solid var(--line-1); border-radius:var(--r-2);
  font:500 var(--t-12)/1.5 var(--f-mono); color:var(--tx-2); white-space:pre }
@media (max-width:720px){
  .arow.doc{ grid-template-columns:minmax(0,1fr); gap:var(--s-2) }
}