/* Osprey — informe, primera pantalla: el campo, el marcador y las cajas.
   Movil primero y todo centrado; las rejillas ganan columnas con el ancho.
   Los colores de nivel (bien, medio, mal, neutro) son tokens del tema: la
   plantilla pone la clase que le dice la capability y aqui se pinta. */

.informe { position: relative; z-index: 1; }
.hero--informe { padding-top: 24px; }
.hero--informe .campo { margin-top: 0; }

.ayuda {
  margin: 18px auto 0;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  text-align: center;
}
.ayuda p { margin: 0; color: var(--tinta); font-size: 17px; max-width: none; }
.ayuda p strong { font-weight: 700; }
.ayuda .boton { text-decoration: none; }

/* Boton de contorno: el azul del tema en el borde y en el texto, sin relleno,
   para que la llamada destaque sin pelearse con la puntuacion. */
.boton.contorno {
  background: transparent; color: var(--cian-texto);
  border: 2px solid var(--acento);
  padding: 12px 24px;
}
.boton.contorno:hover {
  background: var(--acento-lavado);
  background: color-mix(in srgb, var(--acento) 8%, transparent);
  border-color: var(--acento-hover); color: var(--tinta);
}

/* ── el marcador circular ────────────────────────────────────────────── */

.gauge {
  position: relative; display: inline-grid; place-items: center;
  width: 64px; height: 64px;
  --gauge-color: var(--neutro); --gauge-fondo: var(--neutro-lavado);
}
.gauge.bien  { --gauge-color: var(--bien);  --gauge-fondo: var(--bien-lavado); }
.gauge.medio { --gauge-color: var(--medio); --gauge-fondo: var(--medio-lavado); }
.gauge.mal   { --gauge-color: var(--mal);   --gauge-fondo: var(--mal-lavado); }
.gauge svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.gauge circle { fill: none; stroke-width: 8; }
.gauge__fondo { stroke: var(--gauge-fondo); }
.gauge__arco  { stroke: var(--gauge-color); stroke-linecap: round; transition: stroke-dashoffset .9s ease-out; }
.gauge b {
  position: relative; font-size: 20px; font-weight: 700; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; color: var(--gauge-color);
}

/* ── el marcador: global + areas ─────────────────────────────────────── */

.marcador { margin: 40px auto 0; text-align: center; }
.marcador > .gauge { width: 150px; height: 150px; }
.marcador > .gauge b { font-size: 50px; }
.marcador > .gauge circle { stroke-width: 7; }
.marcador h1 {
  margin: 16px 0 0; font-size: 22px; font-weight: 700; letter-spacing: -.02em;
  font-family: var(--fuente-dato); word-break: break-word;
}
.marcador__frase { margin: 8px auto 0; font-size: 18px; font-weight: 600; max-width: none; }
.marcador__frase.bien  { color: var(--bien); }
.marcador__frase.medio { color: var(--medio); }
.marcador__frase.mal   { color: var(--mal); }
.marcador__titular { margin: 12px auto 0; color: var(--tinta-suave); font-size: 15px; line-height: 1.5; max-width: 56ch; }

/* Filas centradas: con siete areas, una rejilla fija dejaba la ultima sola
   y pegada a la izquierda. */
.marcador__areas {
  list-style: none; margin: 30px auto 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 8px;
  max-width: 900px;
}
.marcador__areas li { flex: 0 0 calc((100% - 16px) / 3); }
.marcador__areas a {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-decoration: none; color: var(--tinta-media); font-size: 12.5px; font-weight: 600; line-height: 1.25;
}
.marcador__areas a:hover { color: var(--tinta); }
.marcador__areas .gauge { width: 60px; height: 60px; }
.marcador__areas .gauge b { font-size: 18px; }

.leyenda {
  margin: 24px auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px;
  font-size: 12px; color: var(--tinta-tenue); max-width: none;
}
.leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.leyenda i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.leyenda .bien i  { background: var(--bien); }
.leyenda .medio i { background: var(--medio); }
.leyenda .mal i   { background: var(--mal); }

/* ── las cajas: la nube con resultado ────────────────────────────────── */

.cajas { margin-top: 48px; text-align: center; }
.cajas h2, .prioridades h2 { font-size: 22px; font-weight: 750; letter-spacing: -.02em; }
.cajas__resumen {
  margin: 10px auto 0; display: flex; justify-content: center; gap: 18px; flex-wrap: wrap;
  font-size: 14px; color: var(--tinta-suave); max-width: none;
}
.cajas__resumen b { font-size: 17px; margin-right: 4px; font-variant-numeric: tabular-nums; }
.cajas__resumen .bien b  { color: var(--bien); }
.cajas__resumen .medio b { color: var(--medio); }
.cajas__resumen .mal b   { color: var(--mal); }

