/* Panel de Steinmetz.
   Los mismos tokens que la landing y que Nomos. No hay color de acento: el
   estado se lee por posición y por peso, nunca por semáforo. Lo editable se
   distingue porque el cursor cambia y el fondo se enciende al pasar, no
   porque haya un lápiz dibujado en cada esquina. */
:root{
  --papel:#ffffff; --panel:#f4f4f2; --tabla:#eeeeec;
  --tinta:#111112; --medio:#6e6e73; --suave:#82828a;
  --linea:rgba(17,17,18,.14); --linea-fuerte:rgba(17,17,18,.34);
  --serif:"Fraunces",Georgia,serif;
  --sans:"Instrument Sans",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --rail:15rem;
  --ui:cubic-bezier(.32,.72,0,1);
  --t-toque:.12s; --t-corto:.22s; --t-medio:.34s;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{--papel:#141416; --panel:#0e0e10; --tabla:#141416;
    --tinta:#f0f0f2; --medio:#9a9a9e; --suave:#84848a;
    --linea:rgba(255,255,255,.14); --linea-fuerte:rgba(255,255,255,.32);
    color-scheme:dark;}
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--panel);color:var(--tinta);font-family:var(--sans);
  font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;
  display:grid;grid-template-columns:var(--rail) minmax(0,1fr);min-height:100vh}
body.cargando,body.sinsesion{grid-template-columns:1fr}
:focus-visible{outline:2px solid var(--tinta);outline-offset:2px}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit}
[hidden]{display:none!important}
code{font-family:var(--mono);font-size:.92em}

/* ── la puerta ── */
.puerta{position:fixed;inset:0;display:grid;place-items:center;
  background:var(--panel);z-index:20;padding:2rem}
.puertaCaja{max-width:26rem;text-align:center}
.puertaCaja p{color:var(--medio);margin:.9rem 0 1.6rem;font-size:.92rem}
.wm{font-family:var(--serif);font-variation-settings:"opsz" 60,"wght" 500;
  font-size:1.18rem;letter-spacing:-.022em;padding:.3rem .55rem 1.1rem}
.wm.grande{font-size:2.6rem;font-variation-settings:"opsz" 96,"wght" 480;
  letter-spacing:-.03em;padding:0}
/* El botón de Google. Blanco en los dos temas, con la G a todo color: son las
   dos formas en que Google permite dibujarlo, y la clara se lee igual sobre
   papel que sobre tinta. */
.google{display:inline-flex;align-items:center;gap:.7rem;
  background:#fff;color:#1f1f1f;text-decoration:none;
  padding:.62rem 1.2rem .62rem .95rem;border-radius:.45rem;
  border:1px solid #dadce0;font-size:.92rem;font-weight:500;
  transition:box-shadow var(--t-toque) var(--ui),background var(--t-toque) var(--ui)}
.google:hover{background:#f7f8f8;box-shadow:0 1px 3px rgba(60,64,67,.28)}
.google svg{flex:none}

/* ── barra lateral ── */
aside{background:var(--panel);border-right:1px solid var(--linea);
  padding:1rem .75rem;display:flex;flex-direction:column;gap:.15rem;
  position:sticky;top:0;height:100vh}
.rotulo{font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--suave);padding:1.1rem .6rem .35rem}
aside button{display:flex;align-items:center;gap:.55rem;width:100%;
  text-align:left;padding:.42rem .6rem;border-radius:.4rem;color:var(--medio);
  transition:background var(--t-toque) var(--ui),color var(--t-toque) var(--ui)}
aside button:hover{background:var(--tabla);color:var(--tinta)}
aside button.on{background:var(--tinta);color:var(--papel)}
aside button .c{margin-left:auto;font-family:var(--mono);font-size:.62rem;opacity:.7}
aside .tenue{color:var(--suave);font-size:.82rem;margin-top:.35rem}
.pt{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.45;flex:none}
.raspie{margin-top:auto;padding:.9rem .6rem 0;border-top:1px solid var(--linea);
  font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--suave);display:flex;gap:.6rem;
  align-items:baseline;justify-content:space-between}
