/* ==========================================================================
   CooperApp · Estilo C «Bento» — pantalla: marco-logico
   --------------------------------------------------------------------------
   Solo lo que es exclusivo de esta pantalla. Todo lo que sirva para más de
   una va en components.css. Prohibido escribir colores, radios o sombras
   literales: se consumen con var(--token) de tokens.css.
   ========================================================================== */

/* ---- Resumen: rejilla de indicadores dentro de la celda ------------------ */
.ml-resumen-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:var(--esp-5) var(--esp-6);
}
.ml-resumen-progreso{margin-top:var(--esp-5)}


/* ---- Formulario del objetivo general -------------------------------------
   El textarea reutiliza el estilo genérico de components.css; aquí solo se
   fija la separación con el botón de guardar. */
.ml-og-form{display:flex;flex-direction:column;gap:var(--esp-3)}

/* ---- Árbol: esquema sangrado y numerado -----------------------------------
   La jerarquía objetivo » resultado » actividad/indicador ya no se dibuja
   con cajas de color: cada nivel es una fila con código en mono, texto y
   porcentaje, y la sangría crece por el propio anidamiento del DOM (cada
   contenedor de hijos añade su propio padding-left). */
.ml-tree{border-top:1px solid var(--borde)}
.ml-tree-node{min-width:0}
.ml-node-children,
.ml-indicators-inline{padding-left:var(--esp-6);min-width:0}
.ml-tree-node.collapsed > .ml-node-children,
.ml-tree-node.collapsed > .ml-indicators-inline{display:none}

/* Fila: unidad visual de cualquier nivel (OE, R, actividad, indicador). */
.ml-fila{
  display:flex;align-items:center;gap:var(--esp-3);flex-wrap:wrap;
  padding:10px 0;border-bottom:1px solid var(--borde);
  transition:background var(--micro);
}
.ml-fila:hover{background:var(--sup-2)}

.ml-toggle{
  flex:none;width:22px;height:22px;display:grid;place-items:center;
  border-radius:var(--r-xs);color:var(--texto-3);
}
.ml-toggle:hover{background:var(--sup-3);color:var(--texto)}
.ml-toggle i{transition:transform var(--micro)}
.ml-tree-node.collapsed > .ml-fila .ml-toggle i{transform:rotate(-90deg)}
.ml-toggle-hueco{flex:none;width:22px}

.ml-cod{
  flex:none;min-width:56px;font-family:var(--mono);font-size:var(--t-xs);
  color:var(--texto-3);letter-spacing:.03em;
}
.ml-fila--oe .ml-cod{color:var(--acento);font-weight:var(--peso-fuerte);font-size:var(--t-s)}
.ml-fila--r .ml-cod{color:var(--texto-2);font-weight:var(--peso-fuerte)}

.ml-txt{flex:1 1 220px;min-width:0;font-size:var(--t-s);color:var(--texto);line-height:1.45}
.ml-fila--oe .ml-txt{font-size:var(--t-m);font-weight:var(--peso-fuerte)}
.ml-fila--r .ml-txt{font-weight:var(--peso-medio)}
.ml-fila--ind .ml-txt{color:var(--texto-2)}

/* Metadatos del indicador: valores base/meta/actual y unidad, en línea bajo
   la descripción. Compacto para no repetir la caja de valores del diseño
   anterior en cada fila. */
.ml-ind-meta{display:flex;flex-wrap:wrap;gap:var(--esp-1) var(--esp-4);margin-top:3px}
.ml-ind-valor{
  display:inline-flex;align-items:center;gap:5px;font-size:var(--t-xs);color:var(--texto-3);
}
.ml-ind-valor .eti-mono{font-size:9px}
.ml-ind-valor--actual{color:var(--texto-2);font-weight:var(--peso-medio)}
.ml-ind-valor--actual .cifra{color:var(--texto)}

.ml-pct{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:5px;min-width:100px}
.ml-pct-n{font-family:var(--mono);font-size:var(--t-s);color:var(--texto);
  font-variant-numeric:tabular-nums;font-weight:var(--peso-medio)}
.ml-pct .mini{width:100px}

.ml-acciones{flex:none;display:flex;gap:var(--esp-1);align-items:center;flex-wrap:wrap}
.ml-acciones .btn{white-space:nowrap}

