/* ==========================================================================
   CooperApp · Estilo C «Bento» — pantalla: proyecto-form
   --------------------------------------------------------------------------
   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.
   ========================================================================== */

/* ---- Formulario con índice lateral de secciones --------------------------
   Puramente informativo: enlaces de anclaje a cada <fieldset>, fijado con
   position:sticky para no perderse en un formulario largo. Sin JavaScript:
   se deja fuera a propósito el resaltado de la sección visible, para no
   reimplementar un scroll-spy que ya resuelve el navegador con #ancla. */
.form-layout{
  display:grid;grid-template-columns:190px minmax(0,1fr);gap:var(--esp-6);
  align-items:start;
}
.form-index{
  position:sticky;top:calc(var(--alto-cab) + var(--esp-3));
  display:flex;flex-direction:column;gap:1px;
  padding:var(--esp-2);background:var(--sup-2);border:1px solid var(--borde);
  border-radius:var(--r-s);
}
.form-index-titulo{
  font-family:var(--mono);font-size:var(--t-eti);letter-spacing:var(--track-eti);
  text-transform:uppercase;color:var(--texto-3);
  padding:var(--esp-2) var(--esp-3) var(--esp-1);
}
.form-index a{
  padding:7px var(--esp-3);border-radius:var(--r-xs);font-size:var(--t-s);
  color:var(--texto-2);transition:background var(--micro),color var(--micro);
}
.form-index a:hover{background:var(--sup);color:var(--texto)}

@media (max-width:900px){
  .form-layout{grid-template-columns:minmax(0,1fr)}
  .form-index{
    position:static;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;
    scrollbar-width:none;
  }
  .form-index::-webkit-scrollbar{display:none}
  .form-index-titulo{display:none}
  .form-index a{white-space:nowrap}
}

/* ---- Aviso del financiador -------------------------------------------
   Estas clases también las escribe, literalmente, la respuesta del endpoint
   htmx de versiones de plantilla (fuera del alcance de esta pantalla): no se
   pueden renombrar sin tocar esa vista. */
.funder-info-tooltip{
  margin-top:var(--esp-2);padding:var(--esp-3) var(--esp-4);
  border-radius:var(--r-s);background:var(--info-bg);border:1px solid var(--info-borde);
  color:var(--info);font-size:var(--t-s);line-height:1.55;
}
.funder-info-tooltip strong{display:block;margin-bottom:var(--esp-1);color:var(--info)}
.funder-info-tooltip .info-line{display:block;padding-left:var(--esp-2)}
.funder-info-tooltip .info-special{
  display:inline-block;margin-top:var(--esp-1);padding:2px var(--esp-2);
  border-radius:var(--r-xs);background:var(--avisa-bg);color:var(--avisa);
  font-weight:var(--peso-medio);
}

/* ---- Objetivos de Desarrollo Sostenible --------------------------------- */
.ods-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:var(--esp-2);
}
.ods-checkbox{
  display:flex;align-items:center;gap:var(--esp-2);padding:var(--esp-2) var(--esp-3);
  background:var(--sup-2);border:1px solid var(--borde);border-radius:var(--r-s);
  cursor:pointer;transition:border-color var(--micro),background var(--micro);
}
.ods-checkbox:hover{border-color:var(--borde-2)}
.ods-number{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:26px;height:26px;border-radius:var(--r-xs);flex:none;
  background:var(--sup-3);color:var(--texto-2);
  font-family:var(--mono);font-size:var(--t-xs);font-weight:var(--peso-fuerte);
  transition:background var(--micro),color var(--micro);
}
.ods-checkbox input[type="checkbox"]:checked ~ .ods-number{
  background:var(--acento-solido);color:var(--acento-solido-txt);
}
.ods-checkbox input[type="checkbox"]:checked ~ .ods-name{
  color:var(--texto);font-weight:var(--peso-medio);
}
.ods-name{font-size:var(--t-s);color:var(--texto-2);flex:1;min-width:0}

/* ---- Plazos (alta de proyecto) -------------------------------------------
   Los añade addPlazo() por JavaScript en línea; no hay ningún fragmento de
   servidor que dependa de estos nombres, pero se ligan a #plazos-container
   para no chocar con otra pantalla que reutilice ".plazo-item". */
#plazos-container{display:flex;flex-direction:column;gap:var(--esp-2);margin-bottom:var(--esp-3)}
#plazos-container .plazo-fields{
  display:flex;align-items:center;gap:var(--esp-2);flex:1;flex-wrap:wrap;
}
#plazos-container .plazo-fields input[type="text"]{flex:1;min-width:180px}
#plazos-container .plazo-fields input[type="date"]{width:170px;flex:none}

/* ---- Aviso/acción bajo el cronograma cerrado ------------------------------ */
.cronograma-accion{margin-top:var(--esp-4)}

/* ---- Modal de confirmación de cambio de plantilla presupuestaria --------- */
.modal-body .aviso{margin:var(--esp-3) 0}