/* Osprey — informe, el detalle: cada area con sus comprobaciones, lo que no
   se midio, y el formulario de contacto. Sigue movil primero y centrado. */

.detalle { max-width: 860px; margin: 0 auto; }

code, .mono {
  font-family: var(--fuente-dato); font-size: .855em;
  background: var(--hundido); border: 1px solid var(--borde-tenue);
  border-radius: 3px; padding: .06em .34em;
}
strong { font-weight: 600; color: var(--tinta); }

/* ── un area ─────────────────────────────────────────────────────────── */

.seccion { margin-top: 56px; scroll-margin-top: 16px; }
.seccion > header {
  display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto auto;
  column-gap: 14px; align-items: center;
  padding-bottom: 14px; border-bottom: 2px solid var(--borde);
}
.seccion > header .gauge { grid-row: 1 / 3; width: 56px; height: 56px; }
.seccion > header .gauge b { font-size: 17px; }
.seccion > header h2 { font-size: 22px; font-weight: 750; letter-spacing: -.02em; line-height: 1.1; }
.seccion__cuenta { font-size: 13px; color: var(--tinta-tenue); }
.seccion.mal   .seccion__cuenta { color: var(--mal); }
.seccion.medio .seccion__cuenta { color: var(--medio); }
.seccion.bien  .seccion__cuenta { color: var(--bien); }

/* ── una comprobacion ────────────────────────────────────────────────── */

.hallazgo { border-bottom: 1px solid var(--borde-tenue); scroll-margin-top: 16px; }
.hallazgo:last-child { border-bottom: 0; }
.hallazgo > summary {
  display: grid; grid-template-columns: 14px 1fr auto 16px; gap: 12px; align-items: center;
  padding: 13px 0; cursor: pointer; list-style: none;
}
.hallazgo > summary::-webkit-details-marker { display: none; }
.hallazgo > summary::after {
  content: "+"; color: var(--tinta-tenue); font-family: var(--fuente-dato); font-size: 17px; text-align: right;
}
.hallazgo[open] > summary::after { content: "−"; }
.hallazgo > summary h3 { font-size: 15.5px; font-weight: 600; line-height: 1.3; }
.hallazgo .punto { width: 10px; height: 10px; border-radius: 50%; background: var(--neutro); display: block; }
.hallazgo.bien  .punto { background: var(--bien); }
.hallazgo.medio .punto { background: var(--medio); border-radius: 2px; transform: rotate(45deg); width: 9px; height: 9px; }
.hallazgo.mal   .punto { background: var(--mal); border-radius: 1px; }
.hallazgo.mal[open]   > summary h3 { color: var(--mal); }
.hallazgo.medio[open] > summary h3 { color: var(--medio); }

.sello {
  display: inline-block; padding: 3px 8px; border-radius: 3px; white-space: nowrap;
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  background: var(--neutro-lavado); color: var(--neutro);
}
.sello.pass { background: var(--bien-lavado); color: var(--bien); }
.sello.warning, .sello.opportunity { background: var(--medio-lavado); color: var(--medio); }
.sello.fail, .sello.critical { background: var(--mal-lavado); color: var(--mal); }

.hallazgo .cuerpo { padding: 2px 0 22px 26px; max-width: 76ch; }
.hallazgo .cuerpo p { margin: 0 0 10px; color: var(--tinta-media); font-size: 15px; line-height: 1.55; }
.hallazgo .cuerpo .rotulo {
  font-size: 11px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--tinta-tenue); font-weight: 600; margin: 16px 0 4px;
}
.hallazgo .cuerpo pre {
  margin: 0; padding: 12px 14px; overflow-x: auto;
  background: var(--hundido); border: 1px solid var(--borde-tenue); border-radius: 6px;
  font-family: var(--fuente-dato); font-size: 12.5px; line-height: 1.55;
  white-space: pre-wrap; word-break: break-word; color: var(--tinta-media);
}
.hallazgo .meta {
  margin-top: 14px; font-size: 11.5px; color: var(--tinta-tenue);
  font-family: var(--fuente-dato); display: flex; flex-wrap: wrap; gap: 4px 16px;
}
.hallazgo .nota { font-size: 13px; color: var(--tinta-tenue); }