.raspie span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.raspie a{text-decoration:none;flex:none}
.raspie a:hover{color:var(--tinta)}

/* ── cabecera ── */
main{background:var(--tabla);min-width:0;display:flex;flex-direction:column}
.cab{background:var(--papel);border-bottom:1px solid var(--linea);
  padding:.85rem 1.35rem;display:flex;align-items:center;gap:1rem;
  position:sticky;top:0;z-index:4}
.cab h1{font-family:var(--serif);font-variation-settings:"opsz" 60,"wght" 520;
  font-size:1.18rem;letter-spacing:-.02em;font-weight:520}
.filtros{display:flex;gap:.3rem;margin-left:auto}
.filtros button{font-family:var(--mono);font-size:.6rem;letter-spacing:.11em;
  text-transform:uppercase;padding:.38rem .8rem;border-radius:99px;
  border:1px solid var(--linea);color:var(--medio);
  transition:background var(--t-toque) var(--ui),color var(--t-toque) var(--ui)}
.filtros button.on{background:var(--tinta);color:var(--papel);border-color:var(--tinta)}

/* ── tablero ── */
.tablero{padding:1.1rem 1.35rem 3rem;overflow-x:auto}
.fila{display:grid;grid-template-columns:repeat(6,minmax(11.5rem,1fr));gap:.7rem}
.colT{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--suave);padding:.2rem .45rem .5rem;
  display:flex;align-items:center;gap:.4rem}
.colT b{font-weight:400;color:var(--medio)}
.carrilT{display:flex;align-items:center;gap:.6rem;margin:1.3rem 0 .6rem;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--medio)}
.carrilT::after{content:"";flex:1;height:1px;background:var(--linea)}
.col{padding:.1rem .15rem;min-height:2.6rem;display:flex;flex-direction:column;
  gap:.45rem;border-left:1px solid var(--linea);border-radius:.2rem;
  transition:background var(--t-toque) var(--ui)}
.fila .col:last-child{border-right:1px solid var(--linea)}
/* Dónde va a caer la tarjeta: la columna se enciende. Sin flechas ni sombras. */
.col.recibe{background:color-mix(in srgb,var(--tinta) 6%,transparent)}

/* ── tarjeta ── */
.tj{display:block;width:100%;text-align:left;background:var(--papel);
  border:1px solid var(--linea);border-radius:.45rem;padding:.65rem .7rem;
  cursor:grab;
  transition:border-color var(--t-toque) var(--ui),transform var(--t-toque) var(--ui)}
.tj:hover{border-color:var(--linea-fuerte);transform:translateY(-1px)}
.tj:active{cursor:grabbing}
.tj.llevando{opacity:.4}
.tjN{font-family:var(--serif);font-variation-settings:"opsz" 40,"wght" 560;
  font-size:.98rem;letter-spacing:-.012em;line-height:1.2}
.tjC{font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--suave);margin-top:.15rem}
.barra{display:flex;gap:2px;margin:.6rem 0 .45rem}
.barra i{height:3px;flex:1;background:var(--linea);border-radius:2px}
.barra i.v{background:var(--tinta)}
.tjP{display:flex;align-items:center;gap:.5rem;font-family:var(--mono);
  font-size:.58rem;letter-spacing:.06em;color:var(--suave)}
.tjP b{color:var(--tinta);font-weight:500}

/* ── listas ── */
.lista{padding:1.3rem 1.35rem 3rem;max-width:62rem}
.grupo{margin-bottom:2rem}
.grupoT{font-family:var(--mono);font-size:.62rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--medio);margin-bottom:.7rem;
  display:flex;align-items:center;gap:.6rem}
.grupoT::after{content:"";flex:1;height:1px;background:var(--linea)}
.it{display:flex;gap:.8rem;align-items:baseline;background:var(--papel);
  border:1px solid var(--linea);border-radius:.45rem;padding:.6rem .8rem;
  margin-bottom:.35rem;transition:border-color var(--t-toque) var(--ui)}
.it:hover{border-color:var(--linea-fuerte)}
.it .k{font-family:var(--mono);font-size:.6rem;color:var(--suave);flex:none;
  min-width:4.2rem}
