/* V2: «Arreglar» interactivo — tarjetas con mini‑dibujo (celular y PC) */
.arr-problema { margin-bottom: var(--e-3); }
.arr-eti { margin: 0 0 var(--e-2); color: var(--texto-2); font-size: var(--t-sm); }
.arr-lista { display: grid; gap: var(--e-2); }
.arr-op { display: flex; gap: var(--e-3); align-items: center; width: 100%; min-height: 88px; padding: var(--e-2) var(--e-3); text-align: left; font: inherit; color: var(--texto); cursor: pointer;
  border: 1px solid var(--borde); background: var(--superficie); transition: transform 150ms ease-out, border-color 150ms ease-out, background 150ms ease-out; -webkit-tap-highlight-color: transparent; }
.arr-op:hover { border-color: var(--primario); }
.arr-op:active { transform: scale(.98); background: var(--primario-suave); }
.arr-op:focus-visible { outline: 3px solid var(--enfoque); outline-offset: 2px; }
.arr-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.arr-txt b { font-size: var(--t-md); line-height: 1.25; }
.arr-det { color: var(--texto-2); font-size: var(--t-sm); line-height: 1.35; }
.arr-txt .chip { align-self: flex-start; margin-top: 2px; }
.chip.arr-ok { background: var(--exito-suave); color: var(--exito); }
.chip.arr-medio { background: var(--aviso-suave); color: var(--aviso); }
.mini { flex: none; width: 112px; height: 66px; border-radius: 8px; background: var(--lienzo); border: 1px solid var(--borde); }
.mini-barra { stroke: var(--estructura); stroke-width: 2.4; stroke-linecap: round; }
.mini-quita { stroke: var(--peligro); stroke-width: 2.4; stroke-dasharray: 4 3; stroke-linecap: round; }
.mini-ap { fill: color-mix(in srgb, var(--apoyo) 25%, transparent); stroke: var(--apoyo); stroke-width: 1.4; stroke-linejoin: round; }
.mini-rot { fill: var(--lienzo); stroke: var(--estructura); stroke-width: 1.4; }
.mini-nudo { fill: var(--lienzo); stroke-width: 2; }
.mini-carga { fill: none; stroke: var(--carga); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mini .mini-res { stroke: var(--seleccion); }
.mini .mini-barra.mini-res { stroke-width: 3.4; }
.mini .mini-ap.mini-res { fill: color-mix(in srgb, var(--seleccion) 30%, transparent); }
.arr-mano { margin-top: var(--e-3); }
.arr-mano > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--primario); font-weight: var(--peso-medio); }
.arr-guia { margin: var(--e-2) 0 var(--e-3); padding-left: 1.3em; line-height: 1.5; }
.arr-guia li { margin-bottom: 4px; }
.mv-banner { display: flex; align-items: center; gap: var(--e-2); }
.mv-banner .aviso-texto { flex: 1; min-width: 0; }
.mv-banner-acc { flex: none; min-height: 36px; display: inline-flex; align-items: center; padding: 0 var(--e-3); border-radius: var(--r-full); background: var(--primario); color: var(--sobre-primario); font-weight: var(--peso-fuerte); font-size: var(--t-sm); }
@media (prefers-reduced-motion: reduce) { .arr-op { transition: none; } }
.arr-hecho { display: flex; align-items: center; gap: var(--e-2); margin-bottom: var(--e-3); }
.arr-hecho .aviso-texto { flex: 1; color: var(--texto); }
.arr-hecho .btn { flex: none; min-height: 44px; }
.pasos-adv { margin: var(--e-3) 0; padding: var(--e-3); border-radius: var(--r-md); background: var(--primario-suave); border: 1px solid color-mix(in srgb, var(--primario) 25%, transparent); }
.pasos-adv p { margin: 0 0 var(--e-2); }
.pasos-adv-op { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.pasos-adv-op .btn { min-height: 44px; }
.pasos-hecho { margin-bottom: var(--e-3); }