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

   `pages/*.css` se carga entero en todas las pantallas (ver
   components/assets.html), así que cualquier regla de aquí que module un
   componente compartido (`.c-hero`, `.dl`…) sin acotarla a una clase propia
   de esta pantalla se colaría en las demás. Por eso las reglas de cabecera
   y cronograma van bajo `.detalle-hero` / `.crono`, nunca sobre el selector
   desnudo del componente.
   ========================================================================== */

/* ---- Cabecera del proyecto (celda .c-hero) -------------------------------- */
.detalle-hero{display:flex;flex-direction:column}
.detalle-hero h1{margin-top:var(--esp-3)}

.cab-proy-meta{
  display:flex;flex-wrap:wrap;gap:var(--esp-2) var(--esp-5);
  margin-top:var(--esp-3);font-size:var(--t-s);color:var(--texto-2);
}
.cab-proy-meta span{display:inline-flex;align-items:center;gap:6px}
.cab-proy-meta i{color:var(--acento);font-size:var(--t-xs)}

.cab-proy-acciones{display:flex;gap:var(--esp-2);flex-wrap:wrap;margin-top:var(--esp-4)}

/* ---- Cronograma horizontal: inicio → hoy → fin → justificación ------------ */
.crono{display:flex;flex-direction:column;gap:var(--esp-5)}
.crono-pista{
  position:relative;height:6px;background:var(--pista);border-radius:var(--r-pill);
  margin:var(--esp-6) var(--esp-2) 0;
}
.crono-relleno{
  position:absolute;inset:0 auto 0 0;background:var(--acento);
  border-radius:var(--r-pill);display:block;
}
.crono-hito{
  position:absolute;top:50%;width:12px;height:12px;border-radius:50%;
  background:var(--sup);border:2px solid var(--borde-2);
  transform:translate(-50%,-50%);box-shadow:0 0 0 3px var(--sup);
}
.crono-hito--hoy{border-color:var(--acento);background:var(--acento)}
.crono-hito--justif{border-color:var(--avisa)}
.crono-hitos{
  display:flex;flex-wrap:wrap;gap:var(--esp-3) var(--esp-6);justify-content:space-between;
}
.crono-hito-txt{display:flex;flex-direction:column;gap:2px}
.crono-hito-txt b{font-size:var(--t-s)}
.crono-hito-txt--hoy b{color:var(--acento)}
.crono-hito-txt--justif b{color:var(--avisa)}

/* ---- Pestaña «Información»: separador dentro de la celda Financiación ---- */
.dl--sep{margin-top:var(--esp-3);padding-top:var(--esp-2);border-top:1px solid var(--borde)}

/* ODS: la paleta oficial de cada objetivo es una identidad externa, no de
   marca, así que aquí se pinta como una etiqueta neutra tokenizada en vez de
   con los diecisiete colores propios de Naciones Unidas. */
.ods-badges{display:flex;flex-wrap:wrap;gap:var(--esp-2)}
.ods-badge{
  display:inline-flex;align-items:center;padding:5px var(--esp-3);
  border-radius:var(--r-pill);font-size:var(--t-s);font-weight:var(--peso-medio);
  background:var(--acento-suave);color:var(--acento);
}

/* ---- Modales de aplazamiento: bloque de fechas de referencia -------------- */
.aplaz-fechas-actuales{
  background:var(--sup-2);border-radius:var(--r-s);
  padding:var(--esp-3) var(--esp-4);margin-bottom:var(--esp-4);
}
.aplaz-fechas-actuales p{margin-bottom:var(--esp-2)}
.aplaz-fechas-actuales .dl{gap:0}

/* ---- Historial de aplazamientos (pestaña Información · Cronograma) ------- */
.aplaz-original,.aplaz-hist{margin-top:var(--esp-4)}
.aplaz-original .dl{margin-top:var(--esp-1)}

