/* n2n-custodia - componentes compartidos */

/* --- Campos --- */
.campo { display: grid; gap: var(--esp-xs); }

.campo > label {
  font-family: var(--fuente-titulo);
  font-size: var(--txt-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-secundario);
}

.campo input, .campo select, .campo textarea {
  font: inherit;
  color: var(--texto);
  background: var(--superficie);
  border: var(--linea);
  border-radius: var(--radio);
  padding: 10px 12px;
  width: 100%;
  min-height: 44px;
}

.campo input:focus { border-color: var(--marca); }
.campo[data-error] input { border-color: var(--error); }

.campo .ayuda { font-size: var(--txt-sm); color: var(--texto-secundario); }
.campo .error { font-size: var(--txt-sm); color: var(--error); }

/* --- Botones --- */
.btn {
  font-family: var(--fuente-titulo);
  font-size: var(--txt-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
  border-radius: var(--radio);
  padding: 11px 20px;
  min-height: 44px;
  cursor: pointer;
  background: var(--marca);
  color: var(--superficie);
  transition: background 140ms cubic-bezier(0.22, 1, 0.36, 1);
}

.btn:hover { background: var(--marca-fuerte); }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }

.btn--secundario {
  background: transparent;
  color: var(--marca);
  border-color: var(--borde);
}
.btn--secundario:hover { background: var(--marca-suave); }

.btn--texto {
  background: transparent;
  color: var(--marca);
  padding: 6px 4px;
  min-height: auto;
}
.btn--texto:hover { background: transparent; text-decoration: underline; }

/* --- Aviso: sin borde lateral de color, tinte de fondo --- */
.aviso {
  font-size: var(--txt-sm);
  padding: 10px 14px;
  border-radius: var(--radio);
  border: var(--linea);
  background: var(--superficie-alt);
}
.aviso[data-tipo="error"] { color: var(--error); border-color: var(--error); }
.aviso[data-tipo="ok"] { color: var(--ok); border-color: var(--ok); }
.aviso[data-tipo="alerta"] { color: var(--alerta); border-color: var(--alerta); }

/* --- Estados de pantalla: cargando, error, vacio, con datos --- */
.estado {
  display: grid;
  gap: var(--esp-sm);
  padding: var(--esp-xl) var(--esp-md);
  text-align: center;
  color: var(--texto-secundario);
}
.estado h2 { color: var(--texto); }

.cargando {
  height: 2px;
  background: var(--marca-suave);
  overflow: hidden;
  position: relative;
}
.cargando::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 30%;
  background: var(--marca);
  animation: avance 1s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes avance {
  from { transform: translateX(-100%); }
  to { transform: translateX(400%); }
}