.cajas__rotulo {
  margin: 28px 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--cian-texto); max-width: none;
}

.rejilla { display: grid; grid-template-columns: 1fr; gap: 10px; max-width: 1080px; margin: 0 auto; }

.caja {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 14px 14px 13px; text-align: center;
  background: var(--superficie); border: 1px solid var(--borde); border-left: 4px solid var(--neutro);
  border-radius: 8px; text-decoration: none; color: var(--tinta);
  transition: transform .15s, box-shadow .15s;
}
.caja:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(20, 60, 80, .07); }
.caja.bien  { border-left-color: var(--bien); }
.caja.medio { border-left-color: var(--medio); }
.caja.mal   { border-left-color: var(--mal); }
.caja__nombre { font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.caja__estado { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.caja.bien  .caja__estado { color: var(--bien); }
.caja.medio .caja__estado { color: var(--medio); }
.caja.mal   .caja__estado { color: var(--mal); }
.caja.neutro .caja__estado { color: var(--neutro); }
.caja__dato { font-size: 13px; color: var(--tinta-suave); line-height: 1.35; }

/* ── por donde empezar ───────────────────────────────────────────────── */

.prioridades { margin: 48px auto 0; max-width: 760px; text-align: center; }
.prioridades .explica { margin: 6px auto 0; font-size: 14px; color: var(--tinta-tenue); max-width: none; }
.prioridades ol { list-style: none; counter-reset: pr; margin: 18px 0 0; padding: 0; text-align: left; }
.prioridades li { counter-increment: pr; border-bottom: 1px solid var(--borde-tenue); }
.prioridades li:last-child { border-bottom: 0; }
.prioridades li a {
  display: grid; grid-template-columns: 30px 1fr; gap: 4px 12px; align-items: baseline;
  padding: 14px 0; text-decoration: none; color: inherit;
}
.prioridades li a::before {
  content: counter(pr); grid-row: 1 / 3; align-self: start;
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--fuente-dato); font-size: 13px; font-weight: 700; color: #fff; background: var(--neutro);
}
.prioridades li.mal   a::before { background: var(--mal); }
.prioridades li.medio a::before { background: var(--medio); }
.prioridades li b { font-size: 16px; font-weight: 650; }
.prioridades li span { font-size: 14px; color: var(--tinta-suave); line-height: 1.45; }

/* ── la entrada del informe ──────────────────────────────────────────────
   Por CSS y no por guion: asi se ve desde el primer pintado, sin parpadeo.
   Las piezas del marcador suben por orden y cada anillo se dibuja desde cero.
   Con «reducir movimiento» no se anima (regla general de portada.css). */

[data-osprey="informe"] .gauge__arco { animation: trazar 1.1s cubic-bezier(.2, .8, .2, 1) .15s both; }
[data-osprey="informe"] .marcador__areas .gauge__arco { animation-delay: .55s; }
[data-osprey="informe"] .marcador > * { animation: subir .6s cubic-bezier(.2, .8, .2, 1) both; }
[data-osprey="informe"] .marcador > :first-child { animation-delay: .05s; }
[data-osprey="informe"] .marcador > :nth-child(2) { animation-delay: .1s; }
[data-osprey="informe"] .marcador > :nth-child(3) { animation-delay: .2s; }
[data-osprey="informe"] .marcador > :nth-child(4) { animation-delay: .3s; }
[data-osprey="informe"] .marcador > :nth-child(5) { animation-delay: .4s; }
[data-osprey="informe"] .marcador > :nth-child(n+6) { animation-delay: .5s; }

@keyframes trazar { from { stroke-dashoffset: var(--largo); } }
@keyframes subir  { from { opacity: 0; transform: translateY(14px); } }

/* ── mas ancho, mas columnas ─────────────────────────────────────────── */

@media (min-width: 480px) {
  .rejilla { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

@media (min-width: 560px) {
  .ayuda { flex-direction: row; justify-content: center; gap: 18px; }
  .marcador__areas li { flex-basis: calc((100% - 24px) / 4); }
}

@media (min-width: 900px) {
  .rejilla { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .marcador { margin-top: 48px; }
  .marcador > .gauge { width: 176px; height: 176px; }
  .marcador > .gauge b { font-size: 58px; }
  .marcador__areas { max-width: 1000px; }
  .marcador__areas li { flex-basis: calc((100% - 48px) / 7); }
  .marcador__areas .gauge { width: 72px; height: 72px; }
  .marcador__areas a { font-size: 13.5px; }
  .cajas { margin-top: 60px; }
}