:root { --fondo:#f6f8f7; --tarjeta:#fff; --texto:#17211f; --suave:#5b6b67; --marca:#0f5c55; --linea:#d5dedb; --error:#a4262c; --aviso:#8a5a00; --ok:#1b6e3a; }
@media (prefers-color-scheme: dark) {
  :root { --fondo:#111716; --tarjeta:#1a2321; --texto:#e8efed; --suave:#9fb0ab; --marca:#5fc4b8; --linea:#2f3d3a; --error:#ff8b8f; --aviso:#f0b84a; --ok:#6fd08c; }
}
* { box-sizing: border-box; }
body { margin:0; padding:0 16px 48px; background:var(--fondo); color:var(--texto); font:16px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif; max-width:720px; margin-inline:auto; }
header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 0 4px; }
h1 { font-size:1.25rem; margin:0; }
h2 { font-size:1.05rem; margin:0 0 10px; }
section { background:var(--tarjeta); border:1px solid var(--linea); border-radius:10px; padding:16px; margin:14px 0; }
label { display:block; font-weight:600; margin:10px 0; }
input, textarea, select { display:block; width:100%; margin-top:4px; padding:9px 10px; font:inherit; color:inherit; background:var(--fondo); border:1px solid var(--linea); border-radius:8px; }
textarea { resize:vertical; }
.fila { display:flex; gap:8px; margin:6px 0; }
.fila input { margin-top:0; }
fieldset { border:1px solid var(--linea); border-radius:8px; margin:12px 0; }
details { margin:10px 0; }
summary { cursor:pointer; font-weight:600; }
label.casilla { display:flex; gap:8px; align-items:center; font-weight:400; }
label.casilla input { width:auto; margin:0; }
button { font:inherit; font-weight:600; padding:10px 16px; border:0; border-radius:8px; background:var(--marca); color:#fff; cursor:pointer; }
@media (prefers-color-scheme: dark) { button { color:#06201c; } }
button.secundario { background:transparent; color:var(--marca); border:1px solid var(--marca); }
button:disabled { opacity:.5; cursor:default; }
.pastilla { font-size:.8rem; padding:2px 10px; border-radius:99px; border:1px solid var(--linea); color:var(--suave); white-space:nowrap; }
.pastilla.en-linea { color:var(--ok); border-color:var(--ok); }
.pastilla.sin-red { color:var(--aviso); border-color:var(--aviso); }
.ayuda { color:var(--suave); font-size:.88rem; margin:8px 0; }
.aviso { color:var(--aviso); font-size:.88rem; margin:6px 0 0; }
.error { color:var(--error); font-weight:600; }
.acciones { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:8px; }
.lista { list-style:none; margin:0; padding:0; }
.lista li { border-top:1px solid var(--linea); padding:10px 0; }
.lista li:first-child { border-top:0; }
.lista .meta { color:var(--suave); font-size:.85rem; }
.lista .rechazo { color:var(--error); font-size:.9rem; margin-top:4px; }
.banner { border:1px solid var(--aviso); color:var(--aviso); border-radius:8px; padding:10px 12px; margin:14px 0; font-weight:600; }
[hidden] { display:none !important; }

h3 { font-size:.95rem; margin:14px 0 6px; }
.transcrito { white-space:pre-wrap; background:var(--fondo); border:1px solid var(--linea); border-radius:8px; padding:10px; font:inherit; font-size:.9rem; max-height:14rem; overflow:auto; }
.lista .acciones { margin:6px 0 0; }
.lista button { padding:6px 12px; font-size:.88rem; }
#btn-grabar.grabando { background:var(--error); }
dialog { width:min(680px,calc(100% - 32px)); max-height:85vh; overflow:auto; background:var(--tarjeta); color:var(--texto); border:1px solid var(--linea); border-radius:12px; padding:16px; }
dialog::backdrop { background:rgba(0,0,0,.5); }
.estado-cumple { color:var(--ok); } .estado-no_cumple { color:var(--error); } .estado-alerta, .estado-parcial, .estado-no_verificable { color:var(--aviso); }
.grupo h3 { display:flex; gap:8px; align-items:baseline; }
.hallazgo { border-top:1px solid var(--linea); padding:8px 0; }
.hallazgo .meta { color:var(--suave); font-size:.82rem; }
.marca { font-weight:700; }
.errores { color:var(--error); font-weight:600; margin:10px 0; padding-left:20px; }
details > form { margin-top:8px; }
.dimension { border:1px solid var(--linea); border-radius:8px; margin:10px 0; padding:8px 12px 12px; }
.dimension legend { font-weight:700; padding:0 6px; }