.requisitos { list-style: none; margin: 6px 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.requisitos li { display: grid; grid-template-columns: 17px 1fr; column-gap: 9px; font-size: 14px; line-height: 1.42; }
.requisitos li::before { content: "\2717"; color: var(--mal); font-weight: 700; grid-row: 1 / 3; }
.requisitos li.si::before { content: "\2713"; color: var(--bien); }
.requisitos li b, .requisitos li span { grid-column: 2; display: block; }
.requisitos li b { font-weight: 600; color: var(--tinta); }
.requisitos li span { color: var(--tinta-suave); }

/* ── lo correcto, plegado ────────────────────────────────────────────── */

.correctos { margin-top: 6px; }
.correctos > summary {
  cursor: pointer; list-style: none; padding: 12px 0; font-size: 14px; font-weight: 600; color: var(--bien);
  display: flex; align-items: center; gap: 8px;
}
.correctos > summary::-webkit-details-marker { display: none; }
.correctos > summary::before { content: "▸"; font-size: 12px; }
.correctos[open] > summary::before { content: "▾"; }

/* ── que no se ha medido ─────────────────────────────────────────────── */

.cobertura { margin-top: 48px; border: 1px solid var(--borde); border-radius: 10px; background: var(--hundido); }
.cobertura > summary { cursor: pointer; list-style: none; padding: 16px 20px; font-size: 15px; font-weight: 600; }
.cobertura > summary::-webkit-details-marker { display: none; }
.cobertura .cuerpo { padding: 0 20px 18px; }
.cobertura p, .cobertura li { color: var(--tinta-media); font-size: 14.5px; max-width: 76ch; }
.cobertura ul { margin: 8px 0 12px; padding-left: 20px; }

/* ── el cierre: formulario y GestasAI ────────────────────────────────── */

.cierre {
  margin: 56px auto 48px; max-width: 640px; padding: 30px 22px; text-align: center;
  background: var(--superficie); border: 1px solid var(--borde);
  border-top: 3px solid var(--acento); border-radius: 10px;
}
.cierre h2 { font-size: 24px; font-weight: 750; letter-spacing: -.02em; margin-bottom: 12px; }
.cierre p { color: var(--tinta-media); max-width: none; margin: 0 0 10px; }
.cierre form { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.cierre input[type="email"], .cierre textarea {
  width: 100%; padding: 14px 18px; font-size: 16px; font-family: inherit;
  border: 1px solid var(--borde-campo); background: var(--fondo); color: var(--tinta);
}
.cierre input[type="email"] { border-radius: 999px; }
.cierre textarea { border-radius: 14px; resize: vertical; line-height: 1.5; }
.cierre form .boton { align-self: center; }
.consentimiento-campo { display: flex; gap: 10px; align-items: flex-start; text-align: left; font-size: 13.5px; color: var(--tinta-media); line-height: 1.45; max-width: 520px; margin: 0 auto; }
.consentimiento-campo input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--boton); }
.consentimiento-campo a { color: var(--cian-texto); }
.cierre .respuesta { margin-top: 12px; font-size: 15px; }
.cierre .respuesta[hidden] { display: none; }
.cierre .respuesta.ok { color: var(--bien); }
.cierre .respuesta.mal { color: var(--mal); }
.cierre .legal { font-size: 12.5px; color: var(--tinta-tenue); margin-top: 14px; }
.cierre .empresa { margin-top: 18px; }

.boton {
  padding: 14px 26px; font-size: 16px; font-family: inherit; font-weight: 600;
  border: 1px solid var(--boton); border-radius: 999px;
  background: var(--boton); color: #fff; cursor: pointer; white-space: nowrap;
  text-decoration: none; display: inline-block;
}
.boton:hover { background: var(--boton-hover); border-color: var(--boton-hover); }
.boton:focus-visible, .analizar:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--boton); outline-offset: 3px;
}
.boton[disabled] { opacity: .55; cursor: progress; }
.boton.secundario { background: transparent; color: var(--cian-texto); }
.boton.secundario:hover { background: rgba(0, 157, 208, .06); }

.lectura { max-width: var(--ancho-lectura); }
.pagina-error { padding: 80px 0; position: relative; z-index: 1; }
.pagina-error h1 { font-size: clamp(30px, 4vw, 44px); font-weight: 750; letter-spacing: -.025em; }
.pagina-error p { color: var(--tinta-suave); max-width: 60ch; margin: 18px 0 28px; }

@media (min-width: 560px) {
  .cierre { padding: 36px 34px; }
  .seccion > header h2 { font-size: 26px; }
}