.it .t{flex:1;min-width:0}
/* Dos renglones y basta. El texto entero vive en el PENDIENTES.md y en
   /contexto; acá lo que hace falta es poder barrer la lista con la vista. */
.it .t em{font-style:normal;color:var(--medio);font-size:.82rem;
  margin-top:.12rem;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.it .d{font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--suave);flex:none}
.it.ok .t{color:var(--suave);text-decoration:line-through}
.it .marca{flex:none;width:1.05rem;height:1.05rem;border:1px solid var(--linea-fuerte);
  border-radius:.25rem;align-self:flex-start;position:relative;
  transition:background var(--t-toque) var(--ui)}
.it .marca:hover{background:var(--tabla)}
.it.ok .marca{background:var(--tinta);border-color:var(--tinta)}
.it.ok .marca::after{content:"";position:absolute;left:.3rem;top:.13rem;
  width:.28rem;height:.55rem;border:solid var(--papel);border-width:0 1.5px 1.5px 0;
  transform:rotate(42deg)}
.it .x{flex:none;color:var(--suave);opacity:0;padding:0 .2rem;line-height:1;
  transition:opacity var(--t-toque) var(--ui)}
.it:hover .x{opacity:1}
.it .x:hover{color:var(--tinta)}
.vacio{color:var(--suave);font-size:.86rem;padding:.4rem 0 1rem}

/* ── el detalle: un modal central, como la incidencia de Jira ── */
.fondo{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:8;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:opacity var(--t-corto) var(--ui)}
.fondo.on{opacity:1;pointer-events:auto}
.det{position:fixed;inset:0;z-index:9;display:grid;place-items:center;
  padding:clamp(1rem,4vh,3rem) 1rem;pointer-events:none}
.caja{width:min(58rem,95vw);max-height:88vh;display:flex;flex-direction:column;
  background:var(--papel);border:1px solid var(--linea);border-radius:.7rem;
  box-shadow:0 30px 70px -24px rgba(0,0,0,.55);overflow:hidden;
  opacity:0;transform:translateY(10px) scale(.985);
  transition:opacity var(--t-corto) var(--ui),transform var(--t-medio) var(--ui)}
.det.on{pointer-events:auto}
.det.on .caja{opacity:1;transform:none}

.detCab{padding:1.15rem 1.4rem 1rem;border-bottom:1px solid var(--linea);
  display:flex;align-items:flex-start;gap:1rem;flex:none}
.miga{font-family:var(--mono);font-size:.58rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--suave);margin-bottom:.3rem}
.detCab h2{font-family:var(--serif);font-variation-settings:"opsz" 72,"wght" 520;
  font-size:1.62rem;letter-spacing:-.026em;line-height:1.08}
.cerrar{font-size:1.05rem;line-height:1;color:var(--medio);padding:.3rem .45rem;
  border-radius:.35rem;flex:none}
.cerrar:hover{background:var(--panel);color:var(--tinta)}

.detC{overflow-y:auto;display:grid;gap:0;align-items:start}
@media(min-width:48rem){.detC{grid-template-columns:minmax(0,1fr) 17.5rem}}
.izq{padding:1.2rem 1.4rem 1.6rem;min-width:0}
.der{padding:1.2rem 1.4rem 1.6rem;border-left:1px solid var(--linea);
  background:var(--panel);align-self:stretch}
@media(max-width:47.99rem){.der{border-left:0;border-top:1px solid var(--linea)}}

.frase{font-size:1.02rem;line-height:1.55;margin-bottom:1.1rem}
.detS{font-family:var(--mono);font-size:.57rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--suave);margin:1.5rem 0 .6rem;
  display:flex;align-items:center;gap:.6rem}
.detS button{font:inherit;color:var(--medio);text-transform:none;letter-spacing:0;
  font-size:.7rem}
