/* ==========================================================================
   CEPC · Sitio público
   formularios.css — Campos, mensajes y botones de formulario (Roomies:
   contactar, reportar y publicar).
   ========================================================================== */

.formulario {
  display: grid;
  gap: 14px;
}

.campo {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.campo > span:first-child {
  color: var(--texto);
  font-size: 14px;
  font-weight: 600;
}

.campo__ayuda {
  color: var(--texto-2);
  font-size: 13px;
  font-weight: 400;
}

.campo input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']),
.campo select,
.campo textarea {
  width: 100%;
  min-height: 46px;
  padding: 11px 14px;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-chica);
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
  font-size: 16px; /* 16px: iOS no hace zoom al enfocar */
  transition: border-color 0.2s var(--ease-suave), box-shadow 0.2s var(--ease-suave);
}

.campo textarea {
  min-height: 110px;
  line-height: 1.45;
  resize: vertical;
}

.campo select {
  padding-right: 36px;
  background: var(--superficie) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%2386868b'%3E%3Cpath d='M213.66 101.66l-80 80a8 8 0 01-11.32 0l-80-80a8 8 0 0111.32-11.32L128 164.69l74.34-74.35a8 8 0 0111.32 11.32z'/%3E%3C/svg%3E") no-repeat right 12px center / 16px;
  appearance: none;
}

.campo input::placeholder,
.campo textarea::placeholder {
  color: var(--texto-3);
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--azul);
  box-shadow: 0 0 0 4px var(--azul-tenue);
}

.campo small {
  color: #d1242f;
  font-size: 13px;
}

:root[data-tema='oscuro'] .campo small {
  color: #ff8582;
}

.campo--error input,
.campo--error select,
.campo--error textarea {
  border-color: #d1242f !important;
}

.campo-con-prefijo {
  display: flex;
  align-items: stretch;
}

.campo-con-prefijo > span {
  display: grid;
  place-items: center;
  padding: 0 12px;
  border: 1px solid var(--linea-fuerte);
  border-right: 0;
  border-radius: var(--r-chica) 0 0 var(--r-chica);
  background: var(--fondo-2);
  color: var(--texto-2);
  font-size: 15px;
}

.campo-con-prefijo input {
  border-radius: 0 var(--r-chica) var(--r-chica) 0 !important;
}

.formulario__error {
  padding: 12px 14px;
  border-radius: var(--r-chica);
  background: rgba(209, 36, 47, 0.1);
  color: #b4232c;
  font-size: 14px;
}

:root[data-tema='oscuro'] .formulario__error {
  color: #ff8582;
}

.formulario__ok {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  border-radius: var(--r-chica);
  background: rgba(48, 164, 108, 0.12);
  color: #1d7a4e;
  font-size: 14px;
}

:root[data-tema='oscuro'] .formulario__ok {
  color: #6fd3a2;
}

.formulario__ok .icono {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.formulario__nota {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 14px;
  border-radius: var(--r-chica);
  background: var(--lila-suave);
  color: var(--lila-texto);
  font-size: 13px;
  line-height: 1.4;
}

.formulario__nota .icono {
  flex-shrink: 0;
  margin-top: 1px;
}

.formulario__privacidad {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: var(--texto-3);
  font-size: 12px;
  line-height: 1.4;
}

.formulario__privacidad .icono {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin-top: 1px;
}

.boton--ancho {
  width: 100%;
  justify-content: center;
}

.boton .icono {
  width: 18px;
  height: 18px;
}

.boton[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

.boton-texto {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--r-pildora);
  background: transparent;
  color: var(--texto);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s var(--ease-suave);
}

.boton-texto:hover {
  background: var(--fondo-2);
}

.boton-texto .icono {
  width: 18px;
  height: 18px;
}