/* subidor.css — el bloque de elegir una imagen. */

.subidor{display:flex; flex-direction:column; gap:.5rem}
.subidor .ayuda{margin:0}
.subidor .fila{display:flex; gap:.6rem; align-items:center; flex-wrap:wrap}
.subidor .estado{font-size:.83rem; color:var(--muted)}
.subidor .previa{
  width:7rem; height:7rem; object-fit:cover; border-radius:12px;
  border:1px solid var(--line); background:var(--brand-suave);
}

/* El <input type="file"> de verdad. No se usa `display:none` ni
   `visibility:hidden`: eso lo saca del árbol de accesibilidad y del orden de
   tabulación, y entonces el control deja de existir para quien navega con
   teclado o con lector de pantalla. Así sigue estando, solo que no se ve. */
.oculto-real{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}
.oculto-real:focus-visible + .fila .btn,
.oculto-real:focus + .fila .btn{outline:2px solid var(--brand); outline-offset:2px}