/* ============================================================
   SiTi · Anteproyecto
   Se carga después de siti.css. Solo agrega lo que el formato
   del anteproyecto necesita: el documento por aspectos, las
   medidas de cada campo y las sugerencias de la comisión.
   ============================================================ */

.ap-nota{margin:14px 2px 6px}

/* --- el documento --------------------------------------------- */
.ap-doc{display:flex; flex-direction:column; gap:14px}

.ap-sec{margin:0; scroll-margin-top:86px}
.ap-sec.con-sugerencias{border-left:4px solid var(--stop, #B33049)}

.ap-sec-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:14px; flex-wrap:wrap; margin-bottom:10px;
}
.ap-sec-head h3{display:inline; margin:0; font-size:15.5px}
.ap-sec-head .cap{margin:6px 0 0; max-width:74ch}
.ap-sec-acc{display:flex; align-items:center; gap:8px; flex:none}

.ap-num{
  display:inline-block; min-width:38px; margin-right:8px;
  font-variant-numeric:tabular-nums; font-weight:680; font-size:13px;
  color:var(--ink-soft, #64748B);
}

.ap-campo{margin-top:4px}
.ap-campo input,
.ap-campo textarea,
.ap-campo select{width:100%}
.ap-campo textarea{line-height:1.6; resize:vertical}

/* Medida del formato bajo cada campo: cuántas palabras lleva y
   cuántas pide el esquema. Corregir al final es reescribir. */
.ap-medida{display:block; margin-top:6px; font-size:12px}
.ap-medida .bien{color:var(--ok, #157F6B)}
.ap-medida .falta{color:var(--ink-soft, #64748B)}

/* --- numeral 1 · datos generales -------------------------------- */
.ap-persona{
  border:1px solid var(--line, rgba(30,58,98,.12));
  border-radius:14px; padding:12px 14px; margin-bottom:12px;
  background:rgba(255,255,255,.5);
}
.ap-persona h4{margin:0 0 8px; font-size:13px; text-transform:uppercase; letter-spacing:.05em}
.ap-datos{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px 14px}
.ap-datos .f{margin:0}
.ap-datos .f.ancho{grid-column:1/-1}

/* --- numeral 2.10 · cronograma ---------------------------------- */
.ap-crono input{width:100%; font-size:12.5px; padding:6px 8px}
.ap-crono td{vertical-align:middle}

/* --- numeral 3 · responsabilidad -------------------------------- */
.ap-fecha{max-width:260px}
.ap-firmas{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; margin-top:10px}
.ap-firma{
  border-top:1px solid var(--line, rgba(30,58,98,.16));
  padding-top:8px; text-align:center;
}
.ap-firma b{display:block; font-size:13px}
.ap-firma small{color:var(--ink-soft, #64748B)}

/* --- sugerencias de la comisión --------------------------------- */
.ap-resumen{
  border-radius:14px; padding:10px 16px; margin-bottom:14px;
  background:var(--stop-bg, rgba(179,48,73,.12)); color:var(--stop, #B33049);
  font-size:13.5px; font-weight:560;
}
.ap-resumen b{font-size:16px}

.ap-resolucion{border-left:4px solid var(--stop, #B33049)}
.ap-resolucion p{white-space:pre-line; margin:6px 0 0}

.ap-hilos{
  margin-top:14px; padding-top:12px;
  border-top:1px dashed var(--line, rgba(30,58,98,.18));
  display:flex; flex-direction:column; gap:10px;
}
.ap-hilo{
  border:1px solid var(--line, rgba(30,58,98,.12));
  border-radius:14px; padding:10px 13px;
  background:rgba(255,255,255,.62);
}
.ap-hilo.resuelta{opacity:.72}
.ap-hilo header{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12.5px}
.ap-hilo header b{font-size:13px}
.ap-hilo header .mono{font-size:11px; color:var(--ink-soft, #64748B)}
.ap-hilo > p{margin:7px 0 0; white-space:pre-line; font-size:13.5px; line-height:1.55}

.ap-respuesta{
  margin:9px 0 0 14px; padding:8px 12px;
  border-left:2px solid var(--line, rgba(30,58,98,.18));
  font-size:13px;
}
.ap-respuesta b{font-size:12.5px}
.ap-respuesta .mono{font-size:11px; color:var(--ink-soft, #64748B); margin-left:6px}
.ap-respuesta p{margin:4px 0 0; white-space:pre-line}

.ap-responder{margin-top:10px}
.ap-responder textarea{width:100%}

/* --- barra de acciones ------------------------------------------ */
.ap-barra{
  position:sticky; bottom:0; z-index:4;
  display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end;
  margin-top:16px; padding:12px 14px;
  border-radius:16px;
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  box-shadow:0 10px 30px rgba(9,7,30,.12);
}

@media (max-width:760px){
  .ap-sec-head{flex-direction:column; gap:8px}
  .ap-barra{justify-content:stretch}
  .ap-barra .btn{flex:1 1 auto}
  .ap-datos{grid-template-columns:1fr}
}