.detS button:hover{color:var(--tinta)}
.izq > .detS:first-child,.der > .detS:first-child{margin-top:0}
.pasos{display:flex;gap:.25rem;margin-bottom:1.3rem}
.paso{flex:1;text-align:center;cursor:pointer}
.paso i{display:block;height:3px;background:var(--linea);border-radius:2px;
  margin-bottom:.3rem;transition:background var(--t-toque) var(--ui)}
.paso.v i{background:var(--tinta)}
.paso:hover i{background:var(--linea-fuerte)}
.paso span{font-family:var(--mono);font-size:.48rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--suave)}
.paso.v span{color:var(--tinta)}
.ficha div{display:flex;justify-content:space-between;gap:.9rem;
  padding:.45rem 0;border-bottom:1px solid var(--linea);font-size:.84rem}
.ficha div:last-child{border-bottom:0}
.ficha .k{font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--suave);flex:none;padding-top:.2rem}
.ficha .v{text-align:right;min-width:0;word-break:break-word}

/* Lo editable: se escribe encima, sin cambiar de pantalla ni abrir otro modal. */
[data-edita]{cursor:text;border-radius:.25rem;padding:0 .2rem;margin:0 -.2rem;
  transition:background var(--t-toque) var(--ui)}
[data-edita]:hover{background:color-mix(in srgb,var(--tinta) 7%,transparent)}
[data-edita]:focus{background:var(--papel);outline:1px solid var(--linea-fuerte);
  outline-offset:1px}
[data-edita]:empty::before{content:attr(data-vacio);color:var(--suave)}
.guardando{opacity:.45;transition:opacity var(--t-toque) var(--ui)}

.mini{font-size:.86rem;color:var(--medio)}
.mini h3{font-family:var(--sans);font-size:.84rem;font-weight:600;
  color:var(--tinta);margin:.85rem 0 .2rem}
.mini li{margin:.18rem 0 .18rem 1rem}
.mini b{color:var(--tinta)}
.mini p{margin-bottom:.5rem}
.nota{border:1px solid var(--linea);border-radius:.45rem;padding:.6rem .8rem;
  font-size:.82rem;color:var(--medio);margin-bottom:1.1rem}
.nota b{color:var(--tinta)}

.detPie{flex:none;border-top:1px solid var(--linea);padding:.75rem 1.4rem;
  background:var(--papel)}
.escribir{display:flex;gap:.5rem;align-items:center;background:var(--panel);
  border:1px solid var(--linea);border-radius:.55rem;padding:.55rem .65rem}
.escribir input[type=text]{flex:1;background:none;border:0;font:inherit;
  color:inherit;outline:0;min-width:0}
.escribir input::placeholder{color:var(--suave)}
.chip{font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--medio);border:1px solid var(--linea);
  border-radius:99px;padding:.25rem .6rem;background:var(--papel);flex:none;
  transition:background var(--t-toque) var(--ui),color var(--t-toque) var(--ui)}
.chip:hover{border-color:var(--linea-fuerte)}
.chip.on{background:var(--tinta);color:var(--papel);border-color:var(--tinta)}
.adjuntos{font-family:var(--mono);font-size:.56rem;color:var(--suave);
  padding:.35rem .2rem 0}

/* ── el aviso: lo único que se mueve solo ── */
.aviso{position:fixed;left:50%;bottom:1.4rem;transform:translate(-50%,1.2rem);
  background:var(--tinta);color:var(--papel);padding:.55rem 1rem;
  border-radius:.45rem;font-size:.84rem;z-index:30;opacity:0;pointer-events:none;
  max-width:min(34rem,92vw);
  transition:opacity var(--t-corto) var(--ui),transform var(--t-corto) var(--ui)}
.aviso.on{opacity:1;transform:translate(-50%,0)}

@media(prefers-reduced-motion:reduce){*{transition-duration:.01ms!important}}
@media(max-width:60rem){
  body{grid-template-columns:1fr}
  aside{position:static;height:auto;flex-direction:row;flex-wrap:wrap;
    align-items:center;border-right:0;border-bottom:1px solid var(--linea)}
  .rotulo{display:none} aside button{width:auto} .raspie{margin:0;border:0}
  .tablero,.lista,.cab{padding-left:1rem;padding-right:1rem}
}