/* campo-texto.css — etiqueta siempre visible arriba; el error aparece al salir del campo. */
.campo { display: grid; gap: var(--esp-2); }
.campo__etiqueta { font-size: var(--txt-sm); font-weight: 600; color: var(--kv-tinta); }
.campo__grupo {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--kv-perla);
  border-radius: var(--radio-sm);
  background: var(--kv-nube);
  transition: border-color var(--mov-rapido) var(--curva), box-shadow var(--mov-rapido) var(--curva);
}
.campo__grupo:focus-within { border-color: var(--kv-lavanda); box-shadow: 0 0 0 3px var(--kv-lavanda-bruma); }
/* La lada +52 es un prefijo fijo, no editable */
.campo__prefijo {
  display: flex;
  align-items: center;
  padding-inline: var(--esp-3);
  border-right: 1px solid var(--kv-perla);
  border-radius: var(--radio-sm) 0 0 var(--radio-sm);
  background: var(--kv-bruma);
  color: var(--kv-tinta-suave);
  font-variant-numeric: tabular-nums;
  font-size: var(--txt-sm);
  font-weight: 500;
}
.campo__input {
  flex: 1;
  min-width: 0;
  min-height: 52px;
  padding: var(--esp-3) var(--esp-4);
  border: 0;
  border-radius: var(--radio-sm);
  background: transparent;
  font-size: var(--txt-base);
}
/* El anillo lo pinta .campo__grupo:focus-within; el input no duplica el foco */
.campo__input:focus-visible { outline: none; box-shadow: none; }
.campo--error .campo__grupo { border-color: var(--kv-error); }
.campo--error .campo__grupo:focus-within { box-shadow: 0 0 0 3px var(--kv-ambar-bruma); }
.campo__error {
  display: flex;
  align-items: center;
  gap: var(--esp-1);
  font-size: var(--txt-sm);
  color: var(--kv-error);
}
.campo__error:empty { display: none; }
.campo__error svg { width: 16px; height: 16px; flex: none; }

.campo__casilla {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--esp-3);
  align-items: start;
  padding-block: var(--esp-2);
  font-size: var(--txt-sm);
  color: var(--kv-tinta-suave);
  cursor: pointer;
}
.campo__casilla-input {
  width: 22px;
  height: 22px;
  margin: 2px 0 0;
  accent-color: var(--kv-lavanda-profunda);
}
.campo__casilla-input:focus-visible { border-radius: var(--radio-sm); }
.campo__casilla-enlace { font-weight: 600; }