/* Pestaña «Anexo II-A» del detalle de proyecto (F9).
   Solo lo que no cubre el vocabulario común: el acordeón de las 21 secciones narrativas.
   Todo lo demás —celdas bento, KPI, etiquetas de estado, formularios, tablas— sale de
   `components.css` sin tocarlo. */

.anexo-secciones {
  gap: var(--esp-2);
}

/* Cada sección es un <details>. La cabecera plegable se comporta como una fila:
   código, título, estado y contador de caracteres alineados. */
.anexo-seccion > summary {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-2) var(--esp-3);
  cursor: pointer;
  border-radius: var(--r-s);
  transition: background var(--micro);
  list-style: none;
}

.anexo-seccion > summary::-webkit-details-marker {
  display: none;
}

/* El triángulo lo dibujamos nosotros para que gire al abrir. */
.anexo-seccion > summary::before {
  content: "\f105"; /* fa-angle-right */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: var(--texto-3);
  transition: transform var(--micro);
  flex: 0 0 auto;
}

.anexo-seccion[open] > summary::before {
  transform: rotate(90deg);
}

.anexo-seccion > summary:hover {
  background: var(--sup-2);
}

/* El foco tiene que verse: la sección se abre con el teclado. */
.anexo-seccion > summary:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

.anexo-seccion-titulo {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.anexo-seccion > form {
  padding: 0 var(--esp-3) var(--esp-3);
  border-top: 1px solid var(--borde);
  margin-top: var(--esp-1);
  padding-top: var(--esp-3);
}

/* Lista de apartados que faltan, dentro del aviso. */
.anexo-faltas {
  margin: var(--esp-2) 0 0;
  padding-left: var(--esp-4);
}

.anexo-faltas li {
  margin-bottom: var(--esp-1);
}

/* Contador de caracteres pasado de largo. */
.anexo .eti-mono.mal {
  color: var(--mal);
}

/* En pantalla estrecha el título de la sección ocupa su propia línea: si no, entre el
   código, la etiqueta de estado y el contador no queda sitio para leerlo. */
@media (max-width: 640px) {
  .anexo-seccion > summary {
    flex-wrap: wrap;
  }

  .anexo-seccion-titulo {
    flex-basis: 100%;
    white-space: normal;
  }
}