/* Informe de auditoría — piel "Widgets" (DESIGN.md). Tokens y piezas comunes en base.css.
   Columna central de 760 px; en pantalla grande la portada y cada falla se abren en dos columnas. */
.vista-informe { padding-bottom: 40px; }
.i-sec { margin-top: 4px; }

/* ---------- Portada ---------- */
.b-meta { color: var(--gris); font-size: 13.5px; font-weight: 500; margin: 10px 2px 8px; }
.i-portada .b-bajada b { font-weight: 800; }
.alerta { display: flex; gap: 10px; align-items: flex-start; background: var(--rojo-suave); color: var(--tinta); border-radius: 18px; padding: 12px 14px; margin: 0 0 14px; font-size: 14px; line-height: 1.45; }
.alerta .icono { color: var(--rojo); margin-top: 1px; }
.i-portada-grid { display: grid; gap: 12px; }
.i-portada-lado { display: grid; gap: 12px; align-content: start; }
.b-grid--1 { grid-template-columns: 1fr; }
.i-acciones { display: grid; gap: 4px; justify-items: center; }
.i-acciones .b-btn { margin-top: 2px; }

/* Tanque */
.w-tanque { padding: 18px 12px 16px; }
.w-tanque .w-cab { padding-left: 6px; }
.tanque { display: block; width: 100%; max-width: 440px; height: auto; margin: 0 auto; }
.tanque text { font-family: var(--f); }
.w-tanque .rotulo-fuga { margin: 4px auto 0; font-size: 15px; padding: 9px 16px; }
.leyenda { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin: 14px 6px 0; padding: 0; list-style: none; font-size: 13px; font-weight: 600; line-height: 1.3; }
.leyenda--1 { grid-template-columns: 1fr; }
.leyenda li { display: flex; gap: 8px; align-items: center; }
.num { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 999px; background: var(--rojo); color: #fff; font-size: 12.5px; font-weight: 800; }
.num--g { width: 30px; height: 30px; font-size: 15px; }
@media (prefers-reduced-motion: no-preference) {
  .tanque .gota { animation: gotea 1.8s cubic-bezier(.5, 0, .9, .6) infinite; transform-box: fill-box; }
  .tanque .gota.d1 { animation-delay: -.45s; } .tanque .gota.d2 { animation-delay: -.9s; } .tanque .gota.d3 { animation-delay: -1.35s; }
  .tanque .chorro { animation: chorro 1.2s linear infinite; }
}
@keyframes gotea { 0% { translate: 0 -14px; opacity: 0; } 15%, 85% { opacity: 1; } 100% { translate: 0 14px; opacity: 0; } }
@keyframes chorro { to { stroke-dashoffset: -16; } }

/* Nota (anillo tipo Actividad) y "se van" */
.w-anillo { display: flex; flex-direction: column; gap: 8px; }
.w-anillo .w-cab { margin-bottom: 0; }
.w-anillo .w-pie { margin-top: 0; }
.w-anillo .w-pie + .w-pie { margin-top: 4px; }
.anillo-nota { width: 96px; height: 96px; flex: none; }
.anillo-nota circle { fill: none; stroke-width: 10; }
.anillo-nota .aro-fondo { stroke: var(--linea); }
.anillo-nota .aro-mal { stroke: var(--rojo); stroke-linecap: round; }
.anillo-nota .aro-bien { stroke: var(--verde); stroke-linecap: round; }
.anillo-nota .t-nota { font: 800 22px var(--f); fill: var(--tinta); letter-spacing: -1px; }
.anillo-nota .t-de { font: 700 9.5px var(--f); fill: var(--gris); }
.b-grid--1 .w-anillo { flex-direction: row; align-items: center; gap: 16px; flex-wrap: wrap; }
.b-grid--1 .w-anillo .w-cab { width: 100%; }
.b-grid--1 .w-anillo > div, .i-portada-lado .w-anillo > div { flex: 1; min-width: 0; }

/* ---------- Lo que te frena ---------- */
.charla { display: grid; gap: 10px; }
.burbuja { border-radius: 20px; padding: 14px 16px; }
.burbuja .quien { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--gris); margin-bottom: 6px; }
.burbuja .quien .icono { width: 16px; height: 16px; }
.burbuja.ella { background: #fff; margin-right: 28px; border-bottom-left-radius: 6px; }
.burbuja.ella p { font-size: 17px; font-weight: 700; line-height: 1.35; letter-spacing: -.01em; }
.burbuja.vemos { background: var(--tinta); color: #fff; margin-left: 28px; border-bottom-right-radius: 6px; }
.burbuja.vemos .quien { color: #C7C7CC; }
.burbuja.vemos p { font-size: 14.5px; line-height: 1.5; color: #E5E5EA; }
.burbuja.vemos b { color: var(--rojo-oscuro-fondo); font-weight: 800; }
.burbuja.vemos .clase { background: var(--oscuro-2); color: #fff; }
.burbuja.vemos .clase .icono { color: #C7C7CC; }
.burbuja.vemos .clase .ir { color: #93B4FF; }

/* ---------- Reparto ---------- */
.barra-rep { display: flex; height: 44px; border-radius: 14px; overflow: hidden; margin-bottom: 14px; gap: 3px; }
.barra-rep span { display: flex; align-items: center; font-weight: 800; font-size: 15px; color: #fff; min-width: 0; }
.barra-rep .a { background: var(--rojo); padding: 0 12px; }
.barra-rep .b { background: var(--verde); justify-content: center; }
.rep-filas { display: grid; gap: 8px; font-size: 14px; }
.rep-filas div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.rep-filas b { font-weight: 800; }
.punto { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 8px; }
.punto.p-mal { background: var(--rojo); } .punto.p-bien { background: var(--verde); }
.rep-linea { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linea); color: var(--gris); font-size: 13.5px; font-weight: 600; }
.rep-solo { font-size: 15px; font-weight: 700; }

/* ---------- Fallas ---------- */
.falla + .falla { margin-top: 12px; }
.falla .f-top { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.falla h3 { font-size: 17px; line-height: 1.25; font-weight: 800; letter-spacing: -.02em; }
.f-graf { background: #fff; border-radius: 18px; padding: 14px; }
.f-graf svg { display: block; width: 100%; height: auto; }
.f-graf text { font-family: var(--f); fill: var(--tinta); }
.f-graf .t-etq { font-size: 12.5px; font-weight: 700; }
.f-graf .t-etq.gris { fill: var(--gris); font-weight: 600; }
.f-graf .t-num { font-size: 13.5px; font-weight: 800; }
.f-graf .t-grande { font-size: 34px; font-weight: 800; letter-spacing: -1.5px; }
.f-graf .mal { fill: var(--rojo); } .f-graf .bien { fill: var(--verde); }
.lb { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px; font-size: 12.5px; color: var(--gris); font-weight: 700; margin-top: 10px; }
.evid { font-size: 14.5px; line-height: 1.45; font-weight: 700; margin-top: 12px; }
.sin-graf .evid { margin-top: 0; }
.cita { margin: 10px 0 0; background: #fff; border-radius: 16px; padding: 12px 14px; }
.cita blockquote { margin: 0; font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere; }
.cita figcaption { margin-top: 6px; font-size: 12.5px; font-weight: 700; color: var(--rojo); }
.porque { font-size: 14.5px; line-height: 1.5; margin-top: 14px; }
.porque b, .hacer b { font-weight: 800; }
.hacer { display: flex; gap: 10px; margin-top: 10px; font-size: 14.5px; line-height: 1.5; }
.hacer .icono { width: 18px; height: 18px; margin-top: 2px; color: var(--verde); }
.clase { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 11px 12px; background: #fff; border-radius: 14px; font-size: 13.5px; line-height: 1.35; color: var(--tinta); font-weight: 600; text-decoration: none; min-height: 44px; }
.clase .icono { color: var(--gris); }
.clase .ir { margin-left: auto; color: var(--azul); font-weight: 700; }
.clase:hover .ir { text-decoration: underline; }

/* CTA a mitad */
.w-cta { margin-top: 12px; padding: 22px 20px; }
.w-cta h3 { font-size: 20px; line-height: 1.25; font-weight: 800; letter-spacing: -.02em; text-wrap: balance; }
.w-cta p { color: #D1D1D6; font-size: 15px; line-height: 1.5; margin: 8px 0 16px; }

/* ---------- Anuncios ---------- */
.ads { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ad { text-decoration: none; color: inherit; min-width: 0; }
.ad p { font-size: 12.5px; font-weight: 600; color: var(--gris); margin: 6px 4px 0; line-height: 1.3; }
.ad p b { display: block; color: var(--tinta); font-weight: 700; }
.ad-img { aspect-ratio: 1; border-radius: 20px; background: var(--widget); overflow: hidden; }
.ad-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ad-vacia { display: grid; place-content: center; justify-items: center; gap: 4px; padding: 8px; color: var(--espera); font-size: 11.5px; font-weight: 600; text-align: center; line-height: 1.3; overflow: hidden; }
.ad-vacia .icono { width: 24px; height: 24px; }
.ad-vacia span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
a.ad:hover .ad-img img { opacity: .9; }

/* ---------- Nicho, similares, lo que hace bien ---------- */
.nicho-nombre { font-size: 22px; font-weight: 800; letter-spacing: -.025em; }
.nicho-lectura { color: var(--gris); font-size: 14.5px; line-height: 1.5; margin-top: 6px; }
.recos { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.recos li { display: flex; gap: 10px; align-items: flex-start; background: #fff; border-radius: 16px; padding: 12px; }
.recos .num { background: var(--tinta); }
.recos b { display: block; font-weight: 800; font-size: 15px; }
.recos span:not(.num) { display: block; color: var(--gris); font-size: 13.5px; line-height: 1.45; margin-top: 2px; }
.b-grid--auto { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.texto-sec { color: var(--gris); font-size: 14.5px; line-height: 1.5; margin: 12px 2px 0; }
.bien { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; font-size: 14.5px; line-height: 1.45; }
.bien li { display: flex; gap: 10px; align-items: flex-start; }
.ok-i, .cand-i { flex: none; width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center; }
.ok-i { background: var(--verde-suave); color: var(--verde); }
.cand-i { background: var(--rojo-suave); color: var(--rojo); }
.ok-i .icono, .cand-i .icono { width: 15px; height: 15px; }

/* ---------- Checklist ---------- */
.chk-cab { display: flex; align-items: center; gap: 18px; }
.anillos { width: 116px; height: 116px; flex: none; }
.areas { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 14px; font-weight: 600; }
.areas li { display: flex; align-items: center; gap: 10px; }
.areas b { margin-left: auto; font-weight: 800; padding-left: 8px; }
.anillo-chip { width: var(--t, 14px); height: var(--t, 14px); border-radius: 999px; border: 3.5px solid var(--verde); flex: none; margin-inline: calc((14px - var(--t, 14px)) / 2); }
.anillo-chip.cero { border-color: #C7C7CC; }
.chk-grupos { display: grid; gap: 4px; }
.chk-t { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--gris); margin: 18px 2px 8px; }
.chk { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.chk li { display: flex; align-items: flex-start; gap: 10px; background: #fff; border-radius: 14px; padding: 11px 12px; font-size: 14px; font-weight: 700; line-height: 1.4; }
.chk small { display: block; font-size: 12.5px; font-weight: 500; color: var(--gris); margin-top: 2px; }
.chk small.aprende { color: var(--tinta); font-weight: 600; margin-top: 6px; }
.w-chica { color: var(--gris); font-size: 13.5px; line-height: 1.45; margin-top: 14px; }

/* ---------- Cierre ---------- */
.w-cierre { padding: 26px 22px; margin-top: 36px; }
.w-cierre h2 { font-size: 15px; font-weight: 700; color: #C7C7CC; margin-bottom: 10px; }
.w-cierre .grande { font-size: clamp(23px, 4.4vw, 30px); line-height: 1.2; font-weight: 800; letter-spacing: -.025em; margin-bottom: 12px; color: #fff; text-wrap: balance; }
.w-cierre p { color: #D1D1D6; font-size: 15px; line-height: 1.55; margin-bottom: 14px; }
.w-cierre .frase { color: #fff; font-weight: 700; font-size: 17px; line-height: 1.4; padding: 14px 0; border-top: 1px solid var(--oscuro-2); border-bottom: 1px solid var(--oscuro-2); margin: 18px 0; }
.w-cierre .chico { font-size: 13.5px; color: #C7C7CC; margin: 14px 0 0; }
.letrachica { color: var(--gris); font-size: 12.5px; line-height: 1.5; margin: 16px 4px 0; }

/* ---------- Barra fija de celular ---------- */
.i-cta-fija { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; background: #fff; border-top: 1px solid var(--linea); padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); }
.i-cta-fija-in { max-width: 760px; margin: 0 auto; display: flex; align-items: center; gap: 12px; }
.i-cta-fija .txt { font-size: 13px; line-height: 1.3; color: var(--gris); font-weight: 600; }
.i-cta-fija .txt b { color: var(--rojo); font-weight: 800; }
.i-cta-fija .b-btn { margin-left: auto; white-space: nowrap; }
@media (min-width: 760px) { .i-cta-fija { display: none !important; } }
@media (max-width: 759px) { .vista-informe { padding-bottom: 104px; } }
@media (max-width: 370px) { .i-cta-fija .b-btn { padding-inline: 14px; font-size: 14px; } }

/* ---------- Tableta en adelante: cada falla en dos columnas (gráfico | qué hacer) ---------- */
@media (min-width: 760px) {
  .f-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
  .f-cuerpo.sin-graf { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .f-der .porque { margin-top: 0; }
  .falla { padding: 22px; }
}

/* ---------- Pantalla grande ---------- */
@media (min-width: 1024px) {
  .vista-informe { max-width: 1120px; }
  .i-portada .b-titular, .i-portada .b-bajada, .i-portada .b-meta { max-width: 760px; }
  .i-portada-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 16px; align-items: start; }
  .i-portada-lado .b-grid { grid-template-columns: 1fr; }
  .i-portada-lado .w-anillo { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 16px; }
  .i-portada-lado .w-anillo .w-cab { width: 100%; }
  .i-sec, .w-cierre, .letrachica { max-width: 760px; margin-inline: auto; }
  .i-sec#i-fallas { max-width: none; }
  .w-cta { display: grid; grid-template-columns: 1fr auto; gap: 6px 24px; align-items: center; }
  .w-cta p { margin: 0; grid-column: 1; }
  .w-cta .b-btn { grid-column: 2; grid-row: 1 / span 2; width: auto; }
  .chk-grupos { grid-template-columns: 1fr 1fr; gap: 0 16px; }
}