/* ===== Sección de investigación institucional =====
   Estilos adicionales, cargados sólo por las páginas de esta sección.
   No sustituye a styles.css: lo complementa. */

/* Marca de campo obligatorio */
.req { color: var(--red); font-weight: 600; }

/* Texto de ayuda bajo la etiqueta */
.field .hint {
  display: block; font-family: var(--font-body); font-weight: 400;
  font-size: .82rem; color: var(--muted); margin: -.2rem 0 .45rem;
}

/* Mensaje de error por campo */
.field-error {
  display: none; font-size: .84rem; color: var(--red);
  margin-top: .4rem; line-height: 1.4;
}
.field.invalid .field-error { display: block; }
.field.invalid input,
.field.invalid textarea,
.field.invalid .check-grid {
  border-color: var(--red);
}

/* Grupo de casillas (compuestos de interés) */
.check-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem .9rem;
  border: 1.5px solid var(--line); border-radius: 11px; padding: .9rem 1rem; background: #fdfdff;
}
.check {
  display: flex; align-items: flex-start; gap: .55rem;
  font-size: .95rem; color: var(--body); cursor: pointer;
}
.check input { width: auto; margin-top: .2rem; flex: none; }

/* Casilla de confirmación RUO */
.check-ruo {
  display: flex; align-items: flex-start; gap: .7rem;
  border: 1.5px solid var(--line); border-radius: 11px;
  padding: 1rem; background: var(--bg-soft); font-size: .92rem; color: var(--body);
}
.check-ruo input { width: auto; margin-top: .25rem; flex: none; }

/* Contador de caracteres */
.charcount { font-size: .8rem; color: var(--muted); text-align: right; margin-top: .35rem; }
.charcount.ok { color: var(--wa-deep); }

/* Aviso de estado del formulario */
.form-alert {
  border-radius: 11px; padding: .9rem 1rem; font-size: .95rem; line-height: 1.5;
}
.form-alert.err { background: #fdeced; border: 1px solid #f3c0c4; color: #b3121f; }

/* Panel de confirmación */
.confirm-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 2.6rem; box-shadow: var(--shadow-sm); max-width: 62ch; margin: 0 auto;
}
.confirm-card .mark {
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  background: var(--blue-soft); color: var(--blue); margin-bottom: 1.2rem;
}
.confirm-card .mark svg { width: 28px; height: 28px; }

@media (max-width: 860px) {
  .check-grid { grid-template-columns: 1fr; }
  .confirm-card { padding: 1.8rem; }
}

/* ===== Recursos: listado de artículos ===== */
.article-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.6rem; }
.article-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease;
}
.article-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.article-card img { width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; border-bottom: 1px solid var(--line); }
.article-card .body { padding: 1.5rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.article-card h3 { font-size: 1.18rem; line-height: 1.3; margin: 0; }
.article-card h3 a { color: var(--ink); }
.article-card h3 a:hover { color: var(--blue); }
.article-card p { font-size: .95rem; color: var(--body); margin: 0; }
.article-card .meta { font-size: .82rem; color: var(--muted); margin-top: auto; padding-top: .5rem; }

/* ===== Artículo ===== */
.article { max-width: 74ch; margin: 0 auto; }
.article-meta { font-size: .88rem; color: var(--muted); margin-bottom: 1.6rem; }
.article h2 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); margin: 2.6rem 0 .8rem; }
.article h3 { font-size: 1.1rem; margin: 1.6rem 0 .5rem; }
.article p { color: var(--body); margin-bottom: 1rem; }
.article ul, .article ol { margin: 0 0 1.2rem 1.2rem; color: var(--body); }
.article li { margin-bottom: .45rem; }
.article figure { margin: 2rem 0; }
.article figure img { width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.article figcaption { font-size: .85rem; color: var(--muted); margin-top: .6rem; }

.tldr {
  background: var(--blue-soft); border: 1px solid #cfdcfa; border-left: 4px solid var(--blue);
  border-radius: var(--radius); padding: 1.3rem 1.5rem; margin-bottom: 2rem;
}
.tldr p { margin: 0; color: var(--ink); font-size: 1.02rem; }

.article-table { width: 100%; border-collapse: collapse; margin: 1.4rem 0 1.8rem; font-size: .95rem; }
.article-table th, .article-table td { border: 1px solid var(--line); padding: .75rem .9rem; text-align: left; vertical-align: top; }
.article-table th { background: var(--bg-soft); font-family: var(--font-display); color: var(--ink); }
.table-scroll { overflow-x: auto; }

.faq-item { border-bottom: 1px solid var(--line); padding: 1.1rem 0; }
.faq-item h3 { margin: 0 0 .4rem; font-size: 1.02rem; }
.faq-item p { margin: 0; font-size: .96rem; }

.refs { font-size: .9rem; color: var(--body); }
.refs li { margin-bottom: .7rem; word-break: break-word; }

.ruo-note {
  border: 1px solid var(--line); background: var(--bg-soft); border-radius: var(--radius);
  padding: 1.1rem 1.3rem; font-size: .9rem; color: var(--muted); margin: 2rem 0;
}