.aplaz-tl{
  position:relative;padding-left:var(--esp-6);margin-top:var(--esp-3);
  display:flex;flex-direction:column;gap:var(--esp-3);
}
.aplaz-tl::before{
  content:"";position:absolute;left:11px;top:4px;bottom:4px;width:2px;background:var(--borde);
}
.aplaz-tl-item{position:relative}
.aplaz-tl-marca{
  position:absolute;left:calc(var(--esp-6) * -1);top:0;width:24px;height:24px;
  border-radius:50%;background:var(--sup);border:1px solid var(--borde);
  display:grid;place-items:center;font-size:var(--t-xs);z-index:1;color:var(--texto-3);
}
.aplaz-tl-item--aprobado .aplaz-tl-marca{color:var(--ok)}
.aplaz-tl-item--rechazado .aplaz-tl-marca{color:var(--mal)}
.aplaz-tl-item--pendiente .aplaz-tl-marca{color:var(--avisa)}
.aplaz-tl-cont{background:var(--sup-2);border-radius:var(--r-s);padding:var(--esp-3) var(--esp-4)}
.aplaz-tl-cab{display:flex;align-items:center;gap:var(--esp-2);margin-bottom:6px;flex-wrap:wrap}
.aplaz-tl-num{font-weight:var(--peso-fuerte);font-size:var(--t-s)}
.aplaz-tl-fechas{font-size:var(--t-s);color:var(--texto);display:flex;flex-direction:column;gap:2px}
.aplaz-tl-meta{font-size:var(--t-xs);color:var(--texto-3);margin-top:6px;display:flex;flex-direction:column}
.aplaz-tl-motivo{
  font-size:var(--t-s);margin-top:6px;padding:var(--esp-2) var(--esp-3);
  background:var(--sup);border-radius:var(--r-xs);border-left:3px solid var(--borde-2);
}
.aplaz-tl-motivo--rechazo{border-left-color:var(--mal)}

/* ---- Pestaña «Plazos»: línea de tiempo ------------------------------------ */
.plazos-timeline{position:relative;padding-left:var(--esp-6);margin-bottom:var(--esp-4)}
.plazos-timeline::before{
  content:"";position:absolute;left:11px;top:0;bottom:0;width:2px;background:var(--borde);
}
.plazo-tl-item{
  display:flex;align-items:center;gap:var(--esp-3);padding:10px var(--esp-3) 10px 0;
  position:relative;
}
.plazo-tl-item + .plazo-tl-item{margin-top:var(--esp-1)}
.plazo-tl-dot{position:absolute;left:calc(var(--esp-6) * -1);z-index:1}
.plazo-tl-btn{
  width:22px;height:22px;border:2px solid var(--borde-2);border-radius:50%;
  background:var(--sup);display:grid;place-items:center;font-size:var(--t-xs);
  color:var(--texto-inv);
  transition:border-color var(--micro),background var(--micro),box-shadow var(--micro);
}
.plazo-tl-btn:hover{border-color:var(--acento);box-shadow:0 0 0 3px var(--acento-suave)}
.plazo-tl--done .plazo-tl-btn{background:var(--ok);border-color:var(--ok)}
.plazo-tl--overdue .plazo-tl-btn{border-color:var(--mal);background:var(--sup)}
.plazo-tl-content{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.plazo-tl-titulo{font-size:var(--t-s);color:var(--texto);font-weight:var(--peso-medio)}
.plazo-tl--done .plazo-tl-titulo{text-decoration:line-through;color:var(--texto-3)}
.plazo-tl-fecha{font-size:var(--t-xs);color:var(--texto-3);display:flex;align-items:center;gap:6px}
.plazo-tl--overdue .plazo-tl-fecha{color:var(--mal)}
.plazo-tl-overdue-label{
  font-size:var(--t-xs);font-weight:var(--peso-fuerte);text-transform:uppercase;
  background:var(--mal-bg);color:var(--mal);padding:1px var(--esp-2);border-radius:var(--r-xs);
}
.plazo-tl-item .btn-icon{opacity:0;transition:opacity var(--micro)}
.plazo-tl-item:hover .btn-icon,.plazo-tl-item:focus-within .btn-icon{opacity:1}

.add-plazo-form{display:flex;gap:var(--esp-2);margin-top:var(--esp-4);flex-wrap:wrap}
.add-plazo-form input[type="text"]{flex:1;min-width:180px}
.add-plazo-form input[type="date"]{width:160px}