html.auditoria{
/* ------------------------
   AUDIT: imagens
   - alt ausente / vazio
   - width ou height ausente / vazio (atributos)
   ------------------------ */

/* alt ausente ou vazio */
img:not([alt]),
img[alt=""] {
  outline: 3px solid rgba(220,20,60,0.95);
  box-shadow: 0 0 0 3px rgba(220,20,60,0.15);
  position: relative;
}

/* width ou height ausente (qualquer um dos dois) OR atributo vazio */
img:is(:not([width]), :not([height]), [width=""], [height=""]) {
  outline: 3px dashed rgba(255,69,0,0.95);
  box-shadow: 0 0 0 3px rgba(255,69,0,0.12);
}

/* prioridade visual se faltar alt + size */
img:not([alt]):is(:not([width]), :not([height])) {
  outline-style: double;
}

/* ------------------------
   AUDIT: botões sem label acessível
   - button sem aria-label ou aria-labelledby
   - input[type=button/submit/image] sem aria-label/aria-labelledby
   - elementos com role="button" sem label
   ------------------------ */

/* botão HTML sem aria-label e sem aria-labelledby */
button:not([aria-label]):not([aria-labelledby]),
button[aria-label=""] {
  outline: 3px solid rgba(220,20,60,0.95);
  box-shadow: 0 0 0 3px rgba(220,20,60,0.12);
}

/* input button/submit/image sem label acessível */
input[type="button"]:not([aria-label]):not([aria-labelledby]),
input[type="submit"]:not([aria-label]):not([aria-labelledby]),
input[type="image"]:not([aria-label]):not([aria-labelledby]) {
  outline: 3px solid rgba(220,20,60,0.95);
}

/* elementos com role="button" sem label */
[role="button"]:not([aria-label]):not([aria-labelledby]) {
  outline: 3px dashed rgba(255,69,0,0.95);
}

/* badge para botões problemáticos */
button:not([aria-label]):not([aria-labelledby])::after,
[role="button"]:not([aria-label]):not([aria-labelledby])::after {
  content: "⚠ button sem rótulo acessível";
  position: absolute;
  background: rgba(220,20,60,0.95);
  color: white;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 3px;
  transform: translateY(-120%);
  pointer-events: none;
  z-index: 9999;
}

/* ------------------------
   AUDIT: links sem title
   - a sem title ou title vazio
   ------------------------ */

a:not([title]),
a[title=""] {
  outline: 3px solid rgba(255,69,0,0.95);
  box-shadow: 0 0 0 3px rgba(255,69,0,0.12);
}

/* badge para links sem title */
a:not([title])::after,
a[title=""]::after {
  content: "⚠ link sem title";
  position: absolute;
  background: rgba(255,69,0,0.95);
  color: white;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 3px;
  transform: translateY(-110%);
  pointer-events: none;
  z-index: 9999;
}

/* ------------------------
   Pequenos estilos utilitários para não mexer no layout
   ------------------------ */

img, button, a, [role="button"], input[type="button"], input[type="submit"], input[type="image"] {
  position: relative !important;
  z-index: 1;
}

/* Remova/ative rapidamente com a classe body.dev-a11y-off */
body.dev-a11y-off img,
body.dev-a11y-off button,
body.dev-a11y-off a {
  outline: none !important;
  box-shadow: none !important;
}

}