/* Tareas Valar — hoja de estilo unica.
   Sin framework y sin paso de compilacion: se edita y se recarga. */

:root{
  --fondo:#f7f7f8;
  --panel:#ffffff;
  --panel-2:#f2f2f4;
  --panel-3:#e8e8ec;
  --tinta:#16151a;
  --suave:#5f5c68;
  --tenue:#8e8a99;
  --linea:#e4e3e9;
  --linea-fuerte:#cfcdd8;
  --marca:#6b46e5;
  --marca-suave:#efeafd;
  --marca-tinta:#5433c7;
  --sombra:0 1px 2px rgba(20,18,30,.05), 0 4px 14px rgba(20,18,30,.06);
  --alto-barra:44px;
  --lateral:270px;
}
@media (prefers-color-scheme:dark){
  :root{
    --fondo:#131318; --panel:#1a1a21; --panel-2:#212129; --panel-3:#2b2b35;
    --tinta:#eceaf2; --suave:#a5a1b3; --tenue:#7a7689;
    --linea:#2a2a34; --linea-fuerte:#3b3a48;
    --marca:#9d84f5; --marca-suave:#241d42; --marca-tinta:#b9a5f8;
    --sombra:0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
  }
}

*{box-sizing:border-box}
/* El atributo hidden debe ganarle a cualquier display de aquí abajo
   (si no, .ingreso con display:grid se queda encima de la aplicación). */
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0;background:var(--fondo);color:var(--tinta);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow:hidden;
}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--linea-fuerte);border-radius:8px}
::-webkit-scrollbar-track{background:transparent}

/* ------------------------------------------------------------ estructura */
#app{display:grid;grid-template-columns:var(--lateral) 1fr;height:100vh}
#app.oculto-lateral{grid-template-columns:0 1fr}

/* ------------------------------------------------------------- lateral */
aside{
  background:var(--panel-2);border-right:1px solid var(--linea);
  display:flex;flex-direction:column;overflow:hidden;
}
.marca{
  height:var(--alto-barra);display:flex;align-items:center;gap:9px;
  padding:0 14px;border-bottom:1px solid var(--linea);flex:none;
}
.marca .logo{
  width:22px;height:22px;border-radius:6px;background:var(--marca);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:12px;flex:none;
}
.marca b{font-size:14px;font-weight:650;letter-spacing:-.01em;white-space:nowrap}
.marca .quien{
  margin-left:auto;font-size:11px;color:var(--tenue);
  padding:3px 7px;border-radius:6px;max-width:96px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;
}
.marca .quien:hover{background:var(--panel-3);color:var(--tinta)}
.marca .salir{
  flex:none;text-decoration:none;color:var(--tenue);font-size:13px;line-height:1;
  padding:4px 5px;border-radius:6px;
}
.marca .salir:hover{background:var(--panel-3);color:#dc2626}

.arbol{flex:1;overflow-y:auto;padding:8px 6px 24px}
.seccion{
  display:flex;align-items:center;gap:6px;padding:8px 10px 4px;
  font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tenue);
}
.seccion button{margin-left:auto;color:var(--tenue);font-size:15px;line-height:1;
  padding:2px 5px;border-radius:5px}
.seccion button:hover{background:var(--panel-3);color:var(--tinta)}

/* filas del arbol: espacio / carpeta / lista */
.nodo{
  display:flex;align-items:center;gap:6px;padding:5px 8px;border-radius:7px;
  cursor:pointer;user-select:none;position:relative;
}
.nodo:hover{background:var(--panel-3)}
.nodo.activo{background:var(--marca-suave);color:var(--marca-tinta);font-weight:600}
.nodo .flecha{
  width:15px;height:15px;flex:none;display:grid;place-items:center;
  color:var(--tenue);font-size:9px;transition:transform .13s ease;
}
.nodo .flecha.abierta{transform:rotate(90deg)}
.nodo .flecha.vacia{visibility:hidden}
.nodo .ico{width:17px;flex:none;text-align:center;font-size:12.5px}
.nodo .txt{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.nodo .cuenta{
  font-size:10.5px;color:var(--tenue);background:var(--panel);
  border-radius:20px;padding:0 6px;min-width:19px;text-align:center;
}
.nodo.activo .cuenta{background:var(--panel)}
.nodo .mas{
  opacity:0;color:var(--tenue);font-size:15px;line-height:1;padding:1px 5px;border-radius:5px;
}
.nodo:hover .mas{opacity:1}
.nodo .mas:hover{background:var(--panel);color:var(--tinta)}
.hijos{margin-left:13px;border-left:1px solid var(--linea);padding-left:3px}
.nodo.espacio .txt{font-weight:650}
.punto-espacio{width:9px;height:9px;border-radius:3px;flex:none}

/* arrastrar en el arbol */
.nodo.arrastrando{opacity:.4}
.nodo.destino{background:var(--marca-suave);outline:1.5px dashed var(--marca)}

/* ------------------------------------------------------------- principal */
main{display:flex;flex-direction:column;overflow:hidden;background:var(--fondo)}
.barra{
  height:var(--alto-barra);flex:none;display:flex;align-items:center;gap:10px;
  padding:0 16px;border-bottom:1px solid var(--linea);background:var(--panel);
}
.ruta{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--suave);
  overflow:hidden;white-space:nowrap}