/* Insignia de recuento (fuentes de verificación) sobre un botón de icono. */
.ml-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:15px;height:15px;padding:0 3px;margin-left:3px;
  font-family:var(--mono);font-size:9px;font-weight:var(--peso-fuerte);
  background:var(--acento);color:var(--acento-solido-txt);border-radius:var(--r-pill);
}

/* ---- Actividad: estado y cronograma mínimo -------------------------------- */
.ml-fila--a .ml-cod{color:var(--info)}

.ml-linea-tiempo{
  flex:none;display:flex;align-items:center;gap:6px;min-width:150px;max-width:220px;
}
.ml-linea-tiempo .fecha{
  font-family:var(--mono);font-size:var(--t-xs);color:var(--texto-3);white-space:nowrap;
}
.tl-track{
  flex:1;height:5px;background:var(--pista);border-radius:var(--r-pill);
  position:relative;overflow:hidden;
}
.tl-bar{position:absolute;inset:0 auto 0 0;height:100%;border-radius:var(--r-pill)}
.tl-bar--planned{width:100%;background:var(--borde-2)}
.tl-bar--real{background:var(--acento)}
.tl-bar--real.tl-bar--completada{width:100%;background:var(--ok)}
.tl-bar--real.tl-bar--en_curso{width:55%;background:var(--info)}
.tl-bar--real.tl-bar--pendiente{width:0%}
.tl-bar--real.tl-bar--cancelada{width:100%;background:var(--mal);opacity:.55}

.ml-status-select{
  flex:none;width:auto;min-width:0;
  padding:5px 30px 5px 10px;border-radius:var(--r-s);
  border:1px solid var(--borde);border-left:3px solid var(--texto-3);
  font-size:var(--t-xs);font-weight:var(--peso-fuerte);color:var(--texto-2);
  background-color:var(--sup);
}
.ml-status-select.estado-pendiente{
  background-color:var(--neutro-bg);color:var(--neutro);border-left-color:var(--neutro);
}
.ml-status-select.estado-en_curso{
  background-color:var(--info-bg);color:var(--info);border-left-color:var(--info);
}
.ml-status-select.estado-completada{
  background-color:var(--ok-bg);color:var(--ok);border-left-color:var(--ok);
}
.ml-status-select.estado-cancelada{
  background-color:var(--mal-bg);color:var(--mal);border-left-color:var(--mal);
}

/* ---- Formularios en línea (alta/edición) ----------------------------------
   Aparecen y desaparecen dentro del árbol al vuelo de htmx: celda anidada
   con .form-grid y los botones de guardar/cancelar a la derecha. */
.ml-form-inline{margin:var(--esp-3) 0}
.ml-form-inline .c-cab{margin-bottom:var(--esp-4)}
.ml-form-inline .c-cab h3{font-size:var(--t-s);font-weight:var(--peso-fuerte)}

/* ---- Modal de historial ---------------------------------------------------- */
.ml-historial-cab{padding-bottom:var(--esp-4);margin-bottom:var(--esp-4);
  border-bottom:1px solid var(--borde)}
.ml-valores{display:flex;gap:var(--esp-3);flex-wrap:wrap;margin-top:var(--esp-3)}
.ml-valor-caja{
  text-align:center;padding:var(--esp-2) var(--esp-4);min-width:76px;
  background:var(--sup-2);border-radius:var(--r-s);
}
.ml-valor-caja .etq{
  display:block;font-family:var(--mono);font-size:var(--t-eti);letter-spacing:var(--track-eti);
  text-transform:uppercase;color:var(--texto-3);margin-bottom:2px;
}
.ml-valor-caja .val{font-family:var(--mono);font-weight:var(--peso-fuerte);font-size:var(--t-s)}
.ml-valor-caja--actual{background:var(--acento-suave)}
.ml-valor-caja--actual .val{color:var(--acento)}
.ml-valor-caja--pct .val{color:var(--ok)}

/* ---- Responsive ------------------------------------------------------------ */
@media (max-width:780px){
  .ml-node-children,.ml-indicators-inline{padding-left:var(--esp-4)}
  .ml-pct{align-items:flex-start;min-width:0}
  .ml-pct .mini{width:80px}
  .ml-linea-tiempo{max-width:none}
}