/* formulario.css — campos, ayudas y errores. Lo usan el alta de perfil y los
   filtros de descubrir, que son el mismo tipo de controles. */

.campo{margin-bottom:1.15rem}
.campo > label{display:block; font-weight:600; font-size:.92rem; margin-bottom:.35rem}
/* `.ayuda` es un componente aparte: la usan el formulario, el bloque de
   verificación y los subidores. Ver componentes/ayuda/. */

input[type=text], input[type=number], select, textarea{
  width:100%; font:inherit; color:var(--ink); background:var(--card);
  border:1px solid var(--line); border-radius:10px; padding:.55rem .7rem;
}
textarea{resize:vertical; min-height:5.5rem}
input[type=range]{width:100%; accent-color:var(--brand)}

.campo-acciones{display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1.5rem}

.dos{display:grid; gap:1rem; grid-template-columns:1fr 1fr}
@media (max-width:34rem){ .dos{grid-template-columns:1fr} }

/* Rojo propio, no el `--brand`: un error tiene que distinguirse de la marca.
   En oscuro se aclara, porque el rojo puro sobre fondo negro no se lee. */
.error{color:#c0392b; font-size:.88rem; margin:.3rem 0 0}
@media (prefers-color-scheme:dark){ .error{color:#ff9a8f} }