.ruta b{color:var(--tinta);font-weight:650}
.ruta .sep{color:var(--tenue)}
.barra .der{margin-left:auto;display:flex;align-items:center;gap:6px}

/* ---- buscador de la barra superior ---- */
.buscador{position:relative;margin-left:20px;flex:1;max-width:400px}
.buscador .lupa{
  position:absolute;left:9px;top:50%;transform:translateY(-50%);
  font-size:11px;opacity:.5;pointer-events:none;
}
.buscador input{
  width:100%;border:1px solid var(--linea);border-radius:8px;background:var(--panel-2);
  padding:5px 10px 5px 28px;font-size:13px;outline:none;color:var(--tinta);
}
.buscador input:focus{border-color:var(--marca);background:var(--panel)}
.resultados{
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:70;
  background:var(--panel);border:1px solid var(--linea);border-radius:10px;
  box-shadow:0 10px 34px rgba(0,0,0,.18);max-height:420px;overflow-y:auto;padding:5px;
  min-width:390px;
}
.resultados .ttl{
  font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--tenue);
  padding:7px 10px 4px;font-weight:700;
}
.res{
  display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:7px;
  cursor:pointer;font-size:13px;
}
.res:hover,.res.sel{background:var(--panel-2)}
.res .info{flex:1;min-width:0;overflow:hidden}
.res .t{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.res .r{display:block;font-size:11px;color:var(--tenue);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.res .ico{width:17px;text-align:center;flex:none;font-size:12px}
.sin-res{padding:16px 12px;text-align:center;color:var(--tenue);font-size:12.5px}

/* ---- botón de volver a la nube ---- */
.btn.volver{
  text-decoration:none;color:var(--suave);border-color:var(--linea);
}
.btn.volver:hover{color:var(--marca-tinta);border-color:var(--marca);background:var(--marca-suave)}
.btn.volver .nube-ico{font-size:14px}
@media (max-width:1100px){
  .btn.volver .txt-volver{display:none}
  .buscador{max-width:220px;margin-left:12px}
}

/* ---- panorama de espacio / carpeta ---- */
.panorama{display:grid;gap:14px}
.tarjetas{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.tarjeta-p{
  background:var(--panel);border:1px solid var(--linea);border-radius:11px;
  padding:15px 17px;box-shadow:var(--sombra);
}
.tarjeta-p h3{
  margin:0 0 11px;font-size:11px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--tenue);
}
.item-p{
  display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:7px;
  cursor:pointer;font-size:13.5px;
}
.item-p:hover{background:var(--panel-2)}
.item-p .n{margin-left:auto;font-size:11px;color:var(--tenue);
  background:var(--panel-2);border-radius:20px;padding:1px 8px}
.item-p .ico{width:18px;text-align:center;flex:none}
.item-p .sub{font-size:11px;color:var(--tenue)}

.avance{display:flex;height:9px;border-radius:20px;overflow:hidden;background:var(--panel-3);
  margin:4px 0 12px}
.avance i{display:block;height:100%}
.leyenda{display:flex;flex-wrap:wrap;gap:11px}
.leyenda span{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--suave)}
.leyenda .pt{width:9px;height:9px;border-radius:3px}
.numerote{font-size:29px;font-weight:700;letter-spacing:-.02em;line-height:1}
.numerote small{font-size:12.5px;color:var(--tenue);font-weight:400;
  display:block;margin-top:3px;letter-spacing:0}

/* ---- entrada fija del panel de equipo ---- */
.nodo.fijo{margin:2px 4px 6px;font-weight:600}
.nodo.fijo.activo{background:var(--marca-suave);color:var(--marca-tinta)}

/* ---- panel de equipo ---- */
.cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:11px;margin-bottom:16px}
.cifra{
  background:var(--panel);border:1px solid var(--linea);border-radius:11px;
  padding:13px 16px;box-shadow:var(--sombra);
}
.cifra .v{font-size:25px;font-weight:720;letter-spacing:-.02em;line-height:1.1}
.cifra .k{font-size:11.5px;color:var(--tenue);margin-top:3px}
.cifra.alerta .v{color:#dc2626}
.cifra.bien .v{color:var(--ok,#16a34a)}

.personas{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:13px}
.persona{
  background:var(--panel);border:1px solid var(--linea);border-radius:12px;
  box-shadow:var(--sombra);display:flex;flex-direction:column;overflow:hidden;
}
.persona.destino{outline:2px dashed var(--marca);outline-offset:-2px}
.persona-cab{
  display:flex;align-items:center;gap:10px;padding:13px 15px;
  border-bottom:1px solid var(--linea);
}
.persona-cab .nom{font-weight:650;font-size:14px;line-height:1.2}
.persona-cab .sub{font-size:11.5px;color:var(--tenue)}
.persona-cab .der{margin-left:auto;display:flex;align-items:center;gap:5px}
.marca-n{
  font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px;
  background:var(--panel-2);color:var(--suave);
}
.marca-n.mal{background:#fee2e2;color:#b91c1c}
.marca-n.ojo{background:#fef3c7;color:#a16207}
@media (prefers-color-scheme:dark){
  .marca-n.mal{background:#3b1614;color:#fca5a5}
  .marca-n.ojo{background:#3a2c0c;color:#fcd34d}
}
.carga{height:5px;background:var(--panel-3);display:flex}
.carga i{display:block;height:100%}
.persona-tareas{padding:5px;overflow-y:auto;max-height:330px;flex:1}
.t-equipo{
  display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:7px;
  font-size:13px;cursor:pointer;
}
.t-equipo:hover{background:var(--panel-2)}
.t-equipo.arrastrando{opacity:.4}
/* OJO: el recorte con puntos suspensivos NO funciona en elementos en línea;
   .tt y .rr tienen que ser de bloque o el texto se monta sobre la fecha. */
.t-equipo .info{flex:1;min-width:0;overflow:hidden}
.t-equipo .tt{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.t-equipo .rr{display:block;font-size:11px;color:var(--tenue);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.t-equipo .fecha{font-size:11px;color:var(--tenue);flex:none;white-space:nowrap;
  margin-left:2px}
.t-equipo .chip{flex:none}
.t-equipo .fecha.mal{color:#dc2626;font-weight:700}
.persona-vacia{padding:20px 12px;text-align:center;color:var(--tenue);font-size:12.5px}
.persona-pie{
  padding:8px 12px;border-top:1px solid var(--linea);font-size:12px;
  color:var(--tenue);display:flex;gap:10px;align-items:center;
}
.persona-pie button{font-size:12px;color:var(--marca-tinta);font-weight:600}

/* ---- barra de modos y filtros del panel de equipo ---- */
.mandos{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.grupo-botones{display:inline-flex;background:var(--panel-2);border-radius:8px;padding:2px;
  border:1px solid var(--linea)}
.grupo-botones button{
  padding:4px 11px;border-radius:6px;font-size:12.5px;color:var(--suave);font-weight:600;
}
.grupo-botones button.on{background:var(--panel);color:var(--marca-tinta);
  box-shadow:var(--sombra)}
.filtro-sel{
  border:1px solid var(--linea);background:var(--panel);border-radius:8px;
  padding:5px 10px;font-size:12.5px;cursor:pointer;
}

/* ---- modo Carga: escala bien a 14+ personas ---- */
.carga-lista{
  background:var(--panel);border:1px solid var(--linea);border-radius:12px;
  box-shadow:var(--sombra);overflow:hidden;
}
.carga-fila{
  display:grid;grid-template-columns:190px 1fr 118px;gap:12px;align-items:center;
  padding:9px 15px;border-bottom:1px solid var(--linea);cursor:pointer;
}
.carga-fila:last-child{border-bottom:0}
.carga-fila:hover{background:var(--panel-2)}
.carga-fila.destino{background:var(--marca-suave);outline:1.5px dashed var(--marca);
  outline-offset:-2px}
.carga-quien{display:flex;align-items:center;gap:9px;min-width:0}
.carga-quien .nm{font-size:13.5px;font-weight:600;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.barra-apilada{display:flex;height:22px;border-radius:6px;overflow:hidden;
  background:var(--panel-3);min-width:60px}
.barra-apilada i{
  display:flex;align-items:center;justify-content:center;height:100%;
  font-size:10.5px;font-weight:700;color:#fff;
}
.carga-cifras{display:flex;gap:6px;justify-content:flex-end;align-items:center}

/* ---- modo Línea de tiempo ---- */
.lt-marco{overflow-x:auto;background:var(--panel);border:1px solid var(--linea);
  border-radius:12px;box-shadow:var(--sombra)}
.lt-tabla{min-width:820px}
.lt-cab,.lt-fila{display:grid;align-items:stretch}
.lt-cab{
  position:sticky;top:0;z-index:2;background:var(--panel-2);
  border-bottom:1px solid var(--linea);
}
.lt-cab div{padding:9px 10px;font-size:11px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--tenue);border-right:1px solid var(--linea)}
.lt-cab div:last-child{border-right:0}
.lt-cab div.ahora{color:var(--marca-tinta);background:var(--marca-suave)}
.lt-fila{border-bottom:1px solid var(--linea)}
.lt-fila:last-child{border-bottom:0}
.lt-quien{padding:10px;display:flex;align-items:center;gap:8px;
  border-right:1px solid var(--linea);background:var(--panel);position:sticky;left:0;z-index:1}
.lt-quien .nm{font-size:12.5px;font-weight:600;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.lt-celda{padding:6px;border-right:1px solid var(--linea);min-height:52px;
  display:flex;flex-direction:column;gap:4px}
.lt-celda:last-child{border-right:0}
.lt-celda.ahora{background:var(--marca-suave)}
.lt-celda.atras{background:#fee2e2}
@media (prefers-color-scheme:dark){.lt-celda.atras{background:#3b1614}}
.lt-pieza{
  font-size:11px;padding:3px 7px;border-radius:5px;background:var(--panel-2);
  border-left:3px solid var(--linea-fuerte);cursor:pointer;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.lt-pieza:hover{background:var(--panel-3)}
.lt-vacia{color:var(--tenue);font-size:11px;text-align:center;padding:14px 0}

/* ---- modo Por cuenta ---- */
.cuentas{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:13px}
.cuenta{
  background:var(--panel);border:1px solid var(--linea);border-radius:12px;
  padding:15px 17px;box-shadow:var(--sombra);cursor:pointer;
}
.cuenta:hover{border-color:var(--linea-fuerte)}
.cuenta-cab{display:flex;align-items:center;gap:9px;margin-bottom:11px}
.cuenta-cab .pt{width:11px;height:11px;border-radius:4px;flex:none}
.cuenta-cab .nm{font-weight:660;font-size:14.5px;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cuenta .pct{font-size:20px;font-weight:720;letter-spacing:-.02em}
.cuenta .linea-avance{height:7px;border-radius:20px;background:var(--panel-3);
  overflow:hidden;margin:8px 0 11px}
.cuenta .linea-avance i{display:block;height:100%;background:#16a34a}
.cuenta-datos{display:flex;gap:14px;font-size:12.5px;color:var(--suave);
  flex-wrap:wrap;margin-bottom:10px}
.cuenta-datos b{color:var(--tinta);font-weight:660}
.cuenta-datos .mal{color:#dc2626}
.cuenta-gente{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.cuenta-gente .av{width:22px;height:22px;font-size:9px;margin:0}
.cuenta-estados{display:flex;gap:4px;margin-top:9px}
.cuenta-estados i{height:5px;border-radius:20px;display:block}

/* ---- modo Calendario ---- */
.cal-mandos{display:flex;align-items:center;gap:10px;margin-bottom:11px}
.cal-mandos .mes{font-size:15.5px;font-weight:660;text-transform:capitalize;min-width:170px}
.cal{background:var(--panel);border:1px solid var(--linea);border-radius:12px;
  overflow:hidden;box-shadow:var(--sombra)}
.cal-dias,.cal-rejilla{display:grid;grid-template-columns:repeat(7,1fr)}
.cal-dias div{
  padding:8px;text-align:center;font-size:10.5px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:var(--tenue);
  background:var(--panel-2);border-bottom:1px solid var(--linea);
}
.cal-celda{
  min-height:96px;padding:6px;border-right:1px solid var(--linea);
  border-bottom:1px solid var(--linea);display:flex;flex-direction:column;gap:3px;
}
.cal-celda:nth-child(7n){border-right:0}
.cal-celda.fuera{background:var(--panel-2);opacity:.5}
.cal-celda.hoy{background:var(--marca-suave)}
.cal-celda .n{font-size:11.5px;font-weight:660;color:var(--suave);margin-bottom:2px}
.cal-celda.hoy .n{color:var(--marca-tinta)}
.cal-pieza{
  font-size:10.5px;padding:2px 6px;border-radius:4px;background:var(--panel-2);
  border-left:3px solid var(--linea-fuerte);cursor:pointer;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cal-pieza:hover{background:var(--panel-3)}
.cal-pieza.vencida{background:#fee2e2;border-left-color:#dc2626}
@media (prefers-color-scheme:dark){.cal-pieza.vencida{background:#3b1614}}

.pulso{
  background:var(--panel);border:1px solid var(--linea);border-radius:12px;
  box-shadow:var(--sombra);padding:14px 17px;margin-top:16px;
}
.pulso .ev{padding:7px 0;border-bottom:1px dashed var(--linea);font-size:12.5px;
  color:var(--suave);display:flex;gap:9px;align-items:baseline}
.pulso .ev:last-child{border-bottom:0}
.pulso .ev b{color:var(--tinta);font-weight:620}
.pulso .ev .cu{margin-left:auto;font-size:11px;color:var(--tenue);flex:none}
.pulso .ev .tarea-link{color:var(--marca-tinta);cursor:pointer}
.pulso .ev .tarea-link:hover{text-decoration:underline}

.en-vivo{
  display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--tenue);
}
.en-vivo .luz{
  width:7px;height:7px;border-radius:50%;background:#16a34a;
  animation:latido 2s ease-in-out infinite;
}
@keyframes latido{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.en-vivo .luz{animation:none}}

/* ---- mapa mental: lienzo infinito, se arrastra y se acerca ---- */
.mm-marco{
  position:relative;width:100%;height:calc(100vh - 148px);
  background:var(--panel);border:1px solid var(--linea);border-radius:12px;
  overflow:hidden;box-shadow:var(--sombra);cursor:grab;touch-action:none;
  background-image:radial-gradient(circle, var(--linea-fuerte) 1.1px, transparent 1.1px);
  background-size:24px 24px;
}
.mm-marco.moviendo{cursor:grabbing}
/* el lienzo necesita anchura propia: si no, las cajas de dentro se encogen
   y el texto se parte letra por letra */
.mm-lienzo{position:absolute;top:0;left:0;transform-origin:0 0;
  width:6000px;height:6000px}
.mm-svg{position:absolute;top:0;left:0;overflow:visible;pointer-events:none}
.mm-svg path{fill:none;stroke:var(--linea-fuerte);stroke-width:1.6}

.mm-nodo{
  position:absolute;box-sizing:border-box;display:flex;align-items:center;gap:8px;
  padding:8px 13px;border-radius:9px;background:var(--panel);
  border:1.5px solid var(--linea);font-size:12.5px;line-height:1.35;
  box-shadow:var(--sombra);cursor:pointer;
}
.mm-nodo:hover{border-color:var(--marca);box-shadow:0 3px 15px rgba(107,70,229,.2)}
.mm-nodo .cuadro{width:9px;height:9px;border-radius:2px;flex:none;margin-top:1px}
/* envuelve entre palabras; solo parte una palabra si por sí sola no cabe */
.mm-nodo .tx{min-width:0;white-space:normal;overflow-wrap:break-word}
.mm-nodo .et{
  font-size:9px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--tenue);font-weight:700;flex:none;
}
/* el «+» que cuelga una subtarea del nodo; aparece al pasar por encima */
.mm-nodo .mas-hijo{
  flex:none;width:17px;height:17px;border-radius:50%;display:grid;place-items:center;
  font-size:12px;font-weight:700;color:var(--tenue);opacity:0;
  background:var(--panel-2);line-height:1;
}
.mm-nodo:hover .mas-hijo{opacity:1}
.mm-nodo .mas-hijo:hover{background:var(--marca);color:#fff}
.mm-nodo.raiz .mas-hijo{background:rgba(255,255,255,.22);color:#fff}
.mm-nodo.tipo-carpeta{background:#fdf8ec;border-color:#e3cd9c}
.mm-nodo.tipo-lista{background:var(--panel-2)}
@media (prefers-color-scheme:dark){
  .mm-nodo.tipo-carpeta{background:#2d2617;border-color:#584a26}
}
/* la raíz va DESPUÉS de los tipos: si no, el fondo claro de tipo-lista pisaba
   al morado y el texto blanco quedaba ilegible */
.mm-nodo.raiz,
.mm-nodo.raiz.tipo-lista,
.mm-nodo.raiz.tipo-carpeta{
  background:var(--marca);color:#fff;border-color:var(--marca);
  font-weight:680;font-size:13.5px;
}
.mm-nodo.raiz .et{color:rgba(255,255,255,.75)}

/* el circulito que pliega la rama, entre el padre y sus hijos */
.mm-plegar{
  position:absolute;width:20px;height:20px;border-radius:50%;
  background:var(--panel);border:1.5px solid var(--linea-fuerte);
  display:grid;place-items:center;font-size:11px;font-weight:800;
  color:var(--suave);cursor:pointer;z-index:3;line-height:1;
}
.mm-plegar:hover{border-color:var(--marca);color:var(--marca-tinta);
  background:var(--marca-suave)}
.mm-plegar.cerrado{background:var(--marca);border-color:var(--marca);color:#fff}

.mm-mandos{
  position:absolute;left:13px;bottom:13px;display:flex;align-items:center;gap:5px;
  background:var(--panel);border:1px solid var(--linea);border-radius:10px;
  padding:5px;box-shadow:var(--sombra);z-index:5;
}
.mm-mandos button{
  width:28px;height:28px;border-radius:7px;display:grid;place-items:center;
  font-size:14px;color:var(--suave);
}
.mm-mandos button:hover{background:var(--panel-2);color:var(--tinta)}
.mm-mandos .pct{font-size:11.5px;color:var(--tenue);min-width:42px;text-align:center;
  font-variant-numeric:tabular-nums}
.mm-ayuda{
  position:absolute;right:13px;bottom:13px;font-size:11.5px;color:var(--tenue);
  background:var(--panel);border:1px solid var(--linea);border-radius:8px;
  padding:6px 11px;box-shadow:var(--sombra);z-index:5;
}

/* ---- adjuntar archivos: botones y zona para soltar ---- */
.zona-soltar{
  border:1.5px dashed transparent;border-radius:10px;padding:8px;margin:4px -8px 0;
  transition:border-color .12s, background .12s;
}
.zona-soltar.soltar-activo{
  border-color:var(--marca);background:var(--marca-suave);
}
.pista-soltar{
  font-size:11.5px;color:var(--tenue);margin-top:7px;padding-left:2px;
}
.zona-soltar.soltar-activo .pista-soltar{color:var(--marca-tinta);font-weight:600}
.subiendo{
  display:flex;align-items:center;gap:8px;margin-top:9px;font-size:12.5px;
  color:var(--suave);
}
.giro{
  width:13px;height:13px;flex:0 0 auto;border-radius:50%;
  border:2px solid var(--linea);border-top-color:var(--marca);
  animation:girar .7s linear infinite;
}
@keyframes girar{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .giro{animation-duration:2.4s}
}

/* ---- selector de archivos de la nube ---- */
.velo-centro{
  position:fixed;inset:0;background:rgba(15,14,22,.45);z-index:70;
  display:grid;place-items:center;padding:20px;
}
.dialogo{
  width:min(620px,96vw);max-height:82vh;background:var(--panel);
  border:1px solid var(--linea);border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.3);
  display:flex;flex-direction:column;overflow:hidden;
}
.dialogo-cab{
  display:flex;align-items:center;gap:10px;padding:15px 19px;
  border-bottom:1px solid var(--linea);
}
.dialogo-cab h3{margin:0;font-size:16px;font-weight:670;flex:1}
.dialogo-cuerpo{padding:16px 19px;overflow-y:auto;flex:1}
.dialogo-pie{
  padding:12px 19px;border-top:1px solid var(--linea);display:flex;
  gap:8px;justify-content:flex-end;background:var(--panel-2);
}
.migas-nube{
  display:flex;align-items:center;gap:5px;flex-wrap:wrap;font-size:12.5px;
  color:var(--suave);margin-bottom:11px;
}
.migas-nube span{cursor:pointer}
.migas-nube span:hover{color:var(--marca-tinta);text-decoration:underline}
.migas-nube .sep{color:var(--tenue);cursor:default}
.fila-nube{
  display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;
  cursor:pointer;font-size:13.5px;
}
.fila-nube:hover{background:var(--panel-2)}
.fila-nube .ic{width:20px;text-align:center;flex:none;font-size:15px}
.fila-nube .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fila-nube .pes{font-size:11.5px;color:var(--tenue);flex:none}
.fila-nube.sel{background:var(--marca-suave);color:var(--marca-tinta);font-weight:600}
.aviso-nube{
  background:var(--marca-suave);border-radius:9px;padding:13px 15px;
  font-size:13px;color:var(--ink);line-height:1.55;
}
.aviso-nube b{color:var(--marca-tinta)}
.aviso-nube ol{margin:8px 0 0;padding-left:19px}
.aviso-nube li{margin-bottom:4px}
.campo{margin-bottom:11px}
.campo label{display:block;font-size:12px;color:var(--suave);margin-bottom:4px;
  font-weight:600}

/* ---- enlaces a documentos de la nube ---- */
.enlace-f{
  display:flex;align-items:center;gap:9px;padding:8px 10px;border:1px solid var(--linea);
  border-radius:8px;margin-bottom:6px;font-size:13px;background:var(--panel);
}
.enlace-f a{flex:1;color:var(--tinta);text-decoration:none;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.enlace-f a:hover{color:var(--marca-tinta);text-decoration:underline}
.enlace-f .quitar{color:var(--tenue);font-size:15px;line-height:1;padding:1px 5px;
  border-radius:5px;opacity:0}
.enlace-f:hover .quitar{opacity:1}
.enlace-f .quitar:hover{background:var(--panel-2);color:#dc2626}

.pestanas{
  display:flex;gap:2px;padding:0 16px;border-bottom:1px solid var(--linea);
  background:var(--panel);flex:none;
}
.pestana{
  padding:8px 12px;font-size:13px;color:var(--suave);border-bottom:2px solid transparent;
  display:flex;align-items:center;gap:6px;
}
.pestana:hover{color:var(--tinta)}
.pestana.activa{color:var(--marca-tinta);border-bottom-color:var(--marca);font-weight:600}

.lienzo{flex:1;overflow:auto;padding:14px 16px 80px}

/* ------------------------------------------------- vista lista por estado */
.grupo{margin-bottom:18px}
.grupo-cab{
  display:flex;align-items:center;gap:9px;padding:5px 4px;cursor:pointer;
  position:sticky;top:-14px;background:var(--fondo);z-index:2;
}
.grupo-cab .flecha{color:var(--tenue);font-size:10px;transition:transform .13s;width:12px}
.grupo-cab.cerrado .flecha{transform:rotate(-90deg)}
.pill{
  display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:5px;
  font-size:11.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:#fff;
}
.grupo-cab .n{font-size:12px;color:var(--tenue);font-weight:600}
.grupo-cab .acciones{margin-left:auto;opacity:0;display:flex;gap:4px}
.grupo-cab:hover .acciones{opacity:1}

.tabla{background:var(--panel);border:1px solid var(--linea);border-radius:9px;
  overflow:hidden;box-shadow:var(--sombra)}
.encabezado{
  display:grid;grid-template-columns:1fr 150px 110px 96px;gap:8px;
  padding:7px 12px;border-bottom:1px solid var(--linea);
  font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--tenue);background:var(--panel-2);
}
.fila{
  display:grid;grid-template-columns:1fr 150px 110px 96px;gap:8px;align-items:center;
  padding:0 12px;border-bottom:1px solid var(--linea);min-height:37px;
}
.fila:last-child{border-bottom:0}
.fila:hover{background:var(--panel-2)}
.fila.arrastrando{opacity:.35}
.fila.destino-hijo{box-shadow:inset 3px 0 0 var(--marca);background:var(--marca-suave)}

.celda-titulo{display:flex;align-items:center;gap:7px;min-width:0;padding:7px 0}
.sangria{flex:none}
.exp{
  width:16px;height:16px;flex:none;display:grid;place-items:center;border-radius:4px;
  color:var(--tenue);font-size:9px;transition:transform .13s ease;
}
.exp:hover{background:var(--panel-3);color:var(--tinta)}
.exp.abierta{transform:rotate(90deg)}
.exp.vacia{visibility:hidden}
.marca-estado{width:11px;height:11px;border-radius:50%;flex:none;border:2px solid}
.titulo-t{
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:13.5px;cursor:pointer;
}
.titulo-t:hover{color:var(--marca-tinta)}
.fila.hecha .titulo-t{color:var(--tenue);text-decoration:line-through}
.chip{
  font-size:10.5px;color:var(--tenue);background:var(--panel-2);border-radius:20px;
  padding:1px 7px;flex:none;display:inline-flex;align-items:center;gap:3px;
}
.chip.sub{background:var(--marca-suave);color:var(--marca-tinta);font-weight:600}

.avatares{display:flex;gap:-4px}
.av{
  width:23px;height:23px;border-radius:50%;background:var(--marca);color:#fff;
  display:grid;place-items:center;font-size:10px;font-weight:700;flex:none;
  border:2px solid var(--panel);margin-left:-6px;
}
.av:first-child{margin-left:0}
.av.vacio{background:var(--panel-3);color:var(--tenue);border-style:dashed}

.mini{font-size:12.5px;color:var(--suave)}
.mini.vencida{color:#dc2626;font-weight:600}
.prio{display:inline-flex;align-items:center;gap:5px;font-size:12.5px}
.bandera{width:9px;height:9px;border-radius:2px}

.anadir{
  display:flex;align-items:center;gap:7px;padding:9px 12px;color:var(--tenue);
  font-size:13px;cursor:text;border-top:1px solid var(--linea);
}
.anadir:hover{color:var(--marca-tinta);background:var(--panel-2)}
.anadir input{
  flex:1;border:0;outline:none;background:transparent;font-size:13.5px;color:var(--tinta);
}

/* ------------------------------------------------------------- tablero */
.tablero{display:flex;gap:12px;align-items:flex-start;min-height:100%}
.columna{
  width:290px;flex:none;background:var(--panel-2);border-radius:10px;padding:9px;
  display:flex;flex-direction:column;max-height:calc(100vh - 160px);
}
.columna-cab{display:flex;align-items:center;gap:8px;margin-bottom:9px;padding:0 3px}
.columna .cuerpo{overflow-y:auto;display:flex;flex-direction:column;gap:7px;flex:1;
  min-height:40px}
.columna.destino{outline:2px dashed var(--marca);outline-offset:2px}
.tarjeta{
  background:var(--panel);border:1px solid var(--linea);border-radius:8px;
  padding:9px 11px;box-shadow:var(--sombra);cursor:pointer;
}
.tarjeta:hover{border-color:var(--linea-fuerte)}
.tarjeta.arrastrando{opacity:.4}
.tarjeta .tt{font-size:13.5px;margin-bottom:6px;line-height:1.35}
.tarjeta .pie{display:flex;align-items:center;gap:6px;flex-wrap:wrap}

/* ------------------------------------------------------- panel de tarea */
.velo{
  position:fixed;inset:0;background:rgba(15,14,22,.45);z-index:40;
  display:flex;justify-content:flex-end;
}
.panel{
  width:min(1000px,94vw);height:100%;background:var(--panel);display:grid;
  grid-template-columns:1fr 330px;box-shadow:-8px 0 40px rgba(0,0,0,.2);
  animation:entra .16s ease-out;
}
@keyframes entra{from{transform:translateX(24px);opacity:.4}to{transform:none;opacity:1}}
.panel .izq{overflow-y:auto;padding:18px 24px 60px}
.panel .der{
  background:var(--panel-2);border-left:1px solid var(--linea);
  overflow-y:auto;padding:16px 18px 60px;
}
.panel-cab{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.panel-cab .ruta{font-size:12px;flex:1}
.cerrar{font-size:19px;color:var(--tenue);padding:2px 8px;border-radius:6px;line-height:1}
.cerrar:hover{background:var(--panel-2);color:var(--tinta)}

.titulo-grande{
  font-size:21px;font-weight:680;letter-spacing:-.01em;line-height:1.25;
  border:0;outline:none;background:transparent;width:100%;resize:none;
  font-family:inherit;margin-bottom:16px;
}
.atributos{display:grid;grid-template-columns:112px 1fr;gap:9px 12px;
  align-items:center;margin-bottom:20px}
.atributos .k{font-size:12.5px;color:var(--suave)}
.atributos .v{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.sel{
  border:1px solid var(--linea);background:var(--panel);border-radius:7px;
  padding:4px 9px;font-size:13px;cursor:pointer;
}
.sel:hover{border-color:var(--linea-fuerte)}

.bloque-tit{
  font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--tenue);margin:20px 0 8px;display:flex;align-items:center;gap:8px;
}
.desc{
  border:1px solid var(--linea);border-radius:8px;padding:11px 13px;min-height:80px;
  font-size:13.5px;line-height:1.6;outline:none;background:var(--panel);white-space:pre-wrap;
}
.desc:focus{border-color:var(--marca)}
.desc:empty:before{content:attr(data-vacio);color:var(--tenue)}

.sub-fila{
  display:flex;align-items:center;gap:8px;padding:7px 4px;
  border-bottom:1px solid var(--linea);font-size:13.5px;
}
.sub-fila:hover{background:var(--panel-2)}
.sub-fila .t{flex:1;cursor:pointer;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.sub-fila.hecha .t{color:var(--tenue);text-decoration:line-through}

.act{padding:9px 0;border-bottom:1px dashed var(--linea);font-size:12.5px;
  color:var(--suave);line-height:1.5}
.act:last-child{border-bottom:0}
.act .cuando{font-size:11px;color:var(--tenue);display:block;margin-top:2px}
.act b{color:var(--tinta);font-weight:620}
.comentario{background:var(--panel);border:1px solid var(--linea);border-radius:8px;
  padding:9px 11px;margin-bottom:8px;font-size:13px}
.comentario .quien{font-size:11.5px;color:var(--tenue);margin-bottom:4px}
.caja-comentario{
  border:1px solid var(--linea);border-radius:8px;background:var(--panel);
  padding:9px 11px;min-height:56px;outline:none;font-size:13px;
}
.caja-comentario:focus{border-color:var(--marca)}

/* ------------------------------------------------------------- comunes */
.btn{
  display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:7px;
  font-size:13px;font-weight:600;border:1px solid var(--linea);background:var(--panel);
}
.btn:hover{border-color:var(--linea-fuerte)}
.btn.principal{background:var(--marca);color:#fff;border-color:var(--marca)}
.btn.principal:hover{filter:brightness(1.07)}
.btn.tenue{border:0;color:var(--suave)}
.btn.tenue:hover{background:var(--panel-2);color:var(--tinta)}

.menu{
  position:fixed;z-index:60;background:var(--panel);border:1px solid var(--linea);
  border-radius:9px;box-shadow:0 8px 28px rgba(0,0,0,.18);padding:5px;min-width:190px;
}
.menu button{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  padding:7px 10px;border-radius:6px;font-size:13px;
}
.menu button:hover{background:var(--panel-2)}
.menu .sep{height:1px;background:var(--linea);margin:4px 0}
.menu .ttl{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--tenue);padding:6px 10px 3px;font-weight:700}

.vacio-msg{text-align:center;color:var(--tenue);padding:52px 20px;font-size:13.5px}
.vacio-msg .grande{font-size:30px;margin-bottom:10px;opacity:.55}

.entrada{
  border:1px solid var(--linea);border-radius:7px;padding:6px 10px;font-size:13.5px;
  background:var(--panel);outline:none;width:100%;
}
.entrada:focus{border-color:var(--marca)}

#aviso{
  position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:80;
  background:var(--tinta);color:var(--fondo);padding:9px 17px;border-radius:9px;
  font-size:13px;box-shadow:0 8px 24px rgba(0,0,0,.25);opacity:0;pointer-events:none;
  transition:opacity .2s, transform .2s;
}
#aviso.visible{opacity:1;transform:translateX(-50%) translateY(-3px)}

/* portada de ingreso */
.ingreso{
  position:fixed;inset:0;display:grid;place-items:center;background:var(--fondo);z-index:90;
}
.ingreso .caja{
  background:var(--panel);border:1px solid var(--linea);border-radius:14px;
  padding:34px 38px;box-shadow:var(--sombra);width:min(390px,92vw);text-align:center;
}
.ingreso h1{font-size:21px;margin:14px 0 6px;font-weight:700}
.ingreso p{color:var(--suave);font-size:13.5px;margin:0 0 20px}
.ingreso .logo-g{
  width:46px;height:46px;border-radius:12px;background:var(--marca);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:20px;margin:0 auto;
}

@media (max-width:860px){
  #app{grid-template-columns:0 1fr}
  .panel{grid-template-columns:1fr}
  .panel .der{display:none}
  .encabezado,.fila{grid-template-columns:1fr 96px}
  .encabezado span:nth-child(2),.fila .avatares{display:none}
}