/* =========================================================
   TALLER Y ÁRBOL LATERAL
   El taller es la zona de trabajo: panel de secciones a la
   izquierda, formulario a la derecha.
   El árbol se lee como el explorador de archivos: cada
   sección es una carpeta que se abre, y sus grupos cuelgan
   de ella con una guía en L.
   ========================================================= */

/* Ocupa todo el alto que quede bajo la barra: el panel lateral y la
   zona de trabajo llegan siempre hasta abajo del todo. */
.taller{--panel-defecto:300px;
  display:grid;grid-template-columns:var(--panel-usuario,var(--panel-defecto)) auto minmax(0,1fr);
  flex:1 0 auto}
.taller--ancho{grid-template-columns:minmax(0,1fr)}
@media(max-width:840px){.taller{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr}}
.panel{padding:22px 16px;background:var(--marfil-alto);border-right:1px solid var(--linea);
  -webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur))}
@media(max-width:840px){.panel{border-right:none;border-bottom:1px solid var(--linea)}}
.zona{padding:24px 24px 72px}
.panel__titulo{margin:2px 6px 14px;font-family:var(--texto);font-weight:700;font-size:.68rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--tinta-suave)}

.arbol{list-style:none;margin:0 0 14px;padding:0}
.rama{margin-bottom:1px}
/* Alto mínimo generoso: deja sitio a las flechas de ordenar y hace las
   filas más fáciles de acertar con el dedo. */
.fila{display:flex;align-items:center;gap:2px;min-height:38px}
.subarbol .fila{min-height:34px}

/* Las flechas de reordenar (el bloque a la derecha de cada fila) solo se
   enseñan en la sección o el grupo seleccionado, para no recargar el árbol.
   Se ocultan con visibility para que las filas no se descoloquen al elegir
   una. En los ítems se dejan siempre: allí no estorban al diseño. */
.fila>div{visibility:hidden}
.fila>.nodo[aria-current="true"]~div{visibility:visible}

/* Triángulo de abrir/cerrar, con área de toque cómoda en el móvil. */
.desplegar{flex:none;width:28px;height:30px;display:grid;place-items:center;padding:0;
  border:1px solid transparent;border-radius:8px;background:transparent;
  color:var(--tinta-suave);cursor:pointer;transition:background .14s,color .14s}
.desplegar svg{width:14px;height:14px;transition:transform .18s ease}
.desplegar:hover{background:var(--acento-tenue);color:var(--acento-texto)}
.desplegar[aria-expanded=true]{color:var(--acento-texto)}
.desplegar[aria-expanded=true] svg{transform:rotate(90deg)}

/* Fila con nombre: icono + nombre + contador. */
.nodo{flex:1;min-width:0;display:flex;align-items:center;gap:9px;
  padding:9px 11px;border:1px solid transparent;border-radius:var(--radio-s);background:transparent;
  font-family:inherit;text-align:left;color:var(--tinta);cursor:pointer;
  transition:background .14s,color .14s,box-shadow .14s}
.nodo:hover{background:var(--acento-tenue)}
.nodo__icono{flex:none;display:grid;place-items:center;color:var(--acento-texto)}
.nodo__icono svg{width:17px;height:17px;display:block}
.nodo__nombre{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:.85rem;font-weight:600;letter-spacing:.005em}
.nodo__cuenta{flex:none;padding:1px 8px;border-radius:100px;background:var(--pastilla);
  font-size:.65rem;font-weight:700;color:var(--tinta-suave);line-height:1.7}
/* Sección seleccionada: degradado de acento con resplandor */
.nodo[aria-current=true]{background:var(--grad);color:var(--sobre-acento);box-shadow:var(--glow)}
.nodo[aria-current=true]:hover{background:var(--grad)}
.nodo[aria-current=true] .nodo__icono{color:var(--sobre-acento)}
.nodo[aria-current=true] .nodo__cuenta{background:var(--sobre-acento-velo);color:var(--sobre-acento)}

/* Los grupos van más pequeños y en esmeralda, para no confundirlos con las secciones. */
.nodo--grupo{padding:8px 11px}
.nodo--grupo .nodo__nombre{font-size:.8rem;font-weight:500}
.nodo--grupo .nodo__icono{color:var(--verde)}
.nodo--grupo .nodo__icono svg{width:15px;height:15px}
.nodo--grupo[aria-current=true]{background:linear-gradient(135deg,var(--verde),var(--verde-hondo));
  color:#04170F;box-shadow:0 8px 24px rgba(16,185,129,.36)}
.nodo--grupo[aria-current=true]:hover{filter:brightness(1.03)}
.nodo--grupo[aria-current=true] .nodo__icono{color:#04170F}
.nodo--grupo[aria-current=true] .nodo__cuenta{background:rgba(0,0,0,.18);color:#04170F}

/* Guías del árbol: una vertical por sección abierta y una L por cada hijo. */
.subarbol{position:relative;list-style:none;margin:1px 0 8px;padding:0 0 0 27px}
.subarbol::before{content:'';position:absolute;left:13px;top:-3px;bottom:0;
  border-left:2px solid var(--guia)}
.subarbol>li{position:relative}
.subarbol>li::before{content:'';position:absolute;left:-14px;top:50%;width:11px;
  border-top:2px solid var(--guia)}
/* El último hijo corta la vertical justo en su codo, como en un tree. */
.subarbol>li:last-child::after{content:'';position:absolute;left:-14px;top:calc(50% + 2px);
  bottom:-4px;width:2px;background:var(--marfil-alto)}
.subarbol__accion{padding-top:2px}

/* Pantallas grandes: el panel puede permitirse algo más de sitio. */
@media(min-width:1500px){.taller{--panel-defecto:340px}}
/* Móvil: menos margen lateral, que cada píxel cuenta. */
@media(max-width:600px){
  .panel{padding:16px 12px}
  .zona{padding:16px 14px 60px}
}

/* =========================================================
   DIVISOR ENTRE EL PANEL Y LA ZONA
   Se arrastra para dar más o menos sitio al panel lateral.
   Solo tiene sentido en pantalla ancha: en el móvil el panel
   va arriba del todo, así que el divisor se esconde.
   ========================================================= */
.separador{position:relative;width:7px;flex:none;cursor:col-resize;
  border:none;padding:0;background:transparent;touch-action:none;
  /* Se sale un poco por los lados para que sea fácil de agarrar
     sin tener que afinar con el ratón. */
  margin:0 -3px;z-index:5}
/* La rayita que se ve en medio. */
.separador::before{content:'';position:absolute;inset:0 auto 0 3px;width:1px;
  background:var(--linea);transition:background .15s,width .15s,left .15s}
.separador:hover::before,.separador:focus-visible::before,.separador[data-arrastrando]::before{
  left:2px;width:3px;background:var(--grad);border-radius:2px}
.separador:focus-visible{outline:none}
/* Mientras se arrastra, que no se seleccione texto por toda la página. */
body[data-redimensionando]{cursor:col-resize;user-select:none;-webkit-user-select:none}

/* En móvil y en la vista de estadísticas no pinta nada. */
@media(max-width:840px){.separador{display:none}}
.taller--ancho .separador{display:none}