/* Muestra rápida de confianza lúcida (/org/prevencion/confianza-en-tu-comunidad/, muestra.py y muestra.js).
   Colores y tipos de base.css: crema, petróleo, amarillo solo en el botón de acción, carbón en el texto; la manuscrita
   solo en el número de la pregunta y en las cifras del resultado (skill marca, §2-3). */
.muestra-caja [hidden]{display:none!important}
.muestra-aviso{color:var(--color-texto-secundario)}
.muestra-peligro{border-left:4px solid var(--color-peligro);background:var(--color-peligro-fondo);padding:.8rem 1rem;border-radius:4px 12px 12px 4px}
.muestra-peligro a{color:var(--color-peligro);font-weight:600}

.muestra-caja{max-width:var(--ancho-lectura);margin:2rem 0}
.muestra{background:var(--color-superficie);border:1px solid var(--color-linea);border-radius:var(--radio-superficie);padding:1.5rem}
.muestra-barra{height:6px;background:var(--color-franja);border-radius:3px;overflow:hidden;margin-bottom:1.4rem}
.muestra:not(.con-js) .muestra-barra,.muestra:not(.con-js) .muestra-nav{display:none}
.muestra-barra span{display:block;height:100%;width:0;background:var(--color-petroleo);transition:width .4s ease}

.muestra-pregunta{border:0;margin:0 0 1.6rem;padding:0}
.muestra-pregunta:focus{outline:none}
.muestra-pregunta:focus-visible{outline:3px solid var(--color-foco);outline-offset:6px;border-radius:8px}
.muestra.con-js .muestra-pregunta{margin-bottom:.4rem}
.muestra-pregunta legend{padding:0;margin-bottom:1rem}
.muestra-numero{display:block;font-family:var(--tipo-titulos);font-size:1.25rem;color:var(--color-petroleo);margin-bottom:.3rem}
.muestra-situacion{display:block;font-size:1.3rem;line-height:1.35;font-weight:600;color:var(--color-texto)}

.muestra-opciones{display:flex;flex-direction:column;gap:.6rem}
.muestra-opcion{display:flex;align-items:flex-start;gap:.75rem;min-height:44px;padding:.8rem 1rem;background:var(--color-fondo);border:1px solid var(--color-borde-control);border-radius:14px 18px 15px 17px;cursor:pointer;line-height:1.45;transition:border-color .2s,background .2s}
.muestra-opcion:hover{border-color:var(--color-petroleo);background:var(--color-area-fondo)}
.muestra-opcion input{flex:none;width:1.25rem;height:1.25rem;margin:.1rem 0 0;accent-color:var(--color-petroleo)}
.muestra-opcion:has(input:checked){border:2px solid var(--color-petroleo);background:var(--color-area-fondo);padding:calc(.8rem - 1px) calc(1rem - 1px)}
.muestra-opcion:has(input:focus-visible){outline:3px solid var(--color-foco);outline-offset:2px}

.muestra-nav{display:flex;justify-content:space-between;gap:.75rem;flex-wrap:wrap;margin-top:1.2rem}
.muestra-nav [type=submit]{margin-left:auto}
:root body .muestra-caja .boton.secundario{background:#fffaf0;border:1px solid #7b7566;box-shadow:none;color:var(--color-texto);cursor:pointer;font:inherit;font-weight:600}
:root body .muestra-caja .boton.secundario::after{display:none}
:root body .muestra-caja button.boton{cursor:pointer;font-family:var(--tipo-lectura);font-size:1rem}
.muestra-sin-js{background:var(--color-franja);padding:.8rem 1rem;border-radius:12px}

.muestra-resultado{background:var(--color-superficie);border:1px solid var(--color-linea);border-radius:var(--radio-superficie);padding:1.5rem}
.muestra-resultado:focus{outline:none}
.muestra-resultado h2{margin-top:0}
.muestra-formas{list-style:none;padding:0;margin:1rem 0 1.4rem;display:flex;flex-direction:column;gap:.7rem}
.muestra-formas li{display:grid;grid-template-columns:3rem 1fr;column-gap:.6rem;align-items:baseline}
.muestra-formas li strong{grid-column:2}
.muestra-formas li{line-height:1.45}
.muestra-cifra{grid-row:span 2;font-family:var(--tipo-titulos);font-size:2.4rem;line-height:1;color:var(--color-petroleo);text-align:center}
.muestra-formas li[data-forma=C] .muestra-cifra{color:#8e392e}
.muestra-formas li[data-forma=D] .muestra-cifra{color:#5b564a}
.muestra-lectura{font-size:1.12rem;border-left:4px solid var(--color-accion);padding-left:1rem}
.muestra-acciones li{margin-bottom:.5rem}
.muestra-herramientas{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.4rem}

@media (max-width:600px){
  .muestra,.muestra-resultado{padding:1.1rem}
  .muestra-situacion{font-size:1.15rem}
}
@media (prefers-reduced-motion:reduce){
  .muestra-barra span,.muestra-opcion{transition:none}
}
@media print{
  .org-cab,.org-espacios,.org-espejo,.org-pie,.org-saltar,.muestra,.muestra-herramientas,.muestra-aviso,.org-botones{display:none!important}
  .muestra-resultado{border:0;padding:0}
}